Solved

Dynamically adding fields input and select boxes question.

Posted on 2016-10-05
7
21 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 52

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 52

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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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 52

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to hide html tags in text area 4 37
Trouble inserting a variable  in javascript 7 42
Problem with a CSS in a page 2 26
Google Sheets script efficiency 2 4
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
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.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

920 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now