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>

Dropdown Calculate in real time

This is my form I want to after submission package and event id calculate with sum and guest field is always calculate (guest value * 5) then total result show in <div id="result">. How can I do that? and this result set in id="totalprice" value. Thanks
<form action="" class="myform" method="post" id="calculate">
<h1>Reservation Info</h1>
<input type="text" id="datepicker" name="date" placeholder="Date">
<select name="event" id="event">
<option id="50" value="event 1">Event 1</option>
<option id="150" value="event 2">Event 2</option>
<option id="300" value="event 3">Event 3</option>
<option id="500" value="event 4">Event 4</option>
</select>
<input type="text" name="guest" placeholder="Number of gests" />
<h1>Packages</h1>
<select name="package" id="asdasd">
<option id="100" value="100">Package 1</option>
<option id="200" value="200">Package 2</option>
<option id="300" value="300">Package 3</option>
<option id="400" value="400">Package 4</option>
</select>
<div id="result">
<input type="hidden" name="price" id="totalprice" />
<h1>Additional comments</h1>
<textarea rows="4" name="comment" placeholder="Additional comments"></textarea>
<br>
<button type="submit" name="submit">submit</button>
</form>

For calculating total price you need to create a JS function and then you need to call that function on change of guest, event and package field.
Below is the snippet where we have created a JS function calculateTotal() and in that function we are calculating the sum of all 3 fields. Please change calculation logic as per your need.
<form action="" class="myform" method="post" id="calculate">
<h1>Reservation Info</h1>
<input type="text" id="datepicker" name="date" placeholder="Date">
<select name="event" id="event" onchange="calculateTotal()">
<option id="50" value="50">Event 1</option>
<option id="150" value="150">Event 2</option>
<option id="300" value="300">Event 3</option>
<option id="500" value="500">Event 4</option>
</select>
<input type="text" id="guest" name="guest" placeholder="Number of guests" onchange="calculateTotal()"/>
<h1>Packages</h1>
<select name="package" id="package" onchange="calculateTotal()">
<option id="100" value="100">Package 1</option>
<option id="200" value="200">Package 2</option>
<option id="300" value="300">Package 3</option>
<option id="400" value="400">Package 4</option>
</select>
<div id="result">
<input type="hidden" name="price" id="totalprice" />
<h1>Additional comments</h1>
<textarea rows="4" name="comment" placeholder="Additional comments"></textarea>
<br>
<button type="submit" name="submit">submit</button>
</form>
<script>
function calculateTotal(){
var guest = parseInt(document.getElementById("guest").value);
var event = parseInt(document.getElementById("event").value);
var package= parseInt(document.getElementById("package").value);
var sum= event+package+(guest*5);
document.getElementById("totalprice").value=sum;
}
</script>

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>

Hiding the div on page load

person.jsp
<script type="text/javascript">
function validateadvance() {
document.getElementById("fn").style.visibility = "visible";
}
$(function() {
$(".dp").datepicker();
});
</script>
</head>
<body>
<form>
<table border="1" width="500" align="center">
<tr>
<td>
<div id="left-pane"
style="float: left; width: 20%; padding-bottom: 350px">
Candidate_Details <br> Technical_Details <br>
</div>
</td>
<td>
<div id="left-pane">
<br>
<br> ID <input type=text value="" maxlength="10" size="10">
<br>
<br> Name <select>
<option value="start">Startswith</option>
<option value="end">Endswith</option>
<option value="exact">Exact</option>
<option value="anywhere">Anywhere</option>
</select> <input type=text value=""> <br>
<br> Batch <select>
<option value="completed">JINIS Group</option>
<option value="intensionally quit">Brigade Group</option>
<option value="incomplete">Apurva Batch</option>
<option value="not taken">TCS Group</option>
<option value="all">All</option>
</select> <br>
<br> Test_Status <select>
<option value="approved">Approved</option>
<option value="onhold">On_Hold</option>
<option value="pending">Pending</option>
<option value="rejected">Rejected</option>
</select> <br>
<br>
<div id="fn" class="hidethis" style="visibility: 'hidden'">
Email <select>
<option value="start">Startswith</option>
<option value="end">Endswith</option>
<option value="exact">Exact</option>
<option value="anywhere">Anywhere</option>
</select> <input type=text value=""> <br>
<br> Password <select>
<option value="start">Startswith</option>
<option value="end">Endswith</option>
<option value="exact">Exact</option>
<option value="anywhere">Anywhere</option>
</select> <input type=text value=""> <br>
<br> Job Processed <select>
<option value="businessman">Businessman</option>
<option value="ceo">CEO of the company</option>
<option value="design manager">Design Manager</option>
<option value="project leader">Project Leader</option>
</select> <br>
<br> Pdf_Export <input type="radio" name="pdf_export"
value="yes">Yes <input type="radio" name="pdf_export"
value="no">No <input type="radio" name="pdf_export"
value="no">Both <br>
<br> Technical_TestStatus <select>
<option value="completed">Completed</option>
<option value="intensionally quit">Intentionally Quit</option>
<option value="incomplete">Incomplete</option>
<option value="not taken">Not Taken</option>
</select> <br>
<br> Test Inconsistency<br> <input type="checkbox"
name="inconsistency" value="yes">Yes <input
type="checkbox" name="inconsistency" value="no">No <input
type="checkbox" name="inconsistency" value="no">Ok <br>
<br> Date_of_Test <input type="text" id="datepicker"
class="dp" size="8" /> - <input type="text" id="datepicker1"
class="dp" size="8" />
</div>
<div id="left-pane" align="center">
<br>
<br> <input type="button" value="Search"
style="width: 130px; height: 35px;" /> <input
type="button" value="AdvancedSearch"
onclick="return validateadvance()"
style="width: 130px; height: 35px;" />
</div>
</td>
</tr>
</table>
</form>
</body>
//When i am running the code in eclipse, at start div having id "fn" is hidden and onclick of advancesearch the div is visible but when running it in browser div is visible when the page loads.
So please can anyone help me how the div can be made hidden at start and visible on button click even in browser.

You should make sure to execute your JavaScript only after the DOM has been loaded. Otherwise, the JavaScript will run before the div has even been loaded onto the page. To do this using jQuery, you may simply wrap your existing code like this:
$(document).ready(function() {
... your JS code ...
});
… and that should do it.
But also, you need to hide it. That means setting visibility to hidden, not visible.

try this style
//html
<div id="fn" class="hidethis" style="display: none;">
//javascript
function validateadvance() {
document.getElementById("fn").style.display = "block";
}

<script type="text/javascript">
function validateadvance() {
document.getElementById("fn").style.visibility = "visible";
}
$(function() {
$(".dp").datepicker();
document.getElementById("fn").style.visibility = "hidden";
});
</script>