Develop Reference

Multiple input save one input value

I have Input section like i want to pass this 3 value in one input value with onchange
<script type="text/javascript">
function updateInput($i){
$('updateval').val($i);
}
</script>
<input type="text" onchange="updateInput(this.value)" >
<input type="text" onchange="updateInput(this.value)" >
<input type="text" onchange="updateInput(this.value)" >
<input type="text" id="updateval" >
i want to show here the all 3 value and with a seperation
like value1:value2:value3
in my last input section

Give the 3 input id not name, eg v1,v2,v3
onchange jquery those 3 input value. $('#updateval').val( [ $('#v1').val(),$('#v2').val(),$('#v3').val()].join(':'));
You're missing the position of source input on your function.
Input without name not passed in form submitted, except you send itvia coding.

<input type="text" class='val' >
<input type="text" class='val' >
<input type="text" class='val' >
<input type="text" id="updateval" >
<script>
$(document).ready(function(){
$('.val').on('keyup',function(){
let out=''
$(".val").each(function() {
out+= $(this).val()+":";
});
$('#updateval').val(out);
})
})
</script>
fiddle

<script type="text/javascript">
function updateInput(){
var val1 = $('#value1').val();
var val2 = $('#value2').val();
var val3 = $('#value3').val();
var output = val1 + ':' + val2 + ':' + val3
$('#updateval').val(output);
}
</script>
<input id="value1" type="text" Onkeyup="updateInput(this.value)" >
<input id="value2" type="text" Onkeyup="updateInput(this.value)" >
<input id="value3" type="text" Onkeyup="updateInput(this.value)" >
<input type="text" id="updateval" value="">
Fiddle

Details commented in demo.
// Reference the first form on page
const form = document.forms[0];
/*
Register form to the input event (or change event with .onchange)
The input event will fire immediately after the user has entered any data
The change event will fire when the user has entered data then triggers a blur event by
focusing elsewhere.
*/
form.oninput = display;
/*
//A Pass Event Object
/*
B1 event.currentTarget is the tag registered to event (form)
B2 .elements.text is a collection of all the form controls [name=text] (inputs)
B3 brackets and spread operator convert collection into an array [...all input]
B4 .map() returns each input value into an array
*/
/*
//C Get output.all and assign its value to the new array then convert it into a string
delimited by colons
//D End function
*/
function display(event) {//A
let texts = [...event.currentTarget.elements.text].map(txt => txt.value);//B1-4
event.currentTarget.elements.all.value = texts.join(':');//C
return false;//D
}
:root {
font: 400 5vw/1.2 Consolas
}
input,
output {
display: block;
font: inherit
}
<form>
<input name='text'>
<input name='text'>
<input name='text'>
<output name='all'></output>
</form>

On Click add HTML Elements

