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