Muli-form with separate submit button for each page of form

I did try adding more submit buttons in the template eg:
<button type=”submit” formaction=”url/?id=” >New Button</button>

Which I hoped would submit and move to the chosen page, the button appeared nicely, but the form still submitted to the original page, not the new action.

The best way to do something like this is with javascript. When a user clicks on one of your navigation buttons, the javascript stops the form submission, changes the “action” attribute of the form to point to the page where they want to go, then submits the form. The data gets saved, and they are taken to the intended page.

I am trying to do as you say, so I have a link with an id which I can target for the ‘on click’ so

$(“#target-id”).on(“click”, function(e){
e.preventDefault();
$(‘.pdb_record’).attr(‘action’, “/new-url/?pid”).submit();
});

But I cannot seem to get which attribute to target where I have put (.pdb_record)

I can’t see a class or an id for the form.

Am I doing this completely wrong please ?

Thanks

You’re on the right track, but several things need to be changed.

First step is always to make sure you are targeting the correct elements. Your first selector, I can’t tell if that is correct, but that should be the button that is supposed to take the user to another page. If that button is a “submit” type input, that should work to prevent the form getting submitted. If it’s not a submit, you won’t need to prevent the default action.

Your next selector should target the <form> element, looks like it doesn’t, should probably be $(‘.pdb_record form’)

Thank you for extra pointers.

I have been struggling all day with lots of variations, but still can’t get this to work.

I have created a test button

<button type=”submit”><?php echo $this->shortcode_atts[‘submit_button'</button>
<button type=”submit” id =”test-button” >TEST BUTTON</button>

Which I have added to the template, under the usual submit button.

The latest script I have tried is

$(“#test-button”).on(“click”, function(e){
e.preventDefault();
$(‘form’).attr(‘action’,’new-client/employment-details/?pid=’).submit();

});

I know I am targeting the first selector OK, as I can test other things inside the on click function.

In Chrome and Edge browsers, it partially works. Sometimes it works fine, sometimes it doesn’t remember the pid, so ‘page not found’ BUT in doesn’t work at all in Mozilla Firefox, which is the browser I had been using for development.

I cannot find an ID or name for the form to try document.getElementById(‘myForm’)
to more directly target the form. I don’t want to make any changes to the plugin, does the form have an ID or name? If I target $(‘.pdb_record form’), that doesn’t work at all.

Is it possible that you cannot change the action on a multi-form or an action that has been set in a shortcode? I have tried searching but can’t find any answer.

Can you think of any reason why I can’t get anything to work please. Thank you.

This kind of thing is hard to really debug with only the js to look at, but you should try the selector i suggested, just using $(‘form’) is asking for trouble because it will target any form tag on the page…you need to target only that specific form.