Jquery - Submit Form To Restful Url

My mind has gone 100% blank on this so need some guidance please.

Solution 1:

Solution with jquery:

$('#searchForm').on('submit', function(event){
    $('[name=s]').prop('disabled', true)
    $(this).attr('action', 'http://example.com/rest/ful/url/' +     $('[name=s]').val());
});

https://jsfiddle.net/3y4efht0/1/

Solution 2:

Use .submit event of jquery and fetch the input value and use window.location.href to achieve your requirement.

Please check below snippet.

$("#searchForm").submit(function( event ) {
  var searchTerm = $("input[name='s']").val();
  if($.trim(searchTerm)!=""){
    var redirectURL = "http://example.com/rest/ful/url/"+$.trim(searchTerm)+"/";
    console.log(redirectURL);
    window.location.href=redirectURL;
  }else{
    alert("Please enter search term!");
  }
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formaction="/"id="searchForm"><inputtype="text"name="s"placeholder="Search..."><inputtype="submit"value="Search"></form>

Solution 3:

You don't need jquery to do that, but it can help, you have to listen for the submit event, prevent the default behaviour and redirect to the page you want :

$('#searchForm').on('submit', function(e){
    e.preventDefault();
    document.location.href = 'http://example.com/rest/ful/url/'+$('#s').val()+'/'
})

Share

You may like these posts

• 
  Flask Wtf.quick_form Running Some Javascript And Setting A Form Variable
• 
  Using Angular 2 Without Typescript Transpiler
• 
  Codeigniter: Table List Using Javascript And Php
• 
  How Do I Send 'put' Request Through Javascript & Ajax?