Как заставить кнопку "div" отправить форму, в которой она находится? - PullRequest
Новая
       11

Как заставить кнопку "div" отправить форму, в которой она находится?

27 голосов
/ 08 марта 2010

У меня есть код ASP.Net, генерирующий HTML моей кнопки, и я использую div, чтобы он выглядел и вел себя так, как я хочу. Этот вопрос касается HTML, созданного с помощью кода ASP.Net.

Стандартная кнопка проста, просто установите событие onClick для div, чтобы изменить местоположение страницы: 

<div name="mybutton" id="mybutton" class="customButton" onClick="javascript:document.location.href='wherever.html';">
Button Text
</div>

Это прекрасно работает, однако, если я хочу, чтобы кнопка, подобная этой, отправляла форму, в которой она находится, я бы вообразил что-то вроде следующего: 

<form action="whatever.html" method="post">
    <div name="mysubmitbutton" id="mysubmitbutton" class="customButton" onClick="javascript:this.form.submit();">
    Button Text
    </div>
</form>

Однако, это не работает :( У кого-нибудь есть какие-нибудь блестящие идеи?

Ответы [ 6 ]

36 голосов
/ 08 марта 2010

Вам известны элементы <button>? Элементы <button> могут быть стилизованы как элементы <div> и могут иметь type="submit", поэтому они отправляют форму без JavaScript: 

<form action="whatever.html" method="post">  
    <button name="mysubmitbutton" id="mysubmitbutton" type="submit" class="customButton">  
    Button Text
    </button>  
</form>

Использование <button> также более семантическое, тогда как <div> очень универсально. Вы получаете следующие преимущества бесплатно:

  • JavaScript не требуется для отправки формы
  • Инструменты доступности, например, средства чтения с экрана, будут (правильно) обрабатывать его как кнопку, а не как часть обычного потока текста
  • <button type="submit"> становится кнопкой «по умолчанию», что означает, что клавиша возврата автоматически отправит форму. Вы не можете сделать это с <div>, вам нужно добавить отдельный обработчик keydown к элементу <form>.

Существует одно (не) предостережение: <button> может иметь только формулировку контента , хотя вряд ли кому-то понадобится какой-либо другой тип контента при использовании элемента для отправки формы.

34 голосов
/ 08 марта 2010 
onClick="javascript:this.form.submit();">

this в div onclick не имеет атрибута form, вы можете попробовать this.parentNode.submit() или document.forms[0].submit() сделает

Кроме того, onClick, должно быть onclick, некоторые браузеры не работают с onClick

4 голосов
/ 29 октября 2014

Чтобы хранить сценарии в одном месте, а не использовать onClick в теге HTML, добавьте следующий код в блок сценариев: 

$('#id-of-the-button').click(function() {document.forms[0].submit()});

Что предполагает, что у вас есть только одна форма на странице.

0 голосов
/ 13 апреля 2010

Почему все должны усложнять вещи. Просто используйте jQuery! 

<script type="text/javascript">
  $(document).ready(function() {
    $('#divID').click(function(){
      $('#formID').submit();
    )};
    $('#submitID').hide();
  )};
</script>

<form name="whatever" method="post" action="somefile.php" id="formID">
  <input type="hidden" name="test" value="somevalue" />
  <input type="submit" name="submit" value="Submit" id="submitID" />
</form>

<div id="divID">Click Me to Submit</div>

Div даже не должен быть в форме, чтобы отправить его. Единственное, чего здесь не хватает, - это включения jquery.js.

Кроме того, jQuery скрывает кнопку «Отправить», поэтому, если используется несовместимый браузер, будет показана кнопка «Отправить», которая позволит пользователю отправить форму.

0 голосов
/ 08 марта 2010

Несколько замечаний:

  1. Клиенты, не поддерживающие JavaScript, не смогут отправить вашу форму
  2. Спецификация w3c не допускает вложенные формы в HTML - вы потенциально обнаружите, что теги action и method игнорируются для этой формы в современных браузерах, и что другие элементы управления ASP.NET больше не выполняют пост-обратно правильно (так как форма была закрыта).

Если вы хотите, чтобы он обрабатывался как правильная обратная передача ASP.NET, вы можете вызвать методы, предоставляемые платформой, а именно: __doPostBack(eventTarget, eventArgument): 

<div name="mysubmitbutton" id="mysubmitbutton" class="customButton"
     onclick="javascript:__doPostBack('<%=mysubmitbutton.ClientID %>', 'MyCustomArgument');">
  Button Text
</div>
0 голосов
/ 08 марта 2010

У вас есть кнопка тега

http://www.w3schools.com/tags/tag_button.asp

...