1

grails アプリケーションで jquery Ajax フォーム送信を実行しようとしています。しかし、結果をdbに保存していません。ユーザーが任意の数のテキストフィールドを追加または削除できる動的フォームフィールドを使用しています。

<script>
  $(document).ready(function() {
  $("#add").click(function() {
    var intId = $("#buildyourform div").length + 1;
    var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field" + intId + "\" id=\"field" + intId + "\"/>");
    var fName = $("<input type=\"text\" name=\"name" + intId + "\" class=\"fieldname\" id=\"tb"+ intId +"_1\"/>");
    var lname = $("<input type=\"text\" name=\"email" + intId + "\" class=\"lastname\" id=\"tb"+ intId +"_2\"/>");
    var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
    removeButton.click(function() {
        $(this).parent().remove();
    });
    fieldWrapper.append(fName);
    fieldWrapper.append(lname);
    fieldWrapper.append(removeButton);
    $("#buildyourform").append(fieldWrapper);

}); 

});

</script>

<form action="#" id="input_form">
   <fieldset id="buildyourform">
      <legend>Build your own form!</legend>
   </fieldset> <input type="submit" value="send" name="submit" />
</form>

<input type="button" value="Add a field" class="add" id="add" />

<p id="result"></p>

jqueryが「フィールドの追加」ボタンのonclick機能に基づいてテキストフィールドの数を追加するようにします。

今、jquery Ajax 呼び出しを使用してフォームを送信しようとしています。このような ..

<script type="text/javascript">
     $(document).ready(function(){
         $("#input_form").submit(function(){
             var querystring = $(this).serialize();

             $.ajax({
                    url : "/peeldemo/customer/saveparams",
                    data : "data=" + querystring,
                    success : function(data) {
                        alert("Submit Successfully !!");
                        $('#result').html(data);
                        return false;
                    }
             })

             });
    });
</script>

ここに私のコントローラがあります -

    def saveparams() {

    def paramToAddList = params.data
    String[] pramsToAdd = paramToAddList.split("&")
    int addParamsSize = pramsToAdd.size()
    if (addParamsSize) {
        //List<Parameter> paramListToDelete = new ArrayList<Parameter>()
        for(int i=0;i<addParamsSize;i++){
            def customer = new Customer();
            customer.name = pramsToAdd[i].name
            customer.email = pramsToAdd[i].email
            customer.save()

        }
    }
    }

しかし、送信ボタンをクリックした後、私のフォームは送信できません。

4

1 に答える 1

2

あなたのコードをコピーしてテストします

name3:c, data:name1=a, name2:b, email1:1, email2:2, email3:3, action:saveparams,

これはアクションで取得したパラメーターです。ここではデータname1=aのみです。エントリを 3 つ追加しました。

次のエラーが発生しました

No such property: name for class: java.lang.String. Stacktrace follows: Message: No such property: name for class: java.lang.String

だから私はそれが機能するようにあなたのコードを変更します

<script>
    $(document).ready(function() {
        $("#add").click(function() {
            var intId = $("#buildyourform div").length;
            var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field" + intId + "\" id=\"field" + intId + "\"/>");
            var fName = $("<input type=\"text\" name=\"name\" class=\"fieldname\" id=\"tb"+ intId +"_1\"/>");
            var lname = $("<input type=\"text\" name=\"email\" class=\"lastname\" id=\"tb"+ intId +"_2\"/>");
            var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
            removeButton.click(function() {
                $(this).parent().remove();
            });
            fieldWrapper.append(fName);
            fieldWrapper.append(lname);
            fieldWrapper.append(removeButton);
            $("#buildyourform").append(fieldWrapper);

        });

    });

</script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#input_form").submit(function(){
            var querystring = $("#input_form").serialize();

            $.ajax({
                url : "/admin/saveparams",
                data : querystring,
                success : function(data) {
                    alert("Submit Successfully !!");
                    $('#result').html(data);
                    return false;
                }
            })
            return false;
        });
    });
</script>

<form action="#" id="input_form">
    <fieldset id="buildyourform">
        <legend>Build your own form!</legend>
    </fieldset> <input type="submit" value="send" id="asdasd" name="submit" />
</form>

<input type="button" value="Add a field" class="add" id="add" />

<p id="result"></p>

そしてこれが私の行動です

def saveparams() {
    def paramToAddList = params.list('name')
    def paramToAddList1 = params.list('email')

    println "----------------1----${paramToAddList}"
    println "----------------11----${paramToAddList1}"

    if (paramToAddList) {
        for (int i = 0; i < paramToAddList.size(); i++) {
            println "-----------------------${paramToAddList[i]}---${paramToAddList1[i]}---"
        }
    }
    render params
}
于 2013-08-10T15:50:47.450 に答える