I have simple form:
<form id="loginform" name="loginform" action="" method="post">
<div data-role="fieldcontain">
<label for="login">Login:</label>
<input type="text" name="login" id="login" value="" />
</div>
<div data-role="fieldcontain">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" />
</div>
<div class="ui-body">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="button" class="exitapp">Close</button></div>
<div class="ui-block-b"><button type="submit" id="elogin" onclick="return false;">Login</button></div>
</fieldset>
</div>
</form>
And some code in jQuery Mobile. In case press enter button in Firefox form is not submit - it's great, but in Android Emulator it's submit and it cannot using my JS code :( How can repair this?
$("form").submit(function(){
//do your js code
return false;
});
I have found this to work but I always test on my Android device rather than the emulator...:
<form action"..." method="..." onSubmit="return check_form();">
...
</form>
function ckeck_form() {
...
if (error === true) {
return false;
} else {
return true;
}
}
$('#loginform').submit(function(e) {
e.preventDefault();
});
See MDN for more info on preventDefault().
Related
I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?
Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>
after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.
The reasons are:
The submit button is outside the </form>
I need to use bootstrap as a form validation with required fields
But, when I submit the form with onClick. It's just submit the form without checking - even it's blank.
$('#submit').on('click',function(){
$('#billing-form').submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="clearfix" id="billing-form" method="post">
<!-- NAME -->
<div class="col-md-6">
<input class="form-control" type="text" name="name" required/>
</div>
.
.
.
</form>
//coupon
<input type="text" name="coupon" />
<button type="button" id="submit">Buy now!</button>
I've got it.
$("#submit").on("click", function(){
if($("#billing-form")[0].checkValidity()) {
//do ajax submit
}
else {
$("#billing-form")[0].reportValidity();
}
});
You can use checkValidity method. It will return true/false depending on whether the form is valid or not
$('#submit').on('click', function(e) {
var x = document.getElementById('billing-form').checkValidity();
if (x) {
$('#billing-form').submit();
} else {
console.log('Not Valid')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="clearfix" id="billing-form" method="post">
<!-- NAME -->
<div class="col-md-6">
<input class="form-control" type="text" name="name" required/>
</div>
</form>
<input type="text" name="coupon" />
<button type="button" id="submit">Buy now!</button>
I have a popup login form. I want the form to submit, then close that popup window. How can I accomplish this? The window is currently set to close before the return for the function happens. Where does window.close() go in this case? Thank you for any help.
Form:
<form name="catseczoneform30738" onSubmit="return checkWholeForm30738(this)" method="post" action="https://redlakewalleye.worldsecuresystems.com/ZoneProcess.aspx?ZoneID=12695&Referrer={module_siteUrl,true,true}&OID={module_oid}&OTYPE={module_otype}">
<div class="form">
<div class="item">
<label for="SZUsername">Username</label>
<br />
<input class="cat_textbox_small" type="text" name="Username" id="SZUsername" maxlength="255" />
</div>
<div class="item">
<label for="SZPassword">Password</label>
<br />
<input class="cat_textbox_small" type="password" name="Password" id="SZPassword" maxlength="255" autocomplete="off" />
</div>
<div class="item">
<input type="checkbox" name="RememberMe" id="RememberMe" />
<label for="RememberMe">Remember Me</label>
</div>
<div class="item">
<input class="cat_button" type="submit" value="Log in" />
Lost password?</div>
</div>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
<script type="text/javascript">
//<![CDATA[
function checkWholeForm30738(theForm){var why = "";
if (theForm.Username) why += isEmpty(theForm.Username.value, "Username");
if (theForm.Password) why += isEmpty(theForm.Password.value, "Password");
if (why != ""){alert(why);
return false;
}
theForm.submit();
window.open('http://www.redlakewalleye.com/promotional/activation-form','_blank');
window.close();
return false;
}
//]]>
</script>
</form>
If possible the window.close() should be included as part of the server response to your submit event. If you include the window.close() as part of the submit on the form, it will cause your form to close before the submit has actually happened.
I am writing simple form with two text boxes for logIn process and wanted to get this form
submitted on the click of "Go" button of the i-Phone keyboard which get open as the textbox
gets focus.
When i keep a submit button with these two text boxes the go button starts working otherwise
it won't.
i am using
jQuery mobile v1.2.0
PhoneGap v2.5
code without submit button:
<form id="loginForm">
<div class="ui-body">
<div data-role="controlgroup" id="my-controlgroup">
<input data-theme="b" type="text" name="text-username" id="text-username" placeholder="Username" value="" />
<input data-theme="b" type="password" name="text-pwd" id="text-pwd" placeholder="Password" value="" />
</div>
</div>
</form>
code with submit button:
<form id="loginForm" data-ajax="false">
<div class="ui-body">
<div data-role="controlgroup" id="my-controlgroup">
<input data-theme="b" type="text" name="text-username" id="text-username" placeholder="Username" value="" />
<input data-theme="b" type="password" name="text-pwd" id="text-pwd" placeholder="Password" value="" />
<button type="submit" data-theme="none" name="submit" value=""></button>
</div>
</div>
</form>
I don't need submit but since i have to submit form using iPhone soft keyboard any help is very much appreciated.
Thanks.
you need a keypress event my friend. The "Go" button on your phone is equivalent to the Enter key of your physical keyboard. You have to check for that keyCode. Here's a code :
$("#my-controlgroup").on("keypress", "input[type=text]", function(e) {
//check for enter key
if(e.which === 13) {
//check for empty input
if($("input:empty").length === 0) {
alert("submitted!");
}
}
});
Here's the Fiddle, if it helps !
<form id="loginForm" data-ajax="false">
<div class="ui-body">
<div data-role="controlgroup" id="my-controlgroup">
<input data-theme="b" type="text" name="text-username" id="text-username" placeholder="Username" value="" />
<input data-theme="b" type="password" name="text-pwd" id="text-pwd" placeholder="Password" value="" />
<button type="submit" data-theme="none" name="submit" value="">GO</button>
</div>
</div>
</form>
Simple JS form validation does not seem to be working in IE. Any help would be grand. It seems to be submitting the form rather then giving me an alert when nothing is entered into the email field. works as intended in Chrome, FF, Opera, Safari, Just NOT in IE.
HTML
<form action="index.php" name="loginForm" onsubmit="return validateLoginForm();" method="post" >
<div class="formBg">
<input type="text" name="email" id="email" tabindex="1" class="formPos" value="" placeholder="Email" />
<div class="loginText">Forgot your password?</div>
</div>
<div class="formBg">
<input type="password" name="password" id="password" tabindex="2" class="formPos" value="" placeholder="Password" />
<div class="loginText">Keep me logged in</div>
</div>
<div id="loginBtnFrame">
<div id="loginBtn">
<input type="submit" name="submit" id="loginFormBtn" value=" " tabindex="3" />
</div>
<div class="slider-frame"><span class="slider-button">no</span></div>
<input type="checkbox" value="1" id="rememberMe" name="rememberMe" />
</div>
</form>
Javascript
function validateLoginForm()
{
var x=document.forms["loginForm"]["email"].value;
if (x==null || x=="")
{
alert("email must be filled out");
return false;
}
}
Thank you so much in advance.
For those that may hit the same issue.
I found that IE simple form validation conflicts with HTML or some Jquery 'placeholders'. I got around it by adding '(x==null || x=="" || x=="Email")' to the JS command. Where 'Email' is the placeholder text. Now working as intended.