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.
Related
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>
I'm trying to post data to the same page.
I can see that the post from the ajax is working correctly but the $_POST in my index.php isn't finding the post after form submission.
<form method="post" id="classic_login" action="">
<input type="text" name="user" placeholder="Username" class="classic_field" id="user_field" />
<input type="text" name="pass" placeholder="Password" class="classic_field" id="pass_field" />
<input type="submit" name="login" value="Login" class="classic_button" id="login_button" />
<input type="submit" name="register" value="Register" class="classic_button" id="register_button" />
</form>
and I've tried both print_r($_POST) and isset both don't change after submission
print_r($_POST);
if(isset($_POST['user']) && isset($_POST['pass']))
echo "works";
printing formdata after a test submission i get: user=testuser&pass=testpass
$("#classic_login").submit(function(event) {
var formdata = $(this).serialize();
event.preventDefault();
$.ajax
({
url: "",
type: 'POST',
data: formdata,
//success: function(response) { alert(response); },
error: function() { alert("fail"); }
});
});
Alternatively, you could use document.URL to make a request on the same page. Then in PHP, include an exit; after the request:
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
echo '<pre>';
print_r($_POST);
exit; // this is important!
}
?>
<form method="post" id="classic_login" action="">
<input type="text" name="user" placeholder="Username" class="classic_field" id="user_field" />
<input type="text" name="pass" placeholder="Password" class="classic_field" id="pass_field" />
<input type="submit" name="login" value="Login" class="classic_button" id="login_button" />
<input type="submit" name="register" value="Register" class="classic_button" id="register_button" />
</form>
<!-- this is no brainer, of course you need to load the library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$("#classic_login").submit(function(event) {
var formdata = $(this).serialize();
event.preventDefault();
$.ajax({
url: document.URL, // you can use this
type: 'POST',
data: formdata,
success: function(response) {
alert(response);
}
});
});
</script>
Sample Output
I have struggled for quite some time now with this but can figure out whats wrong.
I have an index file where I'm loading the contend with ajax (in this case a form stored in add_admin.php). I have a form which loads just perfectly in a div after clicking a menu item(calling the ajax function - this part works). But if I want to submit that form with jQuery afterwords using the
$(".loginform").submit(function(e) {});
it doesn't get called. I'm suspecting the reason is that the form was not present on the page at the time it was loaded. If I move the form directly to the index page, the function works perfectly.
$(document).ready(function () {
$(".loginform").submit(function(e) {
data = $("#loginform").serialize();
password = document.getElementById("user_pass").value;
passtosubmit=hex_sha512(password);
data += "&pass=" + encodeURIComponent(passtosubmit);
password="";
//$.post("modules/process/process_add_admin.php", data);
//alert(data);return false;
$.ajax({
type: "POST",
url: "/modules/process/process_add_admin.php",
data: data,
success: function() {
$('#main_panel_container').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png'/>");
});
}
});
return false;
});
});
The form to submit
add_admin.php
<div id="contact_form">
<form name="loginform" class="loginform" id="loginform" action="#" method="post">
<label><strong>Username</strong></label><input type="text" name="username" id="user_login" size="28" class="input" />
<br />
<label><strong>Password</strong></label><input type="password" name="p" id="user_pass" size="28" class="input"/>
<br />
<label><strong>E-mail</strong></label><input type="text" name="email" id="user_email" size="28" class="email" />
<br />
<label><strong>First Name</strong></label><input type="text" name="fname" id="user_fname" size="28" class="input" />
<br />
<label><strong>Last Name</strong></label><input type="text" name="lname" id="user_lname" size="28" class="input" />
<br />
<input id="save" class="addbutton" type="submit" value="Add" onclick=""/>
</form>
</div>
can anyone please advise?
Thanks
Here's what I normally do, add a onSubmit event in the form tag
<form name="loginform" class="loginform" id="loginform" action="#" method="post" onSubmit="return addContent('loginform');">
and then with javascript
function addContent(frm) {
//anything you wanna do before you post
$.post(
url,
$('#' + frm).serialize(),
function (data) {
result = data;
}
)
.success(function() {
//add your success proccesses
})
.complete(function() {
})
.error(function() {
alert('An error has occurred.');
});
return false;// this stops the form from actually posting
}
Use this code:
<div id="contact_form">
<form name="loginform" class="loginform" id="loginform" action="javascript:add_admin();" method="post">
<label><strong>Username</strong></label><input type="text" name="username" id="user_login" size="28" class="input" />
<br />
<label><strong>Password</strong></label><input type="password" name="p" id="user_pass" size="28" class="input"/>
<br />
<label><strong>E-mail</strong></label><input type="text" name="email" id="user_email" size="28" class="email" />
<br />
<label><strong>First Name</strong></label><input type="text" name="fname" id="user_fname" size="28" class="input" />
<br />
<label><strong>Last Name</strong></label><input type="text" name="lname" id="user_lname" size="28" class="input" />
<br />
<input id="save" class="addbutton" type="submit" value="Add"/>
</form>
</div>
You have to define a function on javascript use this javascript code
function add_admin(){
data = $("#loginform").serialize();
password = document.getElementById("user_pass").value;
passtosubmit=hex_sha512(password);
data += "&pass=" + encodeURIComponent(passtosubmit);
password="";
//$.post("modules/process/process_add_admin.php", data);
//alert(data);return false;
$.ajax({
type: "POST",
url: "/modules/process/process_add_admin.php",
data: data,
success: function() {
$('#main_panel_container').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
}
Thanks!
I was having the same issue when I ran across this thread. This solution did not quite work for what I needed to do, but what I wound up doing is just calling my page initiate function again after I loaded the AJAX form. This added the new AJAX form to the event calls and it worked perfectly.
I'm quite new to jquery but can't get the following to work properly. I can submit my form only once, after that i can't submit it a second time.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#register').submit(function() {
$.ajax({
data: $(this).serialize(),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function(response) {
$('#regrespons').html(response);
$("#regrespons").css("visibility", "visible");
$("#regrespons").fadeOut(1000);
}
});
return false;
});
});
</script>
<form id="register" action="includes/register.php" method="post" autocomplete="off">
<input class="inp" name="gebr`enter code here`" type="text" />
<input class="inp" name="ww1" type="password" />
<input class="inp" name="ww2" type="password" />
<input class="inp" name="mail" type="text" />
<input class="but" type="submit" value="Registreren" />
</form>
Any help is apriciated!
Change $("#register").submit(function () { to $(document).on('submit', '#register', function () {
How can I send data from form with several inputs to a php script? Using POST method ofc. For example I've such form:
<form action="register.php" method="POST" name="registerform">
<span class="login">Nazwa użytkownika:</span>
<input type="text" class="login" placeholder="twój login" name="username">
<span class="login">E-mail</span>
<input type="text" class="login" placeholder="twój email" name="email">
<span class="login">Hasło</span>
<input type="password" class="login" placeholder="twoje hasło" name="password">
<span class="login">Powtórz Hasło</span>
<input type="password" class="login" placeholder="powtórz hasło" name="repassword">
<input type="submit" value="Rejestruj" class="button">
</form>
How to send this all to register.php which is placed in same folder?
<script type="text/javascript">
$(document).ready(function() {
form = $('form[name="registerform"]');
$.post(form.attr('action'), form.serialize());
});
</script>
using jquery.post()
here is the link
You can use serialize() method
var str = $('form[name="registerform"]').serialize();
Then send the data using a ajax request $.ajax or $.post
$.ajax({
url: 'yoururl'
type : 'post',
data : str,
success : function(data){
}
})