HTML forms and javascript

Artful_Badger · 27-11-2013 1:46pm #1

Trying to get the value of a form field into a javascript function but no matter what I do it wont work. Tired running it off onClick, on submit, tried every variation of the wording of the input to the function I could find online but still no joy. Script works fine when I hard code a value but just doesnt get the form value I'm sending down.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Date check</title>
</head>
<body>
	<form>
		<label for="DOB">Enter Date of Birth</label>
		<input type="date" name="dateOfBirth" id="dateOfBirth"/><br>
		<input type="submit" value="Send Form" name="submit" onsubmit="check(this.dateOfBirth.value);"/>
	</form>
	<script>
		function check(input)
		{
			var year = input.getFullYear();
			var currentDate = new Date();
			var currentYear = currentDate.getFullYear();
			var difference = year - currentYear;
			document.write(difference);
		}
	</script>
</body>
</html>

oscarBravo · 27-11-2013 2:01pm

The "this" value refers to the element to which the event applies. "onsubmit" is a form event - you'll have to getElementById to get the value of the input in an onsubmit event handler.

tricky D · 27-11-2013 2:05pm

Though not directly related, you could also explore some of the new html5 form features to give some extra functionality, then pass the value to the script.

<input type="date" name="dateOfBirth" id="dateOfBirth" required  aria-required="true" placeholder="YYYY-MM-DD">

Artful_Badger · 27-11-2013 2:13pm

oscarBravo wrote: »

The "this" value refers to the element to which the event applies. "onsubmit" is a form event - you'll have to getElementById to get the value of the input in an onsubmit event handler.

If it refers to the element to which the event applies it refers to the form right ? Does "this.getElementById()" get the element specified from "this" aka the form then ?

I've tried onsubmit="check(this.getElementByID('dateOfBirth') and still didnt work.

Artful_Badger · 27-11-2013 2:14pm

tricky D wrote: »
You could explore some of the new html5 form features which bypass much of the need to check the input...
<input type="date" name="dateOfBirth" id="dateOfBirth" required  aria-required="true" placeholder="YYYY-MM-DD">

What do you mean by the need to check the input ?

oscarBravo · 27-11-2013 2:21pm

Artful_Badger wrote: »

If it refers to the element to which the event applies it refers to the form right ? Does "this.getElementById()" get the element specified from "this" aka the form then ?

I've tried onsubmit="check(this.getElementByID('dateOfBirth') and still didnt work.

You need to use document.getElementById("dateOfBirth").value.

tricky D · 27-11-2013 2:21pm

Artful_Badger wrote: »

What do you mean by the need to check the input ?

Didn't read your OP properly, got distracted. Nevertheless I'd suggest you stick the required and placeholder stuff in anyway.

Artful_Badger · 27-11-2013 2:28pm

oscarBravo wrote: »

You need to use document.getElementById("dateOfBirth").value.

onsubmit="check(document.getElementById('dateOfBirth').value)"

Still doesnt work for me. Sorry if I'm missing something glaringly obvious here.

oscarBravo · 27-11-2013 2:29pm

Is that onsubmit attached to the form element?

Artful_Badger · 27-11-2013 2:34pm

oscarBravo wrote: »

Is that onsubmit attached to the form element?

Maybe I'm in over my head with this. What you see in the code in the OP is everything I have. This is the form part.

<form>
		<label for="DOB">Enter Date of Birth</label>
		<input type="date" name="dateOfBirth" id="dateOfBirth"/><br>
		<input type="submit" value="Send Form" name="submit" onsubmit="check(document.getElementById('dateOfBirth').value)"/>
	</form>

oscarBravo · 27-11-2013 2:37pm

Like I said, onsubmit is a form event, not an input event. You submit the form, not the inputs. As such, you need to have <form onsubmit=... instead of <input onsubmit=...

That's why you can't use "this", because when the event handler belongs to the form, "this" refers to the form, and instead the event handler needs to actually go looking for the relevant input (getElementById) to get its value.

edit: while I'm at it, your label's "for" attribute is wrong. It needs to refer to the id of the text input.

Artful_Badger · 27-11-2013 2:58pm

oscarBravo wrote: »

Like I said, onsubmit is a form event, not an input event. You submit the form, not the inputs. As such, you need to have <form onsubmit=... instead of <input onsubmit=...

That's why you can't use "this", because when the event handler belongs to the form, "this" refers to the form, and instead the event handler needs to actually go looking for the relevant input (getElementById) to get its value.

edit: while I'm at it, your label's "for" attribute is wrong. It needs to refer to the id of the text input.

Ahh my head is fried with this. Basically all I want is to put in a date in a form, then I click the submit button, do something in a function with the date and output the result.

I thought buy your last post I needed to stick it on the form tags to act when the form was submitted rather than when the submit button was pressed. But still didnt work.

Can you tell me exactly where I should stick that piece of code in the HTML to make it send the date from the form to the function ?

oscarBravo · 27-11-2013 3:10pm

OK, I gave up and tested it

It works fine with <form onsubmit=..., but the value that's being passed to the check() function is a string. You need to convert it to a Date object before you can use getFullYear() on it.

At the start of the check() function, stick in "var d = new Date(input);" and use d.getFullYear() instead.

Artful_Badger · 27-11-2013 3:22pm

Just when you think you have it, it still doesnt work.

This is what I've got now.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Date check</title>
</head>
<body>
	<form onsubmit="check(document.getElementById('dateOfBirth').value)">
		<label for="dateOfBirth">Enter Date of Birth</label>
		<input type="date" name="dateOfBirth" id="dateOfBirth"/><br>
		<input type="submit" value="Send Form" name="submit" />
	</form>
	<script>
		function check(input)
		{
			var d = new Date(input);
			var year = d.getFullYear();
			var currentDate = new Date();
			var currentYear = currentDate.getFullYear();
			var difference = year - currentYear;
			document.write(difference);
		}
	</script>
</body>
</html>

oscarBravo · 27-11-2013 3:37pm

The question is, what do you expect to happen? You're doing a document.write() in a submit handler - but you're writing to a page that the browser will replace with another one as soon as the form is submitted.

If you replace document.write(difference) with alert(difference), does that work? (It does for me.)

Artful_Badger · 27-11-2013 3:41pm

oscarBravo wrote: »

The question is, what do you expect to happen? You're doing a document.write() in a submit handler - but you're writing to a page that the browser will replace with another one as soon as the form is submitted.

If you replace document.write(difference) with alert(difference), does that work? (It does for me.)

Yeah the alert works, wasnt thinking with the document.write. Thanks a million for all the help, really appreciate it.

HTML forms and javascript

Comments