I am using php and CodeIgniter. I am a novice at both of these (career VB.Net and C# developer). However, trying to create a basic registration form, I'm having a hard time getting jQuery validation to work.
header.php
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?><!DOCTYPE html>
<html>
<head>
<?php if(isset($title)) {?>
<title>Discuss Cards - <?php echo $title ?></title>
<?php } else { ?>
<title>Discuss Cards</title>
<?php } ?>
<link rel="stylesheet" href="<?php echo base_url();?>styles/forum.css" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script src="<?php echo base_url();?>js/jquery.validate.min.js"></script>
</head>
<body>
<?php if(isset($title)) {?>
<h1><?php echo $title?></h1>
<?php } ?>
<?php if (isset($page_description)) {?>
<p id="page_description"><?php echo $page_description?></p>
<?php } ?>
create.php
<script>
$("#createaccount").validate();
</script>
<?php $attributes = array('id'=>'createaccount');
echo form_open('user/create_account',$attributes); ?>
<?php echo form_label('Email','txtEmail');?>
<br />
<?php $data = array('type'=>'email','name'=>'txtEmail','id'=>'txtEmail','maxlength'=>'50','minlength'=>'2');
echo form_input($data); ?>
<br /><br />
<?php echo form_label('Username','txtUsername');?>
<br />
<?php $data = array('name'=>'txtUsername','id'=>'txtUsername','maxlength'=>'50','minlength'=>'5');
echo form_input($data); ?>
<br /><br />
<?php echo form_label('Password','pswPassword');?>
<br />
<?php $data = array('name'=>'pswPassword','id'=>'pswPassword');
echo form_password($data); ?>
<br /><br />
<?php echo form_label('Confirm Password','pswConfirmPassword');?>
<br />
<?php $data = array('name'=>'pswConfirmPassword','id'=>'pswConfirmPassword');
echo form_password($data); ?>
<br /><br />
<input type="submit" value="Register" name="Register" />
<?php echo form_close();?>
footer.php
<strong>© 2016</strong>
</body>
</html>
result...
<!DOCTYPE html>
<html>
<head>
<title>Discuss Cards - Create New Account</title>
<link rel="stylesheet" href="http://[::1]/forum/styles/forum.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://[::1]/forum/js/jquery.validate.min.js"></script>
</head>
<body>
<h1>Create New Account</h1>
<script>
$("#createaccount").validate();
</script>
<form action="http://[::1]/forum/index.php/user/create_account" id="createaccount" method="post" accept-charset="utf-8">
<label for="txtEmail">Email</label>
<br>
<input type="email" name="txtEmail" value id="txtEmail" maxlength="50" minlength="2">
<br>
<br>
<label for="txtUsername"></label>
<br>
<input type="text" name="txtUsername" value id="txtUsername" maxlength="50" minlength="5">
<br>
<br>
<label for="pswPassword">Password</label>
<br>
<input type="password" name="pswPassword" value id="pswPassword">
<br>
<br>
<label for="pswConfirmPassword">Confirm Password</label>
<br>
<input type="password" name="pswConfirmPassword" value id="pswConfirmPassword">
<br>
<br>
<input type="submit" value="Register" name="Register">
</form>
<strong>© 2016</strong>
</body>
</html>
Now, the links to the js and css files are correct. I used the example from http://jqueryvalidation.org/documentation/:
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
<script>
$("#commentForm").validate();
</script>
However, I feel that I'm missing something because it's not working. When I use their demo (http://jqueryvalidation.org/files/demo/), a new label is created under the input area which displays the error. However, when I test my code (Notepadd++, latest version of Google Chrome, WAMPServer 2.5), I only get Chrome validation. Could someone point out to me what I'm doing incorrect? Thanks.
A bit too long for a comment, but not sure if it is the only problem. The first thing I see is that the
<script>
$("#createaccount").validate();
</script>
is located before the form with id="createaccount". This means this javascript code is parsed and run before the element exists inside the DOM.
In order to run this JS when the DOM is loaded, you then need to wrap it into this specific jquery part :
$( document ).ready( function( ) {
$("#createaccount").validate();
}
(And ideally you put all JS at the end of the page, before the closing </body> tag)
Related
I wrote my index.php file, its this:
<?php // index.php
if(isset($_SESSION['login_user'])) {
header("location: profile.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Bejelentkezés</title>
</head>
<body>
<div>
<div>
<h1>Wellis adatok</h1>
<div>
<h2>Bejelentkezés</h2>
<form action="login.php" method="post">
<label>Felhasználó neve :</label>
<input id="name" name="userName" placeholder="név" type="text"></br></br>
<label>Jelszó :</label>
<input id="password" name="password" placeholder="**********" type="password" style="width: 80px"></br></br>
<input name="submit" type="submit" value=" Login ">
<span><?php echo $error; ?></span>
</form>
</div>
</div>
</div>
<p>
</br>
Listák megtekintése:
<?php
include("functions.php");
welcome();
?>
</p>
</body>
</html>
Also there is an other: functions.php, where are lots of functions. One of those is this:
<?php // functions.php
function welcome() {
echo "Welcome here ...";
}
...
?>
I wanna run that welcome() method there. This is only sample but orhers are same like this. I wanna see welcome message below login fields and submit button.
The page is hungarian but the page works well except this probleme.
Thanks for quick help ...
I have a simple form that I've made to help me learn php. I'm using my local host server to host the php file (form.php). However, when I refresh the page it resubmits the form, I know I can use the post/redirect/get method to negate this problem. Except implementing the header('Location: form.php'); hasn't been working, if you could take a look at the code- and tell me what I'm doing wrong, that would be much appreciated.
Code example i.e without header('Location: form.php');
<?php
if (empty($_POST) === false) {
echo '<pre>', print_r($_POST, true), '</pre>';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form</title>
</head>
<body>
<form action="form.php" method="post">
<p>
<label for="name">Name:</label><br>
<input type="text" name="name" id="name"><br>
</p>
<p>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email"><br>
</p>
<p>
<label for="message">Message:</label><br>
<textarea name="message" id="message"></textarea>
</p>
<p>
<input type="submit" value="submit">
</p>
</form>
This is the result...
Screen Shot without header location
then I add:
header('Location: form.php');
And I get this...
To prevent a form from resubmitting on page refresh, two methods are used:
Method 1: Use AJAX + Redirect
Submit your form using AJAX and then redirect to another page using JQuery.
Method 2: Reload the page
Refresh the page using Javascript.
Your code should be like this:
<?php
if (!empty($_POST)) {
echo '<pre>', print_r($_POST, true), '</pre>';
echo '<script type="text/javascript"> location.reload();</script>';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form</title>
</head>
<body>
<form action="form.php" method="post">
<p>
<label for="name">Name:</label><br>
<input type="text" name="name" id="name"><br>
</p>
<p>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email"><br>
</p>
<p>
<label for="message">Message:</label><br>
<textarea name="message" id="message"></textarea>
</p>
<p>
<input type="submit" value="submit">
</p>
</form>
</body>
</html>
I have the below form, and after the form the PHP requests a Curl which can take a while. Because of this they keep pressing the submit button thinking that nothing has happened. This causes multiple entries in the database. Could someone help me and let me know what to put in to stop this.
I tried the Javascript solution in the first answer but it stopped the PHP script that followed. Not what I wanted. Sorry
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css2/style.css" rel='stylesheet' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfonts-->
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text.css'/>
<!--//webfonts-->
<center><img class="displayed" src="images/logo.jpg" alt="Logo" style="width:128px;height:128px;"></center>
</head>
<body>
<div class="main">
<form action="" method="POST" enctype="multipart/form-data" id="contactform" >
<input type="hidden" name="action" value="submit">
<h1><span>Sign Up</span> <lable> The Brook on Sneydes</lable> </h1>
<div class="inset">
<p>
<center><label ><?php echo $text; ?></label></center>
<label for="first">First Name</label>
<input type="text" name="first" id="first" value="" placeholder="" required/>
</p>
<p>
<label for="last">Surname</label>
<input type="text" name="last" id="last" value="" placeholder="" required/>
</p>
<p>
<label for="mobile">Mobile Number</label>
<input type="text" name="mobile" id="mobile" value="" placeholder="" required/>
</p>
<p>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" value="" placeholder="" required/>
</p>
</div>
<p class="p-container">
<input type="submit" name="submit" id="submit" value="Submit">
</p>
</form>
</div>
<!-----start-copyright---->
<div class="copy-right">
<p> © 2016 Spearhead Digital. All rights reserved.</p>
</div>
<!-----//end-copyright---->
</body>
</html>
<?php
if(isset($_POST['submit']) && !empty($_POST) ){
$first = $_POST['first'];
$last = $_POST['last'];
$mobile = $_POST['mobile'];
$email = $_POST['email'];
// Other Code
}
You can disable the submit button when submitting the form.
An example using jQuery:
<script type="text/javascript">
$(document).ready(function() {
$('#contactform').submit(function() {
$('input[type=submit]', this).prop("disabled", true);
});
});
</script>
I have this problem where I am unable to clear the textbox of the login page. When the user successfully log in and then immediately returns to the login page, he will still see his username and password in the textbox.
I have tried using this code to solve the problem
body onload="document.getElementById('name').value='';document.getElementById('pass').value=''"
but the problem with this code is it doesn't immediately clear the textbox. I need to refresh the page a couple of times before it works. Is there an alternate way of solving the problem?
Here is my code
<?php
/**** Start Session ****/
session_start();
/**** Deletes the data stored in the session ****/
unset($_SESSION['SESS_USER_NAME']);
unset($_SESSION['REF_ID']);
unset($_SESSION['REF_FNAME']);
unset($_SESSION['REF_LNAME']);
unset($_SESSION['REF_ACCOUNT']);
unset($_SESSION['COUNT']);
?>
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
</head>
<body onload="document.getElementById('name').value='';document.getElementById('pass').value=''">
<form action="admin-exec.php" method="post" >
<center><?php include('../function/admin_errmsg.php'); ?></center>
<br>
<input type="text" name="txt_username" placeholder="Username" id="name">
<br>
<input type="password" name="txt_password" placeholder="Password" id="pass">
<br>
<img id="captcha" class="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image" />
<input type="text" name="captcha_code" size="10" maxlength="6" placeholder="Input Captcha Code Here" />
<a href="#" onclick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false">
<br />[ Different Image ]</a>
<br>
<br>
<input type="submit" value="Let Me In" class="btn" >
</form>
</body>
</html>
I suspect it's the browser auto filling the fields as there's nothing in the code to populate the values of the inputs.
From a UX perspective though I would expect it to redirect to another page once logged in or if it's a login form in the header I would expect it to no longer be displayed.
Use the following code for your html part
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<script>
function clearAll()
{
document.getElementById('name').value='';
document.getElementById('pass').value='';
}
</script>
</head>
<body onload="clearAll()">
<form action="admin-exec.php" method="post" >
<center><?php include('../function/admin_errmsg.php'); ?></center>
<br>
<input type="text" name="txt_username" placeholder="Username" id="name">
<br>
<input type="password" name="txt_password" placeholder="Password" id="pass">
<br>
<img id="captcha" class="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image" />
<input type="text" name="captcha_code" size="10" maxlength="6" placeholder="Input Captcha Code Here" />
<a href="#" onclick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false">
<br />[ Different Image ]</a>
<br>
<br>
<input type="submit" value="Let Me In" class="btn" >
</form>
</body>
</html>
you can add and javascript like this
$(document).ready(function(){
$("#name").val("");
)
I want to re-populate upload field in form in codeigniter here is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<?php if(isset($upload_error) && !empty($upload_error)): ?>
<p><?php echo $upload_error ?></p>
<?php endif; ?>
<?php echo validation_errors() ?>
<?php echo form_open_multipart('') ?>
Enter title: <br>
<input type="text" name="title" value="<?php echo set_value('title') ?>" > <br><br>
Enter Content:<br>
<textarea cols="40" rows="5" name="content"><?php echo set_value('content') ?></textarea> <br><br>
<input type="file" name="userfile" size="20" value="<?php echo set_value('userfile') ?>"> <br><br>
<input type="submit" name="submit">
</form>
</body>
</html>
I tried set_value in userfile but it didn't work. Pls tell me how to do it
You cannot due to security reasons. The browser shouldn't have access to the user file system without premission.