1

現在、ページに2つのフォーム、更新フォームと追加フォームがあります。どちらかのフォームを送信し、そのフォームのIDをアクションとともにプルし、特定のフォームを検証してから、リターンをロードします。 Webサーバーから。

特に各フォームのIDを使用して機能させることができましたが、jsコードは2回繰り返され、idはもう少し動的であることが望ましいです。

<script src="assets/js/jquery-1.8.2.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/jquery.validate.js"></script>


<div id="myTabContent" class="tab-content">
        <div class="tab-pane active" id="update">                
            <form action="php/update_level.php" method="post" id="form1">
                <h2>Update Level</h2>
                <label>Select Bag Level</label>
                <select id="target" name="levelSelect"> <option selected>Select</option>
                    <?php
                    foreach($result as $row)
                    {?>
                        <option><?php echo $row['Level'] ?></option>
                    <?php
                    }
                    ?>
                </select>
                <div id="upForm">
                </div>
                <div class="message">

                </div>
            </form>
        </div>
        <div class="tab-pane" id="addNew">                
            <form action="php/add_level.php" id="form2">
                <h2>New Level</h2>    
                <label>Level</label>
                <input class="required" maxlength="10" minlenght="1" type="text" name="level" placeholder="Level">
                <label>Description</label>
                <textarea class="required" name="description"  rows="3" placeholder="Description of level type"></textarea>  
                </br>
                <div class="message">

                </div>
                <div class="form-actions">
                <button id="inFormSub" type="submit" class="btn btn-large btn-primary">Submit</button>
                </div>
            </form>                   
        </div>
    </div>

JS：

$('form').submit(function(e){
e.preventDefault();
var id=$(this).attr('id');
var action=$(this).attr('action');

console.log(action + ' ' + id); //works outputs update_bag.php form1 on submit of form1
                                //add_bag.php form2 on submit of form2
$(id).validate({
    submitHandler: function() {


        console.log(action + ' ' + id); //doesnt work
        $(id).find('div.message').load(action, $(id).serializeArray());            
    }
});

動作するJS

    $('#form1').validate({
    submitHandler: function() {
        var action = $('#form1').attr('action');

        console.log(action + ' validate1');
        $('#form2').find('div.message').load(action, $('#form1').serializeArray());            
    }
});    

$('#form2').validate({

    submitHandler: function() {
        var action = $('#form2').attr('action');

        console.log(action + ' validate2');
        $('#form2').find('div.message').load(action, $('#form2').serializeArray());            
    }
});

JSとJqueryに関する私の知識はせいぜい少なく、おそらく解決策を真正面から見つめています。

4

3 に答える 3

0

submitHandlerでフォーム変数を使用して、IDとアクションを取得できます

...
submitHandler: function(form){

    console.log($(form).attr('id'), $(form).attr('action'));    

   ...
}
于 2012-10-19T16:27:52.000 に答える
0

呼び出しは$(this).attr("id")要素のIDを返すだけですが、それは適切なcssセレクターではないため、自分自身にハッシュ記号を追加する必要があります

呼び出しを次のように変更してみてください。

$("#"+id).validate({
   //validate code here
})
于 2012-10-19T16:30:13.627 に答える
0

要素ごとに特定のデータを必要とするプラグインを適用する一般的なアプローチは、を使用して要素をループするeach()ことです。これthisにより、ループ内にアクセスして、各フォーム要素のコードを複製せずに個々のフォーム要素に簡単にアクセスできます。

$('#form1,#form2').each(function() {
    var $form = $(this);
    var action = $form.attr('action');
    $form.validate({
        submitHandler: function() {           
            $form.find('div.message').load(action, $form.serializeArray());
        }
    });
});
于 2012-10-20T18:34:51.780 に答える