Develop Reference

How to transfer multiple textbox value from one webpage to another web page in multiple textbox in html

i want to transfer the input value from these textbox to another web page textbox in html
there are two files
this is the first web page
javscript code
function to transfer file to another web page
function transferdata() {
var inputTest = document.getElementById('FROM').value;
var inputTest1 = document.getElementById('TO').value;
var inputTest2 = document.getElementById('jdate').value;
if (inputTest=="") {
window.open('report_pengambilan_singgle.html','','height=650,width=1200');
}
else {
window.open('trial25.html?name=' + inputTest,'','height=650,width=1200');
}
}
html code
this is the body of the code
<form >
<label ><H2>SOURCE</h2></label><br>
<input type="text" id="FROM" name="FROM" ><BR>
<label ><H2>DESTINATION</H2></label><BR>
<input type="text" id="TO" name="TO" ><BR>
<h2> Date of Journey<input type = "date" name = "jdate" id = "jdate"></h2>
<br>
</form>
second file this the another file which will recive the data
javscript code
// Recive data from destination.html
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
document.getElementById("source1").value = data.name;
document.getElementById("date").value = data.name;
document.getElementById("dest").value = data.name;
}
html code
this is the body of the another web page code
<form>
<h3> Source <input type = "text" name = "source1" id = "source1" /> </h3>
<h3> Destination <input type = "text" name = "dest" id = "dest" /> </h3>
<h3> Booking Date <input type = "date" name = "date1" id = "date1" /> </h3>
</form>
this the input field in which i want to recive data from first web page input field

HTML form failed to validate using the jQuery Validation Plugin

I'm aware that this is likely poorly formatted and/or coded. I'm looking for an answer as to why it doesn't give a message that the first name field is required. The submit button at the moment isn't working at all, no values are being printed to the screen. When just doing a form scrape it was working. Could anyone tell me why the validation for the one form isn't working? I made sure my jQuery validation plugin is hooked in. Bits of my html and JS code are below. This is for a school project.
<form id = "form">
<div>
<label for = "firstName">First Name</label>
<input type = "text" id = "firstName" placeholder = "Type First Name Here"
name = "firstName" required autofocus >
<br><br>
<label for = "lastName">Last Name</label>
<input type = "text" id = "lastName" name = "lastName">
</div>
<br>
<div>
<label for = "phone">Phone Number</label>
<input type = "tel" id = "phone">
</div>
<br>
<div> <p>
<label>Email</label>
<input type = "email" id = "email">
Password
<input type = "password" id = "pass">
</p>
</div>
<br>
<div> Which level of skill do you believe fits you (or your child) best?
</div>
Beginner<input type = "radio" value = "Beginner" name = "level">
Intermediate<input type = "radio" value = "Intermediate" name = "level">
Advanced<input type = "radio" value = "Advanced" name = "level">
<div id = "level"></div>
<br>
<br>
<label for = "age-spinner">Student Age</label>
<input id = "age-spinner" value = "5">
<br>
<br>
<div>Which days are you most available for a weekly piano lesson?</div>
<input type = "checkbox" value = "Monday" id = "monday" name = "days">Monday
<input type = "checkbox" value = "Tuesday" id = "tuesday" name =
"days">Tuesday
<input type = "checkbox" value = "Wednesday" id = "wednesday" name =
"days">Wednesday
<input type = "checkbox" value = "Thursday" id = "thursday" name =
"days">Thursday
<input type = "checkbox" value = "Friday" id = "friday" name = "days">Friday
<input type = "checkbox" value = "Saturday" id = "saturday" name =
"days">Saturday
<br>
<br>
<div>Best starting date? </div>
<input type = "text" id = "startDate">
</form>
<br><br>
<input type = "submit" id = "submit">
<button type= "button" id = "reset">Reset</button>
^^HTML Code. JS Code below. These are held in separate files.
$( "input[type='submit']" ).button();
$.validator.setDefaults({
submitHandler: function(){
var firstName = $("#firstName").val();
var lastName =$("#lastName").val();
var phone = $("#phone").val();
var email = $("#email").val();
var pass = $("#pass").val();
var age = $("#age-spinner").val();
var level = $("input[name='level']:checked").val();
var startDate = $("#startDate").datepicker({ dateFormat: 'dd,MM,yyyy' }).val();
var days = " ";
//function to fill in data inputted from days
$("input[name='days']:checked").each(function(){
days += $(this).val() + ", "
});
$("#output").append("<br><br>Name: " + firstName + " " + lastName)
.append("<br>Phone #: " + phone)
.append("<br>Email: " + email)
.append("<br>Password: " + pass)
.append("<br>Student Age: " + age)
.append("<br>Student Level: " + level)
.append("<br>Proposed Start Date: " + startDate)
.append("<br>Available Days: " + days);
alert("Passed validation and submitted.");
}//end submitHandler
});
$("#form").validate();

