Submit form with parameter through Javascript - javascript

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.

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.

POST content is empty at reception

I have a string that I would like to pass from JS to PHP via a hidden input, but the POST form does not return anything at arrival (I checked it with a var_dump($_POST)), which never happened to me at all.
Here is my HTML code:
<form action='' id='hash-form'>
<input type='hidden' id='hash' name='hash'/>
</form>
Here is my JS code for changing the value and submitting:
document.getElementById("hash").value = content;
console.log(document.getElementById("hash").value);
document.getElementById("hash-form").submit();
Thanks in advance!
The form lacks of the method attribute, thus it's GET by default, not post.
Add method="POST" into a form tag.
What is the default form HTTP method?

Dynamically adding GET parameter to URL on form submit

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

submitting a form with link

I have following form structure
<form action="{Basket-Addproduct}" method="post" id="items-form">
<button class="button-text button-gray-custom" type="submit" value="Submit" name="{dynamically generated name}"><span>Submit</span></button>
</form>
here "dynamically generated name" is the key field which tells which element or product to submit..
I want it to convert it into link,
I have tried following
Add This
Its getting submitted but not able to add the product...
Its expecting the name parameter also to be passed so it knows which product to add...
Stuck....:(
Any solution appreciated...
you should have <input type="submit".
There is no need to do JavaScript.
Just remove JS and then have as many <input type="submit" buttons as you want.
The GET/POST should have the key/value you look for.
E.g.
<input type="submit" name="item1" value="submit" />
when you click it, the recipient receives (sorry PHP used here):
$_GET['item1'] = submit
and other submits do not have value.
You can use jQuery to do this clean and easy.
So, here's your link:
<a id="form-submit-btn" href="#" name="{dynamically generated name}">Add This</a>
And your form:
<form action="{Basket-Addproduct}" method="post" id="items-form">
<!-- form contents -->
</form>
Now write a JavaScript which submits your form data on a button click:
$('#form-submit-btn').click(function(e) {
e.preventDefault();
var $form = $('#items-form');
$.post($form.attr('action'), $form.serialize(), function(data){
// do something with the data
});
});
Your code should work, I have created an example for you to test, here it is: http://jsfiddle.net/afzaal_ahmad_zeeshan/yFWzE/
<form id="form">
<input type="text" name="something" id="something" />
</form>
Submit
By using this you will submit the form using the id of it. And other user told you to use jQuery, which I am afraid you don't want to. In jQuery you use .preventDefault but if you want to stick to the simple JS then you will be using href="#" which will automatically prevent any anchor tag execution.
And the result of the request can be checked, which sadly is an error. But it makes sure that the request has been sent to the server.
Then you can test the methods and other type of executions by having some if else blocks as
if(condition == true) {
// if post
} else {
// if get
}
The parameter might be mis handled on the server side, because when the form is submitted you need to take out the data from the QueryString (the request is GET). So, you need to check that, or if that's not the issue then make sure you're pointing the element well. Otherwise if there is no such element, nothing will be sent.
I am not sure, which language you're using but here is the code for ASP.NET
var value = Request.QueryString["something"];
PHP version is already present above. That all depends on the parameters you send with the request. You are more likely to convert the code to a function. Such as
Submit
And the function
function submit() {
// create variable
var value = document.getElementById("something").value;\
// now submit the form and all that other bla bla, which
// you want to be process,
}
If you find this one tricky, using jQuery as
var values = $('form').serialize();
will be easy. This will create a string of the form and will send it with the request.

How send a form with Javascript when input name is "submit"?

Question: How can you send a form with Javascript if one form input has the name submit?
Background: I am redirecting the user to another page with a hidden HTML form. I cannot change name on the (hidden) inputs, since the other page is on another server and the inputs need to be exactly as they are. My HTML form looks like this:
<form id="redirectForm" method="post" action="http://www.example.com/">
<input name="search" type="hidden" value="search for this" />
<input name="submit" type="hidden" value="search now" />
</form>
I use the following javascript line to send the form automatically today:
document.getElementById('redirectForm').submit();
However, since the name of one input is "submit" (it cannot be something else, or the other server won't handle the request), document.getElementById('redirectForm').submit refers to the input as it overrides the form function submit().
The error message in Firefox is: Error: document.getElementById("requestform").submit is not a function. Similar error message in Safari.
Worth noting: It's often a lot easier to just change the input name to something other than "submit". Please use the solution below only if that's really not possible.
You need to get the submit function from a different form:
document.createElement('form').submit.call(document.getElementById('redirectForm'));
If you have already another <form> tag, you can use it instead of creating another one.
Use submit() method from HTMLFormElement.prototype:
HTMLFormElement.prototype.submit.call(document.getElementById('redirectForm'));

Categories