Подтвердить что ты не робот

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

Каков наилучший способ получить регулярный якорь (<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()" />

4b9b3361

ОТВЕТЫ

Ответ 1

пройдите через родительские узлы, пока не найдете элемент с тэгом, который указывает на его форму!

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



<script type="text/javascript">
    //<![CDATA[
    function get_form( element )
    {
        while( element )
        {
            element = element.parentNode
            if( element.tagName.toLowerCase() == "form" )
            {
                //alert( element ) //debug/test
                return element
            }
        }
        return 0; //error: no form found in ancestors
    }
    //]]>
</script>

Ответ 2

Почему бы вам не использовать элемент <input> или <button> и просто настроить его с помощью CSS? Затем он работает без Javascript и, следовательно, более надежным.

Ответ 3

Самый простой способ сделать это - использовать что-то вроде этого:


<a href="#" onclick="document.formName.submit();">

Ответ 4

Я использую это сейчас каждый раз. Поскольку кнопка отправки в моем проекте обычно является ссылкой (путем обертки изображения или CSS), поэтому я использую это:

<a href="#" onclick="$(this).closest('form').submit(); return false;">Submit</a>

Не забывайте, что он также использует jQuery.

Вы можете обернуть свою собственную функцию. Поэтому он всегда представляет родительский элемент (форму) по этой ссылке.

Ответ 5

Пока ссылка является прямым дочерним элементом формы, вы можете использовать это. Вам не нужно знать имя формы. Работает как минимум в Firefox и Chrome.

<form action="">
    <a href="" onclick="parentNode.submit();return false;">Submit</a>
</form>

quirksmode.org сообщает мне, что x.parentNode работает во всех браузерах, поэтому это должно работать повсюду.

Ответ 6

Поверните кнопку отправки в ссылку с помощью разметки следующим образом:

<input id="submitlink" type="submit" value="Text" />

И CSS как это:

input#submitlink {
    background: transparent;
    border: 0;
    cursor:pointer;
    margin: 0;
    padding: 0;
    color: #034af3;
    text-decoration: underline;
}

input#submitlink:visited {
    color: #505abc;
}

input#submitlink:hover {
    color: #1d60ff;
    text-decoration: none;
}

input#submitlink:active {
    color: #12eb87;
}

Ответ 7

Лучший способ -

<a href="#" onclick="document.forms[0].submit();return false;">Submit Form</a>

однако вы, вероятно, НЕ хотите этого делать, поскольку это сделает невозможным для пользователей с отключенным JS

Ответ 8

Аналогичное решение для 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>

Ответ 9

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

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

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

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

[EDIT] Я сохраняю ответ, даже если он занижен, как ссылка (информация, содержащаяся в комментариях, интересна).
Еще один недостаток метода протокола: он не генерирует объект события. Не проблема во фрагменте, который я дал, но раздражающий при вызове обработчика.

Ответ 10

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

Если вам нужны какие-либо дополнительные функции, которые имеет ссылка, но элементы ввода не имеют (например, зависание), тогда проще реализовать те, у которых есть 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>

Ответ 11

$(document).ready(function(){$('#submit').click(function(){$('#signup').submit();});});

Используя JQuery, мы проверяем, что документ загружен, а затем мы ожидаем, когда будет привязан тег привязки с идентификатором "submit". Затем он отправляет форму с идентификатором "signup". Измените 'submit' и 'signup', чтобы удовлетворить.

Ответ 12

Чтобы перейти от ответа выше Как лучше всего отправить ссылку на форму, то, как я делал это недавно,

<button class="submit" type="submit"><a href="#" onclick="return false;">Link Text</a></button>

и CSS

.submit {
    background: transparent;
    border:0;
    display: inline;
    margin: 0;
    padding: 0;
    cursor:pointer;
}
.submit a 
{
    color: #CEA249;
}
.submit:hover a
{
    color: white;
}

Я разместил это, так как не смог найти пример html/css. Если кто-нибудь улучшит, будет обновлен.

Ответ 13

<form>
<input type="submit" id="submit" style="display:none;"/>
<a href="#" onclick="$('#submit').click();">Sample Submit Trick</a> 
</form>