how to pass calculated values using javascript

the following values are to calculate the user entered values, these are calculated and passed to the text field,
if(computer && monitor && tv && laptop && cell)
{ // getting the text field the values and calculated
var valueCom = document.getElementById("computer").value ;
var valueMon = document.getElementById("monitor").value ;
var valueTv = document.getElementById("tv").value ;
var valueLap = document.getElementById("laptop").value ;
var valueCel = document.getElementById("cell").value;
var finalCom = valueCom * 0.1818937134 ;
var finalMon = valueMon * 0.056842 ;
var finalTv = valueTv * 0.056842 ;
var finalLap = valueLap * 0.090947 ;
var finalCel = valueCel * 0.045473 ;
var totalTonnes = finalCom + finalMon + finalTv + finalLap + finalCel;
var totalCarbon = totalTonnes * 1 ;
var totalTree = totalTonnes * 17.1969 ;
var totalPetrol = totalTonnes * 286.396 ;
var totalPlastic = totalTonnes * 646.421 ;
// pass this above four values to the textfield
}
<input type="text" name="carbon" >
<input type="text" name="tree" >
<input type="text" name="petrol" >
<input type="text" name="plastic" >
// field to pass values here
how to pass this values using java script to the text field. can anyone help me please

you want to add id to text field,
<input type="text" name="carbon" id="carbon">
<input type="text" name="tree" id="tree">
<input type="text" name="petrol" id="petrol">
<input type="text" name="plastic" id="plastic">
then after javascript,
document.getElementById("carbon").value=totalCarbon;
document.getElementById("tree").value=totalTree;
document.getElementById("petrol").value=totalPetrol;
document.getElementById("plastic").value=totalPlastic;
and also you can use to value set by name,
document.getElementsByName("plastic")[0].value = totalPlastic;
......
or,
document.getElementById("plastic").setAttribute('value',totalCarbon);
.....

