James Parsons James Parsons - 2 months ago 5
Ajax Question

How to process an AJAX form submission with multiple submits and Laravel routing

The form below does not submit to the database. If I run the

jQuery
down to the commented out first submit the first form submits but I obviously need to use
AJAX
to continue submitting the forms. The process seems to fail at:

$(i).submit(function(event) {


Can anyone point out where I am going wrong?

jQuery/ AJAX

$(document).on('click', '#button', function() {

var wrap = $(this).closest('div.form_wrap');

wrap.find('form').each(function() {
var id = $(this).prop('id');
var arr = jQuery.makeArray( "#"+id );
var url = $(this).attr('action');
var type = $(this).attr('method');
var i = $('#'+id);
//var data = $(i).serialize();
//$(i).submit();

console.log(url);
console.log(type);


$(i).submit(function(event) {

var data = {
'name' : $('input[name=weight]').val(),
'reps' : $('input[name=reps]').val(),
'sets' : $('input[name=sets]').val()
};

$.ajax({
type : type,
url : url,
data : data,
dataType : 'json',
encode : true
})

.done(function(data) {
console.log(data);
});
event.preventDefault();
})
});
});


HTML

<?php $workouts = DB::table('workouts')->where('date', $entry->format('Y-m-d'))->where('user_id', Auth::user()->id)->get(); ?>
<?php $f = 0;?>
@foreach ($workouts as $workout)
<?php $formid="form_".$x."_".$f;?>
{!! Form::open(array('route' => 'w_shared', 'method' => 'POST', 'ID' => $formid)) !!}
{{ csrf_field() }}
{{ Form::hidden('user_id', Auth::user()->id)}}
{{ Form::hidden('date', $entry)}}
{{ Form::hidden('weight', $workout->weight)}}
{{ Form::hidden('exercise', $workout->exercise)}}
{{ Form::hidden('reps', $workout->reps)}}
{{ Form::hidden('sets', $workout->sets)}}
{{ Form::checkbox('share', 1, array('class' => 'form-control'))}}
{!! Form::close() !!}
<tr>
<th>{{$workout->exercise}}</th>
<td>{{$workout->weight}}</td>
<td>{{$workout->reps}}</td>
<td>{{$workout->sets}}</td>
</tr>

<?php $f++; endforeach;?>


Route

Route::post('/w_shared', [
'as' => 'w_shared',
'uses' => 'WController@store'

]);


Thanks

Answer

The on submit function is being added after the call to submit the form. Also, you are unneccesarily reselecting the elements and you will probably also want to scope the data gathering:

$(document).on('click', '#button', function() {
  var wrap = $(this).closest('div.form_wrap');
  wrap.find('form').each(function() {

      var id = $(this).prop('id');
      var arr = jQuery.makeArray( "#"+id );
      var url = $(this).attr('action');
      var type = $(this).attr('method');
      var i = $('#'+id); // Or just $(this)
      var data = i.serialize();

// setup on submit 
      i.submit(function(event) {
	event.preventDefault();
	var formElem = $(event.currentTarget);
          
          var data = {
              'name'    : formElem.find('input[name=weight]').val(),
              'reps'    : formElem.find('input[name=reps]').val(),
              'sets'    : formElem.find('input[name=sets]').val()
          };

          $.ajax({
              type        : type, 
              url         : url, 
              data        : data,
              dataType    : 'json', 
              encode      : true
            })
              .done(function(data) {              
                  console.log(data);         
              });     
	});

// submit form
	i.submit();
  });

});

You may also want to explore moving the setup of the onSubmit method declaration outside of the onClick method, and replacing:

.submit(function(){...})

with:

.on('submit', function(){...}) 
Comments