There in nothing happen while I'm submitting the form, actually no call to the JavaScript function. Don't know why. I'm new to this.
My HTML page:
<html>
<head>
<title>Clear Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<br /><br />
<div class="container" style="width:600px;">
<h3 align="center">Select Store</h3>
<br />
<div ng-app="myapp" ng-controller="usercontroller" ng-init="loadCountry()">
<select name="country" ng-model="country" class="form-control" ng-change="loadState()">
<option value="">Select Store</option>
<option ng-repeat="country in countries" value="Id">{{country.store_name}} (Store Id:{{country.id}})</option>
</select>
<br />
<div id="form" ng-if="country.includes('Id')">
<h4 align="center">Enter Date Range</h4> <br/>
<form ng-submit="submit_form()">
<input type="hidden" name="Storeid" value="{{country.id}}">
From Date:<input type="text" name="fromDate" placeholder="yyyy-mm-dd hh:mm:ss.ttt" required/>
To Date:<input type="text" name="toDate" placeholder="yyyy-mm-dd hh:mm:ss.ttt" required/><br>
<br><button type="submit" class="btn btn-primary">Submit</button>
</form> </div>
<br />
</div>
</div>
</div>
</body>
My JavaScript code is:
<script>
var app = angular.module("myapp",[]);
app.controller("usercontroller", function($scope, $http){
$scope.loadCountry = function(){
$http.get("loadStore.php")
.success(function(data){
$scope.countries = data;
})
}
$scope.submit_form = function (){
$http({
method : 'POST',
url : 'clearallData.php',
storeid : this.Storeid, //forms user object
fromdate : this.fromDate,
todate : this.toDate
})
.success(function(data) {
$scope.message = data.message;
});
}
});
</script>
There are a couple of things wrong with your code.
First, you're not actually sending any data with your POST request. Second, you ought to use $scope instead of this to access your data (well, at least as long as you're not using the recommended controllerAs-syntax). Third, success is deprecated. Use promises instead.
All of that comes down to the following changes:
$scope.submit_form = function (){
return $http({
method : 'POST',
url : 'clearallData.php',
data: {
storeid : $scope.Storeid, //forms user object
fromdate: $scope.fromDate,
todate : $scope.toDate
}
}).then(function(response) {
$scope.message = response.data.message;
});
}
and in the view change this:
From Date:<input type="text" name="fromDate" ng-model="fromDate" placeholder="yyyy-mm-dd hh:mm:ss.ttt" required/>
To Date:<input type="text" name="toDate" ng-model="toDate" placeholder="yyyy-mm-dd hh:mm:ss.ttt" required/><br>
Whether this will actually fix your issue, I cannot say, since you havn't provided any error messages or similar information that might suggest what actually goes wrong.
<html>
<head>
<title>Clear Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<br /><br />
<div class="container" style="width:600px;">
<h3 align="center">Select Store</h3>
<br />
<div ng-app="myapp" ng-controller="usercontroller" ng-init="loadCountry()">
<!-- I change here, because select has ngOptions in angular , so you dont use ng-repeat-->
<select ng-change="loadState(name.id)" ng-model="name" name="name" id="name" class="form-control"
ng-options="country as country.name for country in countries track by country.id" >
<option disabled="disabled" value="">Select Country</option>
</select>
<br />
<div id="form" ng-show="country_status">
<h4 align="center">Enter Date Range</h4> <br/>
<!-- Pay Attention here -->
<form ng-submit="submit_form()">
<input type="hidden" name="Storeid" value="{{ countryId }}">
From Date:<input type="text" name="fromDate" ng-model="fromDate" placeholder="yyyy-mm-dd hh:mm:ss.ttt" required/>
To Date:<input type="text" name="toDate" ng-model="toDate" placeholder="yyyy-mm-dd hh:mm:ss.ttt" required/><br>
<br><button type="submit" class="btn btn-primary">Submit</button>
</form>
<!-- Pay Attention here stop -->
</div>
<br />
</div>
</div>
</div>
<script>
var app = angular.module("myapp",[]);
app.controller("usercontroller", function($scope, $http){
$scope.country_status = false;
$scope.loadCountry = function(){
$http.get("loadStore.php")
.success(function(data){
$scope.countries = data;
})
/* $scope.countries = [{
'id':1,
'name': 'india1'
},{
'id':2,
'name': 'india2'
}]*/
};
$scope.submit_form = function (){
console.log('Hello ', $scope.countryId,$scope.fromDate, $scope.toDate);
//My scope display here, if yours is not please copy and paste this code in your project directory and test it.
return $http({
method : 'POST',
url : 'clearallData.php',
data: {
storeid : $scope.countryId, //forms user object
fromdate: $scope.fromDate,
todate : $scope.toDate
}
}).then(function(response) {
$scope.message = response.data.message;
});
};
$scope.loadState = function (countrySelected) {
console.log('countrySelected', countrySelected);
$scope.country_status = true;
$scope.countryId = countrySelected;
console.log('$scope.countryId', $scope.countryId);
}
});
</script>
</body>
</html>
Related
I have many forms on a page. I want to submit each form without reloading page. I tried many methods but could not do. I have a form similar to this. I tried using ajax as well but could't do. Please help me. Now, I'm unable to insert in database also.
<form id="a" onsubmit="return func();">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
Jquery
function func(){
$.ajax({
url:'registration_detail.php?id=' +reg_id,// in this you got serialize form data via post request
type : 'POST',
data : $('#a').serialize(),
success: function(response){
console.log(response);
}
});
return false;
}
Don't use " action " attribute not even with " # "
And if using AJAX, use " Return False "
$.ajax({
url : "example.php",
type : 'POST',
data : $(this).serialize();
success: function(result){
}
});
return false;
Make sure you are having a unique id for all the forms
remove action="#" and onsubmit="" from the form as you are handling the submit event in jquery
function func(id){
alert($('#'+id).serialize())
$.ajax({
url:'registration_detail.php',// in this you got serialize form data via post request
type : 'POST',
data : $('#'+id).serialize(),
success: function(response){
console.log(response);
}
});
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="a" onsubmit="return func('a');">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
<form id="b" onsubmit="return func('b');">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
<form id="c" onsubmit="return func('c');">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
id="a" should be unique for all the forms
in your code new variable reg_id will give undefined variable error, that might be the cause to reload the page.
Use below code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form onsubmit="return func();">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
</body>
<script>
function func(){
$.ajax({
url : "example.php", // in this you got serialize form data via post request
type : 'POST',
data : $('form').serialize(),
success: function(response){
console.log(response);
}
});
return false;
}
</script>
</html>
I'm pretty sure that you want that GET url to be POST as well. Obviously the code below won't work on this site here, but it shows concept of proper AJAX post.
//<![CDATA[
/* js/external.js */
$(function(){
var regId = 'someId';
$('#form').submit(function(e){
$.post('registration_detail.php', 'id='+encodeURIComponent(regId)+'&'+$(this).serialize(), function(jsonObjResp){
console.log(jsonObjResp);
}, 'json');
e.preventDefault();
});
}); // load end
//]]>
/* css/external.css */
*{
box-sizing:border-box; padding:0; margin:0;
}
html,body{
width:100%; height:100%;
}
body{
background:#ccc;
}
#content{
padding:7px;
}
label{
display:inline-block; width:80px; padding-right:4px; text-align:right;
}
input[type=text]{
width:calc(100% - 80px);
}
input{
padding:5px 7px;
}
input[type=submit]{
display:block; margin:0 auto;
}
#form>*{
margin-bottom:5px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
<title>Test Template</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script type='text/javascript' src='js/external.js'></script>
</head>
<body>
<div id='content'>
<form id='form'>
<label for='fname'>First Name</label><input type='text' id='fname' value='' />
<label for='lname'>Last Name</label><input type='text' id='lname' value='' />
<label for='email'>Email</label><input type='text' id='email' value='' />
<input type='submit' id='submit' value='submit' />
</form>
</div>
</body>
</html>
$(document).ready(function(){
$("form").on("submit", function(){
var form_id = $(this).attr("id");
$.ajax({
url : "example.php",
type : 'POST',
data : $("#"+form_id).serialize(),
success: function(result){
}
});
return false;
})
})
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>
So I doing simple edit/delete/new for mysql DB update.I am using ajax as I need it to in a single page.
So when I check New button, a new form shows up(from ajax call to php file). I get html form. I am trying to validate this.
But I am not able. Code seems right. My code here
trail.php
<?php include( 'connect.php'); ?>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
<script>
$(document).ready(function() {
$("#form1").validate({
debug: false,
rules: {
plid: "required",
},
messages: {
plid: "Please select a pack list id..",
},
submitHandler: function(form) {
$.ajax({
type: "POST",
url: "aa.php",
data: $('#form1').serialize(),
cache: false,
success: function(response) {
$('#result1').html(response);
}
});
}
});
});
</script>
</head>
<body>
<div id="result1"></div>Packing List</br>
<form id="form1" name="form1" action="" method="post">
<?php echo '<select name="plid" id="plid">'; echo '<option value="" selected="selected">--Select the Pack List Id--</option>'; $tempholder=a rray(); $sql="SELECT `pl_id`
FROM (
SELECT `pl_id`
FROM packlist
ORDER BY `pl_id` DESC
LIMIT 30
) AS t" ; $query=m ysql_query($sql) or die(mysql_error()); $nr=m ysql_num_rows($query); for ($i=0; $i<$nr; $i++){ $r=m ysql_fetch_array($query); if (!in_array($r[ 'pl_id'], $tempholder)){ $tempholder[$i]=$ r[ 'pl_id']; echo "<option>".$r[ "pl_id"]. "</option>"; } } echo '</select>'; ?>
<br/>
<input type="submit" name="new" id="new" value="New" />
<br/>
<input type="submit" name="delete" value="Delete" />
<br/>
<input type="submit" name="edit" id="edit" value="Edit" />
<br/>
</form>
</body>
And my ajax called php file
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
<script>
$(document).ready(function() {
$("#form2").validate({
debug: false,
rules: {
plidnew: "required",
},
messages: {
plidnew: "Please select a pack list id..",
}
});
});
</script>
</head>
<body>
<?php $a=isset($_POST[ 'plid']) && $_POST[ 'plid']; $b=isset($_POST[ 'new']) && $_POST[ 'new']; if($a&&$b) { ?>
<form name="form2" id="form2" method="post" action="">
<P>
<LABEL for="plidnew">PackList No
<INPUT type="text" id="plidnew">
</LABEL>
<BR>
<BR>
<LABEL for="itemidnew">Item Id
<INPUT type="text" id="itemidnew">
</LABEL>
<BR>
<BR>
<LABEL for="quannew">Quantity
<INPUT type="text" id="quannew">
</LABEL>
<BR>
<BR>
<LABEL for="potnew">Potency
<INPUT type="text" id="potnew">
</LABEL>
<BR>
<BR>
<LABEL for="sizenew">Size
<INPUT type="text" id="sizenew">
</LABEL>
<BR>
<BR>
<INPUT type="submit" id="newsubmit" name="newsubmit" value="Submit">
<INPUT type="reset">
</P>
</form>
<?php }
$c=isset($_POST[ 'plid']) && $_POST[ 'plid'];
$d=isset($_POST[ 'delete']) && $_POST[ 'delete'];
if($c&&$d) {
echo "delete!!";
}
$e=isset($_POST[ 'plid']) && $_POST[ 'plid'];
$f=isset($_POST[ 'edit']) && $_POST[ 'edit'];
if($e&&$f) {
?>
<form name="form3" id="form3" method="post" action="aa.php">
<P>
<LABEL for="plidedit">PackList No
<INPUT type="text" id="plidedit">
</LABEL>
<BR>
<BR>
<LABEL for="itemidedit">Item Id
<INPUT type="text" id="itemidedit">
</LABEL>
<BR>
<BR>
<LABEL for="quanedit">Quantity
<INPUT type="text" id="quanedit">
</LABEL>
<BR>
<BR>
<LABEL for="potedit">Potency
<INPUT type="text" id="potedit">
</LABEL>
<BR>
<BR>
<LABEL for="sizeedit">Size
<INPUT type="text" id="sizeedit">
</LABEL>
<BR>
<BR>
<INPUT type="submit" id="editsubmit" name="editsubmit" value="Submit">
<INPUT type="reset">
</P>
</form>
<?php } ?>
</body>
I had doubts about validating the form. I tried the validation codes in both page.
But no ajax effect as shown in firebug. Any help appreciated..Thanks a lot..
while using ajax with type "post", you should be careful in passing data
data and data1 are the parameter of the webmethod or service. Try this
var d1="asd";
$.ajax({
type: "POST",
url: "aa.php",
data: "{data:'"+d1+"',data1:'"+d2+"'}",
cache: false,
success: function(response) {
$('#result1').html(response);
}
});
I am trying to post some form data to self with no success.My code is as follows
<html>
<title>Post to self</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('.x-button').live("click", function () {
$.ajax({
type: "POST",
url: "self.php",
data: $(".aj").serialize(),
success: function (data) {
alert("Data Loaded:");
}
});
});
});
</script>
</head>
<body>
<?php
if(isset($_POST['submit']))
{
echo $_POST['firstname'];
}
?>
<form name="input" action="" class="aj" method="post">
<article>
<label>Firstname</label>
<input type="text" name="firstname" value="Ed" class="x-input"
/>
</article>
<article>
<label>Lastname</label>
<input type="text" name="lastname" value="Doe" class="x-input"
/>
</article>
<article>
<label>City</label>
<input type="text" name="city" value="London" class="x-input"
/>
</article>
<input type="submit" value="Update Options" class="x-button" />
</form>
</body>
</html>
When using <form name="test" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post"> in plain php and html it works but i can't get it to work with jquery.
you are mixing two approch altogether.
<form id="myform" action="" >
.....
</form>
To send ajax request to the same page you can keep url parameter empty/removed
TRY
<script type="text/javascript">
$(document).ready(function () {
$('.x-button').live("click", function () {
$.post({
data: $('form#myform').serialize(),
success: function (data) {
alert("Data Loaded:");
}
});
});
});
</script>
Of course you do not want to include the whole page to the response text so you need a statement if ajax is requested
<?php
/* AJAX check */
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
if(isset($_POST))
{
print_r($_POST);
}
}else{
?>
<html>
<title>Post to self</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('.x-button').live("click", function () {
$.ajax({
type: "POST",
url: "self.php",
data: $(".aj").serialize(),
success: function (data) {
alert("Data Loaded:");
}
});
});
});
</script>
</head>
<body>
<form name="input" action="" class="aj" method="post">
<article>
<label>Firstname</label>
<input type="text" name="firstname" value="Ed" class="x-input"
/>
</article>
<article>
<label>Lastname</label>
<input type="text" name="lastname" value="Doe" class="x-input"
/>
</article>
<article>
<label>City</label>
<input type="text" name="city" value="London" class="x-input"
/>
</article>
<input type="submit" value="Update Options" class="x-button" />
</form>
</body>
</html>
<?php }?>
add return false; at the end of the inline javascript function to avoid the form gets submitted the "normal" way
In a facebook iframe page (not tab), I'd like to post data to an external API using cURL, but I would prefer if my form page didn't reload.
I'd like to have some jquery ajax happening ("submitting data" message on submission of the form and a success message on success of the curl_exec). I was thinking of creating a hidden iframe with a duplicate form and update values in that form on change events, but i don't know quite how I'd implement that exchange between PHP and jquery.
Is there a better way? Here's the code I'm working on:
UPDATED CODE TO RETURN FALSE --
Does not submit form data.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body class="fb_canvas-resizable <?php print $body_classes; ?>">
<?php echo $message; ?>
<div class="container">
<div class="header"></div>
<div class="wrapper">
<div class="content">
<div class="left">
<h1>Sign Up to Sign Off</h1>
<form name="signoff" action="curlsub.php" method="post">
<input id="api" type="hidden" name="API_KEY" value="key">
<div class="innerleft">
<input id="fname" type="text" name="fname" class="inputs" tabindex="1" /></br />
<label for="fname">First</label></br /></br /></br />
<input type="text" name="email" class="inputs" tabindex="3" /></br />
<label id="email" for="email">Email</label></br /></br /></br />
<label for="gender">Gender</label></br /></br />
<label for="gender">Age</label></br /></br /></br />
<label for="gender">Income</label></br /></br /></br />
</div>
<div class="innerright">
<input id="lname" type="text" name="lname" class="inputs" tabindex="2" /></br />
<label for="lname">Last</label></br /></br /></br />
<input id="password" type="password" name="password" class="inputs" tabindex="4" /></br />
<label for="email">Password</label></br /></br /></br />
<input type="radio" name="sex" value="male" selected="selected" tabindex="5" /> Male
<input type="radio" name="sex" value="female" tabindex="6" /> Female</br /></br />
<select name="age" tabindex="7" >
<option value=""></option>
<option value="baby">Baby</option>
<option value="teen">Teen</option>
<option value="young">Young</option>
<option value="old">Old</option>
</select><br /><br />
<select name="income" tabindex="8">
<option value=""></option>
<option value="none">None</option>
<option value="some">Some</option>
<option value="okay">Okay</option>
<option value="tons">Tons</option>
</select><br /><br />
<input id="zip" type="text" name="c5" class="zip" tabindex="9" /></br />
<label for="c5">Zip Code</label></br /></br />
<label for="mformat">Newsletter</label></br /></br />
<input type="checkbox" name="mformat" value="html" selected="selected" tabindex="10" /> HTML (iPhone, iPad, Droid)<br /><br />
<input type="checkbox" name="mformat" value="text" tabindex="11" /> TEXT (Best for Blackberry)
</div>
<div class="button"><input type="image" src="button.jpg" name="submit" value="yes"></div>
</form>
</div>
<div class="right">
<img src="logo.jpg" />
<p>Updating you on today and prepping you for tomorrow.</p>
www.url.com
</div>
<div class="clear">
</div>
<div class="logged clear">
<p>Logged in as Some Guy (not you?)</p>
</div>
</div></div>
<div class="footer"></div>
</div>
<script>
$(document).ready(function() {
//$('div.wrapper').fadeOut(0);
window.fbAsyncInit = function() {
FB.init({appId: 'app', status: true, cookie: true});
FB.Canvas.setSize();
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
});
$('#signoff').submit( function() {
var fname = $("input#fname").val();
var lname = $("input#fname").val();
var email = $("input#email").val();
var password = $("input#password").val();
var dataString = 'fname='+ fname + '&lame=' + lname + '&email=' + email + '&password=' + password;
// alert(dataString);
// return false;
$.ajax({
type: "POST",
url: "curlsub.php",
data: dataString,
success: function() {
//do some stuff
}
});
return false;
});
</script>
</body>
</html>
Currently this will successfully send the data to the external PHP API, but the iframe (or my whole file) reloads on submission (and displays "success" message).
What you want to do is issue an AJAX Post request on the submit event of your form. The success callback of that AJAX Post request should update your UI to alert the user that their post was sucessful.
$('#signoff').submit(
//Ajax post request here
//http://api.jquery.com/jQuery.post/
return false; //this stops your page from refreshing
);
Have you looked at http://api.jquery.com/jQuery.ajax/ or http://api.jquery.com/jQuery.post/
The following code should help you get started.
$.ajax({
type: 'POST',
url: url,
data: data,
success: success
dataType: dataType
});
Where
url is a string containing the URL to which the request is sent.
data is a map or string that is sent to the server with the request.
success is a callback function that is executed if the request succeeds. It should take three arguments: (data, textStatus, XMLHttpRequest)
dataType is the type of data expected from the server.