Search code examples
javascriptcascadingdropdowndynamic-forms

Javascript Conditional Dynamic Form Not Inputting Fields

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!

Solution

  • 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:

    1. On the click of the link, check what the value of the state dropdown is.
    2. Remove any dropdowns that have been previously injected into the DOM.
    3. 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!