How to replace REST URL on FORM Action by using JQuery?

Question

I can't figure out how to make RESTful URL via JS. Here's my form.

<form id="searchform" action="" method="get">
    <input type="text" name="id"/>
    <input type="text" name="yourname"/>
    <input type="submit" value="Submit"/>
</form>

And below is JS.

<script type="text/javascript" language="javascript">
$('input[type="submit"]').on('click',function(e)
{
    e.preventDefault();
    var forms = $(this).parents('searchform');
    var id = forms.attr('id');
    var yourname = forms.attr('yourname');

    var dataString = forms.serialize()+'/'+id+'/'+yourname;

    forms.submit();

});
</script>

I'd like to change original form url like '?id=1&yourname=xxx' into '/1/xxx'. Please let me know where to modify? Thanks in advance!

Thanks @TechBreak. Unfortunately, nothing happened. I'll describe it on your answer. — Noriaki Takamizawa
– Noriaki Takamizawa, Commented Dec 3, 2016 at 9:58

ScanQR · Accepted Answer · 2016-12-03 12:59:49Z

1

You need to update the form action before submit as follows,

<script type="text/javascript" language="javascript">
$('input[type="submit"]').on('click',function(e)
{
    e.preventDefault();
    var forms = $('form#searchform');
    var id = forms.find('#yourid').val();
    var yourname = forms.find('#yourname').val();
    //update your action to your url and submit
    var dataString = $(this).attr('action') + '/' + id + '/' + yourname;
    forms.attr('action', dataString).submit();
});
</script>

Give name to your form, also give id to your input elements and use val() to get the values

<form id="searchform" action="" method="POST" name="searchForm'>
    <input type="text" name="yourid" id="yourid"/>
    <input type="text" name="yourname" id="yourname" />
    <input type="submit" value="Submit"/>
</form>

EDIT : After OP's new requirement, updating method from GET to POST.

edited Dec 3, 2016 at 12:59

answered Dec 3, 2016 at 9:21

ScanQR

3,8202 gold badges16 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Noriaki Takamizawa Over a year ago

Appreciated! Though I've tried your answer, it won't work. Nothing happen. And when I attach two valuable (id, yourname) by chrome debugger, nothing is shown. Probably, the two valuable can't obtain form data. How do you feel?

ScanQR Over a year ago

@NoriakiTakamizawa try updated answer. You need to use .val() and find by id. attr() will give you attribute values and not input values.

ScanQR Over a year ago

@NoriakiTakamizawa glad to help plz accept and upvote :)

Noriaki Takamizawa Over a year ago

One more thing. URL seems like working. But query_string is still there. Like someurl.com/id/yourname/?id=1&yourname=you. How should I eliminate query string?

ScanQR Over a year ago

@NoriakiTakamizawa pleas accept my answer if it helped :)

|

31piy · Accepted Answer · 2016-12-03 10:18:22Z

1

Try this:

$("form").submit(function(e) {
  e.preventDefault();

  var id = $("input[name=id]").val(),
    yourname = $("input[name=yourname]").val();

  var dataString = $(this).attr('action') + '/' + id + '/' + yourname;
  console.log(dataString); // Submit your form to dataString
});

dataString will contain the URL that you are expecting. Give it a try.

answered Dec 3, 2016 at 10:18

31piy

23.9k6 gold badges51 silver badges69 bronze badges

5 Comments

Noriaki Takamizawa Over a year ago

Thanks! But after it applied, debugger said 'undefined' for the valuables. Despite of setting ids, it doesn't work so far.

31piy Over a year ago

You do not need to specify IDs for your inputs for your code to work. Here is a working plunker to help you out. Observe the output in the console. This is exactly what you want.

Noriaki Takamizawa Over a year ago

Thanks! You might be right. After put IDs, it works.

31piy Over a year ago

@NoriakiTakamizawa Perhaps you read it wrong. IDs are NOT required at all for your code to work.

Noriaki Takamizawa Over a year ago

Sorry for that. I mean another 'id'. I put id in the field like this -> <input type="text" id="id" name="id"/> BTW I have another problem to clear. Unfortunately, there's some query strings after url. someurl.com/id/name?id=1&name=aaa I can7t figure out how to delete the query strings.

Collectives™ on Stack Overflow

How to replace REST URL on FORM Action by using JQuery?

2 Answers 2

8 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related