Updating the form action using jQuery when submitting

Question

Updating the form action using jQuery when submitting

One of the challenges I am facing involves modifying the action URL of a filter form using jQuery.

<form id="filter_form" action="">
     <div style=" bottom: 0; z-index: 1; width: calc(100% - 20px);">
        <input id="filter_submit" type="submit" value="Suchen" data-theme="b" >
      </div>
</form>


$("#filter_submit").on("click", function(e){
   $("#filter_form").attr("action", "/test/").submit();
});

Unfortunately, this approach is not yielding the desired results. Is there another way to achieve this?

jquery

Answer 1

Answer №1

To make it work, simply remember to cancel the original event. For instance, take a look at this demonstration: https://jsfiddle.net/6oqy5jLz/

$('input').on('click', function(e) {
  $('form').attr('action', '/bar').submit();
  return false;
});

Answer 2

To make it work, simply remember to cancel the original event. For instance, take a look at this demonstration: https://jsfiddle.net/6oqy5jLz/

$('input').on('click', function(e) {
  $('form').attr('action', '/bar').submit();
  return false;
});

Answer 3

Answer №2

Absolutely achievable! You're very close.

All you need to do is make sure the form doesn't submit until you've updated the action.

Give this a shot (not tested - but it should do the trick):

$("#filter_submit").on("click", function(e){
   e.preventDefault();
   $("#filter_form").attr("action", "/test/").submit();
});

Answer 4

Absolutely achievable! You're very close.

All you need to do is make sure the form doesn't submit until you've updated the action.

Give this a shot (not tested - but it should do the trick):

$("#filter_submit").on("click", function(e){
   e.preventDefault();
   $("#filter_form").attr("action", "/test/").submit();
});

Updating the form action using jQuery when submitting

Answer №1

Answer №2

Similar questions

Check to see if modifying the HTML using jQuery results in any errors

Detecting the Escape key when the browser's search bar is open - a step-by-step guide

The jQuery fadeOut function modifies or erases the window hash

Storing data with jQuery

What steps do I need to take in order to transform my standard filter form that uses a submit button, into one

Exploring the applications of the `this` keyword within a jQuery-based JavaScript object

the click event fails to trigger when the id or class is modified

Update the text within a list item using jQuery

The functionality of jQuery's .hide method is not effective in this specific scenario

Maintaining an active link in a navigation list: A guide for Twitter Bootstrap

Unable to add to content that is generated dynamically

Having trouble getting $compile to work in an injected cshtml file with Angular

How can you apply a class to a different element by hovering over one element?

When working with ASP.NET MVC 3, be aware that the ContentResult may not accept a class that inherits from

Tips for transferring the id from the url to a php function seamlessly without causing a page refresh

Tips for maximizing efficiency and minimizing the use of switch conditions in JavaScript when multiple function calls are needed

Retrieving information from a Vue component using AJAX

JSON is functioning properly, however, I am encountering difficulties trying to make JSONP work

Calculating the number of items in the Ajax response list

Arrange a div element within another div by utilizing the fixed positioning property, while also accounting for any potential "white space