javascript - onClick 在表单内不起作用？

Question

通常我看到人们使用表单来创建输入:

<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>

这让我的提交按钮不起作用，但只要我删除表单标签，它就会起作用:

<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>

我的js只有这样:

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;
}

为什么我不能将所有输入都包装在表单中？它需要额外的代码吗？

Answer 1

its make my submit button didnt work

不，您的提交按钮工作正常。实际上，这就是您所看到的问题。您的 JavaScript 代码正在执行，但是从显示任何输出到由于您提交了表单而重新加载页面之间的时间几乎是瞬时的。

因此您的 JavaScript 可以正常工作。你的表格有效。一切正常。

but as soon as i remove the form tag its work

不完全是。当您删除 form 标记时，表单提交不再有效。您所做的只是阻止提交表单，因为您不再拥有表单。

why cant i wrap all my input inside form?

可以。但这真的取决于你想做什么。如果您有一个表单并且想要提交它，请使用 form 元素。如果您不想以表单形式提交任何内容，则可以将其省略。这是它的唯一目的。

您可以在页面上任何您喜欢的地方输入，它们不需要在表单中。如果您只想通过 JavaScript 与它们交互，则无需 form 元素即可。