CODEWITHSUNDEEP
jqueryhtmlajax
Jarrod Estepp
Jarrod Estepp

Reputation: 11

JQuery redirecting browser instead of doing tasks in the background

I have a page called [Settings->Admins] which will create and manage admin accounts for the site. I have the html form setup as below:

<form id="createAdmin">
  <div class="form-group row text-center">
    <label for="username" class="offset-md-3 col-md-2">Username</label>
    <div class="col-md-3">
      <input type="text" id="username" name="username" class="form-control form-control-sm">
    </div>
  </div>
  <div class="form-group row text-center">
    <label for="password" class="offset-md-3 col-md-2">Password</label>
    <div class="col-md-3">
      <input type="password" id="password" name="password"
      class="form-control form-control-sm">
    </div>
  </div>
  <div class="form-group row text-center">
    <label for="password_confirmation" class="offset-md-3 col-md-2">Confirm Password</label>
    <div class="col-md-3">
      <input type="password" id="password_confirmation" name="password_confirmation"
      class="form-control form-control-sm">
    </div>
  </div>
  <div class="form-group row text-center">
    <label for="email" class="offset-md-3 col-md-2">Email</label>
    <div class="col-md-3">
      <input type="email" id="email" name="email" class="form-control form-control-sm">
    </div>
  </div>
  <div class="form-group row text-center">
    <label for="first_name" class="offset-md-3 col-md-2">First Name</label>
    <div class="col-md-3">
      <input type="text" id="first_name" name="first_name"
      class="form-control form-control-sm">
    </div>
  </div>
  <div class="form-group row text-center">
    <label for="last_name" class="offset-md-3 col-md-2">Last Name</label>
    <div class="col-md-3">
      <input type="text" id="last_name" name="last_name" class="form-control form-control-sm">
    </div>
  </div>
  <div class="form-group row text-center">
    <div class="offset-md-5 col-md-2">
      <button id="createAdminSubmit" class="btn btn-primary">Create</button>
    </div>
  </div>
</form>

And the Javascript is below the form code as follows:

<script>
  $(document).ready(function() {
    $('#createAdmin').on('submit', function(e) {
      e.preventDefault();
      var username = $('#username').val();
      var password = $('#password').val();
      var password_confirmation = $('#password_confirmation').val();
      var email = $('#email').val();
      var first_name = $('#first_name').val();
      var last_name = $('#last_name').val();
      $.ajax({
        type: "POST",
        url: host+'/login',
        data: {username:username, password:password, password_confirmation:password_confirmation, email:email, first_name:first_name, last_name:last_name}
        success: function(response) {
          if(response=="success") {
            // Would return a success message here when it works
          } else {
            // Would return a error message here when it works
          }
        }
      });
    });
  });
</script>

When I try to submit the form it redirects to the same page with a GET request (?username=&password=.... and so on) even tho I clearly said POST in the ajax.

Why is it not doing the ajax in the background? Its doing a GET request as if the ajax doesn't exist. I am using Metronic latest 5 Admin Template and Laravel 5.7 (latest stable).

F12 Log is reporting this:

admins?username=&password=&password_confirmation=&email=&first_name=&last_name=:591 Uncaught ReferenceError: $ is not defined at admins?username=&password=&password_confirmation=&email=&first_name=&last_name=:591 (anonymous) @ admins?username=&password=&password_confirmation=&email=&first_name=&last_name=:591

Line 591 is:

$(document).ready(function() {

Upvotes: 0

Views: 37

Answers (2)

Jarrod Estepp
Jarrod Estepp

Reputation: 11

SOLVED!

Must include after the jquery. Metronic includes the JQuery file at the footer as most developers do, so be sure to include the script tag below the JQuery file to load JQuery first as you do css files. I did this since i am using Laravel blade template engine:

Add yield('customScripts') to the blade layout file footer after all javascript is added. Then, in the appropriate blade file, add a new section called CustomScripts as you would do ('content') and it should work!

Upvotes: 0

Adrian Brand
Adrian Brand

Reputation: 21628

There is no comma between your data and success.

data: {username:username, password:password, password_confirmation:password_confirmation, email:email, first_name:first_name, last_name:last_name}

needs a comma at the end of the line.

Hit F12 to open up a debug window and these kind of errors will be reported on the console with a description and line number.

Upvotes: 0

Related Questions