I'm trying to transform a ContentEditable area in a form element with Javascript, and after the Editable content loses focus, the form is automatically sent. For some reason, the javascript is not working with the two commands, and the form is not being sent.
JS:
<script>
function sendform() {
document.getElementById("search-hidden").value = document.getElementById("search").innerHTML;
document.getElementById("myForm").submit();
}
</script>
HTML:
<form id='Form' action='handle.php' method='post'>
<p id="search" contenteditable='true' onblur="sendform()">Search</p>
<input id='search-hidden' type='hidden' name='search-hidden'>
</form>
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
I'm attempting to submit additional data to the server when I submit a form. Here is the form:
<form class="class" action="{{=URL('default','function')}}" method="post">
<input type="text" id="first" name="first" class="span3"/>
<button id="button" type="submit" class="btn">Submit</button>
</div>
</form>
I've tried to do submit the additional data a couple different ways:
<script>
$('#button').submit(function(){
var cost = +($("#cost").text().replace('$',''));
$.getScript("{{=URL('default','function')}}"+"?cost="+cost);
});
</script>
and
<script>
$('#button').submit(function(){
var cost = +($("#cost").text().replace('$',''));
$.post("{{=URL('default','function')}}",{cost:cost});
});
</script>
However, only the form data appears in request.vars. How can I submit the additional script variable "cost" with the rest of the form?
Add an id to your form or to a div in your form (calling it '#addinput' here), then append a hidden input once your button is clicked:
<script>
$('#button').click(function(){
var cost = +($("#cost").text().replace('$',''));
$('#addinput').append('<input type="hidden" name="id" value="'+cost+'" id="id">')
});
</script>
I have a input field in form and div:
<form method="post">
<div id="message">
<input type="text" name="spind" value="" size="55" maxlength="90">
<button>Senden</button>
</div>
</form>
Then I have a javascript script for the submit-button and to show this on my website:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var message = $("input").val();
var old = $("#content").html();
$("#content").html(old + '<p><span style="font-variant:small-caps"><span
style="font-size:1.5em"><b><span style="text-transform:capitalize"><?php
echo $_SESSION["username"];?></span> : </b></span><span style=
"font-size:1.6em">' + message + "</span></span></p>");
$("#content").scrollTop($("#content")[0].scrollHeight);
});
});
</script>
When I put the input in the div inside form with method="post" the message, which should be displayed disappears. This must be because of the form-container.
So, my question is, how can I put the typed message inside the input into a mysql database, without disappearing (and using the defined "button" as submit)?
I have been battling for the past two days with the evil onbeforeunload function in JavaScript. I have a function that warns the user when they are about to close a page.
However before the page close I would like to submit the form using JavaScript's .submit().
This is my code:
function setPopUpWindow(submitForm){
window.onbeforeunload = function () {
if (submitForm == false ) {
//alert("It worked"); --This code gets called so I know it works
document.getElementById("CancelScripting").submit();
//return "Unsaved Data would be lost";
}
}
}
In my html I have two buttons, one is (supposed to) trigger the .submit() and the other will just ignore it.
<body>
<form action=tett.html id="popUpForm" method=POST>
<script>setPopUpWindow();</script>
<input type="submit" id="submit_button" onclick="setPopUpWindow(true);">
<input class=b1 type=submit id="CancelScripting" style="visibility:hidden" value="CancelScripting" >
</body>
The `setPopWindow value for the second input is not defined so it would be false.
For some reason the submit is not working well.
------------------------Edit to my question-----------------------------------------------
I would like to submit the form even if the user leaves the page by closing the X button on their window. This is the reason why I have the hidden button... Looks like people misunderstood my question.
The only thing you can do is to ask the user if they really want to leave the page:
<head>
<script type="text/javascript">
var submitForm = false;
window.onbeforeunload = function () {
if(submitForm == false){
return 'You have an unfinished form ...';
}
}
function setPopUpWindow(type){
submitForm = true;
}
</script>
</head>
<body>
<form action="" method="post" name="SubmitForm" id="SubmitForm">
<input type="submit" id="submit_button" onclick="setPopUpWindow(true);">
</form>
</body>
I think that what you want to do is submit the form rather than the button by doing something like:
document.forms["formId"].submit();
where formId is the id of the form.
Also, I dont see anywhere in your code where your form is but your buttons should be inside of form tags.
For example, it should look like this:
<body>
<script>setPopUpWindow();</script>
<form id="formId" action="" method="post">
<input type="submit" id="submit_button" onclick="setPopUpWindow(true);">
<input class=b1 type=submit id="CancelScripting" style="visibility:hidden" value="CancelScripting" >
</form>
</body>
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.