Submit AJAX Form Submission Programmatically

Anonymous

#273427

Hello,

I’m wondering if there is a way to submit the form with AJAX results via Javascript. We have a search and filter form that uses the AJAX option to filter and get results. That has a number of filter options that work fine as-is. We also have a few form inputs that are not part of the form (they are added to the page outside of search and filter), which we would like to also control the filtering of the results of the page using search and filter. One input is a keyword search input and the other is a select input for sorting.

Our idea is to have corresponding inputs in the actual search and filter form that are hidden, and then when a user changes the inputs outside of the form, we would use JS to change the search and filter inputs to those values and then submit the form. I’m able to update the values of the corresponding inputs and submit the form in JS, but that actually submits the form instead of running the AJAX request search and filter calls.

Is there a way to call the search and filter function to run the “form submission”? Does this idea of having inputs outside the form with hidden actual search and filter inputs sound right for this functionality?

Thank you for your help! Great plugin!
Travis

Trevor

#273435

To trigger the submit, use JavaScript like (assuming the form has an ID of 1234) this:

$('.searchandfilter[data-sf-form-id="1234"]').submit();

Anonymous

#275265

Hi Trevor,

Thanks for the info. For future if anyone else has a similar issue, I was triggering the submit using vanilla JS but after updating it to use jQuery, it worked. Thanks for your reply and help!

Trevor

#275269

Thanks for getting back to me. I will close this thread for now.

[Author]

Posts