Redirecting after select via jQuery/AJAX

Question

I currently have the basic form page set up listed below. How can I use AJAX instead to redirect to a new page. What I want to do is have a pre-set username as option one that directs to Page A with the relevant information. However, if a user decides to add in a new username, I want it to make a AJAX call to return a relevant JSON object with their information and load Page A with their information.

<form action="/login" id="loginForm" method="post" required>
    <p>Select the test user or add a new one: 
        <select id="selectUser" name="username" required>
            <option value = "">-- Select an Option --</option>
            <option value = "#>1</option>
            <option value = "2">Add new</option>
        </select>
    </p>
    <div class="newUser">
        <p>Please Specify: 
            <label id="userNameLabel">
                <input name="New Username" type="text" placeholder="New Username" size="30" required/>
            </label>
        </p>
    </div>
    <div id="submitHolder">
        <input type="button" value="Submit" id="submitButton">
        <input type="hidden"  id="hiddenInput">
    </div>

With the following Javascript:

$(document).ready(function(){

    $("p select[name=username]").change(function(e){
        if ($("p select[name=username]").val() == "2"){
            $(".newAccountInfo").show();
        } else{
            $(".newAccountInfo").hide();
        }
    });

    $(function(){
        $('#selectUser').on('change', function () {
            var url = $(this).val(); 
            $("#submitButton").on("click", function(){
            window.location = url;
            });
        });
    });

I'm still really new to AJAX, so I'm not sure how I would go about doing this type of fake "login".

Sounds like you can the same without Ajax. Not sure why you want to do it the hard way — beautifulcoder
– beautifulcoder, Commented Aug 27, 2015 at 15:34
I need to use ajax to make an API call. My end goal is to have it count as a different user session depending on whether or not a user selects the pre-set user name or adds their own in. For example, if they use the pre-set user, when they log in it'll say "test user" or something in the nav bar, but if they use their own account, it'll say their own name. I'm just not sure how to go about doing that since this isn't exactly conventional "authentication" I'd just be doing a GET request from the API and loading the new page with relevant user's information — cn1993
– cn1993, Commented Aug 27, 2015 at 15:59

Community · Accepted Answer · 2020-06-20 09:12:55Z

It should be like

<form action="/login" id="loginForm" method="post" required>
  <p>Select the test user or add a new one:
    <select id="userName" name="userName" required>
      <option value="">-- Select an Option --</option>
      <option value="first user">First user</option>
      <option value="Second user">Second User</option>
      <option value="newUser">Add new</option>
    </select>
  </p>
  <div class="newUserWrapper" style="display: none;">
    <div class="newUserContainer">
      <p>Please Specify:
        <label id="userNameLabel">
          <input name="userName" type="text" placeholder="New Username" size="30" required/>
        </label>
      </p>
    </div>
  </div>
  <div id="submitHolder">
    <input type="submit" value="Submit" id="submitButton">
    <input type="hidden" id="hiddenInput">
  </div>
</form>

and

$(document).ready(function() {
  var $newUserInputContainer = $('.newUserContainer');
  // Remove it from the DOM at the first time
  $newUserInputContainer.remove();
  $('#userName').on('change', function() {
    if ($(this).val() == 'newUser') {
      $('.newUserWrapper').show();
      $('.newUserWrapper').html($newUserInputContainer)
    } else {
      $('.newUserWrapper').hide().empty();
    }
  })

  $('form').on('submit', function(e) {
    e.preventDefault();
    var form = $("form").serialize();
    submitUserName(form);
  });
});

function submitUserName(data) {
  $.ajax({
    url: 'path/to/your/service',
    data: data,
    dataType: 'json',
    success: function(response) {
      /**
       * Your request is responded
       * You do not need to redirect
       * Just show the information in the same page
       * 
       **/

    },
    error: function() {
      // Show some error messages
    }
  });
}

Note: insertion and removal from DOM is done to make sure the value selected from the select box is submitted for sure. When user selects new user then new field with the same name appears and user inputs in the new textbox. and at the time of submission both the fields get submitted however the later has higher precedence. Server app is gonna take the later one.

Relates sample app: http://codepen.io/anon/pen/GpKmqg

Collectives™ on Stack Overflow

Redirecting after select via jQuery/AJAX

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related