I am stuck with jquery wherein I am trying to add dynamic html elements (on click of +) which should also get removed on clicking on (-).
Each element should have unique name and id say "name_1","name_2"...
But it doesn't seem to going my way.
Here is my code:
$(document).ready(function() {
var maxField = 10;
var addButton = $('.add_button');
var wrapper = $('.field_wrapper');
var fieldHTML = $('.field_wrapper1').html();
var x = 1;
$('.add_button').click(function() {
if (x < maxField) {
x++;
$('.field_wrapper').append('<div class="field_wrapper1" style = "display:none;margin:20px;"><div><strong>*Upload New Contract Copy :</strong><input type="text" name="text_1" id = "text_1" value="" maxlength="50"/><strong><font color="#ff0000">* </font>Upload New Contract Copy :</strong><input type="file" name="pdf_1" id="pdf_1" accept="application/pdf" /><img src="http://www.allintravellocal.com/images/minus_img.jpg"/><label for="contract_copy_pdf" class="err" id="err_lbl_contract_copy_pdf"></label></div></div>');
}
});
$(wrapper).delegate('.remove_button', 'click', function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
<div class="field_wrapper">
<div>
<strong><font color='#ff0000'>* </font>Upload New Contract Copy :</strong>
<input type="text" name="contract_copy_text_1" id="contract_copy_text_1" value="" maxlength="50" />
<strong><font color='#ff0000'>* </font>Upload New Contract Copy :</strong>
<input type="file" name="contract_copy_pdf_1" id="contract_copy_pdf_1" accept="application/pdf" /> (*.pdf)
<a href="javascript:void(0);" class="add_button" title="Add field">
<img src="http://www.allintravellocal.com/images/plus_img.jpg" />
</a>
<label for="contract_copy_pdf" class="err" id="err_lbl_contract_copy_pdf"></label>
</div>
</div>
Here is my fiddle :
Demo

Its working as expected but with few things to modify:
DEMO
You have set display:none to your added element and even though its
getting appended its not getting shown in the UI. So just remove
that property as below:
$('.field_wrapper').append('<div class="field_wrapper1" style = "margin:20px;">... }
Use .on instead of .delegate if you are using jquery.js > 1.7 because As of jQuery 1.7, .delegate() has been superseded by
the .on() method according to this
and so the below code changes
Changes
$(wrapper).on('click','.remove_button', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});

Why you have this display:none inside field_wrapper1:
<div class="field_wrapper1" style = "display:none;margin:20px;">
You will never see the newly created element unless change to display:block.
And for the increment unique name and id:
Place x++; after appended function like so:
$('.field_wrapper').append('<div class="field_wrapper1" style = "display:block;margin:20px;"><div><strong>*Upload New Contract Copy :</strong><input type="text" name="text_'+x+'" id = "text_'+x+'" value="" maxlength="50"/><strong><font color="#ff0000">* </font>Upload New Contract Copy :</strong><input type="file" name="pdf_1" id="pdf_1" accept="application/pdf" />-<label for="contract_copy_pdf" class="err" id="err_lbl_contract_copy_pdf"></label></div></div>');
x++;

Check this Js Fiddle link, and each elements have unique id and name as you need.
$(document).ready(function(){
var maxField = 10;
var addButton = $('.add_button');
var wrapper = $('.field_wrapper');
var fieldHTML = $('.field_wrapper1').html();
var x = 1;
$('.add_button').click(function(){
if(x < maxField){
x++;
id='text_'+x;
name="name_"+x;
$('.field_wrapper').append('<div class="field_wrapper1" style = "display:block;margin:20px;"><div><strong>*Upload New Contract Copy :</strong><input type="text" name='+name+' id ='+ id+' value="" maxlength="50"/><strong><font color="#ff0000">* </font>Upload New Contract Copy :</strong><input type="file" name="pdf_1" id="pdf_1" accept="application/pdf" /><img src="http://www.allintravellocal.com/images/minus_img.jpg"/><label for="contract_copy_pdf" class="err" id="err_lbl_contract_copy_pdf"></label></div></div>');
}
});
$(wrapper).delegate('.remove_button','click', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});

Using javascript on new element created by jquery

I have a field location and with that I have a button add new location.On clicking that button a new textbox for that field opens.Now what I have done is I am using autofill address on that location field but autofill works for only first textbox not those textboxes which I am creating using jquery
Below is the html code
<div class="input_fields_wrap">
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label>
<div class="col-md-3">
<input type="text" id="loc" name="Work_Location[]" class="form-control" >
</div>
<button class="add_field_button">Add More Locations</button>
</div>
</div>
and below is the code to create new textboxes
<script>
$(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 class="form-group"><label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label><div class="col-md-3"> <input type="text" id="loc" name="Work_Location[]" class="form-control" ></div>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
and Below is the autofill code
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<script>
var autocomplete = new google.maps.places.Autocomplete($("#loc")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
console.log(place.address_components);
});
</script>
What the above code does is gives suggestions while filling location

Jquery on mathod attach event to every single element selected in selector part separatly. If you add new one you need to reaatach the event there.
<script>
$(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
container = $('<div class="form-group"></div>');
container.append('<label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label><div class="col-md-3"> <input type="text" id="loc" name="Work_Location[]" class="form-control" ></div>');
remove_box = $('Remove').on('click', remove_field);
container.append(remove_box);
$(wrapper).append(container); //add input box
}
});
function remove_field(e) {//user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
}
$(wrapper).on("click",".remove_field", remove_field);
});
</script>
Something like this. I didn't check the syntax so fix what is necesary.

Ajax Auto fill not working on dynamic fields but static fields

