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

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

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

Answer 2

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

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

Answer 3

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

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

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

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

Answer 4

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

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

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

Answer 5

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

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

Answer 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;
}

Answer 7

лучший способ это

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

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

Answer 8

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

Answer 9

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

<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. Если у кого-то появятся какие-либо улучшения, обновлю.

Answer 10

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

Используя Jquery, мы проверяем, что документ загружен, затем ждем щелчка тега привязки с идентификатором «submit». Затем он отправляет форму с идентификатором «регистрация». Измените «отправить» и «зарегистрироваться», чтобы удовлетворить.