2

I'm working on a user management table. It has a column of buttons of either "Validate" or "Revoke" based on if the user is already validated or not in database. e.g.

<td><button type="button" class="btn btn-primary btn-md"  onclick= "Validate(this)" userID={{user.id}}>Validate</button></td>

When the user click on the button, it will redirect to the function below that call window.location.href to redirect a new route

function Validate(user) {
     var id  = user.getAttribute("userID")
     window.location.href = ("/userManagement/validate/" + id), true
}

The problem is, window.location.href do the GET instead of POST. How do I modify it, or is there any alternative way to redirect to my another route with the POST request?

Thanks.

Here is what I tried based on the suggestion:

$('#inset_form').html('<form action="/userManagement/validate/' + id + '" name="validate" method="post" style="display:none;"><input type="text" name="api_url" value="' + Return_URL + '" /></form>');

document.forms['vote'].submit();

or

var url = "/userManagement/validate/" + id;
            var form = $('<form action="' + url + '" method="post">' +
            '<input type="text" name="api_url" value="' + Return_URL + '" />' +
            '</form>');
            $('body').append(form);
            form.submit();

it does not redirect/reload the page, and I also don't think it access to the new route. Also, I tried,

var addr = "/userManagement/validate/" + id ;
            var xhr = new XMLHttpRequest();
            xhr.open('POST', addr, true);
            xhr.send();

Same issue as above.

shjnlee
  • 221
  • 2
  • 6
  • 20
  • You don't do it like this. `window.location.href` will always be a GET request. As a standard, use AJAX instead to POST your data on the server and wait for the request – CodeLover Feb 20 '18 at 04:14
  • @CodeLover: could you please to elaborate on your comment? I'm pretty new to this and never done ajax before. – shjnlee Feb 20 '18 at 04:22
  • Well, you got a lot of reading and typing ahead if you have never done AJAX. `AJAX means Asynchronous Javascript and XML` which is XMLHttpRequest object in JS used for client and server communication. There are a lot of good articles available online. More details here https://www.w3schools.com/xml/ajax_intro.asp – CodeLover Feb 20 '18 at 04:27
  • Btw, for my first comment. It should be `wait for the response`. – CodeLover Feb 20 '18 at 04:31

3 Answers3

1

As you actually want a redirection of the current route and not some kind of background dialogue (which would typically involve an Ajax post request) it seems to me that the approach involving a form and actually submitting it is the natural choice here, as already mentioned by @hugo411 in an earlier answer.

For that you should modify your approach a little:

  • the form itself does not need to be invisible and it can simply be defined on your page through some standard HTML code (with method="post"), but only once. Depending on which other input fields you also want to post with each submit you should wrap it around either your whole table or each individual row.
  • you will then need to bind a function to the click event of each button in the form that will set the action property of the (parent) form before submitting it.

Html:

<form class="myrouter" method="post">
<table>...
  ...<td><button type="button" class="btn btn-primary btn-md" userID={{user.id}}>Validate</button></td> ...
  ... </table>
</form>

edited: JavaScript (in the jquery $(function(){ ... })-section):

$('form.myrouter').on('click','button',function(ev){
  // some debugging stuff, if necessary ...
  console.log('current id:',this.userId);
  // in the current context "this" points to the clicked button
  $(this).closest('form').attr('action','/userManagement/validate/'+this.userId).submit();
  // finds the form object, changes the "action" and submits it
}

In this edited version the id is taken from the userId attribute of each button. Binding the event-function with on() gives you the flexibility of adding further buttons into the form dynamically. They will then automatically be bound to the same event function.

Carsten Massmann
  • 26,510
  • 2
  • 22
  • 43
0

You will want to use jQuery AJAX: Asynchronous JavaScript and XML, if you want to submit a form without actually submitting it. It is possible to do this in traditional JavaScript, but jQuery makes things like this much easier. Have a look at this reference page. Here's the one for .post(), which does virtually the same thing.

Tanner Babcock
  • 3,232
  • 6
  • 21
  • 23
0

You can use ajax in order to submit with POST

var id  = user.getAttribute("userID")
$.ajax({        
    url: '/userManagement/validate/',
    data: { userid : id },
    type: 'POST',
    success: function (response) {
        alert(response);
    },
    error: function(e){
        alert('Error: '+e);
    }  
});

But off course this will not refresh your page, you can handle the response and then redirect. If you want to stick with your stuff, you need a form submit around that button.

<form action="/userManagement/validate/" method="post">
<input type="hidden" id="userid" name="userid" value="{{user.id}}">
<button type="submit">
</form>
hugo411
  • 320
  • 1
  • 12
  • 29