Как лучше сделать ссылку, отправить форму

Question

Каков наилучший способ получить обычный якорь (<a href="...">) для отправки формы, в которую он встроен при нажатии?

<form>
    <ul>
        <li>
            <p>
                The link could be <span>embedded <a href="" onclick="?">at any level</a></span>
                in the form, so "this.parentNode.parentNode..." is no good. :(
            </p>
        </li>
    </ul>
</form>

Я знаю, что самым простым способом использования jQuery было бы

$('#myLink').click(function() {
    $(this).parents('form:first').submit();
});

... но я пытаюсь найти способ сделать это без использования библиотеки.

---

Редактировать : Я действительно пытаюсь найти метод, который не требует знания формы (например: его имя, идентификатор и т. Д.). Это было бы похоже на то, как вы могли бы поместить это в элемент ввода: <input onclick="this.form.submit()" />

Answer 1

Вы должны использовать кнопку (и ввод или кнопку типа отправки), чтобы отправить форму.

Если вам нужны какие-либо дополнительные функции, которые есть у ссылки, но у элементов ввода нет (например, при наведении курсора), тогда проще реализовать элементы с помощью javascript, чем отправку формы. Это также ухудшит изящность для людей без javascript.

Вы даже можете решить эту проблему с помощью специального кода MSIE (и использовать: hover для других браузеров):

<input type="submit" value="send" class="linkstyles"
       onmouseenter="this.className+=' hovered';"
       onmouseleave="this.className=this.className.replace(/(^|\s)hovered(\s|$)/g, '');" />

Если вы все еще действительно хотите сделать это задом наперед, вот как я бы этого не сделал:

function submitByLink ( elm ) {
  // Move up domtree until we hit no parentNode or find a form
  while (elm) {
    elm = elm.parentNode;
    if (elm && elm.tagName == 'FORM') {
      // First chance we get, we submit the form and exit.
      // The return on the node it kills the event bubble by forwarding false to browser
      elm.submit(); 
      return false;
    }
  }
  // If we got here then there is no form parent and user will be sent to link href
}

И HTML будет выглядеть так:

<a href="aPageExplainingWhyYouNeedJavascript.html" onclick="return submitByLink(this);">Send</a>

Answer 2

Лично я предпочитаю использовать протокол javascript: в href вместо использования события onclick ... Если есть какие-либо проблемы с этим, я был бы рад исправить.

Если у вас есть только одна форма на странице, довольно распространенный случай, вы можете сделать это просто:

<li><p><a href="javascript:document.forms[0].submit();">Click here to submit</a></p></li>

В противном случае пузырьки элементов, как указано выше, являются решением.

[РЕДАКТИРОВАТЬ] Я сохраняю ответ, даже если он отклонен, в качестве ссылки (информация, приведенная в комментариях, интересна). Еще один недостаток метода протокола: он не генерирует объект события. Не проблема во фрагменте, который я дал, но раздражает при вызове обработчика.

Answer 3

Аналогично решение до hasen j , но с использованием рекурсивной функции для прохождения документа.

function findParentForm(element) {
    if (element.parentNode.tagName.toLowerCase() == 'html') {
        throw('No Parent Form Found');
    } else if (element.parentNode.tagName.toLowerCase() == 'form') {
        return element.parentNode;
    } else {
        return findParentForm(element.parentNode);
    }
}

И форма, конечно ...

<form>
    <ul>
        <li>
            <p>
                The link could be <span>embedded <a href="" onclick="findParentForm(this).submit(); return false;">at any level</a></span>
                in the form, so "this.parentNode.parentNode..." is no good. :(
            </p>
        </li>
    </ul>
</form>