<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.
Related
I have page with form on it, I am trying to disable the button on submit with a custom disable message on it, and submit the form after using jquery.
<form>
<input type="text" name="run"/>
<input type="submit" class="send" value="Save" data-attr-message="Sending..."/>
</form>
I have try both form submit or form[0] submit neither submits the form, I try logging the form, the form is logged correctly to console, and there are no errors in console when clicking submit.
$(document).ready(function() {
$('.send').click(function(e) {
e.preventDefault();
e.stopPropagation();
var button = $(this);
var form = button.closest("form");
button.prop('disabled', true);
button.val($(this).attr('data-attr-message'));
console.log(form); //Logs form fine
form[0].submit();
// form.submit();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" name="run" />
<input type="submit" class="send" value="Save" data-attr-message="Sending..." />
</form>
Your form does not have an "action" and "method".
It should look like:
<form action = "http://example.com/backendScript" method = "POST">
if your goal is to "simulate" the time that it takes to send data, and you want to see the button to be disabled until that time, one way is to use "setTimeout()" method of javascript. you do not need to use "e.preventDefault()" because it prevent the form from submitting. I posted the code below that I think does what you expected:
$(document).ready(function() {
$('.send').click(function(e) {
var button = $(this);
var form = button.closest("form");
button.prop('disabled', true);
button.val($(this).attr('data-attr-message'));
setTimeout(function() {
form.submit();
}, 1000)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="submit.html">
<input type="text" name="run"/>
<input type="submit" class="send" value="Save" data-attr-message="Sending..."/>
</form>
<script src="jquery-3.5.1.js"></script>
<script src="script.js"></script>
</body>
</html>
the "submit.html" is simply an html file with a message that you can add to your folder yourself to see that the form is submitting.
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
I've created a form to put in my website and I wanted it to redirect to a URL if a certain string was submitted in that form. But now it redirects immediatly if the string is detected in the form and I only want it to redirect if that string is submitted... How can I solve this problem? Here is the code I've made:
<form method="POST" id="myform">
<textarea name="inputBox123" id="myTextarea" oninput="myFunction(this)">
</textarea>
<input type="submit" value="Submeter"/>
</form>
<script type="text/javascript">
function myFunction(val) {
var testThis = document.getElementById("myTextarea").value;
if ( testThis.indexOf("launch") > -1 ) {
window.location = 'http://www.cateto.weebly.com/benoit.html';
return false;
}
}
</script>
Change input type from "submit" to "button" and add onclick="myFunction()", also add button Label
<form method="POST" id="myform">
<textarea name="inputBox123" id="myTextarea" oninput="myFunction(this)">
</textarea>
<input type="button" value="Submeter" onclick="myFunction()" />
</form>
<script type="text/javascript">
function myFunction(val) {
var testThis = document.getElementById("myTextarea").value;
if ( testThis.indexOf("launch") > -1 ) {
window.location = 'http://www.cateto.weebly.com/benoit.html';
return false;
}
}
</script>
Your tag mentions jQuery, so here's an answer that uses it's selectors.
event.preventDefault()
Will stop the default event from triggering, in the circumstance where you might be beholden to using submit.
Example:
$(document).on("submit", "form", function(event){
event.preventDefault();
//do other things...
return false;
});
Here is the native javascript documentation for event.preventDefault().
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')
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>