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

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

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

<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>

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

Ответы

Ответ 1

onClick="javascript:this.form.submit();">

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

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

Ответ 2

Знаете ли вы о <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> является очень общим. Там одно (не) оговорка: a <button> может содержать фразинг-контент, хотя вряд ли кому-то понадобится какой-либо другой тип контента при использовании элемент для отправки формы.

Ответ 3

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

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

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

Ответ 4

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

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

<button> Что нужно, </button>

Ответ 5

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

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

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

<div name="mysubmitbutton" id="mysubmitbutton" class="customButton"
     onclick="javascript:__doPostBack('<%=mysubmitbutton.ClientID %>', 'MyCustomArgument');">
  Button Text
</div>

Ответ 6

Почему каждый должен усложнять ситуацию. Просто используйте 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, поэтому, если используется несовместимый браузер, кнопка "Отправить" отобразит и позволит пользователю отправить форму.