У меня есть форма с двумя полями выбора, я хочу, чтобы в режиме реального времени изменить поля, не нажимая кнопку отправки.
Это код, который я использую:
<script>
$( document ).ready(function() {
$('#provincie').live('change', function(event){
if($(this).val() == '#provincie'){
$("#result_div").empty()
}else{
var values = $(this).closest('form').serialize();
$.ajax({
url: "toevoegen.php",
data: values,
success: function(data){
$("#result_div").empty().append(data);
},
error:function(){
$("#result_div").empty().append('something went wrong');
}
});
}
});
});
</script><?php
$select =
"SELECT
provincie
FROM
plaatsen
GROUP BY
provincie
";
$exec = mysql_query($select) or die ('Ojee, foutieve query!: '.mysql_error());
echo '<form id="provincies" method="post">';
echo "<select id='provincie' name = 'provincie' onchange=\"this.form.submit()\">";
echo "<option value=''>Kies provincie</option>";
while ($provincie = mysql_fetch_assoc($exec)) {
echo '<option value="'.$provincie['provincie'].'">'.$provincie['provincie'].'</option>';
}
echo "</select>";
$provincies = $_POST['provincie'];
?>
</select>
<div id="result_div">
Gekozen provincie: <?php echo $provincies; ?><br />
</div><?php
if(isset($_POST['provincie'])){
$plaats_query =
"SELECT
*
FROM
plaatsen
WHERE
provincie = '".$_POST['provincie']."'
GROUP BY
plaats
ORDER BY
plaats ASC
";
$plaats_result = mysql_query($plaats_query) or die ("FOUT: " . mysql_error());
echo "<select id='plaatsnaam' name = 'plaatsnaam'>";
echo "<option value=''>Kies plaatsnaam</option>";
while($plaats = mysql_fetch_assoc($plaats_result))
{
echo "<option value='" . $plaats['stadid'] . "'>" . $plaats['plaats'] . "</option>";
}
echo "</select>";
}
$plaatsje_query =
"SELECT
*
FROM
plaatsen
WHERE
stadid = '".$_POST['plaatsnaam']."'
GROUP BY
plaats
ORDER BY
plaats ASC
";
$plaatsje_result = mysql_query($plaatsje_query) or die ("FOUT: " . mysql_error());
while($plaatsje = mysql_fetch_assoc($plaatsje_result))
$woonplaats = $plaatsje['plaats'];
$regiotje = $plaatsje['regio'];
$plaatsjes_query =
"SELECT
*
FROM
plaatsen
WHERE
stadid = '".$_POST['plaatsnaam']."'
GROUP BY
regio
ORDER BY
regio ASC
";
$plaatsjes_result = mysql_query($plaatsjes_query) or die ("FOUT: " . mysql_error());
while($plaatsjes = mysql_fetch_assoc($plaatsjes_result))
$regiotje = $plaatsjes['regio'];
?>
<br />
<label for="categorie">Categorie selecteren *</label>
<select id="categorie" name="categorie">
<option value="">Selecteer de categorie</option>
<?php
while ($categorie = mysql_fetch_assoc($catexec)) {
echo '<option value="'.$categorie['catid'].'">'.$categorie['catname'].'</option>';
}
?>
</select>
<script type="text/javascript">
var categorie = new LiveValidation('categorie');
categorie.add( Validate.Presence );
</script>
<br class="clear" />
<fieldset>
<label for="bedrijf">Naam bedrijf *</label>
<input id="bedrijf" name="bedrijf" class="text" />
<script type="text/javascript">
var bedrijf = new LiveValidation('bedrijf');
bedrijf.add(Validate.Presence);
</script>
<br class="clear" />
<label for="contactpersoon">Contactpersoon</label>
<input id="contactpersoon" name="contactpersoon" class="text" />
<br class="clear" />
<label for="email">E-mailadres</label>
<input id="email" name="email" class="text" />
<script type="text/javascript">
var email = new LiveValidation('email');
email.add(Validate.Email );
</script>
<br class="clear" />
<label for="website">Website</label>
<input id="website" name="website" class="text" />
<br class="clear" />
<label for="telefoon">Telefoonnummer *</label>
<input id="telefoon" name="telefoon" class="text" />
<script type="text/javascript">
var telefoon = new LiveValidation('telefoon');
telefoon.add( Validate.Presence );
</script>
<br class="clear" />
<label for="fax">Fax</label>
<input id="fax" name="fax" class="text" />
<br class="clear" />
<label for="straat">Straat *</label>
<input id="straat" name="straat" class="text" />
<script type="text/javascript">
var straat = new LiveValidation('straat');
straat.add( Validate.Presence );
</script>
<br class="clear" />
<label for="postcode">Postcode *</label>
<input id="postcode" name="postcode" class="text" />
<script type="text/javascript">
var postcode = new LiveValidation('postcode');
postcode.add( Validate.Presence );
</script>
<br class="clear" />
<input type="hidden" name="transno" id="transno" value="<?php echo $n; ?>" />
<br class="clear" />
<label for="kvk"><abbr title="Kamer van Koophandel Nummer" lang="NL">KvK</abbr> nummer *</label>
<input id="kvk" name="kvk" class="text" />
<script type="text/javascript">
var kvk = new LiveValidation('kvk');
kvk.add( Validate.Presence );
kvk.add( Validate.Numericality );
</script>
<br class="clear" />
<br />
<label for="beschrijving">Beschrijving bedrijf</label>
<textarea name="beschrijving" id="beschrijving" onKeyPress="return charLimit(this)" onKeyUp="return characterCount(this)" rows="8" cols="40"></textarea>
<p class="charcounter"><strong><span id="charCount">500</span></strong> karakters beschikbaar.</p><input type="submit" value="Verzenden">
</form>
Код работает, но только после нажатия кнопки «Отправить» можно выбрать города из ранее выбранной провинции.
Мне нужно, чтобы жить изменения, как я могу это исправить?
Я начинающий в программировании и действительно застрял прямо сейчас.
заранее спасибо
Клаас
$( document ).ready(function() {
$('#provincie').on('change', function(event){
if($(this).val() == '#provincie'){
$("#result_div").empty()
}else{
var values = $(this).serialize();
$.ajax({
url: "toevoegen.php",
type: "post",
data: values,
success: function(data){
$("#result_div").empty().append(data);
},
error:function(){
$("#result_div").empty().append('something went wrong');
}
});
}
});
});
Надеюсь, это сработает для вас. Если это не так, пожалуйста, дайте мне знать.
Других решений пока нет …