How to handle HTML <forms> with javascript

Question

i'm studying javascript but i can't find some clear reference about how getting and treat data out of the HTML forms.

Here an example:

THE FORM:

<HTML>
              <HEAD>

<TITLE>Database Lookup</TITLE> 
<script src="basic.js"></script></HEAD>
<BODY>
<H1>Database Lookup</H1>
<FORM  action="javascript: submitForm();">
Please enter the ID of the publisher you want to find: <BR>
<INPUT TYPE="TEXT" NAME="id">
<BR>
<INPUT TYPE="SUBMIT" value="Submit" > </FORM>
          </BODY>
     <HTML>

    //HERE JAVASCRIPT Javascript BASIC.js:

function submitForm() 
{

var idsearched=document.getElementById("id").innerHTML;
document.write("idsearched");
}

I would like to know what i'm doing wrong, because nothing happen when i click submit. And which is the better solution for handling forms with javascript?? Using "action"? or which of other attributes?

var idsearched=document.getElementById("id").value;document.write(idsearched); — Voonic
– Voonic, Commented Sep 15, 2013 at 17:35
You say that nothing happens when you click submit, but what do you expect to happen? Specifically, if you do document.write from within a .js file, where do you think its output will end up? Also, the second <html> tag needs to be an end tag. — Mr Lister
– Mr Lister, Commented Sep 15, 2013 at 17:51
ty to all. Sergio you were right, stupid stupid mistake... it make me think that the error was at the base of my little knowledge... searching the internet i find a lot of different ways for handling form with js so i wanted to know why mine didn't work. @MrLister i didn't notice the end tag.. about the "document.write" i expected to overwrite all the content of the page with my form's input. — ciaoben
– ciaoben, Commented Sep 15, 2013 at 18:01

Chibuzo · Accepted Answer · 2013-09-15 17:45:36Z

1

The value of form elements are contained in their value attribute. Try the modified code snippet below. Note: ("idsearched") should be without quote because it is a variable and not a string.

var idsearched=document.getElementById("id").value;
document.write(idsearched);

You must add an id attribute to the form element.

<INPUT TYPE="TEXT" NAME="id" id="id">

Use this line to manually submit your form

<INPUT TYPE="button" value="Submit" onclick="submitForm();" >

edited Sep 15, 2013 at 17:45

answered Sep 15, 2013 at 17:40

Chibuzo

6,1133 gold badges33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Math chiller · Accepted Answer · 2013-09-15 17:36:17Z

1

<INPUT TYPE="button" value="Submit" onclick="submitForm();" >

do not use document.write use document.getElementById("myID").innerHTML

answered Sep 15, 2013 at 17:36

Math chiller

4,1876 gold badges32 silver badges44 bronze badges

3 Comments

Math chiller Over a year ago

yw, anyway you should look into jquery, it makes these kinda things alot easier, this is pretty much what its made for.

ciaoben Over a year ago

i know, i tried that last day and it is amazing! But i need to learn some js for the university! :( TY again!

Math chiller Over a year ago

well ye, knowing js helps, it gives you more understanding of whats going on, but jquery should be the bulk of your coding.(client-side scripting)

Tuxes3 · Accepted Answer · 2013-09-15 17:38:50Z

0

a full working example like you wanted is that:

<HTML>
   <HEAD>
      <TITLE>Database Lookup</TITLE>
      <script src="basic.js"></script>
   </HEAD>
   <BODY>
      <H1>Database Lookup</H1>
      <FORM  action="javascript: submitForm();">
         Please enter the ID of the publisher you want to find: <BR>
         <INPUT TYPE="TEXT" id="id" NAME="id">
         <BR>
         <INPUT TYPE="SUBMIT" value="Submit" > 
      </FORM>
      <script type="text/javascript">
         function submitForm() 
         {

         var idsearched=document.getElementById("id").innerHTML;
         document.write("idsearched");
         return false;
         }
      </script>
   </BODY>
   <HTML>

answered Sep 15, 2013 at 17:38

Tuxes3

4472 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to handle HTML <forms> with javascript

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related