Question

假设我有2页： index.html使用以下代码：

    <!DOCTYPE html>
<html lang="fr">

<head>
    <title>test formulaire</title>
</head>
<body>
    <div id="formulaire">
    </div>
    <!-- /#formulaire -->
    <a href="javascript:montreformulaire();">Montre le formulaire</a>
    <!-- jQuery -->
    <script src="js/jquery.js"></script>
    <script src="js/monscript.js"></script>
</body>
</html>

我还有另一页包含我的表格：

<form name="monformulaire" id="monformulaire" role="monformulaire">
<input type="text" name="montexte" id="montexte" value="" />
<button id="bouton" type="submit">Let's go man !</button>
</form>

我有一个Jquery.js和一个这样的个人脚本：

function montreformulaire() {
    alert('ok charge formulaire');
    $.get( "monformulaire.html", function( data ) {
    var formData = $.parseHTML (data );
        $( "#formulaire" ).html( formData );
    });
    $('monformulaire').submit(function(event) {
            alert('formulaire envoyé !');
            event.preventDefault();
            /*
            $.ajax({
                type: 'POST',
                url: 'ajoute.php',
                data: $(this).serialize(),
                success: function (data) {
                    alert($('form').serialize());
                    //showMsg(data);
                    showSupportPage(id);

                },
                cache: false
            });
            */
    });
    $( "#montexte" ).val( 'toto' );
}

我的问题是，当表单提交时，我想使用jquery提交函数，但它不起作用。

我不明白为什么以及如何解决这个问题。

欢迎任何想法： - ）

谢谢，

亚历

Answer 1

因为您在#处理程序上传递id时错过了submit

$('#monformulaire').submit(function(event) {

            // Your code here..
});

其他选择器

    $('[name=monformulaire]').submit({
                // Your code here..
    });

选择适合你的人。

Answer 2

您的提交功能不佳。这样做：

$('[name=monformulaire]').submit();

或

$('[name=monformulaire]').submit(function(){
    //Do your thing here
});

Answer 3

您必须使用$('form[name="monformulaire"]').submit(...)

Answer 4

非常经典和常见的问题。你对一个元素进行ajax调用，但是在获取之前你会做element.click（...），因此在它实际存在之前。

将$('#monformulaire').submit(function（带有＃，你忘了）放在ajax回调函数中，如下所示：

$.get( "monformulaire.html", function( data ) { // This is done FIRST
            var formData = $.parseHTML (data );
            $( "#formulaire" ).html( formData ); // this is done THIRD, #monformulaire now exists
            $('#monformulaire').submit(function(event) {........}) // this is done FOURTH, accessing the element!
});

$('#monformulaire').submit(function(event) {........}) // This is done SECOND and won't do anything because #monformulaire doesn't exist yet

欢迎使用异步语言世界：）

如何使用jquery加载和验证表单？

4 个答案: