I have to pass form data from one HTML page (test.html) to another (test1.html) using Java Script. PHP cannot be used as we have not studied that yet and are not allowed to do so. I am able to pass and print the data but it is getting printed on the same page (test.html), whereas, I want to print it on test1.html. Can you please help me in finding what the issue is? I have attached both the HTML code and the Javascript.
<body>
<form onsubmit="results();" action="test1.html" method="get">
What is your name?
<input id="f1" type="text" name="name" required /><br />
What is your Father Name?
<input id="f2" type="text" name="fname" required />
Gender:
<select name="gender">
<option id="m" value="Male" selected>Male</option>
<option id="f" value="Female">Female</option>
<option id="o" value="Others">Other</option>
</select>
Date of Birth*: <br />
<input type="date" id="b1" name="bday" required><br /><br />
<input id="submit" type="submit" />
</form>
<script src="./response.js"></script>
</body>
Java Script:
function results() {
var name = document.getElementById('f1').value;
var fname = document.getElementById('f2').value;
if (document.getElementById('m').selected) {
gender = document.getElementById('m').value;
}
else if (document.getElementById('f').selected) {
gender = document.getElementById('f').value;
}
else {
gender = document.getElementById('o').value;
}
var dob = document.getElementById('b1').value;
document.write("Here is the Summary of Your Results");
document.write("Your Name Is: ");
document.write(name + "<br/>");
document.write("Your Father Name Is: ");
document.write(fname + "<br/>");
document.write("Your Gender Is: ");
document.write(gender + "</br>");
document.write("Your Date of Birth Is: ");
document.write(dob + "</br>");
You should remove the onsubmit event from the form and in html1.html file you can use URLSearchParams which is simple to get the query params from the url
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
Related
I Know someone has already answered this question, but for some reason it might have been deleted or removed because I can seem to find it anymore, thanks for any help provided strong text
function WriteToFile(passForm) {
set fso = CreateObject("Scripting.FileSystemObject");
set s = fso.CreateTextFile("<your Path>/filename.txt", True);
var firstName = document.getElementById('FirstName');
var lastName = document.getElementById('lastName');
s.writeline("First Name :" + FirstName);
s.writeline("Last Name :" + lastName);
s.Close();
}
<form onSubmit="WriteToFile(this)">
<label>Type your first name:</label>
<input type="text" name="FirstName" id="firstName" size="20">
<label>Type your last name: </abel>
<input type="text" name="LastName" id="lastName" size="20">
<input type="submit" value="submit">
</form>
I'm a javascript noobie. I'm creating a form for visitors to sign up to a webinar. I need to create a "unique code" or unique identifier for each visitor that submits the form.
For this I've created a hidden field called "Unique Code". This unique code is generated from a variable which concatenates a string, the email address value typed in the form and a webinar id that I assign from another variable. When I submit the form I just get the string and the webinar id concatenated by not the email address. The desired resulting value is something like this: GTW-visitor#emailaddress.com-12345. Here's my code:
<form action="/destination/" method="post" name="GTW_Test_Form">
<input type="hidden" name="gtwWebinarId" id="gtwWebinarId" value="">
<input type="hidden" name="uniqueCode" id="uniqueCode" value="">
<label for="email"><b>Email</b></label><br>
<input type="text" placeholder="Enter Email" name="emailAddress" id="emailAddress" required><br>
<label for="name"><b>First Name</b></label><br>
<input type="text" placeholder="Your First Name" name="firstName" id="firstName" required><br>
<label for="name"><b>Last Name</b></label><br>
<input type="text" placeholder="Your Last Name" name="lastName" id="lastName" required><br><br>
<input type="submit" value="Register to webinar">
</form>
And then, the javascript:
<SCRIPT LANGUAGE="JavaScript">
var emailAddressInput = document.getElementById("emailAddress").value;
var webinarId = "12345678";
var uniqueCode = "GTW-" + emailAddressInput + "-" + webinarId;
document.querySelector("#gtwWebinarId").value = webinarId;
document.querySelector("#uniqueCode").value = uniqueCode;
</script>
Thanks in advance,
Daniel
Your script runs even before the form fields have any value, you may have to write your script code inside a function which will be invoked by "onsubmit" event of the form.
<form onsubmit="foo(event)">
<script LANGUAGE="JavaScript">
const foo = (event)=>{
event.preventDefault();
var emailAddressInput = document.getElementById("emailAddress").value;
var webinarId = "12345678";
var uniqueCode = "GTW-" + emailAddressInput + "-" + webinarId;
document.querySelector("#gtwWebinarId").value = webinarId;
document.querySelector("#uniqueCode").value = uniqueCode;
}
</script>
Try to use var emailAddressInput = document.querySelector("#emailAddress").value;
That actually worked! Thank you, Sai!
Using HTML and JavaScript only, I am trying to get the first name, surname details and then a choice of favourite colour from three radio buttons. I can get the first name and surname to work, but cannot do the radio buttons?
HTML file:
<html>
<title>Task 3</title>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form name="formDetails">
First Name:<input type="text" id="firstName"><br>
Last Name:<input type="text" id="lastName"><br>
<p>Favourite Colour:</p>
<input type="radio" name="colour" value="Red">Red<br>
<input type="radio" name="colour" value="Blue">Blue<br>
<input type="radio" name="colour" value="Green">Green<br>
<input type="button" onclick="display()" value="Submit">
</form>
</body>
JavaScript file:
function display(){
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
alert(firstName + " " + lastName);
}
I have no idea how to implement the radio buttons? I have seen some people using jQuery, but I want to stick to just JavaScript here as I am fairly new.
Thanks.
Js:
var colour=document.querySelector('input[name="colour"]:checked').value;
alert(colour);
Steps:
Add a class to all your input tags named check_in.
Use javascript to find all tags with this class
Iterate through each tag to determine which of them is checked. If a tag is checked add it to the variable named results.
Finally get First name and Last name from input box and add these values to your variable named results
function display() {
results = {}
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var all_input = document.getElementsByClassName('check_in');
for (var i = 0; i < all_input.length; ++i) {
if (all_input[i].checked == true) {
results['option'] = all_input[i].value;
}
}
results['firstname'] = firstName;
results['lastname'] = lastName;
console.log(results);
alert('firstname:' + results['firstname'] + ' lastname: ' + results['lastname'] + ' option: ' + results['option']);
}
margin:50px auto auto;
<html>
<title>Task 3</title>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form name="formDetails">
First Name:
<input type="text" id="firstName">
<br>Last Name:
<input type="text" id="lastName">
<br>
<p>Favourite Colour:</p>
<input type="radio" name="colour" value="Red" class="check_in">Red
<br>
<input type="radio" name="colour" value="Blue" class="check_in">Blue
<br>
<input type="radio" name="colour" value="Green" class="check_in">Green
<br>
<input type="button" onclick="display()" value="Submit">
</form>
</body>
I'm generating the empId using Servlet but my boss wants that when the user is typing, he will see the empId instantly based on what he inputs. And I'm not really familiar with JavaScript or JQuery, but I think it's the right tool to do this. Please help?
empId contains the first character in the first name, middle name, and surname plus a dash and the date of birth. Sample would be JHD-01011990.
Here's a simplified version of my HTML form:
<form method="post" action="../profile/SaveProfile">
<label for="empId">Employee ID</label>
<input id="empId" name="empId" type="text" placeholder="FML-MMDDYYYY" required readonly>
<label for="title">Title</label>
<select id="title" name="title">
<option value="0"></option>
<option value="1">Attorney</option>
<option value="2">Doctor</option>
<option value="3">Professor</option>
<option value="4">Engineer</option>
</select>
<label for="fname">Name</label>
<input id="fname" name="fname" type="text" placeholder="* First Name" required>
<input id="mname" name="mname" type="text" placeholder="* Middle Name" required>
<input id="lname" name="lname" type="text" placeholder="* Surname" required>
<input id="ename" name="ename" type="text" placeholder="Ext">
<label for="dob">* Date of Birth</label>
<input id="dob" name="dob" type="text" required>
<label for="doa">Date of Original Appointment</label>
<input id="doa" name="doa" type="text">
<button type="button">Close</button>
<button type="submit">Save</button>
</form>
And if needed, here's also my Java code for generating the empId
public String generateEmployeeId(String dateOfBirth, String firstName, String middleName, String surname) {
String[] birthdate = dateOfBirth.split("-");
String empId = firstName.charAt(0) + middleName.charAt(0) + surname.charAt(0);
empId += "-" + birthdate[1] + birthdate[2] + birthdate[0];
return empId;
}
I'd like to post a sample screen shot of my form but I can't. Please tell me if you need it.
Thank you!
Here's the jQuery code:
$(function() {
$("#fname,#mname,#lname,#dob").keyup(function() {
var birthdate = $("#dob").val().split('-');
var fname = $("#fname").val();
var lname = $("#lname").val();
var mname = $("#mname").val();
var empId = fname.charAt(0) + mname.charAt(0) + lname.charAt(0) + '-' + birthdate.join('');
$("#empId").val(empId);
});
});
It's a straightforward translation of your Java code, wrapped in a jQuery event handler, and using .val() to get the values from the input fields.
DEMO
Beaten to it but still posting. This is same solution using jQuery
$(function(){
$( "#fname,#mname,#lname,#dob").keyup(function( event ) {
if ( event.which == 13 ) {
event.preventDefault();
}
//you probably want to do a bit more checking of the DOB value - such as length etc., I am merely stripping all non numerics from it
id = $("#fname").val().charAt(0) + $("#mname").val().charAt(0) + $("#lname").val().charAt(0) + "-" + $("#dob").val().replace(/\D/g,'');
$("#empId").val(id);
});
})
Demo
below is my code mainly for "Email Validation" but for some reason its not working properly i have no idea why , so do you mind taking a look please. thanks
I guess the main problem is with that line document.getElementById("custEmail").onchange = chkEmail; for some reason chkEmail is a problem...and also the search part myEmail.value.search(+#[a-zA-Z_]+?.[a-zA-
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Web Assignment 1 :Online shopping form</title>
<script type = "text/javascript">
function chkEmail() {
var myEmail = document.getElementById("custEmail");
var pos = myEmail.value.search(+#[a-zA-Z_]+?.[a-zA-Z]{2,6});
if (pos != 0) {
alert("The email you entered (" + myEmail.value +
") is not in the correct form. \n" +
"The correct form is: " +
"whatever#whatever.xxx\n" +
"Please fix it");
myEmail.focus();
myEmail.select();
return false;
} else
return true;
}
</script>
</head>
<body>
<h1> Please fill in the information below </h1>
<form action=""
>
<p>
<h2> Contact Info...</h2>
<pre>
Last Name : <input type="text" name="name2" size="20">
Email : <input type="email" id = "custEmail" onchange ="chkEmail();" size="30">
Mobile number : <input type="text" name="mob" size="15">
</pre>
<input type = "reset" id = "reset" />
<input type = "submit" id = "submit" />
</p>
</form>
<script type = "text/javascript">
<!--
// Set form element object properties to their
// corresponding event handler functions
document.getElementById("custEmail").onchange = chkEmail;
// -->
</script>
</body>
</html>
If you just want a client side validation, why don't you just simply validate using HTML regular expression as follows:
If you just want a client side validation, why don't you just simply validate using HTML regular expression as follows:
<form action="">
<p>
<h2> Contact Info...</h2>
<pre>
Last Name : <input type="text" name="name2" size="20">
Email : <input type="email" id = "custEmail" size="30" pattern="[^#]+#[^#]+\.[a-zA-Z]{2,6}">
Mobile number : <input type="text" name="mob" size="15">
</pre>
<input type = "reset" id = "reset" />
<input type = "submit" id = "submit" />
</form>
See fiddle here:
http://jsfiddle.net/9gthN/