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();
}
Related
I have a form in which there is one text field is provided with a submit button.On clicking submit button,it redirects to second php page from first php page.
index.php
<form action="submit.php" method="get">
<input type="text" name="search" id="search" />
<input type="submit" value="submit" onclick="convert()" />
</form
<script type="text/javascript">
function convert()
{
alert("hi");
var str ;
str = document.getElementById("search").value;
document.writeln(str.toLowerCase());
}
</script>
On submitting the form,i want the url to become like submit.php?search=text
I want this text to be in lower case,although if text entered is uppercase.
Please guide me how to make this text lower case,I am using the above script for converting it to lower case.But its not converting the text in lower case in URL.
Please guide me on this..
There was a few errors, you were missing the right angle bracket on </form> and you were trying to write the value rather than setting the field value, try this...
<form action="submit.php" method="get">
<input type="text" name="search" id="search" />
<input type="submit" value="submit" onclick="convert();" />
</form>
<script type="text/javascript">
function convert() {
alert("hi");
var str;
var srch=document.getElementById("search");
str = srch.value;
srch.value=str.toLowerCase();
}
</script>
You can do this only using javascript with a few extra stuff:
1) Give your <form> an id
<form action="submit.php" method="get" id="form1">
2) Make your <input> type as button. The reason for this is because we want to make sure the convert() function is executed first, and after that we will submit the form.
<input type="button" value="submit" onclick="convert()" />
3) Finally javascript to:
function convert()
{
alert("hi");
var str ;
str = document.getElementById("search");
str.value = (str.value.toLowerCase());
//get the form id and submit it
var form = document.getElementById("form1");
form.submit();
}
Fiddle
You are use form element so you can get any elements inside form element access by name, Here Our form name is form1 and inside this form inputbox name="search" and access this value by this way, document.form1.search.value.toLowerCase();
Check this Demo jsFiddle
JavaScript
function convert() {
alert("hi");
var str = document.form1.search.value.toLowerCase();
document.writeln(str);
//console.log(str);
}
HTML
<form name="form1" method="get">
<input type="text" name="search" id="search" />
<input type="submit" value="submit" onclick="convert();" />
</form >
try like this:
alert("hi");
document.getElementById("search").value = document.getElementById("search").value.toLowerCase();
return true;
Fiddle Live
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>
<html>
<head>
<title>Untitled</title>
</head>
<script>
document.onsubmit = formSubmitted;
function formSubmitted() {
alert("formSubmitted");
}
function clickAction() {
alert("clickAction");
var aForm = document.forms['form2'];
aForm.action = "#";
aForm.submit();
}
</script>
<body>
<form name="form1">
<input type="submit" value="Direct Submit">
</form>
<br>
<form name="form2" action="#$">
<input type="button" value="Onclick Submit" Onclick="clickAction();">
</form>
</body>
</html>
This is my code, I'm detecting form submit using document.onsubmit = formSubmitted;
alert is working.
but its not work when I tried to submit the form via javascript(click "Onclick Submit" button)
You need to attach that to a particular form.
document.form1.onsubmit = formSubmitted;
document.form2.onsubmit = formSubmitted;
That isn't possible. You'll need to extend your function clickAction to notify you when it has submitted the form.
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>