change form action is not working - form not defined

change form action is not working - form not defined

I have a form that allows users to edit the administrators of a post but also create new administrators for the post.

So this form has some radio buttons. Each radio button corresponds to an administrator of a post. When some radio button (administrator) is clicked the details of the administrator are populated in the form fields. When the "Update" button has clicked the details of the administrator are updated.

But then there is a static radio button, "Create new administrator", that allows creating a new administrator. When this radio button is selected the form fields are reset so the user can insert values to create a new admin when it clicks on the "Store" button.

This first part was working fine.


But then I needed to add some jQuery to change the form action based on radio button selection, so its possible to update but also create administrators when the "Create new admin" radio button is selected.

 But when adding this code "form.attr('action', '{{route('admins.store', ['post_id' => $post->id])}}');" and "form.attr('action', '{{route('admins.update', ['post_id' => $post->id])}}');"  that first part above stops working. 

And in the console it appears the error "form is not defined" on this line "form.attr('action', '{{route('admins.store', ['post_id' => $post->id])}}');" .

Do you know why?


jQuery:

  1. var admins = {!!  $administrators !!}

  3.     $("input[name='radiobutton']").click(function() {

  5.     if($(this).attr("id") == "create_administrator"){
  6.         $("#adminUpdateButton").hide();
  7.         $("#adminStoreButton").show();
  8.         form.attr('action', '{{route('admins.store', ['post_id' => $post->id])}}');
  9.     }
  10.     else{
  11.         $("#adminUpdateButton").show();
  12.         $("#adminStoreButton").hide();
  13.         form.attr('action', '{{route('admins.update', ['post_id' => $post->id])}}');
  14.     }

  16.     let id = $(this).attr("id");

  18.     let data = administrators.find(e => e.id == id) || {
  19.         name: "",
  20.        email: "",
  21.        ...: ""
  22.     };
  23.    $("input[name='name']").val(data.name);
  24.     ...
  25.     });

Form:

  2. <form method="post" class="clearfix" action="{{route('admins.update', ['id' => $post->id])}}" enctype="multipart/form-data">
  3.     {{csrf_field()}}
  4.     @foreach($administrators $admin)
  5.           <div class="form-check">
  6.             <input class="form-check-input" type="radio" name="radiobutton" id="{{$admin->id}}" value="">
  7.             <label class="form-check-label" for="">
  8.               {{$admin->name}}
  9.             </label>
  10.           </div>
  11.     @endforeach
  12.     <div class="form-check">
  13.       <input class="form-check-input" type="radio" name="radiobutton" id="create_administrator"
  14.              value="option2">
  15.       <label class="form-check-label" for="exampleRadios2">
  16.           Create new administrator
  17.       </label>
  18.   </div>
  19.   <div class="form-group">
  20.     <label for="name">Name</label>
  21.     <input type="text" required class="form-control" value="{{ $admin->name }}" name="name">
  22.   </div>

  24.   <!-- below I have more form fields like administrator name, email, etc -->

  26.   <input type="submit" id="adminStoreButton" class="btn btn-primary" value="Create"/>
  27.   <input type="submit" id="adminUpdateButton" class="btn btn-primary" value="Update"/>
  28.   </form>