Problems with AJAX/JQuery. Creatiung a HTML form that contains three input field
ID: 3729053 • Letter: P
Question
Problems with AJAX/JQuery. Creatiung a HTML form that contains three input fields and an update button. After user enters an email in the email field, the form auto populates other fields. Display a message asks if user needs to update the information. If so, use can update the information (After user hits the Update button, display a message saying your information has been updated. Keep other parts on the screen as it is) . Do all these using AJAX/JQuery.
------index.html-----------
<html>
<head>
<script type="text/javascript">
function insertData() {
var email=$("#student_name").val();
var address=$("#student_roll_no").val();
var s=$("#student_class").val();
// AJAX code to send data to php file.
$.ajax({
type: "POST",
url: "insert-data.php",
data: {email:email,address:address,phone:phone},
dataType: "JSON",
success: function(data) {
$("#message").html(data);
$("p").addClass("alert alert-success");
},
error: function(err) {
alert(err);
}
});
}
</script>
</head>
<?php
include('db.php');
$email=$_POST['email'];
$address=$_POST['address'];
$phone=$_POST['phone'];
$stmt = $DBcon->prepare("INSERT INTO
student(email,address,phone)
VALUES(:email, :address,:phone)");
$stmt->bindparam(':email', $email);
$stmt->bindparam(':address', $address);
$stmt->bindparam(':phone', $sphone);
if($stmt->execute())
{
$res="Data Inserted Successfully:";
echo json_encode($res);
}
else {
$error="Not Inserted,Some Probelm occur.";
echo json_encode($error);
}
?>
<body>
<form action="">
<table>
<tr>
<td>Email:</td>
<td><input type="email" id="email"></td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" id="address"></td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="number" id="phone"></td>
</tr>
<tr>
<td colspan="2"><input type="button" id="bt1" Value="Update">
<input type="reset" id="bt1" Value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>
----------db.sql---------
CREATE TABLE USER_INFO
(EMAIL varchar(40) NOT NULL,
ADDRESS VARCHAR(100) NOT NULL,
PHONE VARCHAR(10) NOT NULL,
PRIMARY KEY (EMAIL) );
INSERT INTO USER_INFO(
Email,
Address,
Phone)
values('fake@ppp.com', '123 Easy St.', '555555555');
INSERT INTO USER_INFO(
Email,
Address,
Phone)
values('notreal@ppp.com', '555 Main St.', '123456789');
INSERT INTO USER_INFO(
Email,
Address,
Phone)
values('unreal@pp.com', '8008 5th Ave.', '987654321');
Explanation / Answer
<div id="contact">
<form name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<label for="email" id="email_label">Return Email</label>
<input type="text" name="email" id="email" size="30" value="" class="text-input" />
<label class="error" for="email" id="email_error">This field is required.</label>
<label for="phone" id="phone_label">Return Phone</label>
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
<label class="error" for="phone" id="phone_error">This field is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
----------------------------------------------------------------------
here jquery
//
adress" -- all with one line of jQuery:
----------------------------------
form values with jQuery, and then placed those into a string like this:
----------------------------------------------------------
-----------------------------------------------------
--------------------------------------
We next add even more content to the message div with jQuery's append() function, and to top everything off we add a cool effect by hiding the message div with the jQuery hide() function, then fade it all in with the fadeIn() function:
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.