Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm trying to design a Login form let's say something like this:
<form action="target.php" method="POST">
Username: <input type="text" name="user" id="user" /><br /><br />
Password: <input type="password" name="pass" id="pass" /><br /><br />
<input type="submit" value="submit" id="submit" />
</from>
what I'm trying to do is to make the form show some pic.gif for 3 seconds when user hits submit and then continue I don't want it to start the next process directly.
Have your image initially with style "display:none" and modify your form declaration to hanlde "onsubmit" event:
<form action="target.php" method="POST" onsubmit = "mySubmit(this)">
and then define function:
function mySubmit(frm) {
document.getElementById("myImg").style.display = 'block';
setTimeout(function() {frm.submit()}, 3000);
return false;
}
It will display your image and cancel original submit request. But after 3 seconds it will submit form from code.
It sounds like you can just use the setTimeout() function.
<input type="submit" value="submit" id="submit" onclick="window.setTimeout(doStuffAfter, 30000)">
You call it in whatever way you want with func being the called after the delay. So you can open the image and then navigate away once the delay is done.
window.setTimeout(func, delay, [param1, param2, ...]);
https://developer.mozilla.org/en-US/docs/Web/API/window.setTimeout
Try
$('form').submit(function () {
if (showPic()) {
return true;
} else {
return false;
}
}
From a UX perspective I recommend giving them a prompt in your pic.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I have a simple form with two HTML5 buttons. Each button submits the form to a different php page. This is working well, but the 'onsubmit' function is never triggered. I want to show a dialog box before the delete.php page is called.
<form method="post">
<input type="text" name="fname">
<!-- HTML5 FORMACTION -->
<button type="submit" name="update" formaction="update.php">Update</button>
<button type="submit" name="delete" onsubmit="return confirm('Do you really want to delete?');" formaction="delete.php">Delete</button>
</form>
I have tried different variations, but the javascript code is never triggered. Why?
Buttons don't have submit events, forms do.
Buttons have click events.
onsubmit is valid for a form, not for a button. You will have to use onclick instead of onsubmit.
try like this
<form method="post">
<input type="text" name="fname">
<!-- HTML5 FORMACTION -->
<button type="submit" name="update" formaction="update.php">Update</button>
<button type="button" name="delete" onclick="return delete();" formaction="delete.php">Delete</button>
</form>
<script>
function delete(){
if(confirm('Do you really want to delete?')){
// delete code
}
return false;
}
</script>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I want to add "I accept Terms and Conditions" checkbox to my page.
I tried
<p><input type="checkbox" required>
<input type="submit" name="submit" value="submit" onclick="if(!this.form.checkbox.checked){alert('You must agree to the terms first.');return false}" />
but this type of check box links to this submit button not to the form submit button which i already have on that page. This is the button code to which i want it to be attached
<a class="wt-btn wt-post-service" data-id="" data-type="add" href="javascript:;"><?php esc_html_e('Save & Update',); ?></a>
Please help.
Thanks.
When you use a type=submit or name=submit the behavior is controlled by the submit button. Just prevent default behavior, check the box, and then either issue alert or submit form.
function warning(){
event.preventDefault();
var check = document.getElementById('checkbox');
var myForm = document.getElementById('myForm');
if (check.checked==false){
alert("you must agree to terms and conditions");
}else{
myForm.submit();
}
}
<form id='myForm' action="/action_page.php" method = 'POST'>
<p><input id='checkbox' type="checkbox" required>
<input type="button" name='button' value="submit" onclick="warning()" />
</form>
<a class="wt-btn wt-post-service" data-id="" data-type="add" href="javascript:;"><?php esc_html_e('Save & Update',); ?></a>
Please help.
I think you are using Javascript/jquery to submit your form. So you need to check if a checkbox is checked or not using Jquery on the button click.
$(document).ready(function(){
//Submit button click
$('.wt-post-service').click(function(){
if($(input[type="checkbox"]).is(":not(:checked)")){
alert("You must agree to the terms first.");
}
});
});
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a HTML login form in my ASP.NET MVC application that looks like this:
<form action="/Account/Login" class="form" method="post">
<input name="UserName" size="25" type="text" value="">
<input name="Password" size="25" type="password">
<button type="submit" class="glossy">Login</button>
</form>
<div class="loading-mask" id="authenticating">
<span>Authenticating ...</span>
</div>
When the user clicks submit there is a delay before the /Account/Login action is processed and before it returns either with a partial form showing errors or before it takes the user to a new page.
Is there a way that I can make the loading div invisible when the form first appears and then have it become visible after the submit button is clicked. Note that I won't need it to be hidden again as any action after the submit will result in a fresh load of the page.
Note I am looking for some way that does not use jQuery.
Set the display property the to none at first.
#authenticating {
display:none;
}
And then in the form's code
onsubmit="document.getElementById('authenticating').style.display = 'block'"
EDIT
As Dave suggested, it is better to use event listeners.
document.getElementsByClassName('form').addEventListener("submit", function(){
document.getElementById("authenticating").style.display = "block";
}), false);
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Hi guys I have been making this form that has different inputs but they all have the same class:
<input type="text" name="username" class="field" />
<input type="text" name="email" calss="field" />
what i want to do is when ever the input filed is clicked i want to change the border color with JQuery(only the element that is clicked not all at the same time)
any one got an idea?
<input type="text" name="username" class="field" />
<input type="text" name="email" calss="field" />
$('.field').click(function(){
$(this).css('attributeName','value'); //here $(this) represents current element.
});
Bind a click event to all inputs, then use $(this) to target the one that was actually clicked .
$('.field').on('click', function() {
$('.field').removeClass('clicked'); // Remove previous
var $this = $(this);
$this.addClass('clicked'); // If you want to add the CSS with a class, which i recommend.
$this.css('border', '[css-border-values]'); // Inline CSS
});
<input type="text" name="username" class="field" />
<input type="text" name="email" calss="field" />
$('input[type=text]').focus(function(){
$('input[type=text]').css({'border':''});
$(this).css({'border':'solid 2px #ccc'});
});
http://jsfiddle.net/jCpfH/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I don't know Ajax or PHP but I want to submit this form without page refresh and also want to appear check icon beside the submit button. How can I do this?
<form id="form" action="" method="post">
<input type="text" id="email" value="e-mail address" />
<input type="submit" id="submit" name="submit" value="Submit" />
</form>
<script>
function xyz(){
var email_val=$('#email').val();
$.post("ajax.php",{"email":email_val},function(data){
if(data) {
$('#message').html('Data submit successfully');
$('#email').val('');
}
else{
$('#message').html('Failed');
}
});
}
</script>
<form id="form" action="" method="post" onsubmit="xyz()">
<input type="text" id="email" value="e-mail address" />
<input type="submit" id="submit" name="submit" value="Submit" />
<span id="message"></span>
</form>
ajax.php
if(isset($_REQUEST['email'])){
//Your code here
}
If you are not aware of AJAX and PHP but still you have to submit a form without page reload then follow this tutorial.. do some home works
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/