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>
Related
Here is my form:
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
<input type="Submit" value="Submit" >
</form>
And need to fill it from console.
just to use it in my app,
Will inject javascript with data to local html file.
I tried to make the form without a submit button like so:
<body>
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
</form>
<script>
htmlString.oninput = function(){
///do some stuff
}
</script>
</body>
Expecting that :
document.getElementById('htmlString').value="moo" ;
It automatically submit the form, because here oninput used.
But it just stayed filled with inputs and not proceed further.
Tried with other solution:
form = document.getElementById("myForm")
form.submit()
But it just refreshed the page and not submitted the form.
The need is just one filed without else, and inject my string to it with javascript to run functions embedded in the html.
Try making the input button hidden.
<body>
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
<input type="Submit" value="Submit" style="display: none" >
</form>
<button onclick="simulateConsole()">Try it</button>
<script>
htmlString.oninput = function(){
if(this.value === "moo") {
myForm.submit();
}
}
// This event will be triggered even if you use console
htmlString.onsubmit = function(){
if(this.value === "moo") {
// do something onSubmit
}
}
function simulateConsole() {
// you can simulate this in console
htmlString.value = "moo";
myForm.submit();
}
</script>
</body>
I hope it helps.
You need to supply an action to the form, otherwise it will just reload the page.
See more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
This Code Works but when i copy and paste into it, it doesn't submit.
<script src="jquery-3.2.1.min.js"></script>
<form id="Form" action="pro_add_invoice.cfm" method="post">
<input id="here"name="htno" type="text" value="" />
<input id="subHere" type="submit" value="Submit" />
</form>
<script>
$('#here').keyup(function(){
if(this.value.length ==10){
$('#Form').submit();
}
});
</script>
I'm assuming you just want to submit the form after ten characters are entered. You can use $().submit() instead and pass in the id of the form.
<form id="Form" action="sell.cfm" method="post">
<input id="here"name="htno" type="text" value="" />
<input id="subHere" type="submit" value="Submit" />
</form>
<script>
//$('#here').keyup(function(){
// if(this.value.length ==10){
// $('#Form').submit();
// }
//});
var input = document.querySelector('#here');
input.addEventListener('keyup', checkLength);
function checkLength(e){
if(e.target.value.length===10){
document.forms["Form"].submit();
}
}
</script>
If you want to submit the form you cannot use click event handler. That's only for click events. you need to call the submit method of the form element to submit the form.
Change your If statement to execute the following:
Vanilla JS:
document.forms.Form.submit();
or
JQuery:
$('#Form').submit();
SO...
<script>
$('#here').keyup(function(){
if(this.value.length ==10){
$('#Form').submit();
}
});
</script>
I think the problem here is this context is not belong to #here, the scope in the anonymous function (probably) belong to window.
I didn't try it yet but maybe this solve the problem, try change this to ('#here')
<form action="" method="post">
<div id="MG_TextBox" contenteditable="true" name="textBox1" style="width:600px;height:400px; background-color:#ECCBCB;"> Hello</div>
<input type="hidden" name="hiddeninput" id="MH_Hiddeninput" >
<input type="submit" id="MG_Submit" name="submit" value="Submit"/>
</form>
And ajax
<script>
$(function(){
$('#MG_Submit').click(function () {
var MG_Text = $('#MG_TextBox').html();
$('#MG_Hiddeninput').val(MG_Text);
return true;
});
});
</script>
then php
<?
if ($_POST['hiddeninput']) {
print $_POST['hiddeninput'];
}
?>
I would like to have transferred DIV content to HIDDEN INPUT. Subsequently PHP to print them on the same page. ie. action = ""
what am I doing wrong?
Version 2. still not work
<?
if ($_POST['hiddeninput']) { print $_POST['hiddeninput']; }
?>
<html>
<head>
<script>
$(function(){
$('#MG_Form').on("submit", function (e) {
var MG_Text = $('#MG_TextBox').html();
$('#MG_Hiddeninput').val(MG_Text);
e.preventDefault();
});
});
</script>
</head>
<body>
<form action="" method="post" id="MG_Form" enctype="multipart/form-data">
<div id="MG_TextBox" contenteditable="true" name="textBox1" style="width:300px;height:200px; background-color:
#9AB5BF;"> Hello</div>
<input type="hidden" name="hiddeninput" id="MG_Hiddeninput" >
<input type="submit" id="MG_Submit" name="submit" value="Submit"/>
</form>
</body>
</html>
Try this, you don't want the form to submit, you want the AJAX to fire instead. Do this to stop the click from doing its default behaviour - which would submit the form;
<script>
$(function(){
$('form').on("submit", function (e) {
var MG_Text = $('#MG_TextBox').html();
$('#MG_Hiddeninput').val(MG_Text);
e.preventDefault();
});
});
</script>
You may want to add an id to the form, so that the $('form') selector can be more specific. As this might currently break other forms on the page.
for starters, you're trying to select an element that doesn't exist (MG_Hiddeninput). Change to this:
<script>
$(function(){
$('#MG_Submit').click(function () {
var MG_Text = $('#MG_TextBox').html();
$('#MH_Hiddeninput').val(MG_Text);
e.preventDefault();
return true;
});
});
</script>
or change the id of your hidden input to match your selector.
<input type="hidden" name="hiddeninput" id="MG_Hiddeninput" >
also add e.preventDefault() to prevent form from posting. you mention ajax but i don't see any in action here.
<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 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();
}