We Keep Coding

Increase div id number with new div fields

The following script creates new input fields up to 4. I need to know how can I increase the ID also as follows..
with first click, "var fieldHTML" generate :
<div><input type="text" id="sPhone_1" value=""/><img src="remove-icon.png"/></div>
Second click: id="sPhone_2"
Third click: id="sPhone_3" and so on..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var maxField = 4; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div><input type="text" id="sPhone_" value=""/><img src="remove-icon.png"/></div>'; //New input field html
var x = 1; //Initial field counter is 1
//Once add button is clicked
$(addButton).click(function(){
//Check maximum number of input fields
if(x < maxField){
x++; //Increment field counter
$(wrapper).append(fieldHTML); //Add field html
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e){
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
</script>
<div class="field_wrapper">
<div>
<input type="text" name="Phone" id="sPhone" value=""/>
<img src="add-icon.png"/>
</div>
</div>

$(addButton).click(function(){
//Check maximum number of input fields
if(x < maxField){
x++; //Increment field counter
$(wrapper).append(fieldHTML); //Add field html
newId = 'sPhone_' + x;
document.getElementById('sPhone_').id = newId;
}
});
Try this. This should post the div in the html with the initial id sPhone_, then it gets that element and replaces the id with your new created id.
Or you can create the string to append in the function like this:
$(addButton).click(function(){
//Check maximum number of input fields
if(x < maxField){
x++; //Increment field counter
var fieldHTML = '<div><input type="text" id="sPhone_"' + x + 'value=""/><img src="remove-icon.png"/></div>'; //New input field html
$(wrapper).append(fieldHTML); //Add field html
}
});

how to generate dynamic input and get the value by id using jquery

Actually i have a form where i enter name ,html page name in a input box and save it to the database. Here i got some issues
i am able generate input box but how to get the value of that input box ?
how to get the dynamic values of the input box which was entered in dynamic boxes and send it to post request as i know how to send a static input box value request for multiple how can we send it .
here is what below is my code
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
$(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();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
i thins above i can generate dynamic input box and can remove it but unable to get values so how can generate by using id and post all dynamically generated values to the database

You can use the jquery #map() function like this:
var list = wrapper.find('input').map(function() {
return $(this).val();
}).get();
when you want to submit the list of values to the send to the server - see demo below:
$(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();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
});
/* ADDED THIS */
$('.submit').click(function() {
var list = wrapper.find('input').map(function() {
return $(this).val();
}).get();
// send to server here
console.log(list);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
<button class="submit">Submit</button>

Yea can try something like this
var inputField = $('<div><input type="text" name="mytext[]"/>Remove</div>');
$(wrapper).append(inputField);
Then you can attach an event to that variable.
inputField.on('change', 'input', function() {
var value = $(this).val();
console.log(value);
});
Hope this helps you :)

Another way, add the following button the form:
<button class="getValue">Get Field Values</button>
Add the below button click event in JS on load:
$(getValue).click(function (e) {
e.preventDefault();
let fieldValues = "";
$("input").each(function(i,e){
fieldValues = fieldValues == "" ? $(e).val() : fieldValues + ", " + $(e).val();
})
alert(fieldValues);
});

how do I check dynamically generated radio input value

I have to generate multiple input fields dynamically for each time user clicks "add" button and I was successfully able to get them. Each contact should have this radio input field in different different name so I've created a name in an array form.
Here's what I have so far and I wonder how I'm supposed to get the radio value for each person:
var options = '';
var count = 0;
var maxfields = 4;
$('button#add').click(function() {
options = '<p>Visit Type:
<label class="radio-inline">
<input type="radio" class="c_visittype' + count +'" name="c_visittype[]" value="Student" required>Student</label>
<label class="radio-inline">
<input type="radio" class="c_visittype' + count +'" name="c_visittype[]" value="Visitor" required>Visitor</label> </p>';
if(count < maxfields){
count++;
$(options).fadeIn("slow").appendTo('.companion');
return false;
}
});
$('.c_visittype' + count).on('click', function(){
$('input:radio[name="c_visittype"]').attr('checked', 'checked');
});
Each person should get a choice of either 'student' or 'visitor' and I have to get this value for multiple persons whenever more person fields created.The reason why I put field's name as an array is to iterate it in the next page by php.

<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
$( document ).ready(function() {
var options = '';
var count = 0;
var maxfields = 4;
$('button#add').click(function() {
var options = '<p style="display: none">Visit Type:<label class="radio-inline"> <input type="radio" class="c_visittype' + count +'" name="c_visittype' + count +'[]" value="Student" required>Student</label> <label class="radio-inline"><input type="radio" class="c_visittype' + count +'" name="c_visittype' + count +'[]" value="Visitor" required>Visitor</label> </p>';
if(count < maxfields){
count++;
$('.companion').append(options);
$(".companion p:last").fadeIn();
}
});
});
</script>
<button id="add">add</button>
<div class="companion">
</div>

$('input[name=c_visittype[]]:checked').val();
That's how you access the value of a checked radio button with jQuery.

var inputValues = [];
$('.c_visittype:checked').each(function() {
inputValues.push($(this).val());
});
// Your code using inputValues
For update on changes:
$(function() {
$('.c_visittype').click(function(){
// Insert code here
}
)});
Make sure to move the numbering from the class attribute to the name attribute (like it was, everything was part of the same set of options). Also, put the whole string on 1 line.

Jquery, Pass an input value to a cloned input field

I have a form with a few input fields used to create an address book. If the user wants to add another set of names, they can click on add more. If the users have the same username, instead of typing it over and over again, i added a checkbox.
If the user selects the checkbox, it will pass the value from the first username input field to ALL username input fields.
The code below works on the second set of input fields but when i click on add more, it doesnt pass the values.
$('#check1, #addmore').click(function(){
if (this.checked) {
$('.pass').val($('.original').val());
}
});
here's the full code.

You can use the class you already have assigned to your button which is the .add_field_button class. Then you just have you can assign the value to each input box value with an id that starts with username as long as the #check1 element is checked.
//changed the selector, you already had this class present in your markup
$('.add_field_button').on(
"click",function(){
//if the check1 checkbox is checked
if ($("#check1").is(":checked")) {
/*select every id that starts with "username" and sets it value
to the .original input text box value*/
$("[id^=username]").val($(".original").val());
}
});
After reviewing your jsfiddle I found some additional errors:
You are using html comments in your JavaScript. Instead of <!--my comment--> you will need to use either // for single line comments or /* my comment */ for multi-line comments.
After removing the comment syntax errors I may have came across some unexpected behavior when using my original answer. The if then statement still applies but I moved it to inside your add_more button event because it was only cloning the username after the third set of inputs was being added.
Live Example: http://codepen.io/larryjoelane/pen/rxKZYm?editors=1010
Updated JavaScript:
$(document).ready(function() {
Number.prototype.pad = function(size) {
var s = String(this);
while (s.length < (size || 0)) {
s = "0" + s;
}
return s;
}
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
var c = 9;
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
c++;
$(wrapper).append('<div><label><span>Template Id :</span><input type="text" name="templateid' + x + '" id="templateid' + x + '"></label><br><label><span>UNC Path :</span><input type="text" name="uncpath' + x + '" id="uncpath' + x + '"></label><br><label><span>Username :</span><input type="text" class="pass" name="username' + x + '" id="username' + x + '"></label><br><label><span>Password :</span><input type="text" name="password' + x + '" id="password' + x + '"></label><br><label><span>Name :</span><input type="text" name="scantoname' + x + '" id="scantoname' + x + '"></label>Remove</div>'); //add input box
/*add input value to 'how many field*/
$.each($('input[name="howmany[]"]'), function() {
$(this).val(x);
});
/*add input value to 'templateid field*/
$('input[name="templateid' + x + '"]').each(function() {
$(this).val((x).pad(3, 0));
});
}
//////////added code////////////////
//if the check1 checkbox is checked
if ($("#check1").is(":checked")) {
/*select every id that starts with "username" and sets it value
to the .original input text box value*/
$("[id^=username]").val($(".original").val());
}
//////////added code////////////////
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});

First you need to add the id #addmore to your button in the HTML
<button id="addmore" class="add_field_button btn btn-primary">Add More</button>
Then just modify your click function like this :
$('#check1, #addmore').click(function(){
if($('#check1').is(':checked')) {
$('.pass').val($('.original').val());
}
});

How can I extract the values entered in the input boxes generated dynamically and pass it to controller using jquery?

I have a form wherein a user can enter input boxes and remove them at a click. I want to extract the values entered in these input boxes and pass them to controller using jQuery. How do I do that?Right now I am using ids to extract the values but I do not think that is a better method because suppose I add 4 options and then I remove all of them and then again add inputs, I will not be able to track these ids and extract the values.
Here is my HTML code:
<button type="button" class="addoption" id="addoption_btn">Add more option</button>
<div id="Options">
<input type="text" name="mytext[]" id="option_1" placeholder="Option 1"/>
</div>
Here is my JavaScript:
var MaxOptions = 4; //maximum input boxes allowed
var Optionsform = $("#Options"); //Input boxes wrapper ID
var AddButton = $("#addoption_btn"); //Add button ID
var x = Optionsform.length; //initial text box count
var OptionCount=1; //to keep track of text box added
$(AddButton).click(function (e) //on add input button click
{
if(x <= MaxOptions) //max input box allowed
{
OptionCount++; //text box added increment
//add input box
$(Optionsform).append('<div><input type="text" name="mytext[]" id="option_'+ OptionCount +'" placeholder="Option '+ OptionCount +'"/>×</div>');
x++; //text box increment
}
return false;
});
$("body").on("click",".removeclass", function(e){ //user click on remove text
if( x > 1 ) {
$(this).parent('div').remove(); //remove text box
x--; //decrement textbox
}
return false;
});
Here is the jQuery I am using to pass the data to my controller:
$("#addquestion_btn").click(function(){
var val= CKEDITOR.instances['question_topic'].getData();
storequestion(val);
});
function storequestion(ques)
{
$.post("/instructor/store/question",{
question: ques,
option1: $("#option_1").val(),
option2: $("#option_2").val()
},function(data){
if(data[0]==="success")
{
window.location.href = '/instructor/create/topics';
}
else
{
alert("fails");
window.location.href = '/instructor';
//redirect to further page to enter courses
}}
,'json');
}

Please use below mentioned code to read through all displayed options.
function storequestion(ques) {
obj = {};
obj[question] = ques;
$("#Options:input[name*='mytext']").each(function (index) {
obj['option' + index] = $(this).val();
});
$.post("/instructor/store/question", obj
, function (data) {
if (data[0] === "success") {
window.location.href = '/instructor/create/topics';
}
else {
alert("fails");
window.location.href = '/instructor';
//redirect to further page to enter courses
}
}
, 'json');
}