Form inside a form with post and get method not working (Nested Form)

Guys i have a blade file, manage payment form

which has the following columns

 <form name="showallbalance_search_date_form1" id="showallbalance_search_date_form1" method="get"
     action="{{ route('pay_all_bills') }}" novalidate autocomplete="off" onsubmit="return validateForm()">
     {{ csrf_field() }}

<table>
<tr>
     <td><input type="checkbox" name="allbalance[]" class="checkboxes" value="{{ $supplierbalance->id }}" /></td>

    <td>Billno</td>

//this below is for paying a single bill. when clicking this it takes to a form there user can pay the bill amount
 <td>

<a href="{{ route('payform', $supplierbalance['id'])}}"> <button type="button"
             class="btn btn-info">Pay</button></a>
</td>



// this below is form deleting this
 <td>

     <form action="{{ route('SupplierPayment.destroy', $supplierbalance['id'])}}" method="post"
         onsubmit="return ConfirmDelete()">
         {{ csrf_field() }}
         <input name="_method" type="hidden" value="DELETE">

         <button type="submit" class="btn btn-info glyphicon glyphicon-trash" style="float:left; width:60%;background: #428BCA;
                                                            padding: 6px;
                                                            margin-right: 2px;">

         </button>
</form>
 </td>


 

</table>
 <div class="col-sm-7 col-sm-offset-5">
     <input type="submit" class="btn btn-primary mr5">Pay checked bills</button>
 </div>
 </form>

here the top form is used for when i check three bill and click Pay checked Bills the it moves to a controller where i can pay the checked bills.

The problem is now the delete button is not working.

i think i cant use nested forms. is there any solution??

Kindly suggest please

jove

6 years ago

Level 7

It is not valid to have a form element inside another form element.

See: https://www.w3.org/TR/xhtml1/#prohibitions And possible solutions: https://stackoverflow.com/questions/555928/is-it-valid-to-have-a-html-form-inside-another-html-form

AbdulBazith

6 years ago

Level 5

@jove thank you so much for your response.

But is there any solution to to do this, i need both the button.

jlrdw

6 years ago

Level 75

You can have more than one form on a page, just don't nest them.

Play and experiment around a little bit to get what you need working that's what most of us have to do.

Sometimes basic trial and error.

1 like

AbdulBazith

6 years ago

Best Answer

Level 5

@jlrdw @armancodes thank you so much guys for your responses

what i did is used ajax.

//my blade file

 <meta name="csrf-token" content="{{ csrf_token() }}">
 <button id="deleteRecord" data-id="{{ $supplierbalance->id }}" type="button" name="deleting">
 </button>

 //my ajax

 <script>
     $("#deleteRecord").click(function () {

         var x = confirm("Are you sure you want to delete?");
         if (x) {
             var id = $(this).data("id");
             var token = $("meta[name='csrf-token']").attr("content");

             $.ajax({
                 url: "SupplierPayment/" + id,
                 type: 'DELETE',
                 data: {
                     "id": id,
                     "_token": token,
                 },
                 success: function (data) {
                     alert(data['success']);
                     location.reload(true);
                 }
             });
         } else {
             return false;
         }

     });
 </script>


 // my controller

 public function destroy($id)
 {

 $pur_to_store = PurchaseToStore::find($id);

 PurchaseOrder::where('hotel_id', Auth::user()->hotel_id)->where('id', $pur_to_store->purchase_order_id)->
 update([
 "move_stock" => '0',
 ]);

 $pur_to_store->delete();

 Alert::success('Data Deleted successfully');

 return response()->json([
 'success' => 'Record deleted successfully!'
 ]);

 }

after deleting the page refreshes. everything worked fine thank you guys

1 like

Please or to participate in this conversation.