JQuery формы представить - PullRequest
       3

JQuery формы представить

0 голосов
/ 27 сентября 2010

Я создаю этот крошечный JS, чтобы я мог контролировать отправку формы с помощью jQuery

$('#submit').click(function() { 
  $('#addForm').submit();

});

Могу ли я использовать для этого простую ссылку href?

Что-то вроде

<a href="javascript:$('#addForm').submit();">link</a>

Я пытался

<a  href="javascript:document.addForm.submit();">link</a>

, но это не сработало (это мимо другого jQuery на странице)

Ответы [ 4 ]

1 голос
/ 27 сентября 2010

Вы не можете отправить свою форму таким образом со ссылкой и некоторым javaScript, даже jQuery.Вы должны использовать вызов XHR для отправки запроса, а не для обновления страницы.(вы можете отправить свою форму со ссылкой, представленной Дэном, но я понимаю, что вы хотите сделать больше, чем просто из ваших вопросов). Причина в том, что утверждение «вернуть ложное» будет влиять на действие ссылки, а не на формусамо представление.В любом случае я бы посоветовал вам вообще не использовать ссылку для отправки формы.

Вы можете легко отправить форму с помощью обычной кнопки отправки и небольшого количества jQuery.Таким образом, вы предоставляете хороший запасной вариант для своих пользователей, которые не включили javaScript.

Вы даже можете отправить форму с некоторой проверкой на стороне клиента, используя следующий HTML / javaScript:

<!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#addForm').submit(function(){
                validate();
                ajax_submit_function_taking_form_data_as_argument($(this).serialize());
                return false;
            });
        });

        function validate(){
            //Do some client side validation if required
        }

        function ajax_submit_function_taking_form_data_as_argument(theData){
            $.ajax({
                type: 'GET',
                url: "http://search.google.com/",
                data: theData,

                error: function(e){
                    alert('error...');
                },
                success: function(data){
                    alert('success!');
                }
            });
        }
    </script>
    <style type="text/css"></style>
</head>
<body>
    <form id="addForm">
        <input type="text" name="field1" value="" />
        <input type="submit" value="submit" />
    </form>
</body>
</html>

Последнее решение, хотя, возможно, слишком тяжелое для вашего использования, было бы использовать превосходный плагин формы jQuery из http://jquery.malsup.com/form/

Надеюсь, это поможет!

1 голос
/ 27 сентября 2010

Если вы хотите, чтобы созданный вами JS управлял отправкой, не указывайте в ссылке ссылку href:

<a id="submit">link</a>
0 голосов
/ 27 сентября 2010

Вы можете прикрепить к событию click с помощью jquery. Кроме того, лучше не добавлять JavaScript в ваш HTML.

<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#aSubmit').click(function(){
            $('#form1').submit();
            return false;
        });
    });
</script>
<style type="text/css"></style>
</head>
<body>
    <form id="form1" action="http://www.google.com/search" name=f>
        <input name="q" />
    </form>

    <a href="#" id="aSubmit">submit</a>
</body>
</html>
0 голосов
/ 27 сентября 2010

Никогда не помещайте JavaScript в атрибут href. Если вы должны вставить HTML, используйте атрибут onclick и не забудьте добавить return false. Кроме того, никогда не используйте префиксный скрипт с javascript:.

Ваш первый блок скриптов должен выполнять эту работу также хорошо.

(А что значит «мимоходом другой jQuery на странице»?)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...