Javascript Conditional Dynamic Form Not Inputting Fields
Question
I have the following form. It's purpose is to see what state is selected and pass that value to a script that will dynamically add more dropdown boxes with an auto-incrementing ID for storage in a database. I have no script errors but the dynamic fields will not pop into place. Incidentally, this is based off Rob's work here, http://www.web-design-talk.co.uk/58/adding-unlimited-form-fields-with-jquery-mysql/#comment-70752 . Can anyone see any faults with what I'm doing.
<html>
<head>
<title>Form</title>
<script type="text/javascript" src="../lib/jquery/jquery-1.8.1.min.js"></script>
</head>
<body>
<form id="Form" name="Form" method="post" action="Form.php">
<fieldset>
<legend>Form</legend>
<label>Operations State: </label>
<select name="StateID" id="StateID">
<option value="">Select a State</option>
<option value="CA">CA</option>
<option value="NY">NY</option>
<option value="PA">PA</option>
</select>
<br>
<div id="container">
<p id="add_field">
<label><a href="#" onclick="getClass(StateID.value)">Add A Class Code</a></label>Please select a Class Code
</p>
</div>
</fieldset>
</form>
<script>
var i = 0;
function getClass(str){
var StateID = $("#StateID").val();
$('p#add_field').on('click', function(){
i += 1;
$('#container').before
if (StateID == "CA"){
('<label>Select a Class Code</label>' + '<select name="ClassCode[]" id="ClassCode_' + i + '">' + '<option value="1">1</option><option value="2">2</option><option value="3">3</option>' + '</select><br>')
}
else if (StateID == "NY"){
('<label>Select a Class Code</label>' + '<select name="ClassCode[]" id="ClassCode_' + i + '">' + '<option value="4">4</option><option value="5">5</option><option value="6">6</option>' + '</select><br>')
}
else if (StateID == "PA"){
('<label>Select a Class Code</label>' + '<select name="ClassCode[]" id="ClassCode_' + i + '">' + '<option value="7">7</option><option value="8">8</option><option value="9">9</option>' + '</select><br>')
}
else{
}
});
}
</script>
</body>
</html>
Thank you in advance!
After some edits, I came up with the following...
<script>
var i = 0;
function getClass(){
var StateID = $("#StateID").val();
$('p#add_field').on('click', function(){
i += 1;
if (StateID == "CA"){
$('#container').before(
'<label>Select a Class Code</label>' + '<select name="ClassCode[]" id="ClassCode_' + i + '">' + '<option value="1">1</option><option value="2">2</option><option value="3">3</option>' + '</select><br>')
}
else if (StateID == "NY"){
$('#container').before(
'<label>Select a Class Code</label>' + '<select name="ClassCode[]" id="ClassCode_' + i + '">' + '<option value="4">4</option><option value="5">5</option><option value="6">6</option>' + '</select><br>')
}
else if (StateID == "PA"){
$('#container').before(
'<label>Select a Class Code</label>' + '<select name="ClassCode[]" id="ClassCode_' + i + '">' + '<option value="7">7</option><option value="8">8</option><option value="9">9</option>' + '</select><br>')
}
else{
}
})
}
</script>
This version does see the StateID and changes the dropdown boxes accordingly with each new addition. The only issue is that along with auto-incrementing the ID (eg. ClassCode_1, ClassCode_2, etc), it is also incrementing the number of fields output to the page. If that can be figured out, it will be awesome!
2 answers
solution1
1 2012-10-01 17:01:50
You're setting up your "getClass()" function incorrectly. The way your code is written, it's being passed as an argument to jQuery, and it is not being declared as a global function. So just declare it:
function getClass(str) {
// ...
}
Once you do that, I think you'll want to change the code that adds content so that it's adding a complete single DOM element. Surround your <label> and <select> with a <span> or something.
Also, "i" needs to be a global variable, or else it'll start over at 0 on each call to the function. Move its declaration to outside of "getClass".
solution2
1 ACCPTED 2012-10-01 17:38:32
You've got a fair amount trying to happen here; I'd simplify things down to basics so you can see what's going on.
You've got what is essentially a click handler ( onclick in the HTML) that seems to be trying to attach other click handlers to a paragraph tag. I guess that's not what you're going for. You're using jQuery, so there's no point adding an onclick attribute to your click when jQuery can manage all that for you.
The steps should be:
- On the click of the link, check what the value of the state dropdown is.
- Remove any dropdowns that have been previously injected into the DOM.
- Inject a new dropdown into the DOM, with options depending on the value.
Take a look at this Fiddle , which hopefully strips everything back to basics. This does what I think you're after, though I'm not sure what you're trying to do with the incrementing IDs - I'll have to leave that one to your judgment!
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.