Develop Reference

How to add more input fields when user click on plus sign

Let's say I want to add some more input fields to this <p> tag, when user clicks on the + sign, at the end of it.
<p>
More Links: <span class="glyphicon glyphicon-plus"></span></br>
Link URL: <input type="text" name="blog_linku_one"> Link Name: <input type="text" name="blog_linkn_one"></br>
</p>
So if user clicks on that Plus sign, another link with a new name will be added:
<p>
More Links: <span class="glyphicon glyphicon-plus"></span></br>
Link URL: <input type="text" name="blog_linku_one"> Link Name: <input type="text" name="blog_linkn_one"></br>
Link URL 2: <input type="text" name="blog_linku_two"> Link Name 2: <input type="text" name="blog_linkn_two"></br>
</p>
And this process can continue as the user click on plus sign.
So how can I do this with Javascript or jQuery ?
Any idea please...

You need to append() new fields to the parent div containing the fields on click() event of the + sign.
$(document).ready(function() {
var i = 1;
$('.add').on('click', function() {
var field = '<br><div>Link URL '+i+': <input type="text" name="blog_linku_one[]"> Link Name '+i+': <input type="text" name="blog_linkn_one[]"></div>';
$('.appending_div').append(field);
i = i+1;
})
})
.add{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
More Links: <span class="fa fa-plus add"></span>
<div class="appending_div">
<div>
Link URL: <input type="text" name="blog_linku_one[]"> Link Name: <input type="text" name="blog_linkn_one[]">
</div>
</div>

Try the following code for this. It will get element with ID "container" from DOM and create new field and append the field to the Container.
//Get container from DOM
var container = document.getElementById("container");
//Create an <input> element, set its type and name attributes
var input = document.createElement("input");
input.type = "text";
input.name = "blog_linku_" + i;
input.required = "required";
//Add Element to div
container.appendChild(input);
You can create as many elements you want with this snippet. Hope this will help.

JQuery: Handling name attribute

<div class="uk-sortable js-sortable-option">
<div class="uk-margin-small-top">
<i class="uk-icon-bars"></i>
<input type="text" name="customfield[data][option][0]" value="First Option">
</div>
<div class="uk-margin-small-top">
<i class="uk-icon-bars"></i>
<input type="text" name="customfield[data][option][1]" value="Second Option">
</div>
<div class="uk-margin-small-top">
<i class="uk-icon-bars"></i>
<input type="text" name="customfield[data][option][2]" value="Third Option">
</div>
</div>
<button class="uk-margin-small-top uk-button js-add-item" type="button">Add Item</button>
In this form, a user can create a simple list, which can be used, e.g. for a custom select input. Every item have a unique id customfield[data][option][id]. To add a item, the user can click the button.
My problem is, that I have to change the name attribute for every new added item. How can I only change the id of the name-attribte?
var sortele = $('.js-sortable-option'),
additem = $('.js-add-item');
additem.on('click',function(){
ele = sortele.first();
/** code to change name attr (e.g. to customfield[data][option][newid])*/
sortele.append(ele);
});

to change any attribute of an element , use :
$(elm).attr("attr_name","new_val");
in this case , you should have a counter variable for using as array index.
var counter = 0;
additem.on('click',function(){
ele = sortele.first();
ele.attr("name", "customfield[data][option]["+counter+"]");
counter++;
sortele.append(ele);
});

With jquery you can do this:
var sortele = $('.js-sortable-option'),
additem = $('.js-add-item');
additem.on('click',function(){
ele = sortele.first();
myVar = "something";
/** code to change name attr (what to do?)*/
ele.attr("name", myVar);
});

get previous element tag name

with the html like this:
<div class="input-group">
<input type="text" class="form-control" name="tot-1">
<span class="input-group-addon btn btn-default addQR">+</span>
How can I get of the input element when I click on the button?
I have tried this:
$("addQR").click(function(){
var caunter = $(this).closest("input");
var nameclosest = getElementsByName(caunter);
});
but it doesn't work. Any suggestion?

You are missing a period in the selector of the button, and you should be using .prev() not .closest(). You already know the tag name input, so I wonder why you would be trying to get it; you're probably trying to get the name attribute:
$(".addQR").click(function(){
var caunter = $(this).prev("input"),
nameclosest = caunter.attr('name');
});
$(".addQR").click(function(){
var caunter = $(this).prev("input"),
nameclosest = caunter.attr('name');
alert( nameclosest );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<input type="text" class="form-control" name="tot-1">
<span class="input-group-addon btn btn-default addQR">+</span>

Populating a tag input based on other inputs in same form

I have a form with a bunch of inputs. Sometimes the form will have 1 input and sometimes up to 10 inputs. When someone fills out each input I want a tag field at the bottom to be populated also. Right now I have it working but only with a set number of inputs. (3 at the moment).
Im trying to figure out how to make it work regardless of how many inputs there are on the page.
HTML
Input1 <input id="input1" name="input1" type="text" value="" />
<br/>
Input2 <input id="input2" name="input2" type="text" value="" />
<br/>
Input3 <input id="input3" name="input3" type="text" value="" />
<br/>
<p>List of inputed text</p>
<span id="allInputs"></span>
Jquery
$("#input1,#input2,#input3").change(function () {
var inputArray = [$("#input1").val(), $("#input2").val(), $("#input3").val()];
$("#allInputs").text(inputArray.join(' '));
});
A nice to have also would be putting them into another input instead of a span and adding a comma after each one except for the last one.
I know Im probably missing something very simple here.

In your example you are only allowing for 3 inputs as you have 3 input boxes, when any of those input boxes change your tags are then being transferred to the span.
Now it sounds like you wish to allow for multiple entries regardless of how many inputs. You could try something simple such as the below fiddle.
http://jsfiddle.net/K2g4z/
Html:
<div>
<strong>Enter your tag and click add</strong>
<br/>
<input type="text" id="tagEntry" />
<button id="tagAdd">Add</button>
</div>
<div>
<strong>Entered Tags</strong>
<br/>
<input type="text" id="tagsEntered" />
</div>
Javascript:
var tags = [];
$(function() {
$('#tagAdd').click(function(){
//get the tag value and trim the spaces
var tVal = $('#tagEntry').val().trim();
if(tVal == '')
return;
//reset the entry box
$('#tagEntry').val('');
//verify tag not already saved
for(var i=0;i<tags.length;i++)
if(tags[i] == tVal)
return;
//add the tag to the array
tags.push(tVal);
//set the tags entry box
$('#tagsEntered').val(tags.join(', '));
});
});
UPDATE:
The JSFiddle link http://jsfiddle.net/K2g4z/1/ now supports using multiple inputs of as many as you need. To achieve this instead of selecting on element ID we bind to a class name. Given the following Html.
<div>
<strong>Enter your tag and click add</strong>
<br/>
<strong>Tag 1</strong>
<input type="text" id="tagEntry" class="tagEntry" />
<br/>
<strong>Tag 2</strong>
<input type="text" class="tagEntry" />
<br/>
<strong>Tag 3</strong>
<input type="text" class="tagEntry" />
<br/>
<strong>Tag 4</strong>
<input type="text" class="tagEntry" />
<br/>
<strong>Tag 5</strong>
<input type="text" class="tagEntry" />
</div>
<div>
<strong>Entered Tags</strong>
<br/>
<input type="text" id="tagsEntered" />
</div>
All the tag input boxes have a class of tagEntry now this class will become our selector. With the following JS we can bind the blur event to every tag that has a class of tagEntry. This will now update the tags box every time any of the inputs changed.
var tags = [];
$(function() {
$('.tagEntry').blur(function(){
//get the tag value and trim the spaces
var tVal = $(this).val().trim();
if(tVal == '')
return;
//reset the entry box
$(this).val('');
//verify tag not already saved
for(var i=0;i<tags.length;i++)
if(tags[i] == tVal)
return;
//add the tag to the array
tags.push(tVal);
//set the tags entry box
$('#tagsEntered').val(tags.join(', '));
});
});
As you can see our handler binds to all the inputs, as any of the inputs receives the blur event the method of extracting the tags is executed.

$("#input1,#input2,#input3").change(function () {
var inputArray = [$("#input1").val(), $("#input2").val(), $("#input3").val()];
$("#masterinput").val(inputArray.join(' '));
});

You probably want to narrow the selector so it isn't selecting all text inputs on the page.
var inputs$ = $("input:text").change(function () {
var inputArray = [];
$.each(inputs$, function(i, v) {
inputArray.push($(v).val());
}
$("#allInputs").text(inputArray.join(' '));
});

Here you go:
var str = "";
$("input[type=text]").change(function () {
$("input[type=text]").each(function(){
str += $(this).val()+",";
};
});
$("#allInputs").html(str);

one textbox value in another textbox

I want to get value of one textbox and put the same in another textbox.
my code is :
<input type="text" value="Keyword" id="one" />
<input type="text" value="Search" id="two" />
button
jquery:
var input = $("#one");
$('#btn').click(function(){
alert('dgdhjdgj');
var oneValue = $('#one').val();
alert("one value "+ oneValue);
var twoVal = $('#two').val($(input).attr('value'));
alert('two Val' + twoVal);
});
demo is here.
Issue : when I change the value of textbox #one, it does not change the value of #two.
thanks in advance.

$(input).attr('value') gets the value of the value attribute, which is the initial value, not the current value.
You had it right two lines earlier. Use val().

Try this
HTML
<input type="text" placeholder="Keyword" id="one" />
<input type="text" placeholder="Search" id="two" />
button
Script
$('#btn').click(function() {
var oneValue = $('#one').val();
$('#two').val(oneValue)
})
Fiddle

write textarea and check it. JSFIDDLE
$("#add").click(function(){
var thenVal = $("#textarea_first").val();
$("#textarea_second").val(thenVal);
});

if all that you want to change the text of second textbox, as soon as you change the text of first textbox, just use jQuery's change event.
just try this then:
$('#one').on("change",function(){
$('#two').val($(this).val());
});