I want a validation onkeyup from an input form, I've made a jquery. I'm having a hard time finding why is it not checking? I need to go to a php page in checking. What could be wrong to my code that it don't work?
<html>
<head>
<title>
reg
</title>
</head>
<body>
<form method="post">
<input type="text" name="name" onkeyup="check_user()" id="name"/><div id="checking">Checking</div>
<button type="submit" name="submit">Submit<button>
</form>
<script src="jquery-3.3.1.min.js"></script>
<script>
document.getElementById("submit").disabled=true;
function check_user(){
var name = document.getElementById("name").value;
$.post("user_check.php",
{
user: name
},
function(data,status){
if(data=='<p style="color:red">Name contains a number</p>'){
document.getElementById("submit").disabled=true;
}
else{
document.getElementById("submit").disabled=false;
}
document.getElementById("checking").innerHTML=data;
}
);
}
</script>
</body>
</html>
user_check.php
<?php
if (isset($_POST['user'])) {
if(preg_match('/^\d+$/', $_POST['user'])) {
echo '<p style="color:red">Name contains a number</p>';
} else {
echo '<p style="color:green"> You can take this name</p>';
}
}
?>
You can validate the text box by adding the pattern attribute like this pattern="[a-zA-Z]+"
<input type="text" name="name" pattern="[a-zA-Z]+" title="please just add strings" id="name"/>
i also notice in your code you did not add the id for the submit button thats why your submit button is not disabled, your code should like this for submit button.
Submit
1- first add the id attribute of the submit button id="submit"like this
<button type="submit" id="submit" name="submit">Submit<button>
2- update the code on user_check.php
if (isset($_POST['user'])) {
if(!preg_match('/^([^0-9]*)$/', $_POST['user'])) {
echo '<p style="color:red">Name contains a number</p>';
} else {
echo '<p style="color:green"> You can take this name</p>';
}
}
Related
Here is my form:
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
<input type="Submit" value="Submit" >
</form>
And need to fill it from console.
just to use it in my app,
Will inject javascript with data to local html file.
I tried to make the form without a submit button like so:
<body>
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
</form>
<script>
htmlString.oninput = function(){
///do some stuff
}
</script>
</body>
Expecting that :
document.getElementById('htmlString').value="moo" ;
It automatically submit the form, because here oninput used.
But it just stayed filled with inputs and not proceed further.
Tried with other solution:
form = document.getElementById("myForm")
form.submit()
But it just refreshed the page and not submitted the form.
The need is just one filed without else, and inject my string to it with javascript to run functions embedded in the html.
Try making the input button hidden.
<body>
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
<input type="Submit" value="Submit" style="display: none" >
</form>
<button onclick="simulateConsole()">Try it</button>
<script>
htmlString.oninput = function(){
if(this.value === "moo") {
myForm.submit();
}
}
// This event will be triggered even if you use console
htmlString.onsubmit = function(){
if(this.value === "moo") {
// do something onSubmit
}
}
function simulateConsole() {
// you can simulate this in console
htmlString.value = "moo";
myForm.submit();
}
</script>
</body>
I hope it helps.
You need to supply an action to the form, otherwise it will just reload the page.
See more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
The problem i'm having is Im trying to get the contact.php to validate a contact form that is now in the bottom of every page in my site. It worked great with just validating one page and having a hard URL to take them back to. the troubleing code is this.
/* In case of no valid input go back */
if ($p1==""||$p2==""||$p3==""||$p5==""||$n0!=0||$f0<7||$NL==0||$p7=="") {
header($_SERVER['HTTP_REFERER'].$report);
}else{$report='noerror';}
Ive also tryed this:
/* In case of no valid input go back */
if ($p1==""||$p2==""||$p3==""||$p5==""||$n0!=0||$f0<7||$NL==0||$p7=="") {
header($_SERVER['PHP_SELF'].$report);
}else{$report='noerror';}
This is the original code that worked for one page:
/* In case of no valid input go back */
if ($p1==""||$p2==""||$p3==""||$p5==""||$n0!=0||$f0<7||$NL==0||$p7=="") {
header('Location:estimate_page.php?'.$report);
}else{$report='noerror';}
I could just make a new "contact.php" page for every page that has the form in the footer, but thats stupid if i can just make this work. Any ideas
You are thinking in the right direction with javascript/jQuery -- it will allow you to catch the invalid fields before submitting / changing pages. Much better user experience. Only submit when fields are validated.
Here is a link for how to do simple field validation testing with jQuery:
jsFiddle Demo
HTML:
One: <input type="text" id="f1"><br />
Two: <input type="text" id="f2"><br />
Three: <input type="text" id="f3"><br />
Four: <input type="text" id="f4"><br />
<br />
<input type="button" id="mybutt" value="Go" />
javascript/jQuery:
var chkFld, arrAll = {'One':'f1','Two':'f2','Three':'f3','Four':'f4'};
$('#mybutt').click(function() {
var errMsg='', badFlds='', firstBad='';
for(var key in arrAll){
chkFld = '#'+arrAll[key];
$(chkFld).removeClass('error');
if ($(chkFld).val() ==''){
$(chkFld).addClass('error');
//alert('Please complete field ' + arrAll[key] );
errMsg += '*' + key + '\n';
if (firstBad=='') firstBad=chkFld;
}
}
if (errMsg != '') {
alert(errMsg);
$(firstBad).focus();
}
}); //END mybutt.click
Note that the above example uses jQuery, so you must reference the jQ libraries (usually inside the head tags, something like this:)
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
EDIT:
Here is what the full HTML would look like:
<?php
//Any initial PHP code goes here
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
//javascript
var chkFld, arrAll = {'One':'f1','Two':'f2','Three':'f3','Four':'f4'};
$(document).ready(function() {
$('#mybutt').click(function() {
var errMsg='', badFlds='', firstBad='';
for(var key in arrAll){
chkFld = '#'+arrAll[key];
$(chkFld).removeClass('error');
if ($(chkFld).val() ==''){
$(chkFld).addClass('error');
//alert('Please complete field ' + arrAll[key] );
errMsg += '*' + key + '\n';
if (firstBad=='') firstBad=chkFld;
}
}
if (errMsg != '') {
alert(errMsg);
$(firstBad).focus();
return false;
}
//If it gets to here, it passed validation
$('#yourForm').submit();
}); //END mybutt.click()
}); //END $(document).ready()
</script>
</head>
<body>
<form id="yourForm">
One: <input type="text" id="f1" /><br />
Two: <input type="text" id="f2" /><br />
Three: <input type="text" id="f3" /><br />
Four: <input type="text" id="f4" /><br />
</form>
<input type="button" id="mybutt" value="Click Me">
</body>
</html>
Note that, using the above scenario, no further PHP code would execute until the form is submitted, using the manual $('#yourForm').submit(); statement.
I have done a login page. I want my js validateForm()function to alert a user if they have left out the username or password. This is the code I have got at the moment.
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm()
{
var x=document.forms["myForm"]["username"].value;
if (x==null || x=="")
{
alert("Please enter username");
return false;
}
}
</script>
</head>
<div class="users form">
<br>
<form name="myform" action="Employees/login" onsubmit="return validateForm()" method="post" >
<?php
if (isset($error)) {
echo "<p style='color:red;font-size: 20px''>Username or Password is invalid. Please try again.</p>";
}?>
<p>Enter Username:
<input type="text" name="username" placeholder="username" style="height: 25px;width: 160px;"/></p>
<br><br>
<p>Enter Password:
<input type="password" name="password" placeholder="password" style="height: 25px;width: 160px;"/></p>
<br>
<input type="submit" style="height:35px;width:100px;font-size: 18px; align:center;" value="Sign in">
</form>
</div>
At the moment it is not working, and I think the problem is with the code line "var x=document.forms["myForm"]["username"].value;" Can someone please help?
The issue is forms["myForm"], you used an uppercase F, when actually your form name is all lowercase so it should be:
var x=document.forms["myform"]["username"].value;
// ^ lowercase
Not part of the problem, but you might prefer to use unobtrusive JavaScript to set the onsubmit handler instead of in the HTML attribute:
window.onload = function(){
document.forms["myform"].onsubmit = validateForm;
};
Now, in validateForm you can use this instead of finding the form manually.
function validateForm()
{
var x = this["username"].value;
...
}
if (!(isset($_POST['fullname']) && strlen($_POST['fullname']))) {
echo
"<script type=\"text/javascript\">".
"window.alert('You must enter your full name.');".
"</script>";
exit;
}
The above code is in the register.php file. I have html form in the index.html. when i post the form without full name. it displays alert but page gets stuck at register.php (blank page.)
i want to display the alert on index.html page or atleast get redirected to index.html.
how to do it???
Try window.location.href = '/index.html inside script
if (! (isset($_POST['fullname']) && strlen($_POST['fullname']))) {
echo "<script type=\"text/javascript\">window.alert('You must enter your full name.');window.location.href = '/index.html';</script>";
exit;
}
Do it this way:
if (!(isset($_POST['fullname']) && strlen($_POST['fullname']))) {
echo
"<script type=\"text/javascript\">".
"window.alert('You must enter your full name.');".
"top.location = 'index.html';".
"</script>";
exit;
}
Your exit command is stopping execution, that is why it gets stuck at register.php.
If you want to redirect to another page: http://www.cyberciti.biz/faq/php-redirect/
Do 1 thing.. Put this if condition in the same page. and submit your form on the same page.
it's better idea. if you don't need register.php file for different reason.
It can be done by
windows.location("index.php").
but it's now good way.
<?php
if (!(isset($_POST['fullname']) && strlen($_POST['fullname']))) {
echo
"<script type=\"text/javascript\">".
"window.alert('You must enter your full name.');".
'window.location.href="index.html";'.
"</script>";
exit;
}
You'll want to do this completely client side - a trip to the server isn't even necessary in order to determine whether or not the fullname field was filled out.
Try something like the following on your registration page:
<form id="myform" action="register.php" method="post">
Full Name: <input type="text" name="fullname" />
<input type="submit" value="Submit" />
</form>
<script type="text/javascript">
document.getElementById('myform').onsubmit=function(){
if(!this.fullname.value) {
alert("You must enter your full name")
//stop form submission
return false
}
//continue on to register.php
return true
}
</script>
Working JS Fiddle:
http://jsfiddle.net/GAk8C/
When you are posting a form using PHP, it redirects the browser to that page. Why not alert the error message before submitting the form? Here is a short example:
<form name="contactForm" action="register.php">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" />
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</form>
<script>
$(function() {
$('#contactForm').on('submit', function() {
// validate and process form here
if( !$("#name").val() ) {
alert('You must enter a valid name!');
return false;
}
});
});
</script>
I Think You are doing this for validation of the field.
It is better to do the simple validation in index.html page itself.
use
in your html code in the index.html pge add the folloimg in your submit button
<input type="submit" name="submit" value="yourvalue" onclick="return validateName()">
And use the javascript validation method as
<script language="javascript" >
function validateName(){
if(document.getElementById("idOfFirstNameField").value==""){
alert("Please enter your name");
document.getElementById("idOfFirstNameField").focus();
return false;
}
}
</script>
Better way, you can give javascript on index.html itself. so when user will not put fullname then it will not redirect to register.php. it will stay on same page with alert error message means on index.html
in head of HTML you put like that
<head>
function validate(){
fname=document.getElementByID('fname').value;
if (fname==""){
alert("Please provide full name.");
return false;
}else{
window.location.href = 'register.php';
}
}
</head>
<body>
<form name="adminform" src="register.php" onsubmit="return validate();">
<input type="text" id="fname" name="fname" value=""/>
</form>
</body>
if user put full name then it will redirect to register.php
The way i do it. In register.php file:
<?php session_start();
if((empty($_POST['name'])) || (empty($_POST['email'])) || (empty($_POST['subject'])) || (empty($_POST['message']))) {
$_SESSION['mensaje']="<script language=\"javascript\">alert('All fields are mandatory')</script>";
header("Location: ../contact.php");
exit;
}
And in the first lines of the file that you will redirect in case of error (in this case contact.php)
<?php session_start();
if(isset($_SESSION['mensaje'])){
echo $_SESSION['mensaje'];
}
session_destroy();?>
<!DOCTYPE html>
Also you can use the same way to show a success message. Hope it helps.
I am looking to create a button at the bottom of a form that will create an alert box that will show the form data entered. Form includes:
First Name
Last Name
Address 1
Address 2
City
State
Zip
Phone
Fax
Once the form is completed, the button is clicked and an alert box pops up showing the form data entered.
Does anyone know how to accomplish without the form actually being submitted or validated? There is no database for the form data to be submitted to, so there is no database to pull the information from.
Any help would be greatly appreciated.
I have not included the form code due to its length, but the current code I am working with for the Alert Box looks like this:
<script>
function display_alert()
{
alert("");
}
</script>
<body>
<input type="button" onclick="display_alert()" value="Display alert box">
</body>
If I get it right you need something like this:
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById('send').onclick = function(e){
alert(document.getElementById("name").value);
return false;
}
}
</script>
</head>
<body>
<form method="post">
<input type="text" name="name" id="name" />
<input type="submit" name="send" id="send" value="send" />
</form>
</body>
</html>
I don't really get what you mean with a database to pull the information from, but the example uses a click event to get the data from the form field and shows it in an alert without a submit.
html code:
<html>
<SCRIPT SRC="PR8_4.JS"></SCRIPT>
<body>
<form name=details>
<table>
<tr><td>ENTER FRIST NAME:<input type=text name=fname></td></tr>
<tr><td>ENTER LAST NAME:<input type=text name=lname></td></tr>
<tr><td>ENTER PHONE NUM :<input type=text name=phnum></td></tr>
</table>
<input type="button" value="Click Me" onclick="display();">
</form>
</body>
</html>
javascript code:
function display()
{
var x=document.details.fname.value;
var y=document.details.lname.value;
var z=document.details.phnum.value;
alert("FIRST NAME:"+x+" "+"LAST NAME:"+y+" "+"PHONE NUMBER:"+z);
}
To stop a form submitting you can create an onsubmit event within the tag and return false - e.g. ...form elements.... This has the benefit of working when someone submits the form by pressing the enter key as well as pressing the submit button.
Thus, to achieve what you desire you could create a function (lets call it formAlert) and call it from the onsubmit event e.g. ...form elements...
The formAlert function would look something like:
function formAlert() {
alert_string = '';
alert_string = alert_string + document.getElementById('first_name').value;
alert_string = alert_string + ' ';
alert_string = alert_string + document.getElementById('last_name').value;
alert(alert_string);
}
and this would correspond to a form looking like:
<form id="foo" onsubmit="formAlert(); return false;">
<p><label for="first_name">First Name<label><input type="text" id="first_name" value="fred" /></p>
<p><label for="last_name">Last Name<label><input type="text" id="last_name" value="blogs" /></p>
<p><input type="submit" value="click me" /></p>
</form>
Note1, this won't be a pretty modal box - it'll simply display "fred blogs" in a Javascript alert box.
Note2, if there is a Javascript error your form will still submit (although in the example here it'll submit to itself).
Here is a JS Fiddle demonstrating the above code: http://jsfiddle.net/D59su/
I think this might be what you're looking for:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="javascriptform.css">
</head>
<body>
<form name= "details"><div class="box1"><div id="a"><input type="text" name="lastname" placeholder="LAST NAME"></div><br>
<div id="b"><input type="text" name="firstname" placeholder="FIRST NAME"></div><br>
<div id="c"><input type="e-mail" name="email" placeholder="E-MAIL"></div><br>
<div id="d"><input type="password" name="password" placeholder="PASSWORD"></div><br>
<div id="sub-button"><button onclick="getdetails();">submit</button></div></form>
</div>
<script>
function getdetails()
{
var a = document.forms["details"]["lastname"].value;
var b = document.forms["details"]["firstname"].value;
var c= document.forms["details"]["email"].value;
alert("Your name is "+a+" "+b+". Your e-mail is "+c);
}
</script>
</body>
</html>
It Is Very Simple
Using .value will help.
HTML:
<form onsubmit="return myFunction()>
<input type="text" id="name>
<input type="submit" value="SEND">
Use return before your function
Javascript:
function myFunction () {var name = document.getElementById("name").value; alert("Hi " + name)}
After Submitting It Will Show As (If I Write Alex and Submit It)
Hi Alex
Hope it will work