I had 4 static fields that inserts into Mysql db, when i fill in the first field the other 3 fields gets populated automatically, this works well, but now i had moved over to dynamic fields[] that gets populated by javascript. since the javascript function work with 'id' to autocomplete and fill, it seems that the javascript dynamic fields does not autofill and populate.
Here is the javascript for the dynamic fields:
$(document).ready(function() {
var max_fields = 30; //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('<table class="table table-bordered"><td><input class="form-control" id="state" type="text" name="name[]" required /></td><td><input class="form-control" type="text" name="surname[]" /></td><td><input class="form-control" type="text" name="idnumber[]" required/></td><td><input class="form-control" type="text" name="uniquenumber[]" required/></td><td><input class="form-control" type="text" name="nominee_photo[]" required/></td></table></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
Here is the form
<form method="post" name="form1" action="ajax.php">
<div class="input_fields_wrap">
<button class="add_field_button btn btn-primary btn-flat">Add More users</button>
</div>
<div>
<input class="btn btn-success btn-flat" name="submit" type="submit">
</div>
<input type="hidden" name="insert" value="form1">
</form>
Here is the ajax function to autocomplete fields
$(function() {
$('#uniquenumber').val("");
$('#name').val("");
$('#surname').val("");
$('idnumber').autocomplete({
source: "ajaxpage.php",
minLength: 4,
select: function(event, ui) {
$('#id').val(ui.item.id);
$('#uniquenumber').val(ui.item.uniquenumber);
$('#name').val(ui.item.name);
$('#surname').val(ui.item.surname);
},
response: function(event, ui) {
// ui.content is the array that's about to be sent to the response callback.
if (ui.content.length === 0) {
alert("please insert a valid ID Number");
$("#empty-message").text("No results found");
}
}
});
});

You can use a common class as your dummy class instead of id.
then call autocomplete on that :)
i hope this will help you.

Javascript/ HTML Transferring form Controls to submit

I have been attempting to create a form with 5 text boxes, 1 drop down and a text area. My intention is simple; select an option from the Drop down( except the first i.e "--Select--"), enter the contents into the text box and text area. Once I click submit all the above entered information should get appended to specific links that is hard coded into each drop down option.
My challenge here is that when I click submit, the controls are no getting passed to the new form i.e. the desired page opens,but the form fields do not get entered. I have cross verified and confirmed that the ids are correct.. I'm guessing that i have made a mistake in the validation. Kindly point out my mistake..
Javascript Code
<script type="text/javascript">
function dpdown(form)
{
var a="&name="+document.getElementById('name').value; //textbox
var b="&job_id="+document.getElementById('job_id').value;//textbox
var c="&major"+document.getElementById("major').value;//textbox
var d="&native="+document.getElementById('native').value;//textbox
var e="&age="+document.getElementById('age').value;//textbox
var f="&details="+encodeURIComponent(document.getElementById('details').value);//textarea
var i, counter = 0;
var ddl = document.getElementById("jobs");//dropdown
var selectedValue = ddl.options[ddl.selectedIndex].value;
for(var i=0; i < obj.options.length; i++)
{
if(obj.options[i].selected) // to check if the person has chosen a suitable degree
if (selectedValue == "selectdegree")
{
alert("Please select your correct degree");
}
else
{
++counter;
window.open('https://'+form.elements[i].value+a+b+c+d+e+f,'_blank'); // when the submit button is clicked, all the above fields should get appended to a preset link which has been hardcoded for each degree.
}
}
}
function cleartext()// to clear the form (works correctly)
{
document.form.details.value='';
}
HTML Code
<form onsubmit="dpdown(this); return false;"> // at the beginning of the form
'
'
'
'
<input type="submit" value=" Create form" /> // not working
<input type='reset' value='Clear Ticket' name='reset' onclick="return resetForm(this.form);cleartext();"> // works well

Please check it.
<html>
<head>
<script language="javascript">
function dpdown(){
var a="&name="+document.getElementById('name').value; //textbox
var b="&job_id="+document.getElementById('job_id').value;//textbox
var c="&major"+document.getElementById('major').value;//textbox
var d="&native="+document.getElementById('native').value;//textbox
var e="&age="+document.getElementById('age').value;//textbox
var f="&details="+encodeURIComponent(document.getElementById('details').value);//textarea
var i, counter = 0;
var ddl = document.getElementById("jobs");//dropdown
var selectedValue = ddl.options[ddl.selectedIndex].value;
for(var i=0; i < ddl.length; i++)
{
if(ddl.options[i].selected) // to check if the person has chosen a suitable degree
if (selectedValue == "selectdegree")
{
alert("Please select your correct degree");
}
else
{
++counter;
value=ddl.options[i].value;
window.open('https://'+value+a+b+c+d+e+f,'_blank'); // when the submit button is clicked, all the above fields should get appended to a preset link which has been hardcoded for each degree.
}
}
}
function cleartext()
{
document.form.details.value='';
}
</script>
</head>
<body>
<form>
<input type="text" id="name"/>
<input type="text" id="job_id"/>
<input type="text" id="major"/>
<input type="text" id="native"/>
<input type="text" id="age"/>
<input type="textarea" id="details"/>
<select id="jobs" >
<option value="www.google.com">google</option>
<option value="www.yahoo.com">yahoo</option>
<option value="www.stackoverflow.com">stackoverflow</option>
</select>
<input type="button" value=" Create form" onclick="dpdown();"/>
<input type='reset' value='Clear Ticket' name='reset' onclick="return resetForm(this.form);cleartext();">
</form>
</body>
</html>