5 Replies - 460 Views - Last Post: 27 August 2013 - 09:16 PM

#1 maxadaloudis  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 03-June 13

How to get data from forms with Javascript

Posted 27 August 2013 - 01:49 PM

I'm trying to get some data from a form, but with no luck so far.
This is the form section of my HTML page
<form class="reglogform" id="loginpos">
               <fieldset>
                  <label for="email">Email</label>
                  <input type="text" id="loginusername" class="registerform" name="loginusername">
                  <br>
                  <label for="password">Password</label>
                  <input type="password" id="loginpassword" class="registerform" name="loginpassword">
                  <br>
                  <input type="submit" id="loginbutton" class="registerform" value="Login"  onclick = "loginsubmit()">
                  <br>
                  </fieldset>
               </form>



And this is the javascript I came up with, and it returns null if I add .nodeValue after the document.getElementbyID, if I don't it says [object HTMLInputElement]


function loginsubmit () {
	var email = document.getElementById("loginusername").nodeValue;
	alert(email);
	}

loginsubmit();



I am just missing something essential and I can't figure it out.

Is This A Good Question/Topic? 0
  • +

Replies To: How to get data from forms with Javascript

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2885
  • View blog
  • Posts: 9,570
  • Joined: 12-December 12

Re: How to get data from forms with Javascript

Posted 27 August 2013 - 02:12 PM

var email = document.getElementById("loginusername").childNodes[0].nodeValue;

would attempt to read the text of an element, because this text is contained in the first-child, which is a text-node. But the input element contains no text.

To get the value entered into the input:

var email = document.getElementById("loginusername").value;

You should not, however, use the click event of the submit button, as some browsers may submit the form before the click event is executed. You would also need to use return false; in this click event in order to attempt to prevent the form being submitted.

Instead, use the submit event of the form:

<form class="reglogform" id="loginpos" onsubmit="return loginsubmit();">

Note that your form is currently invalid without an action attribute, and include the method attribute as well.
Was This Post Helpful? 1
  • +
  • -

#3 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2885
  • View blog
  • Posts: 9,570
  • Joined: 12-December 12

Re: How to get data from forms with Javascript

Posted 27 August 2013 - 02:21 PM

Also, your labels are incorrect:

<label for="email">

the for-value refers to the id of a form-element.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3393
  • View blog
  • Posts: 9,590
  • Joined: 08-June 10

Re: How to get data from forms with Javascript

Posted 27 August 2013 - 02:33 PM

View Postandrewsw, on 27 August 2013 - 11:12 PM, said:

var email = document.getElementById("loginusername").childNodes[0].nodeValue;

would attempt to read the text of an element, because this text is contained in the first-child, which is a text-node. But the input element contains no text.

not quite exact. it would do this for Text and attribute nodes. Element nodes (and related) return null. see Node.nodeValue

EDIT: see comments below

This post has been edited by Dormilich: 27 August 2013 - 09:25 PM

Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2885
  • View blog
  • Posts: 9,570
  • Joined: 12-December 12

Re: How to get data from forms with Javascript

Posted 27 August 2013 - 02:55 PM

Hello Dormilich

I am not sure of the distinction you are making, can you clarify?

<p id="testp">Here it is</p>
<script>
    alert(document.getElementById('testp').childNodes[0].nodeValue);    // Here it is
</script>

Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3393
  • View blog
  • Posts: 9,590
  • Joined: 08-June 10

Re: How to get data from forms with Javascript

Posted 27 August 2013 - 09:16 PM

ah, I see, it was a little late. I had the original code in mind, which was indeed on the element, not on the text node.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1