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
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 have a problem with the javascript field. When I type a number in the first form the same number appears in the second form, Please help me solve this.
Thanks before
The first field :
<div class="form-group">
<label>Price</label>
<input type="text" class="form-control" id="formattedNumberField" name="price" placeholder="IDR. .." required>
</div>
Second Field :
<div class="form-group">
<label>Insurance</label>
<input type="text" class="form-control" id="formattedNumberField2" name="insurance"
placeholder="IDR. .." required>
</div>
Javascript :
var fnf = document.getElementById("formattedNumberField");
fnf.addEventListener('keyup', function(evt) {
var n = parseInt(this.value.replace(/\D/g, ''), 10);
fnf.value = n.toLocaleString();
}, false);
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!
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');
I'm trying to copy the First Name and Last Name field into another 'Username' field dynamically. The Username field should also be lowercase and have a hyphen in the middle. So for example,
if First Name = John
and Last Name = Smith
then Username (dynamically-created) = john-smith
Any ideas?
You can do this with plain JavaScript. I'm assuming there is a button of some sort to add the fields together. Also assuming that your Input is <input> text boxes.
document.getElementById("button").addEventListener("click", function() {
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var userName = document.getElementById("userName");
userName.value = firstName.toLowerCase() + "-" + lastName.toLowerCase();
});
<input id="firstName" type="text" placeholder="First Name" />
<input id="lastName" type="text" placeholder="Last Name" />
<input id="userName" type="text" placeholder="Username" disabled />
<button id="button">Create Username</button>
To make it dynamically update, use onkeydown or onkeyup. Follow kemotoe's answer.
Another option is using onkeyupevent to make it dynamic. This also takes care of any uppercase letters.
function generateFullName() {
document.getElementById("username").innerText =
document.getElementById("fName").value.toLowerCase() +
"-" +
document.getElementById("lName").value.toLowerCase();
}
First Name <input type="text" id="fName" onkeyup="generateFullName()" />
Last Name <input type="text" id="lName" onkeyup="generateFullName()" /> <br/>
Username: <span id="username" />
You can do it with jquery, too. This is a working example.
Working Fiddle
HTML
<input id = "first"> <br> <br>
<input id = "last"> <br> <br>
<input id = "username">
<button id ="generate">Generate</button>
JS
$("#generate").on("click", () => {
let first = $("#first").val()
let last = $("#last").val()
$("#username").val(first+ "-"+last)
})
$('#firstName').change(updateUsername());
$('#lastName').change(updateUsername());
function updateUsername(){
$('#userName').val($('#firstName').val().toLowerCase() +"-"+$('#lastName').val().toLowerCase() );
}
Bind with change event to update the user name field
You can use the onkeypress event.
It would look like this
document.querySelector('.form').addEventListener(("keypress"), () => {
//Code to edit the username field goes here
//Try pressing a key inside the form
alert('Hi');
});
<form class='form'>
<input type="text">
<input type="text" >
<input type="text" class='username'>
</form>