None of the current questions asked about this topic seem to help me, I am fairly new to this and I need some help. Currently I have a form, and on submit (currently do not have any validation) it shows a hidden div using this function.
function showDiv() {
document.getElementById('showme').style.display = "block";
}
I would like to add a loading gif, that shows for around 2 seconds after clicking the button and then carries on to show the hidden div.
My form is as shown -
<form action="" method="POST" id="hello" onsubmit="showDiv(); return false;">
The button to log in is here
<input class="btn_green_white_innerfade btn_medium" type="submit" name="submit" id="Login" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv()">
function showDiv() {
document.getElementById('Login').style.display = "none";
document.getElementById('loadingGif').style.display = "block";
setTimeout(function() {
document.getElementById('loadingGif').style.display = "none";
document.getElementById('showme').style.display = "block";
},2000);
}
<div id="showme" style="display:none;">You are signed in now.</div>
<div id="loadingGif" style="display:none"><img src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif"></div>
<form action="#" method="POST" id="hello" onsubmit="return false;">
<input class="btn_green_white_innerfade btn_medium" type="submit" name="submit" id="Login" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv()">
</form>
The issue is that you have return false in your code that executes when you submit the form, effectively cancelling the submit, so your function doesn't get called.
You should not use inline HTML event attributes in the first place and do all your JavaScript separately. Here's why.
Additionally, if you aren't actually capturing data and sending it anywhere, then you shouldn't have a form, a submit button or deal with submit events, you just need a regular button and its click event.
Also, don't name your form submit as this will prevent you from programmatically calling the submit() method on it.
Here's what that should be:
// Get references to the DOM elements you'll need:
var button = document.getElementById('Login');
var special = document.getElementById("special");
var pleaseWait = document.querySelector(".hidden");
// Set up your event handlers in JavaScript, not with HTML attributes
button.addEventListener("click", function(evt){
// Show the message by removing the class that hides it:
pleaseWait.classList.remove("hidden");
// Wait 2 seconds and then run a function that re-hides the message and
// submits the form.
setTimeout(function(){
pleaseWait.classList.add("hidden");
special.classList.remove("hidden");
}, 2000);
});
.hidden {
display:none;
}
.img {
width:50%;
position:absolute;
}
<form action="#" method="POST" id="myForm">
<input class="btn_green_white_innerfade btn_medium"
type="button" name="Login" id="Login" value="Sign in"
width="104" height="25" border="0" tabindex="5">
<img class="hidden img" src="https://www.cluecon.com/theme/img/pleasewait.gif">
<div class="hidden" id="special">Here I am</div>
</form>
Related
I have a button that links to a php file that tracks user's email when clicked, but I don't want the user to leave the page when button is clicked, I just want to change button's value.
This is the html of the form.
<form action="mysql-query.php" method="post">
<input type="text" name="email" style="display:none;">
<input type="submit" value="Press here" id="test" onclick="Press()">
</form>
And this is the script that handles the form:
<script>
function Press() {
var test= document.getElementById("test");
test.value="Thank you";
localStorage.value=("ok");
}
</script>
I put the display:none; because I don't want to display anything but the button and have a way to connect with my php file.
Any ideas?
You need to use ajax:
html:
<form action="mysql-query.php" method="post" onsubmit="return Press(this)">
<input type="text" name="email" style="display:none;">
<input type="submit" value="Press here" id="test">
</form>
js:
function Press(form) {
$.post($(form).attr('action'), function() {
var test= document.getElementById("test");
test.value="Thank you";
localStorage.value=("ok");
});
return false; // prevent submitting the form
}
or better bind submit event using jQuery:
$('form').submit(function() {
$.post($(this).attr('action'), function() {
var test= document.getElementById("test");
test.value="Thank you";
localStorage.value=("ok");
});
return false; // prevent submitting the form
});
Use:
<form action="javascript:void()">
Ok, this thing prevents the form from sending the data anywhere, unless you use "onclick" event on the submit button.
What you can do is remove the type="submit" on the button and replace it with type="button". Next you can do an ajax call to your php and do your magic.
Hi all i am just trying to remove my form when i click on a button but i have no results. I am sure that function "sign()" was called but with no effect on my layout:
<body>
<div id="divSign">
<form action="#" method="post">
<div class="header">
<p>All Together</p>
</div>
<div class="description">
<p>Hi friend</p>
</div>
<div class="input">
<input type="text" class="button" id="chiave" placeholder="Chiave Segreta">
<input type="submit" class="button" id="submit" value="ENTRA" onclick="sign();">
</div>
</form>
</div>
</body>
<script>
function sign() {
document.body.removeChild(document.getElementById("divSign"));
// OR THIS
var f = document.getElementById("divSign");
while (f.hasChildNodes()) {
f.removeChild(f.lastChild);
}
// OR THIS
var f = document.getElementById("divSign").style.visibility = "hidden";
}
</script>
Nothing seems affect my page, i just to clear my page after click.
On clicking, your form get submitted and the page refreshs.
Use this onclick instead, the return false; will prevent the form from being submitted and your page will not be refreshed anymore :
<input type="submit" class="button" id="submit" value="ENTRA" onclick="sign(); return false;">
It's not removed because the page is reloaded after your click on the button, because it's a form. To prevent that, you can use return false; at the end of your function.
function sign() {
/*********
Your code
**********/
return false; //add this line
}
With jquery you can do by using empty
$("#divSign").empty()
or
$("#divSign form").remove()
I am trying to disable form submit button that is an image after it is clicked to prevent duplicate entries. The form goes to Netsuite which is a ERP/CRM and is often slow so we have been getting users clicking it multiple times causing multiple entries which is why we want to have it disabled after a user clicks on it.
This is the code we are currently using:
<INPUT TYPE="hidden" NAME="payment" VALUE="check" ##check## checked>
<br>
<INPUT type="image" onMouseOver="this.src='http://www.domain.com/pb/tpl/img/emailquote3.jpg'; return false;"
onMouseOut="this.src='http://www.domain.com/pb/tpl/img/emailquote2.jpg'; return false;"
src="http://www.domain.com/pb/tpl/img/emailquote2.jpg" VALUE="order"
NAME="order" id="order" class="button" onclick="this.form.action='https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx';return true;">
I have searched around and read a few suggestion with most saying to add this to onclick area:
this.disabled=true
However adding that code to the onclick does not seem to work. I have tried adding it before and after the netsuite submit portion but does not seem to make a difference.
Does anyone know how I can get this to work?
this.disabled=true will not work for input[type=image].
This has to handle in javascript.
<input type="image" onclick="return submitForm(this)"/>
<scritp>
var submitted = 0;
function submitForm(input){
input.src = "new image path";
if (submitted == 0) {
submitted = 1;
return true;
}
return false
}
</script>
Actually disabled=true doesn't prevent elements of firing the onclick event. You could, instead, a javascript function to perform your submit instructions, and lock it with a variable after the first execution.
Something like this:
var submitEnabled = true;
function Submit() {
if(submitEnabled) {
submitEnabled = false;
this.form.action='https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx';
//Or any submitting code you have
}
}
And then, your image element:
<INPUT type="image" onclick="Submit()" ...
I did a quick test and it looks like if you disable the button onclick the form will never get submitted. I'm not sure if you have have the ability to change the <form> tag, but if you do you could add an onsubmit event that disables the submit button after the form has been submitted:
<form action="https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx" onsubmit="document.getElementById('order').disabled=true;">
<input type="hidden" name="payment" value="check" checked>
<br>
<input type="image" onmouseover="this.src='http://www.domain.com/pb/tpl/img/emailquote3.jpg'; return false;" onmouseout="this.src='http://www.domain.com/pb/tpl/img/emailquote2.jpg'; return false;" src="http://www.domain.com/pb/tpl/img/emailquote2.jpg" value="order"name="order" id="order" class="button">
</form>
If you have the ability to add your own CSS and JavaScript you could clean this up even more.
The rollover image would be better handled by CSS
And simply disabling the submit button doesn't necessarily mean the form can't be submitted. For instance you can submit forms by hitting the enter key on your keyboard. It's better to prevent the submit event itself, rather than disabling a button that may or may not be used.
Example:
<style>
#order {
background: url('http://www.domain.com/pb/tpl/img/emailquote2.jpg') no-repeat;
width: 300px; /* sizing for example only */
height: 100px;
border: none;
}
#order:hover {
background: url('http://www.domain.com/pb/tpl/img/emailquote3.jpg') no-repeat;
}
</style>
<script>
var formSubmitted = false;
function handleSubmit() {
if (!formSubmitted) {
formSubmitted = true;
return false;
}
return false;
}
</script>
<form action="https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx" onsubmit="return handleSubmit();">
<input type="hidden" name="payment" value="check" checked>
<br>
<input type="submit" name="order" id="order" class="button">
</form>
I am trying to get a function to print out whatever the user inputs into the text-box. I am using onClick as an attribute on my submit button. I know I set it up properly because it flickers the answer, but only for a split second. How can I get the input to stay on the page? Here's the code: HTML: Type what you want to post to the website!
HTML:
<div id="main_div">
<section id="leftbox">
<form name="mybox">
Type what you want to post to the website!:
<br />
<input type="textbox" size="15" maxlength="15" name="text" id="text">
<br />
<input type="submit" value="Submit!" onClick="doFirst()">
</form>
</section>
</div>
<div id="insert"></div>
Javascript:
function doFirst(){
text = document.getElementById('text');
insert = document.getElementById('insert');
if(text.value == "")
{
insert.innerHTML = "Please input something!";
return false;
}
else
{
insert.innerHTML = text.value;
}
}
try this:
Using type=button
<input type="button" value="Submit!" onClick="doFirst()">
OR using type=submit
<form name="mybox" onsubmit="doFirst(); return false;">
<input type="submit" value="Submit!">
</form>
Explain:
The action for onclick in submit button DO executed. You keep see the page does not have any changes, because of there are a FORM. And the key point: the form handle the submit action after the JS function doFirst() immediately. Adding the onsubmit in the form with return false to stop default action, means:
<form name="mybox" onsubmit="return false;">
<input type="button" value="Submit!" onClick="doFirst()">
</form>
To simplify the changes, use button instead of submit type, or using onsubmit instead of onclick in form trigger.
onClick="doFirst()"
gets converted into an anonymous function:
function(){ doFirst() }
and whatever that function returns determines if the submit should be completed or aborted, so you should use:
onClick="return doFirst();"
In other words, it's not enough that doFirst return something, whatever doFirst returns should be returned again inside the onClick.
I have a php function that echos code of a form that has a button. when that button is click it will append a file field and a another button that if clicked would repeat the above. however when the added button is clicked nothing happened.
I am thinking it has something to do with binding the button.
Here is the code:
$formtoreturn = '
<div class="form_holder">
<form action="'.site_url().'xxxxx" method="post" enctype="multipart/form-data" >
<div id="fields_holder">
<span class="form_holder-label" id="fileC">Select image or images</span>
<div class="fields" id="field1">
<input type="file" name="fileID-input[]" id="fileID-input" class="fileC-input">
<a rel="add" id="add_file1" class="add_file" href="javascript:;"><img src="wp-content/plugins/wl_extendor_wishlist/images/add-icon.png"></a>
</div>
</div>
<div class="clear"></div>
<input type="hidden" value="'.$u_id.'" name="user_id" id="user_id">
<input type="submit" name="submittestimonial" value="Submit Testimonial">
</form>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</div>
<script>
var filecount = 1;
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j(\'#fields_holder\').on(\'click\', \'.add_file\', function() {
var toappend = \'<div class="fields" id="field1"><input type="file" name="fileID-input[]" id="fileID-input" class="fileC-input"><a rel="add" id="add_file1" class="add_file" href="javascript:;"><img src="wp-content/plugins/wl_extendor_wishlist/images/add-icon.png"></a></div>\';
if($j(this).attr("rel") == "add"){
$j(this).attr("rel", "ded");
$j("#fields_holder").append(toappend);
filecount++;
}
});
});
</script>
';
echo $formtoreturn;
Hope the code and my question is clear.
Thanks in advanced.
I would suggest you to change your JavaScript code from
$j('#fields_holder').on('click', '.add_file', function() {
// ...
});
to
$j(document).on('click', '#fields_holder .add_file', function() {
// ...
});
Then the event will bubble up and handled in click handler of a document.
UPDATE
Though I've made a test and it's working well for me in both variants.