Assign your resultant text field with id="result" or anything. Then, you can put your result as $(#result).val(yourCalcultedResult);

set the value property
document.getElementById("carbon").value = totalCarbon;
document.getElementById("tree").value = totalTree;
document.getElementById("petrol").value = totalPetrol;
document.getElementById("plastic").value = totalPlastic;
and set the ids to the respective elements
<input type="text" name="carbon" id="carbon" >
<input type="text" name="tree" id="tree" >
<input type="text" name="petrol" id="petrol" >
<input type="text" name="plastic" id="plastic" >
Or if you still want to use names only, then make it
document.getElementsByName("carbon")[0].value = totalCarbon;
document.getElementsByName("tree")[0].value = totalTree;
document.getElementsByName("petrol")[0].value = totalPetrol;
document.getElementsByName("plastic")[0].value = totalPlastic;

document.getElementsByName("carbon")[0].value = totalCarbon;
document.getElementsByName("tree")[0].value = totalTree;
document.getElementsByName("petrol")[0].value = totalPetrol;
document.getElementsByName("plastic")[0].value = totalPlastic;

If your controls are in a form, like:
<form>
<input type="text" name="carbon">
<input type="text" name="tree">
<input type="text" name="petrol">
<input type="text" name="plastic">
...
</form>
then you can get a reference to the form and access them as named properties of the form, e.g.
var form = document.forms[0];
form.carbon.value = totalCarbon;
form.tree.value = totalTree;
...
Just make sure you don't give form controls a name that is the same as a form property, like submit or name, as these will shadow the form's default properties of the same name (so you can't call form.submit() or access the form's name, if it has one).

//globally i declared carbon, tree, petrol, plastic
document.getElementById("carbon").value = carbon ;
document.getElementById("tree").value = tree ;
document.getElementById("petrol").value = petrol ;
document.getElementById("plastic").value = plastic ;

TypeError: document.getElementById(...); is null in Javascript

All of my var statements uses identifiers:
var identifier = document.getElementById("somename");
So why am I getting a null error?
I ran this code in the Javascript runner and got the null error message. And in my browsers Firefox and Chrome I don't get any errors or warnings. When I run the code in the browser and click the button to activate the event handler, the form clears. It's not going to a server anyway. It's just practice. I'm taking a course in javascript and Dynamic HTML. If anybody care to look at my code and tell me what I'm doing wrong I'd appreciate it.
There's got to be something that I'm not getting right. Here is the script:
window.onload = function(){
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
var loginName = document.getElementById("uname").value;
var myEmail = document.getElementById("email").value;
var pass1 = document.getElementById("password1").value;
var pass2 = document.getElementById("password2").value;
if(document.getElementById("uname").value == ""){
return false;
alert("Your user name can't be blank.");
};
if(pass1.value !== pass2.value){
get.documentElementById("signin").value.disabled = true;
return false;
alert("Please retype your password.");
}else if(pass1.value === pass2.value){
alert("Welcome!");
};
};
HTML
<body>
<form action = "" name = "form" method = "Post">
<label for="fname">First Name:</label><input type = "text" id = "fname"required></input>
<label for="lname">Last Name:</label><input type = "text" id = "lname" required></input>
<label for="uname">User Name:</label><input type = "text" id = "uname" required></input><br/>
<label for="password1">Password:</label><input type = "password" id = "password1"required ></input><br/>
<label for="password2">Verify Password:</label><input type = "password" id = "password2"required ></input><br/>
<label for="email">Email Address:</label><input type = "email" id = "email" required></input><br/>
<button type = "submit"id = "signin" onclick = "function()">Submit</button>
</form>
<script src="signUp.js"></script>
</body>

I cleaned up your code for you. There were several spots where you had errors (e.g., typing pass1.value instead of just pass1. This should work, but of course take time to study it to see what I changed and understand why. Here's a fiddle showing it working. Note that you should never expect this type of code to run in the "runners" that you've made reference to; the code here makes explicit reference to particular elements in the DOM, which the runners won't have. (Using a site like JSFiddle is better for this sort of thing, since you can put HTML into it as well).
var submitForm = function () {
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
var loginName = document.getElementById("uname").value;
var myEmail = document.getElementById("email").value;
var pass1 = document.getElementById("password1").value;
var pass2 = document.getElementById("password2").value;
console.log(pass1, pass2);
if (document.getElementById("uname").value == "") {
alert("Your user name can't be blank.");
return false;
}
if (pass1 !== pass2) {
document.getElementById("signin").value.disabled = true;
alert("Please retype your password.");
return false;
} else if (pass1 === pass2) {
alert("Welcome!");
}
};
<body>
<form action="" name="form" method="POST">
<label for="fname">First Name:</label><input type ="text" id = "fname" required></input>
<label for="lname">Last Name:</label><input type = "text" id = "lname" required></input>
<label for="uname">User Name:</label><input type ="text" id ="uname" required></input><br/>
<label for="password1">Password:</label><input type="password" id="password1" required></input><br/>
<label for="password2">Verify Password:</label><input type="password" id="password2" required ></input><br/>
<label for="email">Email Address:</label><input type="email" id="email" required></input><br/>
<button type="submit" id="signin" onclick="submitForm()">Submit</button>
</form>
</body>

Creating Id using javascript

I want to create staffid from three different textboxes values by getting their first letter & adding auto increment number atlast.
eg "staffname", "gender", "designation" result staffid: sgd01 & I want to auto display in the staff id textbox while staffid textbox is disabled. Here is the code below:
<input name="staffname" id="staffname" size="30" type="text" value placeholder=" Staff Name" onkeyup="quick()" class="formTxtInput">
Script
function quick() {
var gender = document.getElementById('gender').value;
var staffname = document.getElementById('staffname');
var desg = document.getElementById('desg').value;
var gen = gender.charAt(0);
var sn = staffname.charAt(0);
var dg = desg.charAt(0);
var val = gen + sn + dg;
document.getElementById('staffid').value = val;
}

You have a missing .value for var staffname. It should be
var staffname = document.getElementById('staffname').value;
Also your function needs to be called on every keyup on each of the 3 input boxes so that updated values can be processed
Here is a working sample: http://jsbin.com/vobikejejo/1/
Hope this helps :)

You can try by updating your function as below:
<script>
var num=01;
function quick() {
num+=1;
var gender = document.getElementById('gender').value;
var staffname = document.getElementById('staffname').value;
var desg = document.getElementById('desg').value;
var gen = gender.charAt(0);
var sn = staffname.charAt(0);
var dg = desg.charAt(0);
var val = gen + sn + dg + num;
document.getElementById('staffid').value = val;
}
By default there is no value, so it is not working. Try by setting the default value.
<input name="staffname" id="staffname" size="30" type="text" value="staffname" placeholder=" Staff Name" onkeyup="quick()" class="formTxtInput">
<input name="gender" id="gender" size="30" type="text" value="gender" placeholder=" Staff Name" class="formTxtInput">
<input name="desg" id="desg" size="30" type="text" value="desg" placeholder=" Staff Name"class="formTxtInput">
<input name="staffid" id="staffid" size="30" disabled="disabled" type="text" value placeholder=" Staff Name" class="formTxtInput">
YOu can view demo here 1