CODEWITHSUNDEEP
javascriptphpjquerylaravellaravel-blade
mafortis
mafortis

Reputation: 7138

laravel ajax form won't execute submit button

Basically my form adds to blade by help of javascript and then i can fulfill data and hit the save button.

The issue is save button doesn't work.

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

Code

This function will add new row and form to view where you see in video i filled input and hit save button

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);
  }

here is where thing happen and I actually try to send data to back-end

$("#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);
        }
      });
});

just to be clear I attached output form of my first ajax code so you can see how things are printed

<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: I should add that I have this function working on bootstrap modal but i wanted to change modal the way you see in video (print by click in blade) Back-End is working perfectly since I can save data by this Ajax code with modal. Whatever the issue is, is coming from here.

Upvotes: 1

Views: 455

Answers (1)

Tim Lewis
Tim Lewis

Reputation: 29315

You're defining your click function as 

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

But, when this function is defined, $("#custmodalsave") is not available in your DOM as you're appending it:

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

To fix this, simply use event delegation:

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

For more info on event delegation, please check out the jQuery reference:

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

Upvotes: 1

Related Questions