Jump to content
man5

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

Recommended Posts

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>  


Share this post


Link to post
Share on other sites

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;
}

Share this post


Link to post
Share on other sites

 

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

Share this post


Link to post
Share on other sites

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 by Psycho

Share this post


Link to post
Share on other sites

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 by man5

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.