I want to set a hide HTML attribute with JS but it is reseting itself after 1ms. Does anyone know how to set the hide attribute and remove it.
<body>
<form method="post" id="form">
<input type="text" name="text" id="text" ><br>
<button onclick="hide()">True</button>
<button onclick="show()">false</button>
<input type="submit" name="submit">
</form>
</body>
<script type="text/javascript">
function hide() {
document.getElementById('form').hidden = true;
}
function show(){
document.getElementById('form').hidden = false;
}
</script>
You are calling hide() when you click a submit button inside a form.
The JavaScript runs
The element is hidden
The form submits
A new document is loaded and rendered (and it isn't hidden in the new document).
Don't use a submit button unless you actually want to submit the form.
<button type="button" ...>
If you do want to submit the form then you'll need to set the hidden attribute in the new page. You could do that with server-side code that reads the form data (and you'll need to set a name and value for the hide submit button so the data can be picked up by that page).
Consider using display:block:
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
function hide() {
document.getElementById('form').style.display = "none";
}
function show(){
document.getElementById('form').style.display = "block";
}
Related
I have a form with id theForm which has the following div with a submit button inside:
<div id="placeOrder"
style="text-align: right; width: 100%; background-color: white;">
<button type="submit"
class='input_submit'
style="margin-right: 15px;"
onClick="placeOrder()">Place Order
</button>
</div>
When clicked, the function placeOrder() is called. The function changes the innerHTML of the above div to be "processing ..." (so the submit button is now gone).
The above code works, but now the problem is that I can't get the form to submit! I've tried putting this in the placeOrder() function:
document.theForm.submit();
But that doesn't work.
How can I get the form to submit?
Set the name attribute of your form to "theForm" and your code will work.
You can use...
document.getElementById('theForm').submit();
...but don't replace the innerHTML. You could hide the form and then insert a processing... span which will appear in its place.
var form = document.getElementById('theForm');
form.style.display = 'none';
var processing = document.createElement('span');
processing.appendChild(document.createTextNode('processing ...'));
form.parentNode.insertBefore(processing, form);
It works perfectly in my case.
document.getElementById("form1").submit();
Also, you can use it in a function as below:
function formSubmit()
{
document.getElementById("form1").submit();
}
document.forms["name of your form"].submit();
or
document.getElementById("form id").submit();
You can try any of this...this will definitely work...
I will leave the way I do to submit the form without using the name tag inside the form:
HTML
<button type="submit" onClick="placeOrder(this.form)">Place Order</button>
JavaScript
function placeOrder(form){
form.submit();
}
You can use the below code to submit the form using JavaScript:
document.getElementById('FormID').submit();
<html>
<body>
<p>Enter some text in the fields below, and then press the "Submit form" button to submit the form.</p>
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
</body>
</html>
HTML
<!-- change id attribute to name -->
<form method="post" action="yourUrl" name="theForm">
<button onclick="placeOrder()">Place Order</button>
</form>
JavaScript
function placeOrder () {
document.theForm.submit()
}
If your form does not have any id, but it has a class name like theForm, you can use the below statement to submit it:
document.getElementsByClassName("theForm")[0].submit();
I have came up with an easy resolve using a simple form hidden on my website with the same information the users logged in with. Example: If you want a user to be logged in on this form, you can add something like this to the follow form below.
<input type="checkbox" name="autologin" id="autologin" />
As far I know I am the first to hide a form and submit it via clicking a link. There is the link submitting a hidden form with the information. It is not 100% safe if you don't like auto login methods on your website with passwords sitting on a hidden form password text area...
Okay, so here is the work. Let’s say $siteid is the account and $sitepw is password.
First make the form in your PHP script. If you don’t like HTML in it, use minimal data and then echo in the value in a hidden form. I just use a PHP value and echo in anywhere I want pref next to the form button as you can't see it.
PHP form to print
$hidden_forum = '
<form id="alt_forum_login" action="./forum/ucp.php?mode=login" method="post" style="display:none;">
<input type="text" name="username" id="username" value="'.strtolower($siteid).'" title="Username" />
<input type="password" name="password" id="password" value="'.$sitepw.'" title="Password" />
</form>';
PHP and link to submit form
<?php print $hidden_forum; ?>
<pre>Forum</pre>
I am trying to submit a form which is in bootstrap. Once submission is done (on-click function) I want an alert message which is working fine. But I am unable to go to home page after that.
Following file opens after that.
file:///action_page.php?FName=&LName=&email=&pwd=
I am okay to display massage using innerHTML. After that also page is switching to same php file.
<script>
function myFunction() {
document.getElementById("submission").innerHTML = alert("successfully submitted");
window.location.href = ".....";
}
}
</script>
<body>
<button id="submit" onclick="myFunction()"class="text-light"
type="submit">Submit</button>
</body>
Since you want to make an alert, instead of using:
document.getElementById("submission").innerHTML = alert("successfully submitted");
just use alert('successfully submitted');. Alerts aren't shown inside of an HTML, they show on top of your page.
This fixes your problem:
function func() {
alert("success!");
window.location = "https://google.com";
}
<button onclick="func()">Click me</button>
If you're using this button in your form, you will have to override action attribute of the form by doing this. Also, if you're using this button to submit a form, use <input type="submit"> instead.
To override action of your form, use formaction
W3schools quote:
The input formaction attribute specifies the URL of the file that will
process the input when the form is submitted.
Note: This attribute overrides the action attribute of the
element.
You can combine this with alert so you don't need a separate function:
<input type="submit" onclick="alert('success!')" formaction="home.html" value="Click me">
<!-- if you really want, you can also use a button -->
<button type="submit" onclick="alert('success!')" formaction="home.html">Click me</button>
Formaction reference
i have a form with an element of type button. I want to use the onclick method to set an image of an img tag, and then simulate the "action" of the form. I tried the following code:
<html>
<head>
<script type="text/javascript">
function imgtest(){
document.getElementById
("test").src="progress.gif";
}
</script>
<title>Hello</title>
<body>
<form method="POST" action="test.php">
<input type="button" value="Submit"
onclick="imgtest()">
</form>
<div id="img">
<img id="test" src="load.png">
</div>
</body>
</html>
Though, this does not seem to work. What may be the other solution?
you can do it like this
give an id to your form
<form method="POST" action="test.php" id="someid">
on button click method in jquery
$('#buttonid').click(
function(){
$("#someid").submit();
});
use document.getElementById('formidhere').submit(); //for javascript solution
While type="submit" controls do submit their form automatically, type="button"s do not. You can trigger the submission with JavaScript by executing
this.form.submit();
at the end of the click event handler of the button (that is inside the form).
There is no need to use jQuery or to give an ID to the form, as form controls always refer back to their form.
In Javascript
document.getElementById('form').submit();
In JQuery
$('#button').click(function() {
$('#form').submit();
});
First give the id to your form
ex.
<form method="POST" action="test.php" id="testForm">
then in you button click event write as below in your imgtest() function :
document.getElementById('testForm').submit();
function imgtest(){
document.getElementById("test").src="progress.gif";
var frm=document.getElementById("frm1");
frm.submit();
}
I have form and the form submission can be done by either clicking on a hyper link or on a submit button. However I want my server to realize what has been used for form submission.
Current code snippet looks like this:
<a href=javascript:{} onclick="formSubmit()";>Next</a>
<input type="button" name="search" value="Get Result" onclick = "formSubmit();">
And my formSubmit() looks like this
<script type="text/javascript">
function formSubmit()
{
document.getElementById('form1').submit();
return false;
}
Any pointers as to how to go about it.
Thanks
Use a hidden parameter in your form.
< input type="hidden" value="0" name="flag"/>
When the form is submitted using javascript change flag value to '1' in the script.
function formSubmit()
{
document.form1.flag.value="1";
document.getElementById('form1').submit();
return false;
}
in case submit button is pressed the flag = '0'.
you can get this parameter on the server to determine how the form is submitted
edit : change your button type to 'submit' or call different scripts for both actions.
Pass a value (say an int or boolean) into the function. The value passed can be used to determine the source.
you invoke the same function to submit the form,so if you want your server to realize what has been used for form submission,i think you must pass a parameter to your server
You can use event.target to get the source that triggered the event and then set a flag to pass to server. See the example below:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(e)
{
alert(e.target);
}
</script>
</head>
<p>
Click on a paragraph. An alert box will alert the element that triggered the event.</p>
<p>
<strong>Note:</strong> The target property returns the element that triggered the event, and not necessarily the eventlistener's element.</p>
This Link Click will return "javascript:{}"
<a href=javascript:{} onclick="myFunction(event)";>Next</a>
<p>
This Button Click will return "[objectHTMLInputElement]"
<input type="button" name="search" value="Get Result" onclick = "myFunction(event);">
</p>
</body>
</html>
I have two submit buttons in a form that Lets user Update/ Delete content. I want a confirm pop only if the user clicks Delete button.
<html>
<head>
<script type="text/javascript">
function confirmation() {
// I need to know which submit button was pressed.
if (value==Delete){
var answer = confirm("Cancel?")
if (answer){
return true;
//Continue as intended
}
else{
return false
}
}
}
</script>
</head>
<body>
<form id="Edit_Data">
//form input fields go here
<input name="action" type="submit" onclick="confirmation()" value="Update">
<input name="action" type="submit" onclick="confirmation()" value="Delete">
</form>
</body>
</html>
Any Ideas?
First of all you have several problems with your code. The value in your if statement is an undefined variable secondly you need to put quotes around the delete. Here is working fiddle http://jsfiddle.net/SMBWd/ and the relevant code change. Also, I would encourage you to look how to do this without using javascript in your HTML.
function confirmation(e) {
// I need to know which submit button was pressed.
if (e.value=='Delete'){
and in the HTML
<input name="action" type="button" onclick="confirmation(this)" value="Update">
<input name="action" type="button" onclick="confirmation(this)" value="Delete">
For your onclick event definition in the html tag, why not call separate functions?
The simplest way would be to NOT call the javascript on the Update button.
If your form is static, then you do this in your IDE. If it's dynamic, then the dynamic code can create the form element accordingly.
If the form elements are generated automatically, then you should setup an event handler in JavaScript dynamically. Find all elements of type input with type attribute button or submit, and assign
elems[i].onclick = confirmation;
You'd then get the event object as a method parameter, and you could query that for the value of the button.