3

I'm a noobie programmer and I wonder how to properly submit a form with javascript.

I made some test code to show you what I mean:

<?php
    if (isset($_POST['message']))
    {
        echo $_POST['message'];
    }
?>

<script>
    function formsubmit() 
    {
        document.getElementById('form').submit();           
    }
</script>

<form id="form" name="form" action="" method="post">
    <input id="message" name="message" value="hello world">
    <input id="submit" name="submit" type="submit">
</form>

<a href="" onClick="formsubmit()">Click me</a><br/>
<input type="submit" onClick="formsubmit()" value="Click me">

When you push the "submit" button inside the tags - the php code will echo "hello world". When submitting the form with JS the values won't post to the page. What am I doing wrong?

Thanks in advance. I've searched the whole afternoon for a solution, but cause of my lack of knowledge about programming I failed to find it.

Improve this question
7
  • 1
    Why use JavaScript when HTML will suffice? Just use Javascript to improve the users experience? Commented Nov 29, 2012 at 23:37
  • I am using JavaScript because my form has 100+ input fields. Those fields get populated based on a selection the user made. (This happens with J query & Ajax.) Then the user can modify every single input field and when clicking the javascript button, the form which contain 100+ inputs should post all those inputs to ittself and update the database with new + old data. Because there are 100+ input fields, I've made a navigation bar which contain buttons who are fixed on the screen. One of these buttons contains the "save changes" function which simply posts this big form to itsself. Commented Nov 29, 2012 at 23:53
  • This is rigorous - My passport application does not have that many entries. Even if - Why not break it down a little. Commented Nov 29, 2012 at 23:57
  • Cause I don't see any other way of creating it on a user friendly base. If you are interested I can show you my web-app and prehaps you could give some advise. Peace Commented Nov 30, 2012 at 0:14
  • When eating a cake why not try a mouthful at a time. Sometimes you do not need to have a mouthful of raisins nor cherries! Understand. Commented Nov 30, 2012 at 1:50

3 Answers 3

Reset to default
6

Believe it or not, but the main problem lies here:

<input id="submit" name="submit" type="submit">

If a form contains an input element with name (or id) of submit it will mask the .submit() method of the form element, because .submit will point to the button instead of the method. Just change it to this:

<input name="go" type="submit">

See also: Notes for form.submit()

The smaller problem is here:

<a href="" onClick="formsubmit()">Click me</a><br/>

An empty anchor will just request the same page again before calling formsubmit(). Just add href="#".

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

11 Comments

PS: <br/> should be <br> without the slash.
<br /> is the proper format if you are trying to pass W3C validation because there is no closing </br> tag.
I also believe that you can't use submit as the name. <input name="something_besides_submit" type="submit"> Look at this jsFiddle
@rsmith84 - There shouldn't be a closing <br> tag: W3C HTML5 Spec
@Jack—there is no closing BR tag, therefore, in HTML, the tag is <br>. The use of <br /> is for XHTML. For documents to validate as XHTML, they need <br />, but no one actually serves documents as XHTML, even if they are XHTML, unless they want to annoy IE users. Most documents with an XHTML DOCTYPE (on the web) do not validate as XHTML and are served as (also invalid) HTML.
|
1

The problem here is that the id and name of the input element on your form is called submit.

This will mask the submit function for the form. Change the name and id and you will be able to use javascript to submit the form.

Improve this answer

Comments

0

try setting the href of the to '#'. I would guess what is happening is that by clicking on the link, it submits the form and immediately changes the url to the same page you are on cancelling the form submit before it has a chance to go.

Improve this answer

1 Comment

Thanks, such details are important! Peace

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.