php - Dynamically created form not posting ajax in laravel 5 -

i working on ecommerce web application in laravel 5.

i have products table , product_options table, both have one-to-many relationship established.

in admin panel, have provided provision of dynamically adding product options form on click of button, works fine.

but when posting form using jquery ajax on click of button, methodnotallowedhttpexception.

here's route:

route::post('/admin/products/options', 'productscontroller@storeoptions'); 

the controller:

public function storeoptions(request $request) {     $this->validate($request, [         'p_option_item_code' => 'required|alpha_dash|unique:product_options',         'p_option_details'   => 'string',         'p_option_price'     => 'required|regex:/^\d*(\.\d{2})?$/',         'p_option_quantity'  => 'required|integer',     ]);      if ( $request->ajax() )     {         $request['product_id'] = session::get('product_last_inserted_id');         productoption::create( $request->all() );          return response(['status' => 'success', 'msg' => 'the product option has been added successfully.']);     }     return response(['status' => 'failed', 'msg' => 'the product option not added successfully.']); } 

form: created dynamically using jquery

<div class="well well-sm">     <div class="errors"></div>     {!! form::open(['url' => ['/admin/products/options'], 'autocomplete' => 'off', 'id' => 'formaddprodoption']) !!}         <div class="form-group">             {!! form::label('p_option_item_code', 'item code:') !!}             {!! form::text('p_option_item_code', null, ['class' => 'form-control input-sm']) !!}         </div>         <div class="form-group">             {!! form::label('p_option_details', 'product details:') !!}             {!! form::textarea('p_option_details', null, ['class' => 'form-control input-sm', 'rows' => 3]) !!}         </div>         <div class="form-group">             {!! form::label('p_option_quantity', 'stock:') !!}             {!! form::text('p_option_quantity', null, ['class' => 'form-control input-sm']) !!}         </div>         // other fields ...          <div class="form-group">             {!! form::submit('add', ['class' => 'btn btn-primary btn-block btnaddprodoption', 'id' => 'btnaddprodoption']) !!}         </div>     {!! form::close() !!} </div> 

jquery code:

$('.btnaddprodoption').on('click', function() {     var inputdata = $('#formaddprodoption').serialize();     $.ajax({         url: '{{ url('/admin/products/options') }}',         type: 'post',         data: inputdata,         success: function(m) {             toastr.success(m.msg, 'successs!');         },         error: function( data ) {             if ( data.status === 422 ) {                 var errors = data.responsejson;                 var errorshtml = '<div class="alert alert-danger"><ul>';                 errorshtml += '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>';                 $.each( errors, function( key, value ) {                     errorshtml += '<li>' + value[0] + '</li>';                 });                 errorshtml += '</ul></div>';                 $( '.errors' ).html( errorshtml );             }         }     });     return false; }); 

the click event not getting fired @ all. don't reason why not working.

can me out ??

thanks.

if click event not getting fired dynamically added form, sounds event listener added before form is. try using event delegation attaching listener parent element:

// instead of: $('.btnaddprodoption').on('click', function() { }  // try: $('body').on('click', '.btnaddprodoption', function() { } 

body example work, since in body; in practice you'd want attach whatever element closest parent of form doesn't dynamically change.