Dynamically adding fields input and select boxes question.

I'm using the code below to dynamically add inputs to a form. It works fine for text boxes and radio buttons, but my select boxes/inputs do not work properly. It should append a number to the end of the form field. Does anyone know how I can alter this to work with select boxes, along with other inputs? Thank you.
<form method="post" action="actionpage.cfm">
<input type="hidden" name="totalfields" />
<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="text" name="name1"> <input type="radio" name="grant1" value="grant">AccGranted <input type="radio" name="grant1" value="nogrant">Not AccGranted </div>
</div>
<input type="submit" value="submit">
</form>

<script type="text/javascript">
$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
   
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        var total = $('.input_fields_wrap div').length;
        if(total < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="name' + x + '"/> <input type="radio" name="grant' + x + '" value="grant">AccGranted <input type="radio" name="grant' + x + '" value="nogrant">Not AccGranted <a href="#" class="remove_field">Remove</a></div>'); //add input box
      $('input[name="totalfields"]').val(total+1);
        }
    });
   
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); 
        $(this).parent('div').remove(); 
		
		// GET THE TOTAL INPUTS USING JQUERY
        var total = $('.input_fields_wrap div').length;
		
		// SET THE TOTAL NUMBER OF INPUTS
        $('input[name="totalfields"]').val(total);
    })
});
</script>

Open in new window

earwig75Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
earwig75Connect With a Mentor Author Commented:
Please forgive me for wasting your time. The original code I posted was not what I am using. I made a mistake. I figured out what i was doing wrong. Below is part of my code, I just had to add the ",select" after the input.
	      $('input,select', theDiv).each(function() {........

Open in new window

0
 
Julian HansenCommented:
Where in your code are you adding a select - I only see text and radio?

Can you give us a hint of what it is you want to do regarding the select - what are the values?

Not sure what you mean by
It should append a number to the end of the form field
0
 
earwig75Author Commented:
Julian, I'd like to add a select box, just like I have with the text box and radio buttons. It would be added to the original form, and the divs/spans that get added in the javascript. The code I posted adds a numeric value to each form field when you add one, and removes one when you remove a field. I'd like the same to work with select boxes, but as of right now, it doesn't work. It will only add a new select box, but won't append a number (counting up) for each one.

For example, the original field name would be something like name="myfield1". When you add new fields, it would make myfield2, myfield3, myfield4 etc for each control. This works fine with text boxes and radio buttons, but it won't work with a select box. I don't have a select box in my example code, but I can add it if it would help.
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
Julian HansenCommented:
but as of right now, it doesn't work. It will only add a new select box, but won't append a number (counting up) for each one.
What doesn't work - you have not shown us any code that attempts to do this so we can't say why it is not working. Show us what you have tried to do and lets take it from there - otherwise we are left guessing. There is no reason a <select> is any different in the context of what you are trying to do.

<select> boxes have <options> and there is nothing saying what those options should be so to try and work up an example is going to be a waste of time. Show us how far you got with the script.
0
 
Julian HansenCommented:
No problem - sometimes asking the question is required to see the answer.
0
 
earwig75Author Commented:
The original code posted was not accurate. I described my issue in closing comment.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.