2013-03-24 3 views
2

Могу ли я использовать кнопку отправки в форме и все еще обрабатывать действие формы при нажатии кнопки отправки? Ниже приведен код. Я новичок в программировании. Пожалуйста, помогите мне. БлагодаряОтправить кнопку, используемую в форме

<body> 
<input type="submit" name="submit" value="submit" /> 
<form action="" method="get" name="myform"> 
    <table width="200" border="1" cellspacing="10"> 
    <tr> 
     <td>Name</td> 
     <td><label for="name"></label> 
     <input type="text" name="name" id="name" /></td> 
    </tr> 
    <tr> 
     <td>email</td> 
     <td><label for="email"></label> 
     <input type="text" name="email" id="email" /></td> 
    </tr> 
    <tr> 
     <td>Group</td> 
     <td><input type="checkbox" name="IT" id="IT" /> 
     IT 
      <input type="checkbox" name="ECE" id="ECE" /> 
     <label for="ECE"></label> 
     ECE 
     <input type="checkbox" name="Mech" id="Mech" /> 
     <label for="Mech"></label> 
     Mech</td> 
    </tr> 
    <tr> 
     <td>Hobbies</td> 
     <td><label for="hobbies"></label> 
     <input type="text" name="hobbies" id="hobbies" /></td> 
    </tr> 
    </table> 
</form> 
</body> 
+0

Почему бы не просто поставить кнопку внутри форма? Можете ли вы сказать нам, какова ваша цель? – SomeSillyName

ответ

4

Вы можете сделать это либо с помощью HTML5, чистый JavaScript или JQuery:

Использование JavaScript:

<form action="" method="get" id="theForm"> 
// Form here 
</form> 

<input type="submit" onclick="document.forms[0].submit();" /> 

Использование JQuery:

<form action="" method="get" id="theForm"> 
// Form here 
</form> 

<input type="submit" id="submitTheForm" /> 

$('#submitTheForm').click(function(){ 
    $('#theForm').submit(); 
}); 

Использование CSS (если вы хотите получить его за пределами формы по эстетическим соображениям):

Лучшим вариантом может быть оставить вашу отправку внутри формы и разместить ее в другом месте с помощью CSS (если это то, что вам нужно вне формы).

Использование HTML5:

Наконец, вы должны смотреть в использовании HTML5-х form attributes. Обратите внимание, что они поддерживаются во всех основных браузерах (Chrome, Firefox, IE10), но не в старых версиях IE (IE9, IE8 и т. Д.). Это должно также работать:

<form id="something" method="post"> 
<input type="text"/> 
</form> 

<input type="submit" form="something"> 
+2

Спасибо, что решил мою проблему. Cheers :) –

+1

Просто любопытно: как насчет нового атрибута HTML5 «form». И.Е. <Форма ID = «что-то» метод = «пост»> <входной тип = «текст» /> <входной тип = «представить» вид = «что-то»> Я знаю, что будет работать на современных браузерах , но я никогда не тестировал кнопку отправки вне формы. –

+1

@ MiljanPuzović Я не знаю, поддерживается ли это в IE или? – lifetimes

1

Для этого вам нужно будет использовать javascript. Вот пример

<input type="button" onclick="document.forms['myform'].submit()" value="Submit" /> 
+0

Спасибо за решение :) –

2

Использование JQuery:

<form action="" method="get" name="myform" id="myform"> 
... 
</form> 

<input type="button" id="submitform" value="click me to submit the form" /> 

$('#submitform').click(function(){ 
    $('#myform').submit(); 
}); 
3

Да, вы можете сделать это с помощью JQuery

<a href="#" id="submit-form">Submit</a> 
<form id="someid"> 

</form> 

JQuery:

$("#submit-form").click(function(){ 
$("#someid").trigger("submit"); 
}) 
Смежные вопросы