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!");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" id="searchForm">
  <input type="text" name="s" placeholder="Search...">
  <input type="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

• 
  Cannot Find Name 'jquery' Error In Controller.js
• 
  Menu Items Not Showing Up Properly As A Mega Menu
• 
  Lightbox Isn't Working Properly
• 
  Select Mutiple Options From Jquery Autocomplete With Checkboxes