Dynamically adding GET parameter to URL on form submit - javascript

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?


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


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

Related

Why are the URL parameters of a form GET request not in req.query, but they are there if instead of a form I use a link? [duplicate]

Below is my Javascript code where k and m are Javascript variables.
function javascriptfunction() {
document.forms[formname].action="gotopage.php?parameter1="+k+"&parameter2="+m;
document.forms[formname].submit();
}
The above code executes correctly when my HTML form has a POST method. Below is my HTML page:
<form name="formname" action=# method=POST>
<input type=text name="data1" value="one">
<input type=text name="data1" value="two">
<input type=button name="button1" value="send" onclick="javascritfunction();">
</form>
But when I give a GET method in my HTML form, then the HTML form data is submitted i.e
gotopage.php?data1=one&data2=two is submitting not Javascript action value i.e
gotopage.php?parameter1="+k+"&parameter2="+m
So how to submit the form with Javascript parameter when the method is GET in the HTML form?

Submitting a GET form will replace the query string in the action with the form data.
Put the data in hidden inputs instead.

In a GET request the form data has nowhere to 'go' other than in the query parameter string. So as Quentin points out, the query string gets automatically swapped out with the form field key value pairs. So you must use hidden fields to include extra data.
In a POST request you've also got the query parameter string available, if you want to use it, but the form data gets inserted into the request payload (which a GET request does not have), so does not interfere with the query string. That's why you can customise the action url with whatever query string you like.

Changing a form redirect value, when you can't edit the form HTML itself

I'm using a site builder tilda.cc.
They don't let you edit the HTML of their own elements.
But you can add an HTML block, where JS is allowed.
What I'm trying to do, is figure out, how can I add one of the form input values, to the redirect URL as a GET element.
For example:
User enters a form field.
On clicking to another form field, the code should add to the redirect URL the value that the user just entered.
For example, if user entered email#domain.com, the JS code would add it as a GET parameter to the redirect link.
Redirect.com/success?email=email#domain.com
Is it even possible to do it like this?
This is the basic code, how the form looks like:
<form action method="POST" data-success-url="redirect.com/success">
<input type="text" name="Email">
</form>
I can get the email to be displayed as an alert:
<script>
$('form').change(function() {
alert('email input value: ' +
$(this).find('input[name=Email]').val());
});
</script>
But how would I actually go about adding it to the "data-success-url"?

POST value in PHP when submitting onChange Javascript

I'm trying to submit an image file using javascript onChange, the thing is I don't know the value of the submitted POST form, and how can I set a custom POST value. Here is a simple example:
HTML:
<form id="form" action="upload.php" method="post">
<input type="file" id="file" name="image">
</form>
Javascript:
document.getElementById("file").onchange = function() {
document.getElementById("form").submit();
}
So after I submit the form I can only get the value $_POST['image']. Usually when receiving POST I check for the value of the submit button which I create uniquely for each form such as, updateform, updateclient. Now I want to do the same by creating custom messages, one page will send 'uploadclientimage' the other will say 'uploadshopimage' and so on. This way the upload.php file can process the status to decide what to do next.
In upload.php I want to do like this:
if(isset($_POST['uploadclientimage']))
{//Save in client uploads folder and update client info}
else if(isset($_POST['uploadshopimage']))
{//Save in shops uploads folder and update shop info}
else header("Location: login.php");
using submit button does that easily <input type="submit" name="uploadclientimage">
How can I do something like that with onChange form submit???

Just add a hidden field in the form. For example:
<input type="hidden" name="uploadclientimage" value="">

Rails form with URL constructed dynamically using one of its fields

I am building a search form that has a text input and a submit button (doh!). My routes.rb file contains:
get ':dependency', to: 'pages#dependency'
This means that whatever I put after / will route to PagesController#dependency, having params[:dependency] set to whatever string is set in the URL.
I would like to build a form that, upon submission, will go to /<value-from-text-input>, dynamically using the value supplied in the text input. How can I do this? It would be great if I don't have to use JavaScript.

Yeah this is a simple form action.
<form action="/" method="get">
<input type="text" name="dependency"/>
</form>
Because Rails is configured on the root '/' this will submit the form at a get action, appending the values to the end as a query string, which rails then converts to the cleaner route.

After clicking submit button the details entered by user has to be shown in another registration form

I created a HTML Registration page using HTML5 and Javascript its worked but after clicking submit button i have to show the details entered by the user in the another registration form (which is hidden on the same page before clicking submit button). once u have clicked submit button then that registration form has to be shown and the details which we entered also has to be shown.

If you have in first page fields with name "field1", "field2", "field3" etc
like -
<form action='page2.html'>
<input type='text' name='field1'>
<input type=submit>
</form>
In page2.html, get the parameters of GET request by javascript.
You can print the form values by using the function get(parameter) like - get("field1");
<script>
function get(name){
if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
return decodeURIComponent(name[1]);
}
</script>
In page1, you entered
<script>
document.write(get("field1"));
</script>
You can see it working here
But it is always better to use server side programing like php jsp asp etc. if you want to keep record for the fields and use it

Categories