1

リンクのあるページがあります。使用するとリンクをクリックすると新しい選択タグが表示されます。次に、ユーザーがフォームを送信すると、ユーザーが各選択タグのオプションを選択するようにします。

最後のjquery関数に移動できますが、selectタグを作成するためのコードをいくつか入れています

html

<div class="container" id="addCell">
    <form id="acForm"method="POST" action="<?php echo URL; ?>Cell/addCell">
        <ul>
            <li>
                <p>
                    <label>Name</label>
                    <input type="text" name="name"class="longInput1"/>
                <p>
                <p>
                    <label>City</label>
                    <select id="countrySelector" name="city">
                    </select>
                </p>
            </li>
            <li id="intersectionCells">
                <p>
                    <label>Inserted cells</label>
                    <a href="#" class="smallLink" id="acaclink">new</a>
                </p>
            </li>
            <li>
                <input type="submit" class="button1" value="save"/>
            </li>
        </ul>
    </form>
</div>

jquery

$("#addCell").ready(function(){
    $("#addCell").on('click',"#acaclink",function(){
        var me = this;
        var cityName = $("#countrySelector").val();
        $.getJSON("http://localhost/Mar7ba/Cell/getCellsInCity/"+cityName+"/TRUE",function(data){
            var options = '';
            options+="<option>Select Cell</option>";
            for(var i=0;i<data.length;i++){
                options += "<option>"+data[i]+"</option>";
            }
            $(me).closest('li').append('<p>\n\
            <label>Select Cell</label>\n\
            <select name="acSelect[]">\n\
             '+options+'\n\
</select>\n\
<a href="#" class="removeA">delete</a>\n\
<span class="errorMessage"></span>\n\
</p>');
        });
    });
});
$("#addCell").ready(function(){
    $("#addCell").on('click',".removeA",function (){
        $(this).closest('p').remove();
    });
});
$("#addCell").ready(function (){
    $("#countrySelector").change(function (){
        var cityName = $("#countrySelector").val();
        $.getJSON("http://localhost/Mar7ba/Cell/getCellsInCity/"+cityName+"/TRUE",function(data){
            var options = '';
            options+="<option>Select Cell</option>";
            for(var i=0;i<data.length;i++){
                options += "<option>"+data[i]+"</option>";
            }
            $("#intersectionCells select").html(options);
        });
    });
});

これはフォームの検証です

$("#addCell").ready(function (){
    $("#acForm").on('submit',function (){
        var errorCount = 0;
        $('span.errorMessage').text('');
        $('#intersectionCells select').each(function(){
            var $this = $(this);
            if($this.val() === 'Select Cell'){
                var error = 'Please select a cell' ; // take the input field from label
                $this.next('span').text(error);
                errorCount = errorCount + 1;   
            }
        });
        if(errorCount==0){
            $(this)[0].submit(); // submit form if no error
        }
    });
});

しかし、スパムは私が望むようには表示されません

4

3 に答える 3

3

readyドキュメント要素には使用しないでください。フォームにエラーが発生した場合に使用して、フォームが送信されないようにすること$(document).ready(function(){...})ができます。preventDefault()

$("#acForm").on('submit',function (e){
    var errorCount = 0;
    $('span.errorMessage').text('');
    $('#intersectionCells select').each(function(){
        var $this = $(this);
        if ($this.val() == 'Select Cell'){
            var error = 'Please select a cell' ;
            $this.next('span').text(error);
            errorCount++;   
        }
    });

    if (errorCount > 0) {
        e.preventDefault();
    }
});
于 2012-05-18T03:36:13.803 に答える
3

参照： http： //jsfiddle.net/ujrNu/

この後

if(errorCount==0){
            $(this)[0].submit(); // submit form if no error
        }

追加する必要があります：

else{
   return false;
}

そうしないと、とにかくフォームが投稿されます。

2番目の問題は次の行です。

$this.next('span').text(error);

nextは、スパンである次の兄弟ではなく、NEXT兄弟を返します。次の兄弟がスパンでない場合は、nullを返します。あなたの場合、次の兄弟はスパンではなく、Aタグです。だからあなたはこれが欲しい：

$this.siblings('span :first').text(error);
于 2012-05-18T03:36:19.830 に答える
1 
$("#acForm").on('submit',function (e){
        var errorCount = 0;
        $('span.errorMessage').text('');
        $('#intersectionCells select').each(function(){
            var $this = $(this);
            if($this.val() === 'Select Cell'){
                var error = 'Please select a cell' ; // take the input field from label
                $this.next('span').text(error);
                errorCount = errorCount + 1;   
            }
        });
        if(errorCount==0){
            $(this)[0].submit(); // submit form if no error
        }
        e.preventDefault(); // this will stop the form submit
    });

デモ

于 2012-05-18T03:30:16.723 に答える