Is there a way to customize a form action url using jquery?

[man5]

Typically when you submit a form, it's in a format like this "collections?type='wheels'&make='acura'&year='2016'&model='mdx' ".  Instead of that format, I would like to do something like this " collections/wheels/acura+2016+mdx ".

 

How would I go on about doing that format with jquery submit form? 

 

This is my setup so far.

<script>
  // Code goes here
  $(document).ready(function() {

    $('#search').on('submit', function() {
      var type = $('#type').val();
      var make = $('#make').val();
      var year = $('#year').val();
      var model = $('#model').val();

      var formAction = $('#search-form').attr('action');
      $('#search-form').attr('action', formAction + type + make + year + model);
  });
</script>
<form id="search-form" action="/collections/" method="get">
  <select id="type" name="type">
    // type list goes here
  </select>
  <select id="make" name="make">
    // make list goes here
  </select>
  <select id="year" name="year">
    // year list goes here
  </select>
  <select id="model" name="model">
    // model list goes here
  </select>
  <input type="submit" id="search" value="Search">
</form>  

[Psycho]

You can SUBMIT a form via GET or POST and you cannot change how the data is sent. There is a standard.

 

However, you could just use the form to redirect to a page based on the values in the form. Create a function that is called when the form is posted and have it take the values and dynamically generate the page to redirect to.

 

Modified form tag

 

<form id="search-form" action="/collections/" method="get" onsubmit="return submitAction(this);">

 

Function to execute when form is submitted. The return false is required to prevent the form from submitting as it normally would. Also note that this is just a bare bones, "example" function. You need to validate that the fields have necessary data before trying to redirect. You should spend some time to complete this.

 

function submitAction(formObj)
{
    var root  = formObj.action;
    var type  = formObj.elements['type'].value;
    var make  = formObj.elements['make'].value;
    var year  = formObj.elements['year'].value;
    var model = formObj.elements['model'].value;
    
    var href = root + type + '/' + make + '+' + year + '+' + model;
    window.location.href = href;
    return false;
}

[man5]

 

You can SUBMIT a form via GET or POST and you cannot change how the data is sent. There is a standard.

 

However, you could just use the form to redirect to a page based on the values in the form. Create a function that is called when the form is posted and have it take the values and dynamically generate the page to redirect to.

 

Modified form tag

<form id="search-form" action="/collections/" method="get" onsubmit="return submitAction(this);">

Function to execute when form is submitted. The return false is required to prevent the form from submitting as it normally would. Also note that this is just a bare bones, "example" function. You need to validate that the fields have necessary data before trying to redirect. You should spend some time to complete this.

function submitAction(formObj)
{
    var root  = formObj.action;
    var type  = formObj.elements['type'].value;
    var make  = formObj.elements['make'].value;
    var year  = formObj.elements['year'].value;
    var model = formObj.elements['model'].value;
    
    var href = root + type + '/' + make + '+' + year + '+' + model;
    window.location.href = href;
    return false;
}

 

 

You can SUBMIT a form via GET or POST and you cannot change how the data is sent. There is a standard.

 

However, you could just use the form to redirect to a page based on the values in the form. Create a function that is called when the form is posted and have it take the values and dynamically generate the page to redirect to.

 

Modified form tag

<form id="search-form" action="/collections/" method="get" onsubmit="return submitAction(this);">

Function to execute when form is submitted. The return false is required to prevent the form from submitting as it normally would. Also note that this is just a bare bones, "example" function. You need to validate that the fields have necessary data before trying to redirect. You should spend some time to complete this.

function submitAction(formObj)
{
    var root  = formObj.action;
    var type  = formObj.elements['type'].value;
    var make  = formObj.elements['make'].value;
    var year  = formObj.elements['year'].value;
    var model = formObj.elements['model'].value;
    
    var href = root + type + '/' + make + '+' + year + '+' + model;
    window.location.href = href;
    return false;
}

 

 

Yes what you described is what I'm looking for.  Having said that, I still get the wrong url format on form submit.  It looks like this.

/collections/?type=wheels&make=Acura&year=2016&model=ILX

[Psycho]

You must not have implemented it correctly, because what you show is what would be in the URL when the form is submitted. The code I provided will create a URL based on the form fields and do a redirect to that URL - the form is never submitted. Because your form is still being submitted, either the javascript is not being called or there is an error.

 

Show the code you have.

Edited March 17, 2016 by Psycho

[man5]

You must not have implemented it correctly, because what you show is what would be in the URL when the form is submitted. The code I provided will create a URL based on the form fields and do a redirect to that URL - the form is never submitted. Because your form is still being submitted, either the javascript is not being called or there is an error.

 

Show the code you have.

 

 

You're correct.  I had the function inside "$(document).ready(function($)" which is why it wasn't working.  Removing that, It works perfectly now. 

 

Thanks!

Edited March 17, 2016 by man5