i have a page containing a form, there's a javascript listener on input type select , the event is onchange, depending on the option chosen from the select the page will display a block of inputs (div), i am using hide and show to display or hide a block of html elements, one of those divs (div 2) has an input type select also with onchange event with ajax call . my first problem is that after hitting validate button of the form browser brings the default div i want that he stay at the last previous div , second problem is that div 2 after refresh the ajax call does not bring any data , its logical since the event is on change. so want if div 2 has been displayed , the ajax call works after refresh .
this my html code
<form id="boxpanel" class="form-panel" method='POST' enctype='multipart/form-data' action='<?php echo URL.htmlspecialchars('ads');?>'>
<div>
<label for='catego'><b>categories: </b><span>(*)</span></label>
<span><select name="catego" id="catego">
<option value='0'>select a category </option>
<?php
foreach($this->categories as $key => $value) { ?>
<option value=<?php echo $value['id'];?> <?php if (isset($_POST['catego']) && $_POST['catego'] == $value['id']){ echo 'selected';}else{ echo '';}?>> <?php echo $value['categorie'] ;?></option>
<?php
}
?>
</select><br /></span>
</div>
<div id="div12" class="hide">
<br />
<div>
<label for='mark'><b>cars:</b> <span>(*)</span></label>
<select name='cars' id='cars' onchange="showHint(this.value)">
<option value=0>s1</option>
<option value=2>s2</option>
<option value=3>s3</option>
</select>
</div>
<br />
<div>
<label for='categos'><b>Models:</b></label>
<select id="txtHintts" name="model" class="form-control">
</select>
</div>
<br />
</div>
<div id="div13" class="hide">
<br />
<div>
<label for='wheels'><b>wheels:</b> <span>(*)</span></label>
<select name='wheels' id='wheels'>
<option value=0>c</option>
<option value=2>v</option>
<option value=3>v</option>
</select>
</div>
<br />
<div>
<label for='wheels'><b>colors:</b> <span>(*)</span></label>
<select name='colors' id='colors'>
<option value=0>a</option>
<option value=2>d</option>
<option value=3>c</option>
</select>
</div>
<br />
</div>
</div>
this is how i make hide and show works
<script>
function catego() {
if ($('#catego').val() == 1 ) {
$('#div12').removeClass('hide');
$('#div13').addClass('hide');
}
if ($('#catego').val() == 2) {
$('#div12').addClass('hide');
$('#div13').removeClass('hide');
}
}
$('#catego').on('change', catego);
$( document ).ready(function() {
catego();
});
</script>
this is my ajax call
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHintts").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHintts").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "/gethint?q=" + str, true);
xmlhttp.send();
}
}
</script>
Remove the inline calling of
<select name='cars' id='cars' onchange="showHint(this.value)">
Call this method in the js after the show/hide is done. Also, keep all the js events inside document.ready.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.