Add enter for submit textarea - javascript

Hi i was created a new chat box,everithing is working but i need to when i click enter to sumit a message(to go to function Kucaj() ).Can you help me with that?
I add some code for enter but didnt work.Thanks
<?php
session_start();
if(!isset($_SESSION['username'])){
?>
<form name="forma2" action="login.php" method="post">
<table>
Username: <input type="text" name="username" /><br />
Password: <input type="password" name="password" />
<tr>
<td colspan="2"><input type="submit" name"submit" value"Login"/td>
</tr>
<tr>
<td colspan="2">Registruj se!</td>
</tr>
<?php
exit;
}
?>
<html>
<head>
<title>Maturski rad</title>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
function Klikni(){
if(forma1.msg.value == ''){
alert('Upisi poruku!');
return;
}
var msg = forma1.msg.value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById('chatlogs').innerHTML = xmlhttp.responseText;
}
forma1.msg.value='';
}
xmlhttp.open('GET','insert.php?&msg='+msg,true);
xmlhttp.send();
}
$(document).ready(function(e) {
$.ajaxSetup({cache:false});
setInterval(function() {$('#chatlogs').load('logs.php');}, 2000);
});
</script>
</head>
<body>
<form name="forma1" action="#" id="forma1">
Username: <b><?php echo $_SESSION['username']; ?></b></br>
Poruka: <br />
<textarea name="msg" style="width:500px; height:100px"></textarea><br />
Posalji<br /><br />
Izloguj se<br /><br />
<script>
$("forma1").keypress(function(event) {
if (event.which == 13) {
event.Klikni();
}}
</script>
<div id="chatlogs">
Molim sacekajte da se ocita!!!
</div>
</body>
</html>

You can just add onsubmit=return Klikni(); attribute to your form and return false; to Klikni function without using .keypress(). Form submitted on user pressing enter is a default behaviour.
function Klikni(e) {
alert("Enter pressed");
return false;
}
<form name="forma1" action="#" id="forma1" onsubmit="return Klikni();">
Put your cursor into the field and press Enter.<br>
<input type="text">
</form>

try like this source,
form.submit(function(e) {
e.preventDefault();
$(this).find('[type=submit]').click();
$("form").submit();
})

Try keydown instead of keypress as:
$("forma1").keydown(function(event) {

You may use like this.It should be like this Klikni(); not like event.Klikni();
<script>
$("forma1").keypress(function(event) {
if (event.which == 13) {
Klikni(); //no need of event there..
}}
</script>

Related

Why our page is loaded when I click on button

In below code actually I got form design in popup using onload(). In function login() first I check every field is required then in else part I call loginvalidate.php page without page refresh in this page I perform validation in php and if any error show it in
<div id="result" style="color:red;"></div>
Division, But my query is that after if part is completed in login function and when I click on button in else part our page is reloaded because of this reload I can't access my loginvalidate.php page why this is happen please suggest me,
<!doctype html>
<html>
<head>
<script src="jquery-1.11.3.js"></script>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script>
function login(){
var email=document.getElementById("email").value;
var password=document.getElementById("pass").value;
var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*#[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;
if(email=="" || password==""){
alert("Every Field Is Requird");
email.password.focus();
return false;
}else{
//alert("hii");
$.post('custom-look/loginvalidate.php',{uemail:email,upass:password}, //email,pass ->textbox name
function(data){
$('#result').html(data);
});
return false;
}
}
function popup(){
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
</script>
</head>
<body onload="popup();">
<div id="light" class="white_content" style="height:53%">
<img class="close" src="/shopeeon/custom-look/newloginpopup/close.jpg" class="close" href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none';history.go(-1);"></img>
<!--go back to previous page using "history.go(-1)" onclick-->
<div id="abc">
<div id="popupContact-login" class="col-sm-12" >
<form action="" id="login-form" method="post" name="form">
<div style="color:orange;text-align:center;width:100%;">
<h2 style="margin:0px;">Login to Earn Extra Cashback</h2>
<div id="result" style="color:red;"></div>
</div><br/>
<div class="col-sm-6 align="center" style="border-right:1px solid gray;" > <?php $reg1 = <<<var<b style="font-size:20px;font-family:arial;"> Registered User,</b> var; $reg2=<<<var<b style="color:blue;font-size:20 px;font-family:arial;"> Sign In Here </b> var; echo $reg1.$reg2; ?> </br> <input type="email" id="email" class="form-control" name="uemail" placeholder="Enter email" required/><br/>
<input type="password" id="pass" class="form-control" name="upass" placeholder="Enter password" required/><br/>
<button type="submit" onclick="return login()" id="submit" name="submit" value="submit" class="btn btn-info active btn-md">SIGN IN</button><br/>
Else Redirect without Sign In
</div>
<div class="col-sm-6" > <?php $str1 = <<<var <b style="font-size:20px;font-family:arial;"> New User,</b> var; $str2=<<<var <b style="color:blue;font-size:20 px;font-family:arial;"> Sign Up Here </b> var; echo $str1.$str2;?>
<img src="/shopeeon/custom-look/newloginpopup/link.png" height="38"></img><br/> <?php $s1 = <<<var <b style="font-size:12px;font-family:arial;"><img src="/shopeeon/custom-look/newloginpopup/star.png" height="15" width="15"></img> WE OFFER CASHBACK WHEN YOU SHOP VIA US.</br><img src="/shopeeon/custom-look/newloginpopup/star.png" height="15" width="15"></img> OVER 2 LAKH CASHBACK PAID.</br><img src="/shopeeon/custom-look/newloginpopup/star.png" height="15" width="15"></img> OVER 1 LAKH HAPPY CUSTOMERS.</br><img src="/shopeeon/custom-look/newloginpopup/star.png" height="15" width="15"></img> 25+ PARTNERS SITES.</br>var; echo $s1;?>
</div >
</form>
</div>
</div>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
While click the button form submit will trigger, it's reload the page. So give onsubmit="return false" to form for prevent the page load.
Like below code
<form onsubmit="return false">
</form>
Hope this will help you.
1st: what that line expect to do?? email.password.focus(); it will give you an error .. so you can use
if(email=="" || password=="")
{
alert("Every Field Is Requird");
if(email == ""){
email.focus();
}
// check the same way for password
}
else......
2nd: better to don't mix jquery with pure javascript
3rd in your function it submit a form before prevent the page from reloading so you can use
in html
<form onsubmit="login();"> // instead of the submit input click event
and your function
function login()
{
var email=$('#email').val();
var password=$("#pass").val();
var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*#[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;
if(email=="" || password=="")
{
alert("Every Field Is Requird");
//email.password.focus();
}
else
{
//alert("hii");
$.post('custom-look/loginvalidate.php',{uemail:email,upass:password}, //email,pass ->textbox name
function(data)
{
$('#result').html(data);
});
}
return false;
}
or you can use e.preventDefault();
<form onsubmit="login(e);"> // instead of the submit input click event
and your function
function login(e)
{
e.preventDefault();
var email=$('#email').val();
var password=$("#pass").val();
var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*#[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;
if(email=="" || password=="")
{
alert("Every Field Is Requird");
//email.password.focus();
}
else
{
//alert("hii");
$.post('custom-look/loginvalidate.php',{uemail:email,upass:password}, //email,pass ->textbox name
function(data)
{
$('#result').html(data);
});
}
//return false;
}

Javascript Validation Inconsistent

In the codes below, both functions and callings are quite similar.
Why is it that the JavaScript validation alert works in the code below:
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
function validate()
{
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
return( true );
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Name</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
but doesn't work in this one:
<!DOCTYPE html>
<html>
<head>
<title> Untitled</title>
<script type='text/javascript'>
}
function validate()
{
if( document.myForm.firstname.value == "" )
{
alert( "Please provide your first name!" );
document.myForm.firstname.focus() ;
return false;
}
return( true );
}
</script>
</head>
<body>
<form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">
<h1> Truth </h1>
<label> First Name: </label> <input type="text" name="firstname" id="firstname" maxlength="30" placeholder="John" /> <br><br>
<input type="submit" value="Submit"/> <br>
</form>
</body>
</html>
Probably because you've got a leading '}' in the code in the second example.
<script type='text/javascript'>
} // <- this is going to cause a syntax error
function validate()
{
if( document.myForm.firstname.value == "" )
{
alert( "Please provide your first name!" );
document.myForm.firstname.focus() ;
return false;
}
return( true );
}
</script>
Try fixing that and see if it works. If you're running things in a browser, check the JavaScript console for errors.

alphabet validation on textbox in javascript using event keypress

I am trying to validate the form when any special characters or number press in the text box it should trigger an error as alert.
<html>
<head>
<script>
function demoMatchClick() {
var reg = new RegExp("[a-z]|[A-Z]");
if (document.form.name.value.match(reg)) {
alert("Successful match");
} else {
alert("Not a match");
}
}
</script>
</head>
<body >
<form onSubmit="alert('submit')" name="form">
<input type="text" name="name" value="name" onkeyup="demoMatchClick();"/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
Replace your code with This:
function demoMatchClick(inputtxt) {
var letters = /^[A-Za-z]+$/;
var val = inputtxt.value.replace(/\s/g, '');
if (val.match(letters)) {
alert("Successful match");
} else {
alert("Not a match");
}
}
<html>
<body >
<form onSubmit="alert('submit')" name="form">
<input type="text" name="name" value="name" onkeyup="demoMatchClick(this);"/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
<input type="text" name="name" value="name" pattern="[a-zA-Z]+" title="Letters only!"/>
Done. Demo

JS Form Validation not working for simple html form

I have a simple HTML form with just one filed. The form is as follows-
<table>
<form action="insert.php" method="post" name="discover" onSubmit="return discover()">
<tr><td></td><td><input type="text" name="name"></td></tr>
<tr><td></td><td><br><br><p class="submit"><input type="submit" id="submit" name="commit" value="Register"></p><br><br><br></td></tr>
</form>
</table>
The validation js file is-
function discover() {
var stu_name=document.forms["discover"]["name"].value;
if (stu_name==null || stu_name=="" || stu_name.length<7) {
alert("Please provide Your full name");
return false;
}
}
I have included the validation js file properly. But the validation is not working.
The link forJsfiddle
try this
<script type="text/javascript">
function check()
{
var stu_name=document.forms["discover"]["stu_name"].value;
if (stu_name==null || stu_name=="" || stu_name.length<7)
{
alert("Please provide Your full name");
return false;
}
}
</script>
<form action="" method="post" name="discover" id="discover" onsubmit="return check();">
<input type="text" name="stu_name" id="stu_name" value="" />
<input type="submit" id="sub" />
</form>
In your js file,
Test that:
function discover()
{
var stu_name=document.forms["discover"]["name"].value;
if (stu_name==null || stu_name=="" || stu_name.length<7)
{
alert("Please provide Your full name");
return false;
}
}
This work
function discover()
{
var stu_name=document.getElementsByName("name");
if (stu_name==null || stu_name=="" || stu_name.length<7)
{
alert("Please provide Your full name");
return false;
}
}
You are mixing form name and function name and also the input needs an id which was missing. Also you forgot to close the function.
Try this
<script type="text/javascript">
function _discover()
{
var stu_name=document.forms["discover"]["stu_name"].value;
if (stu_name==null || stu_name=="" || stu_name.length<7)
{
alert("Please provide Your full name");
return false;
}
}
</script>
<table>
<form action="" method="post" name="discover" onSubmit="return _discover();">
<tr><td></td><td><input type="text" name="name" id="stu_name"> </td></tr>
<tr><td></td><td><br><br><p class="submit"><input type="submit" id="submit" name="commit" value="Register"></p><br><br><br></td></tr>
</form>
</table>
There is Nothing Wrong in your Code except the function name as same name as form
see this link here's the working code
jsbin
function disc() {
var stu_name=document.forms["discover"]["name"].value;
if (stu_name==null || stu_name=="" || stu_name.length<7) {
alert("Please provide Your full name");
return false;
}
}
<table>
<form action="insert.php" method="post" name="discover" onSubmit="return disc()">
<tr><td></td><td><input type="text" name="name"></td></tr>
<tr><td></td><td><br><br><p class="submit"><input type="submit" id="submit" name="commit" value="Register"></p><br><br><br></td></tr>
</form>
</table>

Email Validation with JavaScript [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Validate email address in Javascript?
This is my first post and I have a small issue. I'm trying to validate an email address on a form, but with no luck. I found this snippet on the internet but it doesn't seem to be working. I'm using Javascript at the moment to validate it. I don't usually use JS, so any help would be appreciated.
<script type="text/javascript">
function ValidateEmail(inputText)
{
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(inputText.value.match(mailformat))
{
document.forms.emailform();
return true;
}
else
{
alert("You have entered an invalid email address!");
document.forms.emailform();
return false;
}
}
<?php
$addemail .= '
<form method="post" action="cart2.php" name="emailform" onsubmit="return validateEmail">
';
$addemail .= '
E-mail Address: <input type="text" name="email" value="'.$row6['email'].'" size="19" /><input type="hidden" name="cartid" value="'.$cart.'" />';
if ( $emailerror != '' )
{
$addemail .= '<img src="images/email_error.png" width="16" height="16" hspace="4" alt="E-mail Error" />';
}
$addemail .= '
<input type="image" name="Add E-mail Address" alt="Add E-mail Address" src="images/addemail.gif" style="vertical-align:middle" />
</form>
';
if ( $row6['email'] == '' )
{
$emailpresent = 0;
}
else
{
$emailpresent = 1;
}
}
$addemail .= '
</td>
</tr>
';
}
?>
Look at this example of how it can be done in Javascript:
<html>
<head>
<script type="text/javascript">
<!--
function validateEmail() {
var emailText = document.getElementById('email').value;
var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*#[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;
if (pattern.test(emailText)) {
return true;
} else {
alert('Bad email address: ' + emailText);
return false;
}
}
window.onload = function() {
document.getElementById('email_form').onsubmit = validateEmail;
}
</script>
</head>
<body>
<form id="email_form">
<input type="text" id="email">
<input type="submit">
</form>
</body>
</html>
Edit:
If you are sure that the users of your web page are using HTML5 compatible browsers you can use the following neater example for the same purpose:
<!DOCTYPE html>
<html>
<body>
<form>
<input type="email" pattern="^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*#[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$">
<input type="submit">
</form>
</body>
</html>
onsubmit="return validateEmail()"
You must add parentheses after validateEmail in order to call it or it will assume you're trying to return a method.

Categories