Solved

Dynamically adding fields input and select boxes question.

Posted on 2016-10-05
7
33 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 55

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 55

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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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 55

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

How our DevOps Teams Maximize Uptime

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

Question has a verified solution.

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

Suggested Solutions

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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 …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

790 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