Detecting Form Submit

[ibm007]

i'm working on a template and it has the following for submit button:

<a href="#" onclick="document.getElementById('contacts-form').submit()" class="button">send</a>

i'd like to know what is the 'getElementById' for and how do i detect that my form has been submitted? so that i can send the textfield values to the db.

[.josh]

document.getElementById looks for and returns an object reference of an html element with the specified id attribute (in this case, 'contact-form').  I'm assuming that you have a form on your page and the opening form tag looks something like

 

<form name='something' id='contacts-form' method='post' action='somepage.php'>

 

 

So the document.getElementById('contacts-form') is supposed to be returning a reference to your contact form, and then the .submit() is supposed to submit it, and all this is supposed to happen when you click that link, since it is inside the onclick attribute.  So when you click on the link, that javascript code is executed and a request is made to whatever URL is in the action='...' attribute of your form tag. 

 

So you "detect" that the form has been submitted by virtue of the script running (whatever script is in the action attribute).  If the URL in the action attribute is the same as the page the form is on, or shares the same URL with other pages, then you will have to append a variable to the URL or pass a hidden field or similar, to let the script know that it was requested because of your form submission and not something else. 

[ibm007]

document.getElementById looks for and returns an object reference of an html element with the specified id attribute (in this case, 'contact-form').  I'm assuming that you have a form on your page and the opening form tag looks something like

 

<form name='something' id='contacts-form' method='post' action='somepage.php'>

 

 

So the document.getElementById('contacts-form') is supposed to be returning a reference to your contact form, and then the .submit() is supposed to submit it, and all this is supposed to happen when you click that link, since it is inside the onclick attribute.  So when you click on the link, that javascript code is executed and a request is made to whatever URL is in the action='...' attribute of your form tag. 

 

So you "detect" that the form has been submitted by virtue of the script running (whatever script is in the action attribute).  If the URL in the action attribute is the same as the page the form is on, or shares the same URL with other pages, then you will have to append a variable to the URL or pass a hidden field or similar, to let the script know that it was requested because of your form submission and not something else.

Wow! thanx

but the 'action' attribute was empty

probably meaning that the processing to be taken in the same page

and i would also like to do that

passing a hidden field seems a good idea

but how do i do it?

[.josh]

yes, an empty action attribute means it posts to the same page.

 

Hidden field method would just be something like

 

<input type='hidden' name='contacts_form' value='true' />

 

Put that in your form and then server-side, look for that posted variable, same as any other posted variable.  But base a condition around it.

 

Dunno what language you are using but php example:

 

if ($_POST['contacts_form']) {
  // do database insertion stuff here
}

[ibm007]

yes, an empty action attribute means it posts to the same page.

 

Hidden field method would just be something like

 

<input type='hidden' name='contacts_form' value='true' />

 

Put that in your form and then server-side, look for that posted variable, same as any other posted variable.  But base a condition around it.

 

Dunno what language you are using but php example:

 

if ($_POST['contacts_form']) {
  // do database insertion stuff here
}

thanx. worked well.