Question

我遇到了问题。我在一个页面中提交了多个表单。我需要提交所有那些没有页面重新加载。我尝试使用一些Ajax代码。使用ajax代码，第一个表单正确提交但其余表单不起作用。

这是我的视图文件

<div class="col-md-6 col-lg-6 col-sm-6 col-lg-offset-5">

@foreach($questions as $question)

<form method="post" action="{{route('answer.store')}}" id="ansform">
    {{ csrf_field() }}

    <h1>{{$question->question}} ?</h1>
    <div class="col-lg-offset-1">
        <input type="hidden" name="question" value="{{$question->question}}">
        <input type="hidden" name="student_id" value="{{$student_id}}">
        <input type="hidden" name="true_answer" value="{{$question->answer}}">
        <input name="answer" value="{{$question->choice1}}" type="radio"> {{$question->choice1}} <br>
        <input name="answer" value="{{$question->choice2}}" type="radio">{{$question->choice2}}<br>
        <input name="answer" value="{{$question->choice3}}" type="radio">{{$question->choice3}}<br>
        <input name="answer" value="{{$question->choice4}}" type="radio">{{$question->choice4}}<br>
        <input type="submit" name="submit" value="submit" class="btn btn-primary">
    </div>
 </form>

@endforeach

视图文件的输出是 -

我的路线 Answer.store 就在这里

public function store(Request $request)
{
    //
    if ($request->ajax()) {
        $answer=Answer::create([
            'stu_id' => $request->input('student_id'),
            'question' => $request->input('question'),
            'given_answer' => $request->input('answer'),
            'true_answer' => $request->input('true_answer')

        ]);
        return response($answer);
    }else{
        return "ajax not done";
    }
}

最后 ajax脚本是

<script type="text/javascript">
    $(document).ready(function(){
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    });

    $('#ansform').on('submit',function(e){
        e.preventDefault();
        var data = $(this).serialize();
        var url = $(this).attr('action');
        var post = $(this).attr('method');
        $.ajax({
            type : post,
            url : url,
            data :data,
            success:function(data){
                console.log(data)
            }
        })
    })
</script>

任何人都请帮助我。我怎么能这样做？

Answer 1

我正在回答最后的评论。

$('.ansform').on('submit',function(e){
    var form = $(this);
    var submit = form.find("[type=submit]");
    var submitOriginalText = submit.attr("value");

    e.preventDefault();
    var data = form.serialize();
    var url = form.attr('action');
    var post = form.attr('method');
    $.ajax({
        type : post,
        url : url,
        data :data,
        success:function(data){
           submit.attr("value", "Submitted");
        },
        beforeSend: function(){
           submit.attr("value", "Loading...");
           submit.prop("disabled", true);
        },
        error: function() {
            submit.attr("value", submitOriginalText);
            submit.prop("disabled", false);
           // show error to end user
        }
    })
})

这应该有效。在发送表单之前，我们正在禁用提交按钮（这可以保护我们免于双重提交）。然后我们将文本更改为“正在加载...”或告诉最终用户必须等到查询完成的内容。

如果AJAX成功：我们将禁用该按钮，我们正在将文本更改为已提交。

如果出现ERROR：我们启用提交，返回原始文本并允许最终用户再次提交。你必须向他显示错误或其他内容。

您可以查看AJAX事件：https://api.jquery.com/Ajax_Events/。

在laravel中使用ajax提交多个表单

1 个答案: