CODEWITHSUNDEEP
javascriptjquery
Noriaki Takamizawa
Noriaki Takamizawa

Reputation: 1049

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

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!

Upvotes: 0

Views: 684

Answers (2)

ScanQR
ScanQR

Reputation: 3818

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.

Upvotes: 1

31piy
31piy

Reputation: 23869

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.

Upvotes: 1

Related Questions