I am using php, MySQL, and Ajax. When I submit the form data is not stored in the database table. But when put action="insert.php" data is submitted to the database table but the page gets refreshed. I am badly stuck here. Can anyone please advice me that how can I solve this problem?? Thanks in advance guys. codes are given below :
index.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form id="cForm" name="cForm" method="post">
<label>Roll No : </label>
<input type="text" name="roll" id="roll"><br>
<label>Name : </label>
<input type="text" name="name" id="name"><br>
<label>Stream : </label>
<select name="stream" id="stream">
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="ECE">ECE</option>
<option value="ME">ME</option>
</select><br>
<label>Age : </label>
<input type="text" name="age" id="age"><br>
<input type="submit" name="submit" value="Submit">
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#cForm').on('submit', function(e){
e.preventDefault();
$.ajax({
url:"insert.php",
method:"POST",
data:$('#cForm').serialize(),
success:function(data)
{
if(data == 'ok')
{
document.getElementById("cForm").reset();
}
}
});
});
});
</script>
</div>
</body>
</html>
insert.php
<?php
$con=mysqli_connect("localhost","root","","test");
if(isset($_POST['submit'])){
$roll=$_POST['roll'];
$name=$_POST['name'];
$stream=$_POST['stream'];
$age=$_POST['age'];
$sql="INSERT INTO `student`(`name`, `stream`, `age`) VALUES ('$name','$stream','$age')";
$result=mysqli_query($con,$sql);
if(isset($result))
{
echo 'ok';
}
}
?>
If you want your page doest not refresh. you need to remove form submission form jQuery because you have called on submit and it called the whole form and send it to next page and do it like this
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form id="cForm" name="cForm" method="post">
<label>Roll No : </label>
<input type="text" name="roll" id="roll"><br>
<label>Name : </label>
<input type="text" name="name" id="name"><br>
<label>Stream : </label>
<select name="stream" id="stream">
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="ECE">ECE</option>
<option value="ME">ME</option>
</select><br>
<label>Age : </label>
<input type="text" name="age" id="age"><br>
<input type="button" class="btn-submit" value="Submit">
</form>
</div>
<script>
jQuery(document).ready(function() {
$('.btn-submit').click(function() {
$.ajax({
url:"insert.php",
method:"POST",
dataType: "json",
data:$('#cForm').serialize(),
success:function(data)
{
if(data.status == 200)
{
document.getElementById("cForm").reset();
}
}
});
});
});
</script>
</body>
</html>
And your insert.php page replace
echo "ok";
by
echo json_encode(['status'=>200,'message'=>'success']);
Related
I'm just about to learn php and that is my first try to process data from an html form. I was writing this php code using some articles from the Internet and it seems to be correct but after entering all the data and than pressing "submit" nothing is happening. I mean just a white browser screen.
Here is my code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form</title>
</head>
<body>
<form method="post" action="form__2.php">
<label for="surname">Surname</label>
<input type="text" name="surname" placeholder="Johnson" required> <br>
<label for="name">Name</label>
<input type="text" name="name" placeholder="Carl" required> <br>
<label>Gender:</label>
<label for="male">M</label>
<input type="radio" name="male" checked>
<label for="female">F</label>
<input type="radio" name="female"> <br>
<label for="education">Education:</label>
<select id="education" name="education" required>
<option value="less-basic">Less than basic</option>
<option value="basic">Basic</option>
<option value="mid-school">Middle-school</option>
<option value="high-school">High-school</option>
<option value="bachelor">Bachelor's or equivalent</option>
<option value="master">Master's or equivalent</option>
<option value="doctor">Doctorate or equivalent</option>
</select> <br>
<label for="courses">Enroll in courses</label>
<input type="checkbox" name="courses" required> <br>
<label>Was you dealing with our company later?:</label>
<label>Yes</label>
<input type="radio" name="company" value="yes" checked>
<label>No</label>
<input type="radio" name="company" value="no"> <br>
<input type="submit" name="submit">
</form>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form</title>
</head>
<body>
<?
if ( count($_GET) > 0 ) // checking if the form sends any data
{
$name = htmlspecialchars($_GET['name']); // getting name from GET-values
$surname = htmlspecialchars($_GET['surname']); // getting surname from GET-values
if ( strlen($_GET['name']) >= 1 && strlen($_GET['surname']) >= 1) // if the name/surname has more than 1 letter, then..
{
echo "Dear " . $surname . " " . $name . ". We are great to have you signed for our courses. We are hoping for "; // msg
if ( $_POST['company_yes']=='yes' ) // if radiobutton is checked
{
echo "continuing our partnership."; // msg
} else
{
echo "our future partnership."; // msg
}
} else
{
echo "Your name is too short";
}
}
?>
</body>
</html>
You didn't check if a Post happened, and why call to GET request if you send a post request?
A GET request is data that passes through the URL -> https://www.something.net?data=hi
$_GET['data'] will give "hi" value.
POST is data that is passed mostly through forms with method="POST"
To get the data of the form change the form__2.php to the following:
<?php
if(isset($_POST['submit']){ //the name of the submit button
echo $_POST['education'];
echo $_POST['female'];
}
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form</title>
</head>
<body>
</body>
</html>
<?php
include('config.php');
$query_parent = mysql_query("SELECT * FROM categories") or die("Query failed: ".mysql_error());
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dependent DropDown List</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#parent_cat").change(function() {
$(this).after('<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>');
$.get('loadsubcat.php?parent_cat=' + $(this).val(), function(data) {
$("#sub_cat").html(data);
$('#loader').slideUp(200, function() {
$(this).remove();
});
});
});
});
</script>
</head>
<body>
<form method="get">
<label for="category">Parent Category</label>
<select name="parent_cat" id="parent_cat">
<?php while($row = mysql_fetch_array($query_parent)): ?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['category_name']; ?></option>
<?php endwhile; ?>
</select>
<br/><br/>
<label>Sub Category</label>
<select name="sub_cat" id="sub_cat"></select>
<td><label>
<input type="submit" name="button" id="button" value="Search" />
</label></td>
</form>
</body>
</html>
/the above is the index.php file.
after I click search button, I want some data to be displayed depending on the selections made at 2 drop down lists. and the data should be fetched from the database../
I downloaded the Jquery Validation Engine from https://github.com/posabsolute/jQuery-Validation-Engine, it is working perfectly in IE and Firefox but it is not working on Chrome and Safari, the problem is that it does not matter if the fields are empty or invalid characters are entered, the form will always be submitted and since I'm using php to enter the data to a database obvioulsy the fields are entered as empty.
I am sure I included all needed scripts; have you read about any other member having issues with chrome and Safari using the plug in? I will really appreciate your help Pals.
Adding the code in edit (sorry friends):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="css/template.css" type="text/css"/>
<link rel="stylesheet" href="css/styles.css" type="text/css"/>
<script src="js/jquery-1.8.2.min.js" type="text/javascript">
</script>
<script src="js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
</script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
</script>
<script>
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#collect").validationEngine('attach');
});
</script>
</head>
<body onLoad="formReset()" onUnload="formReset()">
<script>
function formReset()
{
document.getElementById("collect").reset();
}
</script>
<div class="formholder">
<form id="collect" class="formular" method="post" action="insert.php">
<fieldset>
<label>
<input value="" data-prompt-position="topRight:0,20" class="validate[required,custom[onlyLetterSp]] text-input" type="text" name="nombre" />
</label>
<br/>
<label>
<input value="" class="validate[required,custom[email]] text-input" data-prompt-position="topRight:0,20" type="text" name="email" />
</label>
<br/>
<label>
<input value="" data-prompt-position="topRight:0,20" class="validate[required,custom[phone]] text-input" type="text" name="telefono" />
</label>
<br/>
<label>
<select style="height:35px; width:200px;" name="informacion" class="select" form="contact-form" type= "select">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
</label>
<input class="submit" type="submit" value= ""/>
</fieldset>
<hr/>
</form>
</div>
</body>
</html>
see this code
It is working now ...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" />
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script>
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#collect").validationEngine('attach');
});
</script>
</head>
<body onLoad="formReset()" onUnload="formReset()">
<script>
function formReset()
{
document.getElementById("collect").reset();
}
</script>
<div class="formholder">
<form id="collect" class="formular" method="post" action="insert.php">
<fieldset>
<label>
<input value="" data-prompt-position="topRight:0,20" class="validate[required] text-input" type="text" name="nombre" />
</label>
<br/>
<label>
<input value="" class="validate[required] text-input" data-prompt-position="topRight:0,20" type="text" name="email" />
</label>
<br/>
<label>
<input value="" data-prompt-position="topRight:0,20" class="validate[required] text-input" type="text" name="telefono" />
</label>
<br/>
<label>
<select style="height:35px; width:200px;" name="informacion" class="select" form="contact-form" type= "select">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
</label>
<input class="submit" type="submit" value= "test"/>
</fieldset>
<hr/>
</form>
</div>
</body>
</html>
I'm new to php and am trying to make a very simple two page form. Any help or guidance would be very appreciated!
Problem:
The second page does not run error validation when coming to it from the first page.
Both pages run error validation correctly URL's entered directly
Setup:
Page 1 one is HTML. It POSTS to Page2.
Page 2 is php and the data from Page 1 is stored in an input field
Live example:
http://www.linplusg.com/page1.html
In IE the Page 2 URL after coming from Page 1 looks to be incorrect:
http://www.linplusg.com/page1.html#/page2.php
In FF and Chrome the URL looks fine but I think there's a flicker/refresh happening.
Does something else happen besides just opening the page when doing a POST to a page? Does something value get stored the new fields? Am I doing the form action wrong? Dazed and confused...
Thank you so much for any help or suggestions. I've been searching around for answers all night and my brain feels like jello. It seems like I'm missing something simple?!
Page1 Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/my.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js">
</script>
<script>
$(document).ready(function(){
$("#initialForm").validate();
});
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<form id="initialForm" method="post" action="page2.php">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput3">
Zip Code
</label>
<input name="zip" id="zip" maxlength=5 value="" type="text" class="required" />
</fieldset>
</div>
<input type="submit" data-theme="e" value="Submit" />
</form>
</div>
</div>
</body>
</html>
Page 2 code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/my.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js">
</script>
<script>
$(document).ready(function(){
$("#fullForm").validate();
});
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<form id="fullForm" method="get" action="">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<input name="zip" id="zip" value="<?php echo $_POST["zip"]; ?>" type="" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput3">
First Name
</label>
<input name="first_name" id="first_name" placeholder="" value="" type="text" class="required"/>
</fieldset>
</div>
<input type="submit" data-theme="e" value="Submit" />
</form>
</div>
</div>
</body>
</html>
To prevent this you need to specify data-ajax="false" in the form element in page1.
<form id="initialForm" method="post" action="page2.php" data-ajax="false">
see http://jquerymobile.com/test/docs/forms/forms-sample.html for more information.
Without the PHP code, I can just guess, but maybe it is because in the second form you have a method="get" instead of method="post", and in PHP you check the $_POST variable?
You could preserve the ajax transitions and still have your javascript execute on your second page by moving your script inside the div with the data-role "page".
See this answer here: https://stackoverflow.com/a/6428127/2066267
When the form is submit my jquery accordion stops working my file name is add.php here is its code
<?php require_once('database.php');?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/accordionTheme.css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.ui.core.js" type="text/javascript"></script>
<script src="js/jquery.ui.widget.js" type="text/javascript"></script>
<script src="js/jquery.ui.accordion.js" type="text/javascript"></script>
<script>
$(function() {
$("#myAccordion").accordion();
});
</script>
<head>
<body>
<div id="myAccordion"><!-- Start Accordion --->
<h2>
Add Student
</h2>
<div>
<form action="add.php" id="form1" method="get" >//here my form start
<p>Please add Student Data</p>
<label for="stname">Enter Student Name:</label>
<input name="stname" type="text" id="stname" size="37" />
<br /><br />
<label for="stclass">Enter Student Class :</label>
<select name="stclass">
<option>MPhil</option>
<option>M.Sc.</option>
</select>
<br />
<input name="Add" type="submit" id="Add" value="Add" />
</form>
<?php
//lets start submit data to database
if(isset($_GET['stname'])&& isset($_GET['stclass']))
{
$stname=$_GET['stname'];
$stclass=$_GET['stclass'];
if(mysql_query("insert into student(teacher_id,student_name,student_class) values ('1','$stname','$stclass')"));
{
print "<p>record added</p";
}
}
?>
</div>
<h2>
Add course
</h2>
<div></div>
<h2>
Add publication
</h2>
<div></div>
</body>
</html>
I am printing php inside body you can see recordadded when form is submitted.
The p tag you print using PHP is not closed, which is what makes JavaScript go crazy. Close it and it should work OK.