onClick didn't work inside form?

Question

Usually I see people use form to create input :

<form action="">
<table>
    <tr>
        <td><label for="Fname">First Name</label></td>
        <td><input type="text" name="Fname" class="form-control" id="fname"></td>
    </tr>
    <tr>
        <td><label for="Lname">Last Name</label></td>
        <td><input type="text" name="Lname" class="form-control" id="lname"></td>
    </tr>
    <tr>
        <td><label for="address">address</label></td>
        <td><input type="text" name="address" class="form-control" id="address"></td>
    </tr>
    <tr>
        <td><label for="phone">phone</label></td>
        <td><input type="text" name="phone" class="form-control" id="phone"></td>
    </tr>
    <tr>
        <td><input type="submit" value="submit" onclick="submit();"></td>
    </tr>
</table>
</form>

It's make my submit button didn't work, but as soon as I remove the form tag it's work :

<table>
    <tr>
        <td><label for="Fname">First Name</label></td>
        <td><input type="text" name="Fname" class="form-control" id="fname"></td>
    </tr>
    <tr>
        <td><label for="Lname">Last Name</label></td>
        <td><input type="text" name="Lname" class="form-control" id="lname"></td>
    </tr>
    <tr>
        <td><label for="address">address</label></td>
        <td><input type="text" name="address" class="form-control" id="address"></td>
    </tr>
    <tr>
        <td><label for="phone">phone</label></td>
        <td><input type="text" name="phone" class="form-control" id="phone"></td>
    </tr>
    <tr>
        <td><input type="submit" value="submit" onclick="submit();"></td>
    </tr>
</table>

My js only like this :

var Fname= document.getElementById("fname");
var Lname= document.getElementById("lname");
var Address= document.getElementById("address");
var Phone= document.getElementById("phone");
var Result= document.getElementById("result");


function submit(){
    var valueFname=Fname.value;
    var valueLname=Lname.value;
    var valueAddress=Address.value;
    var valuePhone=Phone.value;
    Result.innerHTML="hello, "+valueFname+" "+valueLname+" good to see you. Your contact number is "+valuePhone+" , and your address "+valueAddress;
}

Why cant I wrap all my input inside form? does it need additional code?

form will for post data into database using get or post method . — Mahi, Nov 21 '16 at 18:17

score 2 · Accepted Answer · answered Nov 21 '16 at 18:20

2

its make my submit button didnt work

No, your submit button is working fine. Therein lies the problem you're seeing, in fact. Your JavaScript code is executing, but the time between showing any output and reloading the page because you've submitted a form is nearly instantaneous.

So your JavaScript works. And your form works. Everything works.

but as soon as i remove the form tag its work

Not quite. When you remove the form tag the form submission no longer works. All you've done is prevent the form from submitting, because you no longer have a form.

why cant i wrap all my input inside form?

You can. But it really depends on what you're trying to do. If you have a form and you want to submit it, use a form element. If you don't want to submit anything as a form, you can leave it out. That's its only purpose.

You can have inputs on the page anywhere you like, they don't need to be in forms. If you just want to interact with them via JavaScript then you can do that without a form element.

answered Nov 21 '16 at 18:20

David

208,112
36
198
279

***Your JavaScript code is executing, but the time between showing any output and reloading the page because you've submitted a form is nearly instantaneous.***. so how to show the output sir. cause as you say it nearly instantaneous – GerryofTrivia Nov 21 '16 at 18:24
@vandi: Doesn't your second example successfully do that? If you don't need the `form` at all, simply omit it. You *can* prevent the form from submitting (see this question: http://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission), but if you never want to submit the form then it seems reasonable to not have it in the first place. – David Nov 21 '16 at 18:26
@vandi You could still use a form, but just prevent it form submitting by calling the method on form submit and returning false. https://jsfiddle.net/kpduncan/0nbjcnw7/ – thekodester Nov 21 '16 at 18:33

score 0 · Answer 2 · answered Nov 21 '16 at 18:20

Forms are made to make HTTP methods (such as POST or PUT). So, if you need that input's information take part in a http method, you NEED TO use form. If your Submit button is made just for internal stuff, don't use form.

A little more information: enter link description here

score 0 · Answer 3 · answered Nov 21 '16 at 18:23

0

Form will send the data to the file specified in action and this event is triggered by <input type="submit"/> inside a form.

You can use a <button> tag inside form to achieve what you want.

answered Nov 21 '16 at 18:23

Kiogara

617
1
6
15

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

0

You need to set the action for your form, it is empty.
Or you can use jQuery

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 21 '16 at 18:23

Alexandre Neukirchen

2,713
7
26
36

1

Had to poke you on a old post, you approved this http://stackoverflow.com/documentation/review/changes/123007 as documentation, please read a bit before approving documentation! This clearly a question, and not in any kind documentation... Flag this comment as too chatty to get it removed afterwards! – R3uK Mar 07 '17 at 08:17
1

Hah! Yup, probably! ;) – R3uK Mar 07 '17 at 14:49

onClick didn't work inside form?

4 Answers4

Linked