CODEWITHSUNDEEP
javascriptjqueryajax
user889030
user889030

Reputation: 4764

ajax on success post form and change page

i got one strange requirement from my client , do not how to solve it .

am sending data through ajax , on success i want to goto another page by displaying message there , i handle this issue with GET method that when ajax success then using 

window.location.assign('Confirmation.aspx?d=data')

and switch to desire page , but client say not GET :D , so any idea how to do it with post .

what i tried :) 

<form action="Confirmation.aspx" method="POST" id="mok">
    <input id="mail" type="hidden" value="data" name="m" />
</form>

$("#mok").submit();

but no success , page is not changing , am on same page

Upvotes: 0

Views: 1331

Answers (1)

Icepickle
Icepickle

Reputation: 12806

I have to admit, i'm a bit unclear still on the first part of what is happening during your submission, however, you could add yourself to the onsubmit function to first send the data to your ajax-target, and after you have completed the request (succesfully) redirect the user to the second page.

// be sure to always return false, otherwise the default method would be used
function postForm(formElement) {
  if (typeof formElement === 'undefined' || !formElement) {
    // invalid call (expects at least the form element)
    return false;
  }
  // you could do some validation here, if you want, if it's unsuccesfull, show a message and return false
  // ...
  // check if the request hasn't been sent yet, if so, return false won't be resubmitted
  if (postForm.active) {
    return false;
  }
  postForm.active = true;

  // add a default option for the ajax call (in case no js is available, this option wouldn't be there
  // so you could redirect the page from aspx page)
  var data = {
      ajax: 1
    },
    hiddenElements = $('[type=hidden]'),
    i, 
      len, 
      dataKey, 
      dataValue, 
      dataItem,
      targetUrl = formElement.getAttribute('data-redirect');
  
  // get the hidden values to send that were added to the form
  for (i = 0, len = hiddenElements.length; i < len; i++) {
    dataItem = hiddenElements[i];
    dataKey = dataItem.name;
    dataValue = dataItem.value;

    if (typeof data[dataKey] !== 'undefined') {
      data[dataKey] = ',' + dataValue;
    } else {
      data[dataKey] = dataValue;
    }
  }

  // send the ajax request
  $.ajax({
    url: formElement.action,
    type: formElement.method || 'post',
    data: data,
    complete: function(response, state) {
      // free the form again (can be resubmitted at this time)
      postForm.active = false;
      if (state !== 'error') {
        // success, navigate to defined data-redirect
        window.location.assign(targetUrl);
      } else {
        // failed throw error, show message to user
        alert('Error occured during the request: ' + state);
      }
    },

  });
  // return false so that the form doesn't submit on its own
  return false;
}

// attach to all css class with name .submitter (allowing you to attach the mock submit request site wide)
$(function() {
  $('.submitter').on('click', function(e) {
    e.preventDefault();
    $('#mok').submit();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="[send-ajax-data-target-url]" method="post" id="mok" onsubmit="return postForm(this);" data-redirect="Confirmation.aspx">
  <input id="mail" type="hidden" value="data" name="m" />
  <button type="submit">Mock request</button>
</form>

<a href="#" class="submitter">Mock request</a>

A disadvantage of the above code, is that it wouldn't work without javascript, however, if your action would Confirmation.aspx and you see no "ajax=1" parameter inside your Request.Form, you could force the redirect from there and then keep the double functionality of using js to submit your form and redirect for the clients that can support it, and post with redirect from confirmation.aspx for those who don't support it.

At the end, I wasn't sure a 100% if your request still has to be sent over ajax (the above code uses the action that was defined in the form (so post/get)), but i thought i would still post it.

Upvotes: 1

Related Questions