onClick在表单内部不起作用？

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?

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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