Dynamically adding GET parameter to URL on form submit

Question

I have a simple form in a PHP application that I have to submit via POST method. Something like:

<form action="URL?page_id=10" method="POST">
    <select name="some_name" id="some_id">
        <option value='1'>...</option>
        <option value='2'>...</option>
        ...
    </select>
    ...
    //submit button here
</form>

The goal is to go to the following URL on submit:

URL?page_id=10&selected_id=SELECTED_ID

where SELECTED_ID is the value chosen by the user from the select drop down menu in the form. I've done it by converting the whole form to post the parameters as GET as I need to have this SELECTED_ID visible in the URL. However, another requirement turned up saying that I need to pass everything through POST and still have the SELECTED_ID visible in the URL and now I'm looking for alternatives.

So the question gets down to: how can I add dynamically another GET parameter to the URL upon POST form submission with one of the values submitted with the form?

Just append hidden input with that name (`SELECTED_ID`) into your form — hindmost, Jul 22 '15 at 11:16
You can only achieve that with JavaScript or by redirecting on the server side. — Quentin, Jul 22 '15 at 11:16
I cannot use hidden input as I don't know what value will be selected by the user. I have no problem using JavaScript here but how can I append something to the URL dynamically? — mmvsbg, Jul 22 '15 at 11:17
I think you should be able to add a selection listener to your options and use JavaScript to modify the form's `action` value. Don't have time to test it, though. — Marvin, Jul 22 '15 at 11:22

score 1 · Accepted Answer · answered Jul 22 '15 at 11:22

1

first you have to add a id to your form as below

<form id='form1' action="URL?page_id=10" method="POST">

then add call below function on your button click

 function test(){
    $('#form1').attr('action', $(this).attr('formaction')+'&selected_id='+$('#some_id').val());
    }

answered Jul 22 '15 at 11:22

joker

982
9
23

I had to change the "$(this)" with "$('#form1')" to make it work but it does the job as advertised. Thank you very much! – mmvsbg Jul 22 '15 at 12:16
I had to change the `attr('formaction')` to just `attr('action')` maybe this is something between version of jquery, but I got it to work. Thanks! – Preston Hager Oct 04 '17 at 19:33

score 1 · Answer 2 · answered Jul 22 '15 at 11:22

1

use <form method="GET"> .. all the field values will be appended to the url automatically

answered Jul 22 '15 at 11:22

Ehab Eldeeb

722
4
12

As noted in the question, I'm required to use POST on submission. – mmvsbg Jul 22 '15 at 11:23
using `method = "GET"` you cannot store values in server side! – Guruprasad J Rao Jul 22 '15 at 11:23
you can use javascript to achieve this, for example the select outside the form, and onchange() append to the url, and the rest of the form to be used as POST normally – Ehab Eldeeb Jul 22 '15 at 11:25

Dynamically adding GET parameter to URL on form submit

2 Answers2

Linked