CODEWITHSUNDEEP
javascripthtmlforms
Mookie
Mookie

Reputation: 15

HTML. changing one form field when another is changed

I am still a beginner but I am guessing I need to use Javascript to do this? Can it be done with pure html?

This is what I want to accomplish: Upon the field of “ID” change. The value of the email” will automatically be generated by adding the suffix of @gmail.ca.

Upvotes: 0

Views: 1508

Answers (2)

James Taylor
James Taylor

Reputation: 6258

I think you are looking for something like this (written in pure Javascript):

document.getElementById("input").onkeydown = function () {
    var j = document.getElementById("email");
    j.innerHTML = document.getElementById("input").value + "@gmail.ca";
}

Check out this JSFiddle.

Here's a little explanation of what's going on (for learning purposes):

In the HTML, there's an input and a div. In Javascript, an onkeydown listener is set for the input text field. This means the function will be called after every keystroke.

Then, the innerHTML of the div is updated with the input value with "gmail.ca" appended to the end.

Hope this helps!

Upvotes: 3

Patema
Patema

Reputation: 31

It has to be done with jQuery or pure JS.

HTML:

<input id="ID" type="text"></input>
<br>
<label id="email"></label>

JS:

$("#ID").keyup (function () {
    $("#email").text($("#ID").val() + '@gmail.ca');
});

Fiddle.

Upvotes: 0

Related Questions