Solved

Dynamically adding fields input and select boxes question.

Posted on 2016-10-05
7
48 Views
Last Modified: 2016-10-10
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

0
Comment
Question by:earwig75
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41829885
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
 

Author Comment

by:earwig75
ID: 41829895
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
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41829963
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Accepted Solution

by:
earwig75 earned 0 total points
ID: 41830047
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
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41830078
No problem - sometimes asking the question is required to see the answer.
0
 

Author Closing Comment

by:earwig75
ID: 41836593
The original code posted was not accurate. I described my issue in closing comment.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

689 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question