I think I am trying something very easy but it does not work on Chrome but on Firefox.
Depending on the value of my combo box order-type I want to show the field nameField. Therefore, I have a JavaScript file, which has a Listener on changes. When I change now a value in the combo box in Firefox the nameField appears and I get a console message. In Chrome I don’t get anything at all.
My PHP file looks like this:
<select name="order-type" id="order-type">
<option selected="selected">Choose one</option>
<?php
$products = array("Value1", "Value2", "Value");
foreach($products as $item){
?>
<option value="<?php echo strtolower($item); ?>"><?php echo $item; ?></option>
<?php
}
?>
</select>
</p>
<div id="nameField" style="display: none;">
<label for="userName">User name *</label>
<input id="userName" name="userName" type="text" class="required" autocomplete="username">
</div>
…
<script src="js/script.js" defer></script>
Script.js:
var form = $("#my-form");
form.validate({
errorPlacement: function errorPlacement(error, element) { element.before(error); },
rules: {
confirm: {
equalTo: "#password"
}
}
});
form.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex)
{
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
},
onFinishing: function (event, currentIndex)
{
form.validate().settings.ignore = ":disabled";
return form.valid();
},
onFinished: function (event, currentIndex)
{
form.submit();
}
});
var comField = document.getElementById("order-type");
comField.addEventListener("change", function(){
console.log("Combox Box");
console.log(comField.value);
if(comField.value.toLowerCase() == ("Value1").toLowerCase()){
console.log("Value1");
document.getElementById("nameField").style.display = "block";
} else {
console.log("other");
document.getElementById("nameField").style.display = "none";
}
});
Any ideas?
Thanks
Stephan