I am a newbie in HTML5 and javascript. I want an alert box to display data(firstname and lastname). Data must be taken from textboxes on the form. My code is below, but the alertbox doesn't work.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br>
Last name: <input type="text" name="lname" /><br>
</form>
<script>
function display_alert()
{
alert(fname +lname);
}
</script>
<input type="button" onclick="display_alert()" value="Display alert box">
</body>
</html>
I am a newbie in HTML5 and javascript. I want an alert box to display data(firstname and lastname). Data must be taken from textboxes on the form. My code is below, but the alertbox doesn't work.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br>
Last name: <input type="text" name="lname" /><br>
</form>
<script>
function display_alert()
{
alert(fname +lname);
}
</script>
<input type="button" onclick="display_alert()" value="Display alert box">
</body>
</html>
3 Answers
Reset to default 2You need to give ids to inputs tags
<form>
<input id="a" type="text"/>
<input id="b" type="text"/>
<input type="button" onclick="display_alert();" />
</form>
and then use them inside your js code:
<script lang="javascript">
function display_alert() {
var fn = document.getElementById('a');
var ln = document.getElementById('b');
alert(fn.value + ' ' + ln.value);
}
</script>
You can use jQuery.
html:
First name: <input type="text" id='fname' /><br>
Last name: <input type="text" id='lname'/><br>
<input type="button" onclick="display_alert();" value="Display alert box">
script:
function display_alert() {
fname = $('#fname').val();
lname = $('#lname').val();
alert(fname+' '+lname);
}
demo
Jquery might be useful for the future.
You need to get values using getElementsByName function in your script.
Try changing your script with below one.
<script>
function display_alert()
{
var fname = document.getElementsByName("fname")[0].value;
var lname = document.getElementsByName("lname")[0].value;
alert(fname + ' ' + lname);
}
</script>
Note: Just for your information, there is no relation with HTML5 to this.