Is it possible to send the contents of a JavaScript variable to PHP when a form is submitted?
Yes.
Just add a javascript callback to the form submit event
<script type="text/javascript">
var myglobalvariable = "myvalue";
onSubmit = function(){
document.myform.myinput.value = myglobalvariable; return true;
}
</script>
<form name="myform" id="myform" method="post" action="index.php" onsubmit="onSubmit();">
<input name="myinput" id="myinput" type="hidden" />
</form>
Related
I currently have a button in HTML with the following code:
<form id="tfnewsearch" method="get" >
<input type="text" id="search_query" name="q" size="21" maxlength="120"><input type="button" id="search_button" name="search" value = "Search"onclick="doSearch(this.form.q)">
</form>
The function 'doSearch()' works only if I click the submit button. What changes do I have to do if it has to work even if I just press the Enter key?
<form id="tfnewsearch" method="get" onsubmit="doSearch()" >
Simply change the onclick to an onsubmit and attach it to your form!
The proper way it to move it to simple JS script
<script type="text/javascript">
var form = document.querySelector('#tfnewsearch'),
query = form.querySelector('[name="q"]');
form.addEventListener('submit', function(){
doSearch(query.value);
});
</script>
I have multiple forms in my php file for different buttons. So, if I click on Back button, ramesh.php script should be called and so on. This is the code.
<form action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
<form action="update.php" method="post" >
<button type="submit">Update</button>
</form>
However, I need to pass some data to server from my client side on form submit just for the update button. I have a javascript function to send the data to server side as below.
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function(e) {
var mydata = 3;
if ($(this).is(':not([data-submit="true"])'))
{
$('form').append('<input type="hidden" name="foo" value="'+mydata+'">');
$('form').data('submit', 'true').submit();
e.preventDefault();
return false;
}
})
})
</script>
If I click on the update button, the javascript function is working fine. However, if I click on Back or Submit button, I should not be calling the javascript function. Is there someway to do this?
Give your form an id:
<form action="update.php" method="post" id="update-form">
Then use a more specific selector:
$("#update-form").submit(function() {
// Code
});
I'm not quite sure why you need JavaScript to dynamically add data to your form, however. You should just use an <input type="hidden" /> directly.
type=submit will always load the form's action. Try to specify wich form to submit.
<form name="backForm" id="backForm" action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form name="form2" id="form2" action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
Now you can access the form via document.backForm or document.getElementById("backForm") and than use submit(); like document.getElementById("backForm").submit();
I simplified my code for this question but in my final webapp there is ~100 forms on a page instead of the two here. My question is what is the best way to make my links submit forms with javascript. What I have now doesn't work obviously because there are multiple fields called supporttype. Whats the best way to do what I want to do for a large scale of ~100 forms.
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function getsupport ( selectedtype )
{
document.albumdl.supporttype.value = selectedtype ;
document.albumdl.submit() ;
}
-->
</script>
</head>
<body>
<form name="albumdl" method="post" action="processLinks.php">
<input type="hidden" name="supporttype" />
Form1
</form>
<form name="albumdl" method="post" action="processLinks.php">
<input type="hidden" name="supporttype" />
From2
</form>
</body>
</html>
You can construct the form dynamically:
function getSupport (type) {
var f = document.createElement('form'),
input = document.createElement('input');
f.setAttribute('action', 'processLinks.php');
f.setAttribute('method', 'post');
input.setAttribute('name', 'supporttype');
input.value = type;
f.appendChild(input);
f.submit();
}
The easiest way - put the values form1 and form2 into values of the corresponding inputs:
<form name="albumdl" method="post" action="processLinks.php">
<input type="hidden" name="supporttype" value="form1" />
Form1
</form>
<form name="albumdl" method="post" action="processLinks.php">
<input type="hidden" name="supporttype" value="form2" />
From2
</form>
And then write generic JS for submitting the form that is nearest to the clicked link:
function getsupport ( link ) {
var form = link.parentNode;
while (form.tagName != "FORM") {
form = form.parentNode;
}
form.submit();
}
I've got this onclick call:
onClick="mySubmit();
which calls this function:
function mySubmit(){
document.getElementById("myForm").submit();
}
which then submits this form:
<form id="myForm" action="action.php" method="post">
My question is: how do I send a variable to the form from the onClick to get something like <form id="myForm" action="action.php?id=**(the variable sent from the onclick goes here)**" method="post">
Thanks!
Easiest way: append a hidden field to the form.
<form id="myForm" action="action.php" method="post">
<input type='hidden' id= 'hiddenField' name='id' value='' />
<script>
function mySubmit() {
document.getElementById('hiddenField').value = "Whatever I want here";
document.getElementById("myForm").submit();
}
</script>
Or use a function like
function addHiddenField(form, props) {
Object.keys(props).forEach(fieldName => {
var field = form[fieldName];
if (!field) {
field = document.createElement('input');
field.type = 'hidden';
field.name = fieldName;
form.appendChild(field);
}
field.value = props[fieldName];
});
}
document.querySelector('form').addEventListener('submit', () => {
addHiddenField(this, {
someQueryName: 'someQueryValue',
otherQueryName: 'otherVal'
});
});
<form>
Name
<input name=name />
<input type=submit />
</form>
Note that you can use DevTools to modify the iframe's sandbox to allow it to submit forms and you can verify the posted URL. sandbox="... allow-forms"
place a input type hidden inside the form then submit the form
<input id="id" name="id" type="hidden" />
set the value of the hidden field in your javascript submit()
document.getElementById('id').value = **;
but by setting form method="post" the id will not be the part of query string, i.e. the url will remain action.php
instead
if you really want the id in query string i.e. url action.php?id=** then you need to change the form method="get", by this the hidden field id will automatically be the part of the url i.e action.php?id=**
read about difference between get and post
here is how you access posted value on next page if you really need to use method="post" action="action.php"
Your HTML :
<form id="myForm" action="#" method="post">
<input type='hidden' id="id" name='id' value='123' />
<input type='submit' name='submit' value='Click me !' onclick='addParam()' />
</form>
Your Script :
function addParam() {
var url = "action.php?id=" + document.getElementById('id').value;
document.getElementById("myForm").setAttribute('action', url);
}
Thank You.
I have an HTML form whose action should be set dynamically through JavaScript. How do I do it?
Here is what I am trying to achieve:
<script type="text/javascript">
function get_action() { // Inside script tags
return form_action;
}
</script>
<form action=get_action()>
...
</form>
You cannot invoke JavaScript functions in standard HTML attributes other than onXXX. Just assign it during window onload.
<script type="text/javascript">
window.onload = function() {
document.myform.action = get_action();
}
function get_action() {
return form_action;
}
</script>
<form name="myform">
...
</form>
You see that I've given the form a name, so that it's easily accessible in document.
Alternatively, you can also do it during submit event:
<script type="text/javascript">
function get_action(form) {
form.action = form_action;
}
</script>
<form onsubmit="get_action(this);">
...
</form>
Plain JavaScript:
document.getElementById('form_id').action; //Will retrieve it
document.getElementById('form_id').action = "script.php"; //Will set it
Using jQuery...
$("#form_id").attr("action"); //Will retrieve it
$("#form_id").attr("action", "/script.php"); //Will set it
Very easy solution with jQuery:
$('#myFormId').attr('action', 'myNewActionTarget.html');
Your form:
<form action=get_action() id="myFormId">
...
</form>
Actually, when we want this, we want to change the action depending on which submit button we press.
Here you do not need even assign name or id to the form. Just use the form property of the clicked element:
<form action = "/default/page" >
<input type=submit onclick='this.form.action="/this/page";' value="Save">
<input type=submit onclick='this.form.action="/that/page";' value="Cancel">
</form>
Change the action URL of a form:
<form id="myForm" action="">
<button onclick="changeAction()">Try it</button>
</form>
<script>
function changeAction() {
document.getElementById("myForm").action = "url/action_page.php";
}
</script>
document.forms[0].action="http://..."
...assuming it is the first form on the page.
Do as Rabbott says, or if you refuse jQuery:
<script type="text/javascript">
function get_action() { // inside script tags
return form_action;
}
</script>
<form action="" onsubmit="this.action=get_action();">
...
</form>
Setting form action after selection of option using JavaScript
<script>
function onSelectedOption(sel) {
if ((sel.selectedIndex) == 0) {
document.getElementById("edit").action =
"http://www.example.co.uk/index.php";
document.getElementById("edit").submit();
}
else
{
document.getElementById("edit").action =
"http://www.example.co.uk/different.php";
document.getElementById("edit").submit();
}
}
</script>
<form name="edit" id="edit" action="" method="GET">
<input type="hidden" name="id" value="{ID}" />
</form>
<select name="option" id="option" onchange="onSelectedOption(this);">
<option name="contactBuyer">Edit item</option>
<option name="relist">End listing</option>
</select>