onClick在表单内部不起作用? [英] onClick didn't work inside form?

问题描述

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

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>

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

为什么我不能将所有输入都包装在表单中?是否需要其他代码?

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

推荐答案

它使我的提交按钮不起作用

its make my submit button didnt work

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

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.

因此您的JavaScript可以正常工作.和您的形式工作.一切正常.

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

但是一旦我删除了表单标签，它就会起作用

but as soon as i remove the form tag its work

不完全是.删除form标记后，表单提交不再起作用.您要做的就是阻止表单提交，因为您不再拥有表单.

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?

可以.但这确实取决于您要执行的操作.如果您有表单并且要提交，请使用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.

您可以在页面上的任何位置输入内容，而不必使用表单.如果您只想通过JavaScript与他们进行交互，则可以在没有form元素的情况下进行操作.

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.

这篇关于onClick在表单内部不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！