The code below is colouring the input but not submitting the form in chrome. It's working in Firefox:
<script type="text/javascript">
$(function(){
$('input').keypress(function(event) {
if (event.keyCode == '13') {
//alert($(this).parentsUntil('form').css('color'));
$('form').css('color','red');
$('form').submit();
}
});});</script>
Please note that the submit button is set to display:none, if I change it to visibility:hidden, it works but it reserve the place which is not what I want.
Thanks.
EDIT
Here's a full example as requested below:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
<title>دخول</title>
<script type="text/javascript">
$(function(){
$('input').keypress(function(event) {
if (event.keyCode == 13) {
$(this).parents('form').submit();
}
});
});
</script>
</head>
<body>
<form action="http://www.yahoo.com" method='post'>
<table >
<tr><td>name: </td><td><input type="text" name="username" value=""></td></tr>
<tr><td>password: </td><td><input type="password" name="password" value=""></td></tr>
<tr><td colspan=2>Login
<div style="display: none;"><input type="submit" name="submit" value="Login" id="loginfrm"></div></td></tr>
</table>
</form>
your problem is that you named your submit button submit, the browser sees that as a used name, give the submit button a name like dosubmit or whatever and it works.
with name submit (does not work)
http://www.jsfiddle.net/pVUwW/
with name dosubmit (works)
http://www.jsfiddle.net/pVUwW/1/
the only difference in those is the name of the submit.
Other than that i changed the event.keyCode to event.which from your original code, see http://api.jquery.com/event.which/ for explanation why.
This is strange, just tried this in Chrome, it works correctly even without your code (keypress)
http://jsfiddle.net/72Nbm/
Related
I am having issues with external javascript. Here is my basic form.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="../CSS/styles.css">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script src="../Javascript/UserScript.js" type="text/javascript"></script>
<title>Start Page</title>
</head>
<body>
<form id="newUser">
Email: <input type="text" name="Email"> <br/>
Password: <input type="password" name="Password"> <br/>
Confirm Password: <input type="password" name="ConfirmPassword"> <br/>
<input type="submit" name="Submit" />
</form>
</body>
If I call the following internally it works just fine. If I call it externally I get nothing.
$("#newUser").submit(function (event) {
event.preventDefault();
alert('hello world');
});
I even made a new file and did a test with something like this just to make sure jquery was working fine.
$(document).ready(function (e) {
alert('hello')
}
Put your code inside a document ready handler:
$(function () {
$("#newUser").submit(function (event) {
event.preventDefault();
alert('hello world');
});
});
You can't attach an event to an element before it exists. Your script runs before the #newUser element has been parsed and added to the DOM. The $("#newUser") in your code is producing an empty set.
I create a login form in popup box. When the username field is left blank, an error message will appear to notify the user to fill in the empty username field. As a test, I click on the login button leaving the username field, and the message appears in the popup box as expected. But the problem is the popup box is closed immediately.
So, my question is how do I keep the popup box open with the error message shown?
Here is my script:
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Modal Login Window Demo</title>
<link rel="shortcut icon" href="http://designshack.net/favicon.ico">
<link rel="icon" href="http://designshack.net/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="http://designshack.net/tutorialexamples/modal-login-jquery/style.css">
<script type="text/javascript" src="http://designshack.net/tutorialexamples/modal-login-jquery/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://designshack.net/tutorialexamples/modal-login-jquery/js/jquery.leanModal.min.js"></script>
</head>
<body>
<div id="w">
<div id="content">
<center><a href="#loginmodal" class="flatbtn" id="modaltrigger">Modal Login</a</center>
</div>
</div>
<div id="loginmodal" style="display:none;">
<?php
if($_POST["loginbtn"]){
if(!$_POST["username"]){
echo "<center><font color=red>please fill your username</font></center>";
}elseif(!$_POST["password"]){
echo "<center><font color=red>please fill your password</font></center>";
}
}
?>
<h1>User Login</h1>
<form method="post">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="txtfield" tabindex="1">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="txtfield" tabindex="2">
<div class="center"><input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" tabindex="3"></div>
</form>
</div>
<script type="text/javascript">
$(function(){
$('#loginform').submit(function(e){
return false;
});
$('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
});
</script>
</body>
</html>
The closeButton option will always cause the modal to be closed when the corresponding button is clicked. And looking at the leanModal source, there doesn't seem to be any direct way to manipulate its event-handling callback.
So if all you want to do is to keep the form modal opened if the fields are not filled, and let your server-side codes perform the validation you can just do the following:
$('#loginform').submit(function(e){
if(!$('#username').val()) {
$('#loginmodal').show();
}
else
console.log("Enter your username");
return false;
});
Live demo on jsfiddle. Notice that I added an id to the form tag, and fixed some of the malformed HTML tags in the fiddle.
Haven't had a chance to test but try stopping the propagation of the click function, doing that tells the browser to not complete the default action for this event.
$('#loginbtn').click(function(e){
if(!$('#username').val()){
e.stopPropagation();
}
});
or as the other answer suggests try using jquery validation which will help in getting all this to work much more easily I like to use: http://jqueryvalidation.org/
This appears to be very similar to this question: How to force a html5 form validation without submitting it via jQuery
That answer assumes that you would be adding the required attribute to the necessary form elements, and also that you use a polyfill such as html5shiv if old browser support is a requirement.
use jquery validationEngine. It is a good one for your requirement.
See demo here
You have some missing information in the sample html, the form ID is missing therefor jQuery will not attach to it.
I handle this situation by using AJAX for the form action with a json response.
Here is an example from one of my recent apps... Notice the event.preventDefault() method to keep the form from submitting.
$(function () {
jQuery('body').on('submit', '#frmlOGIN', function (event) {
event.preventDefault();
jQuery.post("?action=ajax_signup", jQuery("#frmlOGIN").serialize(), function (data) {
if (data.status == "OK") {
jQuery("#modal_content").html(data.content);
} else {
jQuery("#error_message").html(data.response);
}
});
});
$('#modaltrigger').leanModal({
top: 110,
overlay: 0.45,
closeButton: ".hidemodal"
});
});
Here is a jsfiddle example.
http://jsfiddle.net/LqmzwwL3/
Is this code correct? I want the 'submit' to validate the field (to make sure a value has been entered) and if this is correct (there is a value) then fade and display.
Currently, the form fades even when no value is entered? I feel I'm missing something really simple here!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
<link rel='stylesheet' type='text/css' href='styles.css' />
<meta charset="utf-8"-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<div id="sidebarf">
<form id="sidebarform" name="myForm" onsubmit="return validateForm()" method="post">
<input type="text" id="sidebarusername" name="fname" placeholder="Name" required>
<input type="submit" id="sidebarformsubmit" value="Submit">
</form>
</div>
<script>
$("#sidebarformsubmit").click( function(){
$("#sidebarform").fadeOut("slow", function(){
$("#sidebarf").html("hello " + $("#sidebarusername").val() )
});
});
</script>
</body>
</html>
Judging by your comment on the other answer, you don't care if this actually gets submitted, so you could do the following:
HTML:
<div id="sidebarf">
<form id="sidebarform" name="myForm" method="post">
<input type="text" id="sidebarusername" name="fname" placeholder="Name" />
<input type="submit" id="sidebarformsubmit" value="Submit" />
</form>
JS:
$(document).ready(function() {
$('#sidebarform').on('submit', function() {
if ($('#sidebarusername').val() == '') {
alert('First name must be filled out');
return false;
}
$("#sidebarform").fadeOut("slow", function(){
$("#sidebarf").html("hello " + $("#sidebarusername").val() );
});
return false;
});
});
Working example:
http://jsfiddle.net/3z5x8/
Your validation is bound to the submit event. The click event will always be fullfilled.
Bind your handler to the submit event also
$("#sidebarformsubmit").submit( function(){.....
Unless you are submitting with ajax the form will cause a page refresh also which means your fade and show new html won't work
I've made a simple test case that is suppose to take the value in the textarea and put it in the div with the id "submit-output" without refreshing, but for some reason it doesn't work.
clicking the submit button doesn't seem to call the postMessage() function, and even reloads the page when I have return false in there at the end.
Can someone please tell me why the submit button is using the default behavior?
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Case</title>
</head>
<body>
<div id="submit-output">[No output]</div>
<form id="post-form">
<textarea name="post" rows="2" cols="50"></textarea>
<input type=submit value="Submit" id="submitbutton" onclick="postMessage()">
</form>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function() {
function postMessage(){
$('#post-form').submit(function(){
console.log("submit");
$('submit-output').html($('#post-form').children('.post').val());
console.log("submitted");
elem.children('.post').val("");
return false;
});
}
});
</script>
</body>
</html>
You shouldn't use the "click" event of a submit button, only the "submit" event of the form.
Also, the $('submit-output') command will try to find a TAG with this name, not the ID, you should use $("#submit-output") instead.
Other important thing: you need to use e.preventDefault() to prevent the event posting the form.
Code working:
<div id="submit-output">[No output]</div>
<form id="post-form">
<textarea id="txtInput" name="post" rows="2" cols="50"></textarea>
<input type="submit" value="Submit" id="submitbutton" />
</form>
Javascript:
$(document).ready(function() {
$("#post-form").submit(function(e) {
e.preventDefault();
$("#submit-output").html($("#txtInput").val());
$("#txtInput").val("");
});
});
DEMO FIDDLE
You don't need onclick="postMessage()" in the input tag, remove that and remove the postMessage() function. Also add event.preventDefault(); like this:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Case</title>
</head>
<body>
<div id="submit-output">[No output]</div>
<form id="post-form">
<textarea name="post" rows="2" cols="50"></textarea>
<input type=submit value="Submit" id="submitbutton">
</form>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function() {
$('#post-form').submit(function(event){
event.preventDefault();
console.log("submit");
$('#submit-output').html($('#post-form').children('.post').val());
console.log("submitted");
return false;
});
});
</script>
</body>
</html>
`
Test Case
<div id="submit-output">[No output]</div>
<form id="post-form">
<textarea name="post" rows="2" cols="50"></textarea>
<input type=submit value="Submit" id="submitbutton" >
</form>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function() {
function postMessage(){
console.log("submit");
$('#submit-output').html($('#post-form').children('.post').val());
console.log("submitted");
elem.children('.post').val("");
return false;
}
$('#post-form').submit(postMessage);
});
</script>
</body>
`
Try this
I am trying to validate an html form using javascript the code is bellow
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function validate(){
if(document.form1.thbox.checked)
{
alert("yes");
}
else
alert("no");
}
</script>
<form name="form1" method="get">
<input type="checkbox" name="thebox"/>
<input type="button" value="press me" onclick="validate()"/>
</form>
</body>
</html>
when ever I try to press on button nothing works
Can someone please tell me why is that?
Thank you
Change if(document.form1.thbox.checked) to if(document.form1.thebox.checked) You have missed e in thebox
http://jsfiddle.net/eJhzf/
Perhaps because checked is not a valid property of undefined:
HTML:
name="thebox"
Javascript:
form1.thbox.checked
Notice the missing e, so, it should be:
form1.thebox.checked
use this method
if ( document.form1.thebox.checked == false )
{
alert ( "Please select check box." );
}
else {
// your code or message
}
and use thebox instead of thbox