I am new to jquery ,i have some trouble while inserting data to mysql database using jquery.
this is my html file
<!DOCTYPE html>
<html>
<head>
<title>
staff registration
</title>
<body>
<form>
Staff Id:<input type="text" id="staffid"><br>
Password:<input type="password" id="password1"><br>
Re-enter Password:<input type="password" id="password2"><br>
Email:<input type="email" id="email"><br>
Gender:<input type="text" id="gender"><br>
Qualification:<input type="text" id="qualification"><br>
Course 1:<input type="text" id="course1"><br>
Course 2:<input type="text" id="course2"><br>
Course 3:<input type="text" id="course3"><br><br>
<input type="submit" id="submit" value="CREATE">
</form>
<script src="jquery.min.js"></script>
<script>
$("#submit").click(function(){
var staffid=$("#staffid").val();
var password1=$("#password1").val();
var password2=$("#password2").val();
var email=$("#email").val();
var gender=$("#gender").val();
var qualification=$("#qualification").val();
var course1=$("#course1").val();
var course2=$("#course2").val();
var course3=$("#course3").val();
$.post("insert.php",{si:staffid,pwd1:password1,pwd2:password2,
email:eml,gender:gen,qualification:qal,course1:c1,course2:c2,course3:c3},
function(data){
alert(data);
});
});
</script>
</body>
</html>
this is my php file named insert.php
<?php
$con=new mysqli("localhost","root","","flash");
$si=$_POST['si'];
$pwd1=$_POST['pwd1'];
$pwd2=$_POST['pwd2'];
$eml=$_POST['eml'];
$gen=$_POST['gen'];
$qal=$_POST['qal'];
$c1=$_POST['c1'];
$c2=$_POST['c2'];
$c3=$_POST['c3'];
$sql="INSERT INTO staff(staff_id,password,email_id,gender,qualification,course_1,course_2,course_3) VALUES('$si','$pwd2','$eml','$gen','$qal','$c1','$c2','$c3')";
$con->query($sql);
?>
nothing will happen while i click submit button
please anyone help me to solve this issue
Try to use the non-slim build, available here http://jquery.com/download/, such as:
https://code.jquery.com/jquery-3.3.1.min.js
Also you had issue while making the json for the post, here is the rectified version
<!DOCTYPE html>
<html>
<head>
<title>
staff registration
</title>
<body>
<form>
Staff Id:<input type="text" id="staffid"><br>
Password:<input type="password" id="password1"><br>
Re-enter Password:<input type="password" id="password2"><br>
Email:<input type="email" id="email"><br>
Gender:<input type="text" id="gender"><br>
Qualification:<input type="text" id="qualification"><br>
Course 1:<input type="text" id="course1"><br>
Course 2:<input type="text" id="course2"><br>
Course 3:<input type="text" id="course3"><br><br>
<input type="submit" id="submit" value="CREATE">
</form>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$("#submit").click(function(){
var staffid=$("#staffid").val();
var password1=$("#password1").val();
var password2=$("#password2").val();
var email=$("#email").val();
var gender=$("#gender").val();
var qualification=$("#qualification").val();
var course1=$("#course1").val();
var course2=$("#course2").val();
var course3=$("#course3").val();
$.post("insert.php",{si:staffid,pwd1:password1,pwd2:password2,
eml:email,gen:gender,qal:qualification,c1:course1,c2:course2,c3:course3},
function(data){
alert(data);
});
});</script>
</body>
</html>
Related
I am trying to make a Chrome extension. Currently I have an AWS database running on MySQL workbench and I am trying to get it connected to the extension. My PHP file is simply just trying to connect to the database on the submit of an HTML form. I am following the videos (parts 1-4) form this link https://www.youtube.com/watch?v=dpLbADRh830
Right now I am using localhost as my server and on submit of the form, my extension says "This site can’t be reached localhost refused to connect." I have no clue where to go from here and this is honestly my first database experience so I apologize if this is a silly problem.
<?php
$name=$_POST['name'];
$email=$_POST['email'];
if(!isset($_POST['submit'])){
echo $email;
}
?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="http://localhost/db/tester_script.php" method="POST">
<input type="text" name="name" placeholder="name"><br>
<input type="text" name="email" placeholder="email"><br>
<input type="submit" value="submit">
</form>
</body>
</html>
Here is how I fixed the solution:
<body>
<form id="thing">
<input type="text" id="name" name="name" placeholder="name"><br>
<input type="text" id="email" name="email" placeholder="email">
<input type="submit" id="submit" value="submit">
</form>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
$("#thing").on("submit", function(){
var name = $("#name").val();
var email = $("#email").val();
$.ajax({
type: "POST",
url: "http://localhost:8000/tester_script.php",
data: {name : name, email : email},
success : function(data){
console.log(data);
}
});
return false;
})
</script>
</body>
I have a client that has a contact page and he wants to be able to create and edit the contact form fields.
Is there a simple php class for this?
I don't really know where to start with this.
Any tips?
Thanks in advance!
This custom Jquery Code show how you can done your job by using Jquery
$(document).ready(function(){
$("#add").on('click', function() {
$('#extra').css('display', 'block');
});
$('#dy_add').click(function(){
var type = $("#type").val();
var name = $("#name").val();
var inputName = $("#m_nam").val();
var form_field = inputName + '<input type="'+type +'" name="'+name+'" />' +'</br>' ;
$("#dynamic").append(form_field);
});
});
#extra{display:none}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form action="" method="POST" >
First Name <input type="text" name="fname" /></br>
Last Name <input type="text" name="lname" /></br>
<div id="dynamic"></div>
<input type="submit" name="submit" value="submit">
</form>
<button id="add">Add Fields</button>
<div id="extra">
<p><font color="red">Add extra form field</font></p>
Name<input type="text" id="m_nam" placeholder="input type"></br>
Type<input type="text" id="type" placeholder="input type"></br>
Input Name<input type="text" id="name" placeholder="input name">
<button id="dy_add">Add</button>
</div>
</body>
</html>
I am using Xampp and just started learning web dev.
Basically i am trying to learn how to use jquery to submit a form without having to change page, bare in mind i do know it has no validation in and this is for my learning practice.
So myy issue is when i click submit it is causing my webpage to freeze and crash, have I done something wrong with the code i am trying to learn to use?
register.php
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/submit.js"></script>
</head>
<body>
<form id="myForm" method="post">
Username: <input name="username" id="username" type="text" /><br />
Email: <input name="email" id="email" type="text" /><br />
Password:<input name="password" id="password" type="password" /><br />
<input type="button" id="submitFormData" onclick="SubmitFormData();" value="Submit" />
</form>
==============================
<br />
<div id="results"></div>
</body>
</html>
js/submit.js
function SubmitFormData() {
var username = $("#username").val();
var email = $("#email").val();
var pass = $("#password").val();
$.post("submit.php", {
username: username,
email: email,
pass: pass
}, function(data) {
$('#results').html(data);
$('#myForm')[0].reset();
});
}
submit.php
<?php
echo $_POST['username'] ."<br />";
echo $_POST['email'] ."<br />";
echo $_POST['pass'] ."<br />";
echo "==============================<br />";
echo "All Data Submitted Successfully!";
?>
thanks
Use var formData = $("#myform").serialize() instead!
$(document).ready(function() {
// process the form
$("#myform").submit(function(event) {
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = $("#myform").serialize();
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'register.php', // the url where we want to POST
data : formData, // our data object
dataType : 'html', // what type of data do we expect back from the server
encode : true
})
// using the done promise callback
.done(function(data) {
console.log(data);
});
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
The following code is working in jquery-2.2.0.min.js, But in 1.11.1 it is throwing RangeError.
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
</head>
<body>
<form id="myForm" method="post">
Username: <input name="username" id="username" type="text" /><br />
Email: <input name="email" id="email" type="text" /><br />
Password:<input name="password" id="password" type="password" /><br />
<input type="submit" id="submitFormData" value="Submit" />
</form>
==============================
<br />
<div id="results">
</div>
<script>
$("#myForm").on('submit', function(e) {
e.preventDefault();
var name = $("#username").val();
var email = $("#email").val();
var pass = $("#password").val();
$.post("submit.php", {
name: name,
email: email,
pass: pass
}, function(data, status) {
$('#results').html(data);
$('#myForm').trigger("reset");
});
return false;
});
</script>
</body>
</html>
The way question asked
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
</head>
<body>
<form id="myForm" method="post">
Username: <input name="username" id="username" type="text" /><br />
Email: <input name="email" id="email" type="text" /><br />
Password:<input name="password" id="password" type="password" /><br />
<input type="button" id="submitFormData" onclick="SubmitFormData();" value="Submit" />
</form>
==============================
<br />
<div id="results">
</div>
<script>
function SubmitFormData() {
var username = $("#username").val();
var email = $("#email").val();
var pass = $("#password").val();
$.post("submit.php", {
name: username,
email: email,
pass: pass
}, function(data) {
$('#results').html(data);
$('#myForm').trigger('reset');
});
}
</script>
</body>
</html>
Here only change, I have changed the jQuery version.
The above two methods are working. Might be jquery version issue.
I am unable to load external file while using AJAX jQuery. I want to use jQuery AJAX to pop up form then validate, enter data in MySQL. but starting from a simple AJAX function. Kindly let me know where I am going wrong
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#ajax-contact-form").submit(function(){
var str = $(this).serialize();
$.ajax({
type: "POST",
url:"contact.php",
data: str,
success:function(result) {
$("#div1").html(result);
}
});
});
});
</script>
</head>
<body>
<div id="contact_form">
<form id="ajax-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>
<input class="button" type="submit" name="submit" value="Send Message">
</fieldset>
</form>
</div>
</body>
</html>
and contact.php file is
<?php
echo "Hello";
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$(".button").click(function() {
$.ajax({url:"contact.php",success:function(result){
$("#div1").html(result);
}});
return false;
});
});
</script>
</head>
<body>
<div id="contact_form">
<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>
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
<div id="div1">
</div>
</body>
</html>
Try that:
What needed to be fixed:
1) You'd duplicated the onReady function,
2) you can use a submit form button, but since it's default action is to submit the form, the result wouldn't have been visible.
3) There was no #div1 for the result to be displayed in.
Hopefully, this has been helpful... Happy Coding!
Try with type button type
<input type="button" name="submit" class="button" id="submit_btn" value="Send" />
And also your both scripts are same use either DOM ready or $(function) like
<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({url:"contact.php",success:function(result){
$("#div1").html(result);
}});
});
});
</script>
button is your class name so that it will represented like .button And create an div with id div1 at your html page
$("#div1").html(result);
Use one div which id is div1 inside your page which you want to show the result.
<div id="div1"></div>
When I try to run my code on any other webbrowsers apart from the Internet explorer it works fine. But when I try to run the code on Internet explorer I do get an alert box saying HERE along with an Ok button. but the problem is when I click on that OK button I do not get anything. Ideally I should be getting another alert box.
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(event) {
alert("here");
$.post('process.php', {name:'test1',email:'test.com'}, function(data)
{
$('#results').html(data);
alert(data);
});
});
});
</script>
</head>
<body>
<form name="myform" id="myform" action="" method="POST">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value=""/>
<br>
<label for="email" id="email_label">Email</label>
<input type="text" name="email" id="email" size="30" value=""/>
<br>
<input type="button" name="submit" id="submit" value="Submit">
</form>
<div id="results"><div>
</body>
</html>
Any help on this is very much appreciated.
Edit: I found out that Internet Explorer which has HTTP works perfectly fine but not on Internet Explorer which uses HTTPS.
Change your code to
<form name="myform" id="myform" action="" method="POST" onsubmit="return validate(this);">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value=""/>
<br>
<label for="email" id="email_label">Email</label>
<input type="text" name="email" id="email" size="30" value=""/>
<br>
<input type="button" name="submit" id="submit" value="Submit">
</form>
<script>
function validate(elem){
$.post('process.php', {name:'test1',email:'test.com'}, function(data)
{
$('#results').html(data);
return true;
});
return false;
}
</script>
try using jquery $.ajax() for posting your form data using $(fomname).serialize() method
function submitYourForm()
{
$.ajax({
type: 'POST',
cache: false,
async:true,
url: 'your url',
data: $('#myform').serialize(),
success: function(data) {
alert(data);
}
});
}
change your button type from "submit" to "button" and call your function onclick the button
like
<input type="button" name="submit" onclick="submitYourForm();" value="Submit" />
remove function call onsubmit.
try this