Solved

Dynamically adding fields input and select boxes question.

Posted on 2016-10-05
7
39 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
  • 3
  • 3
7 Comments
 
LVL 56

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 56

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
Independent Software Vendors: 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 56

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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 …

726 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