代码

Question

基本上，我的表单通过javascript的帮助添加到了Blade中，然后我可以填写数据并点击“保存”按钮。

问题是“保存”按钮不起作用。

Here is screen record of the process and error you can watch

代码

此功能将添加新的行和表格，以查看您在视频中看到的位置（填充输入并点击保存按钮）

var textFieldsCount = 0;

  function addTextField(){
    textFieldsCount++;
    var textfieldhelper = '';
    var my_row = $('<div class="row mt-20" id="textField-' + textFieldsCount + '">');
    var my_html = '{{Form::open()}}<input name="product_id" id="product_id" type="hidden" value="{{$product->id}}"><div class="col-md-4">{{ Form::label('customsubspecifications', 'Specifications') }}<select class="form-control" id="specification_id" name="specification_id"><option value="">Select</option>'+specifications+'</select></div>';
    my_html += '<div class="col-md-4">{{ Form::label('text_dec', 'Your Custom Input') }}'+
    '<input class="text_dec form-control" onkeypress="myFunction()" type="text" name="text_dec[]" id="'+ textFieldsCount.toString() +'">'+
    '</div>';
    my_html += '<div class="col-md-4">{{ Form::label('', 'Actions') }}<br><button type="button" class="btn btn-danger btn-xs" onclick="removeTextField(\'textField-' + textFieldsCount.toString() + '\')">Remove</button><button type="button" class="btn btn-info btn-xs" onclick="addTextField();">Add New</button><button type="button" id="custmodalsave" class="myButton custmodalsave btn btn-xs btn-success">Save</button>{{Form::close()}}</div>';
    my_row.html(my_html);
    $('#fields').append(my_row);
  }

这是发生事情的地方，我实际上尝试将数据发送到后端

$("#custmodalsave").click(function(e){
      e.preventDefault();
      $.ajax({
        type: "post",
        url: "{{ url('admin/addnewcustomsubspecifications') }}",
        data: {
          '_token': $('input[name=_token]').val(),
          'product_id': $('#product_id').val(),
          'specification_id': $('#specification_id').val(),
          'text_dec': $('.text_dec').val(),
          'longtext_dec': $('.longtext_dec').val(),
        },
        success: function (data) {
          $('#custspacmsg').append('<span class="text-success">Custom Specification added successfully in your product!</span>');
          console.log(data);
        },
        error: function (data) {
          console.log('Error:', data);
        }
      });
});

为了清楚起见，我附上了我的第一个ajax代码的输出形式，所以你可以看到事物的印刷方式

<div class="row mt-20" id="textField-1">

    <form method="POST" action="http://newsite.pp/admin/products/15" accept-charset="UTF-8">
        <input name="_token" value="DLrcOa0eOm90e4aaGSYp2uCeiuKtbGCT9fCOUP16" type="hidden">
        <input name="product_id" id="product_id" value="15" type="hidden">

        <div class="col-md-4">
            <label for="customsubspecifications">Specifications</label>
            <select class="form-control" id="specification_id" name="specification_id">
                <option value="">Select</option>
                <option value="1">CPU</option>
                <option value="2">ram</option>
                <option value="3">LCD</option>
                <option value="4">Mouse</option>
                <option value="5">Graphic</option>
                <option value="6">Keyboard</option>
            </select>
        </div>

        <div class="col-md-4">
            <label for="text_dec">Your Custom Input</label>
            <input class="text_dec form-control" onkeypress="myFunction()" name="text_dec[]" id="1" type="text">
        </div>

        <div class="col-md-4">
            <label for="">Actions</label>
            <br>
            <button type="button" class="btn btn-danger btn-xs" onclick="removeTextField('textField-1')">Remove</button>
            <button type="button" class="btn btn-info btn-xs" onclick="addTextField();">Add New</button>
            <button type="button" id="custmodalsave" class="myButton custmodalsave btn btn-xs btn-success" style="display: inline-block;">Save</button>
        </div>
    </form>

</div>

PS：我应该补充一点，就是我有此功能可用于引导程序模式但我想更改您在视频中看到的模式（点击刀片中的按钮即可打印）后端工作得非常好，因为我可以使用带有模式的Ajax代码保存数据。无论是什么问题，都是从这里来的。

Answer 1

您将点击功能定义为

$("#custmodalsave").click(function(e){

但是，定义此函数后，$("#custmodalsave")在您添加DOM时不可用：

$('#fields').append(my_row); // my_row contains `[...] id="custmodalsave"`

要解决此问题，只需使用事件委托：

$("body").on("click", "#custmodalsave", function(e){ ... });

有关事件委托的更多信息，请查阅jQuery参考：

http://api.jquery.com/on/

laravel ajax表单将不执行提交按钮

代码

1 个答案: