jQuery: Change "action" based on Select value
I've made this code which changes the second select based on what you select in the first select.
But now I need a way in jQuery to also change the "form action" based on what is selected on the first select.
I want action="renault.php" if option 1 is selected and I want action="citroen.php" if option 2 is selected on the first select.
I also want to be required both selects, so its mandatory to select at least one option on each select, and if someone doesnt do that and hit submit then an alert should tell them "please select at least one brand and one model"
I've tried several codes but couldnt get this to work.
Also if the person selects "select a model" or "select a brand" the alert should also appear (requesting to select at least one model and brand)
Can someone help here?
Code:
<form id="frmPreselect" name="frmPreselect" method="post" action="">
<p>
<select name="selectOne" id="selectOne" style="font-size:16px; margin-right:20px; font-family:Verdana, Geneva, sans-serif;">
<option value="">-- select a Brand --</option>
<option value="1">Renault</option>
<option value="2">Cïtroen</option>
</select>
<select name="selectTwo" id="selectTwo" style="font-size:16px; font-family:Verdana, Geneva, sans-serif;">
<option value="">-- select a model --</option>
</select>
</p>
<p>
<input type="submit" value="SOLICITAR PRESUPUESTOS" style="font-size:20px; font- family:Verdana, Geneva, sans-serif; font-weight:bold" />
</p>
</form>
<script type="text/javascript">
$('#selectOne').change(function() {
var options = '';
if($(this).val() == '1') {
options = '<option value="clio">clio</option><option value="symbol">symbol</option> <option value="sandero">sandero</option>';
}
else if ($(this).val() == '2'){
options = '<option value="Berlingo">Berlingo</option><option value="C3">C3</option> <option value="C4">C4</option>';
}
$('#selectTwo').html(options);
});
</script>
/// <reference path="http://code.jquery.com/jquery-1.4.3.js" />
/// <reference path="http://code.jquery.com/jquery-1.4.1-vsdoc.js" />
$(document).ready(function () {
var actions = new Array();
actions[1] = "renault";
actions[2] = "citroen";
$("select").change(function () {
if ($("select#selectOne").val() != "" &&
$("select#selectTwo").val() != "" ) {
$("form").attr("action",
actions[$("select#selectOne").val()] + ".php");
}
});
$("form").submit(function (event) {
if ($("select#selectOne").val() == "" ||
$("select#selectTwo").val() == "") {
alert("Select a model & brand");
event.preventDefault();
}
return true;
});
});
You can also wait with setting your action until you submit the form:
$('#frmPreselect').submit(function (e) {
var sel1 = $('#selectOne');
var sel2 = $('#selectTwo');
if (sel1[0].selectedIndex == 0 || sel2[0].selectedIndex == 0) {
e.preventDefault(); //don't submit
alert('You forget something!'); //alert
return;
}
var frm = $(this);
if (sel1.val() == 1)
frm.attr('action', 'http://blabla'); //set some action
//etc. etc.
//in the end it will submit the form.
});
Complete example below, but even if I don't see the code, I'm pretty sure citroen.php and renault.php are not so different so I would advise using a car.php handling brand and model.
PS: you should take a look at some non intrusive validation plugin (see this demo for example)
<html>
<head>
<title>S.O. 4117106</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#selectOne').change(function() {
var options = '<option value="0">-- select a model --</option>';
if($(this).val() == '1') {
options += '<option value="clio">clio</option>';
options += '<option value="symbol">symbol</option>';
options += '<option value="sandero">sandero</option>';
} else if ($(this).val() == '2'){
options += '<option value="Berlingo">Berlingo</option>';
options += '<option value="C3">C3</option>';
options += '<option value="C4">C4</option>';
}
$('#selectTwo').html(options);
});
$('#frmPreselect').submit(function() {
if ($('#selectOne').val() == '0' || $('#selectTwo').val() == '0') {
alert('please select at least one brand and one model');
return false; // don't submit
}
var action = '';
if($('#selectOne').val() == '1') {
action = 'renault.php';
} else if ($('#selectOne').val() == '2'){
action = 'citroen.php';
}
$(this).attr('action', action);
return true; // submit
});
$('#selectOne').change();
});
</script>
<style type="text/css">
select, .bigSubmit {
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
}
#selectOne {
margin-right: 20px;
}
.bigSubmit {
font-size: 20px;
font-weight:bold;
}
</style>
</head>
<body>
<form id="frmPreselect" name="frmPreselect" method="post" action="">
<p>
<select name="selectOne" id="selectOne">
<option value="0">-- select a Brand --</option>
<option value="1">Renault</option>
<option value="2">Cïtroen</option>
</select>
<select name="selectTwo" id="selectTwo">
</select>
</p>
<p>
<input type="submit" value="SOLICITAR PRESUPUESTOS" class="bigSubmit" />
</p>
</form>
</body>
</html>
$("selectOne").change(function(){
switch($(this).val())
{
case "1" : $("form[name='frmPreselect']").attr("action","http://foo"); break;
case "2" : $("form[name='frmPreselect']").attr("action","http://bar"); break;
default : $("form[name='frmPreselect']").attr("action","http://foo");
}
});
You could use either form[name='frmPreselect'] to select the form or #frmPreselect of course, but I wouldn't use just $("form") as that will cause you problems if you add a second form to the page 2 months down the road.
加载中,请稍侯......
精彩评论