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

它讓我的提交按鈕沒有工作

不，你的提交按鈕是工作的罰款。其實，這就是你所看到的問題。您的JavaScript代碼正在執行，但顯示任何輸出和重新加載頁面之間的時間因爲您提交了表單幾乎是瞬間的。

所以你的JavaScript的作品。而你的表單起作用。一切正常。

但只要我刪除表單標籤的工作

不太。當您刪除form標記時，表單提交不再有效。你所做的只是阻止表單提交，因爲你不再有表單。

爲什麼不能將我的所有輸入封裝在表單中？

你可以。但這取決於你想要做什麼。如果您有表單並且想要提交表單，請使用form元素。如果您不想提交任何形式的表單，您可以將其忽略。這是它唯一的目的。

您可以在任何地方在頁面上輸入內容，而不需要使用表單。如果你只是想通過JavaScript與他們交互，那麼你可以不用form元素。

Answer 2

表單製作HTTP方法（如POST或PUT）。 因此，如果您需要輸入的信息參與http方法，則需要使用表單。 如果您的提交按鈕僅用於內部東西，請勿使用表格。

多一點信息：enter link description here

Answer 3

形式將數據發送到在操作中指定的文件，該事件是由<input type="submit"/>表格內觸發。

您可以使用表格內的<button>標籤來達到您想要的效果。

Answer 4

您需要爲表單設置動作，它是空的。
或者您可以使用jQuery