Develop Reference

Transfer data from input to another input

I have some inputs. "input and select" data in the id value of "customer-1", I want to match and transfer with "class" value if click add button.
For example, id="customer-1" "input and select" data in, I want it imported into class="customer-1".
$('.customer-add').click(function(){
var customer_id = $('.customer-add').closest('.customer-bar').find("input").attr("id");
$("." + customer_id).val($("#" + customer_id).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="customer-bar">
<div id="customer-1">
<input type="text" id="customer-name" value="john" disabled />
<input type="text" id="customer-surnamename" value="doe" disabled />
<select name="" id="customer-day" disabled>
<option value="">14</option>
</select>
<select name="" id="customer-month" disabled>
<option value="">02</option>
</select>
<select name="" id="customer-year" disabled>
<option value="">1995</option>
</select>
</div>
<br />
<div class="customer-add" style="cursor:pointer;background:red;color:white;display:inline-block;">Click to add customer details</div>
<br /><br />
<div class="customer-1">
<input type="text" class="customer-name" value="" />
<input type="text" class="customer-surnamename" value="" />
<select name="" class="customer-day">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-month">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-year">
<option value=""></option>
<option value="">2012</option>
<option value="">2015</option>
</select>
</div>
</div>
<br><br><br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="customer-bar">
<div id="customer-2">
<input type="text" id="customer-name" value="john" disabled />
<input type="text" id="customer-surnamename" value="doe" disabled />
<select name="" id="customer-day" disabled>
<option value="">14</option>
</select>
<select name="" id="customer-month" disabled>
<option value="">02</option>
</select>
<select name="" id="customer-year" disabled>
<option value="">1995</option>
</select>
</div>
<br />
<div class="customer-add" style="cursor:pointer;background:red;color:white;display:inline-block;">Click to add customer details</div>
<br /><br />
<div class="customer-2">
<input type="text" class="customer-name" value="" />
<input type="text" class="customer-surnamename" value="" />
<select name="" class="customer-day">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-month">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-year">
<option value=""></option>
<option value="">2012</option>
<option value="">2015</option>
</select>
</div>
</div>
I updated my code. I was able to transfer a single input, but I have to transfer them all

Change id to class
use closest and next
I assume you meant copy from customer1 to customer2
I cannot make a working snippet because you have the same IDs and no names, but the code will look this this
$(function() {
$(".customer-add").on("click",function() {
const $container = $(this).closest(".customer-bar")
const $nextContainer = $container.next(".customer-bar")
const $currentElements = $(":input",$container);
const $nextElements = $(":input",$nextContainer);
$currentElements.each(function(i) {
console.log(i,$(this).attr("class"))
$nextElements.eq(i).val($(this).val())
})
})
})

I updated my code. I was able to transfer a single input, but I have to transfer them all

select option text input type hidden display block in javascript

When I select the "Number" option, it does not show <input id="number">.
I want all numbers to be selected without input, but when the "Number" option is clicked, it shows <input id="number">. Users can enter a number into <input id="number">.
var select = document.getElementById("select");
$("#select").change(function() {
var res = select.options[select.selectedIndex].getAttribute("name");
document.getElementById('number').value = select.options[select.selectedIndex].getAttribute("name");
$('#number').hide();
$('#help').hide();
$('#' + $(this).val()).show();
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<form action="index.php" method="post">
<select name="select" id="select">
<option value="1" name="1">1</option>
<option value="2" name="2">2</option>
<option value="3" name="3">3</option>
<option value="number" name="">Number</option>
<option value="help" name="">Help</option>
</select>
<input id="number" type="hidden" name="number" value="Choose" style="display:none" />
<label id="help" style="display:none">Help!</label>
<input type="submit" value="submit" />
</form>

If you put type="number" instead of type="hidden", it will force user to input digits only.
var select= document.getElementById("select");
$("#select").change(function(){
var res=select.options[select.selectedIndex].getAttribute("name");
document.getElementById('number').value=select.options[select.selectedIndex].getAttribute("name");
$('#number').hide();
$('#help').hide();
$('#' + $(this).val()).show();
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<form action="index.php" method="post">
<select name="select" id="select">
<option value="1" name="1">1</option>
<option value="2" name="2">2</option>
<option value="3" name="3">3</option>
<option value="number" name="">Number</option>
<option value="help" name="">Help</option>
</select>
<input id="number" type="number" name="number" value="Choose" style="display:none"/>
<label id="help" style="display:none">Help!</label>
<input type="submit" value="submit"/>
</form>

Don't use type="hidden" .Because its not visible on html if the display:block also .And already you are using jquery so better use selector with jquery $(this).find('option:selected').attr('name')
var select = document.getElementById("select");
$("#select").change(function() {
var res = $(this).find('option:selected').attr('name')
$('#number').val(res)
$('#number').hide();
$('#help').hide();
$('#' + $(this).val()).show();
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="index.php" method="post">
<select name="select" id="select">
<option value="1" name="1">1</option>
<option value="2" name="2">2</option>
<option value="3" name="3">3</option>
<option value="number" name="">Number</option>
<option value="help" name="">Help</option>
</select>
<input id="number" name="number" value="Choose" style="display:none" />
<label id="help" style="display:none">Help!</label>
<input type="submit" value="submit" />
</form>

Drop Down Box Value enables Field

I have the following code to run my Dropdown box and field I want to disable when the value is not equal to value in dropdown.
My code is as follows.
document.getElementById('type').addEventListener('change', function() {
if (this.value == Hijacking) {
document.getElementById('hijacking').disabled = false;
} else {
document.getElementById('hijacking').disabled = true;
}
});
<div class="width-qrtr">
<label>Type of event</label>
<select name="Type" id="select">
<option value="">Select Type</option>
<option value="Fraud">Fraud</option>
<option value="Theft">Theft</option>
<option value="Accident">Accident</option>
<option value="Hijacking">Hijacking</option>
</select>
</div>
<div class="width-qrtr">
<label>Police Station</label>
<input id="textbox" disabled="true" type="text" name="Test" />
</div>
It keeps the field disabled. If i change the values to numerical it works but I need the Value for SQL to be inserted into my DB

document.getElementById works only if you put the corresponding id in defined by id="...". Also to compare string values you have to put them in quotes => this.value == 'Hijacking'.
The corrected code looks like this:
document.getElementById('select').addEventListener('change', function() {
if (this.value == 'Hijacking') {
document.getElementById('textbox').disabled = false;
} else {
document.getElementById('textbox').disabled = true;
}
});
<div class="width-qrtr">
<label>Type of event</label>
<select name="Type" id="select">
<option value="">Select Type</option>
<option value="Fraud">Fraud</option>
<option value="Theft">Theft</option>
<option value="Accident">Accident</option>
<option value="Hijacking">Hijacking</option>
</select>
</div>
<div class="width-qrtr">
<label>Police Station</label>
<input id="textbox" disabled="true" type="text" name="Test" />
</div>

Few bugs in your code , fixed as follows:
document.getElementById('select').addEventListener('change', function() {
if (this.value == "Hijacking") {
document.getElementById('textbox').disabled = false;
} else {
document.getElementById('textbox').disabled = true;
}
});
<div class="width-qrtr">
<label>Type of event</label>
<select name="Type" id="select">
<option value="">Select Type</option>
<option value="Fraud">Fraud</option>
<option value="Theft">Theft</option>
<option value="Accident">Accident</option>
<option value="Hijacking">Hijacking</option>
</select>
</div>
<div class="width-qrtr">
<label>Police Station</label>
<input id="textbox" disabled="true" type="text" name="Test" />
</div>

How to add and delete the multiple form field based on selection in php

I create the form with multiple form field.I have the Form Fields are Name,Mobile,Email and No Of Referrer. Based on selection option(No Of Referrer)....
Here i create the form for Refer and earn for student admission process.... when the user select no of referrer as 2 i need to show reference details fields 2 times if change again 1 means show the field one time.... After select the No of Referrer field i show the following field Name,Email,Mobile,City,Course...
$(document).ready(function() {
toggleFields();
$("#select_btn").change(function() {
toggleFields();
});
});
//this toggles the visibility of our parent permission fields depending on the current selected value of the underAge field
function toggleFields() {
if ($("#select_btn").val() <= 5 && $("#select_btn").val() != 0)
$("#parentPermission").show();
else
$("#parentPermission").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST">
<p>Name:
<input type="text" name="player_name" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>No of Referrer:
<select id="select_btn" name="age">
<option value="0">--Select--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<div id="parentPermission">
<p>Name:
<input type="text" name="reference_name" />
</p>
<p>Mobile:
<input type="text" name="reference_mobile" />
</p>
<p>Email:
<input type="text" name="reference_email" />
</p>
<p>City:
<select id="city" name="City">
<option value="0">--Select City--</option>
<option value="Mumbai">Mumbai</option>
<option value="Chennai">Chennai</option>
<option value="Delhi">Delhi</option>
<option value="Jammu">Jammu</option>
<option value="Ooty">Ooty</option>
</select>
</p>
<p>Course:
<select id="course" name="Course">
<option value="B.com">B.com</option>
<option value="B.A">B.A</option>
<option value="MBA">MBA</option>
<option value="B.Sc">B.Sc</option>
<option value="BCA">BCA</option>
</select>
</p>
<p>You must have parental permission before you can play.</p>
</div>
<p align="center">
<input type="submit" value="Join!" />
</p>
</form>
Now it is the form field....But does not dynamically shows the form field based on selection... For example if i select No of Referrer option is 2 then need to show the form field 2 times... change it 3 means show 3 times,change to 1 means show only one times... How to do show and hide the form field based on the selection???

You need to use $('div').clone().html(). See the below working solution and it has some changes in html.
$(document).ready(function() {
$('#hidden-div').hide();
$("#select_btn").change(function() {
toggleFields();
});
});
function toggleFields() {
var selectVal = $("#select_btn").val();
if (selectVal <= 5) {
$hiddenHtml = $('#hidden-div').clone().html();
$("#parentPermission").html('');
for (var i = 0; i < selectVal; i++) {
$("#parentPermission").append($hiddenHtml);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST">
<p>Name:
<input type="text" name="player_name" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>No of Referrer:
<select id="select_btn" name="age">
<option value="0">--Select--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<div id="hidden-div">
<p>Name:
<input type="text" name="reference_name" />
</p>
<p>Mobile:
<input type="text" name="reference_mobile" />
</p>
<p>Email:
<input type="text" name="reference_email" />
</p>
<p>City:
<select id="city" name="City">
<option value="0">--Select City--</option>
<option value="Mumbai">Mumbai</option>
<option value="Chennai">Chennai</option>
<option value="Delhi">Delhi</option>
<option value="Jammu">Jammu</option>
<option value="Ooty">Ooty</option>
</select>
</p>
<p>Course:
<select id="course" name="Course">
<option value="B.com">B.com</option>
<option value="B.A">B.A</option>
<option value="MBA">MBA</option>
<option value="B.Sc">B.Sc</option>
<option value="BCA">BCA</option>
</select>
</p>
<p>You must have parental permission before you can play.</p>
</div>
<div id="parentPermission">
</div>
<p align="center">
<input type="submit" value="Join!" />
</p>
</form>

This could be realized via .clone() and editing ids / names of the cloned objects. Alternatively: Your #select_btn already has number values for it, use them in a foreach to directly modify the html() output.

$(document).ready(function() {
$('#hidden-div').hide();
$("#select_btn").change(function() {
toggleFields();
});
});
function toggleFields() {
var selectVal = $("#select_btn").val();
if (selectVal <= 5) {
$hiddenHtml = $('#hidden-div').clone().html();
$("#parentPermission").html('');
for (var i = 0; i < selectVal; i++) {
$("#parentPermission").append($hiddenHtml);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST">
<p>Name:
<input type="text" name="player_name" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>No of Referrer:
<select id="select_btn" name="age">
<option value="0">--Select--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<div id="hidden-div">
<p>Name:
<input type="text" name="reference_name" />
</p>
<p>Mobile:
<input type="text" name="reference_mobile" />
</p>
<p>Email:
<input type="text" name="reference_email" />
</p>
<p>City:
<select id="city" name="City">
<option value="0">--Select City--</option>
<option value="Mumbai">Mumbai</option>
<option value="Chennai">Chennai</option>
<option value="Delhi">Delhi</option>
<option value="Jammu">Jammu</option>
<option value="Ooty">Ooty</option>
</select>
</p>
<p>Course:
<select id="course" name="Course">
<option value="B.com">B.com</option>
<option value="B.A">B.A</option>
<option value="MBA">MBA</option>
<option value="B.Sc">B.Sc</option>
<option value="BCA">BCA</option>
</select>
</p>
<p>You must have parental permission before you can play.</p>
</div>
<div id="parentPermission">
</div>
<p align="center">
<input type="submit" value="Join!" />
</p>
</form>

Show/hide input text after click with multiple selectbox

I have selectbox like this
rows 1
<form action="" method="POST">
<select id="showhide">
<option value="0">-SELECT-</option>
<option value="1">Show</option>
<option value="2">Hide</option>
</select>
<input id="txtname" type="text" name="txtname" style="display:none;">
</form>
rows 2
<form action="" method="POST">
<select id="showhide">
<option value="0">-SELECT-</option>
<option value="1">Show</option>
<option value="2">Hide</option>
</select>
<input id="txtname" type="text" name="txtname" style="display:none;">
</form>
and javascript
$(document).ready(function(){
$("#showhide").change(function(){
var valx = $('#showhide').val();
if(valx == '1'){
$("#txtname").show();
}else if(valx == '2'){
$("#txtname").hide();
}
});
});
when i use selectbox in rows 1 show/hide the inputbox in rows 1 working, but when i use selectbox in rows 2 the show/hide not working like rows 1.
how to solved this.
thankyou

Replace id attribute with name in select, and remove id attribute from input, because id attribute must be unique over all document.
<form action="" method="POST">
<select name="showhide">
<option value="0">-SELECT-</option>
<option value="1">Show</option>
<option value="2">Hide</option>
</select>
<input type="text" name="txtname" style="display:none;">
</form>
<form action="" method="POST">
<select name="showhide">
<option value="0">-SELECT-</option>
<option value="1">Show</option>
<option value="2">Hide</option>
</select>
<input type="text" name="txtname" style="display:none;">
</form>
JS:
$(document).ready(function(){
$("select[name='showhide']").change(function(){
$(this).siblings('input[name="txtname"]').toggle(this.value == 1);
});
});
Example: https://jsbin.com/pavijufige/edit?html,js,output

Do this changes.
In the current scenario,use $(this) to get current context selection
$(document).ready(function() {
$("select.showhide").change(function() {
var valx = $(this).val();
if (valx == '1') {
$(this).next().show();
} else if (valx == '2') {
$(this).next().hide();
}
});
});
Add class class="showhide" to your select drop-down.
Id Should be unique.So, you can not use same id twice.
HTML :
<form action="" method="POST">
<select class="showhide">
<option value="0">-SELECT-</option>
<option value="1">Show</option>
<option value="2">Hide</option>
</select>
<input id="txtname" type="text" name="txtname" style="display:none;">
</form>
<form action="" method="POST">
<select class="showhide">
<option value="0">-SELECT-</option>
<option value="1">Show</option>
<option value="2">Hide</option>
</select>
<input id="txtname" type="text" name="txtname" style="display:none;">
</form>