[英]javascript, php, onchange select box not working
我有一個帶有兩個選擇框的表單,我希望實時更改框而不必按下提交按鈕。
這是我使用的代碼:
<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');
}
});
}
});
});
希望它對您有用。 如果沒有,請告訴我。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.