I am showing radio button in html
<body ng-app="myApp" ng-controller="MainCtrl">
<form enctype="multipart/form-data" id="FileUploadForm" name="FileUpload" ng-submit="submitData(FileUpload)" novalidate>
<div style="text-align: left;font-size: 20px;padding: 10px;color: #487eaa;">
<font> Upload Resume</font>
</div>
<div class="file-upload">
<input type="text" id="name" name="name" ng-model="name" />
<br /><br />
<input type="text" id="place" name="place" ng-model="place" />
<br /><br />
<label class="control-label" for="Dilation" style="padding:3px 0;">Dilation</label>
<label>Yes <input type="radio" name="dilation" id="dilation" ng-model="dilation" value="Yes" ng-checked="false" /></label>
<label>No <input type="radio" name="dilation" id="dilation" ng-model="dilation" value="No" ng-checked="false" /></label>
<br /><br />
<label class="control-label" for="NCT" style="padding:3px 0;">NCT</label>
<label>Right <input type="radio" name="nct" id="nct" ng-model="nct" value="Right" ng-checked="false" /></label>
<label>Left <input type="radio" name="nct" id="nct" ng-model="nct" value="Left" ng-checked="false" /></label>
<br /><br />
<input type="file" id="i_file" name="file" ng-file-select="onFileSelect($files)" multiple />
<br /><br />
<input type="submit" id="submit" name="submit" value="submit" ng-disabled="FileUploadForm.$invalid" />
<br /><br />
<div ng-bind="dilation" ng-hide="dilation"></div>
<div ng-bind="nct" ng-hide="nct"></div>
</div>
</form>
</body>
And here is my angular controller
angular.module('myApp', ['angularFileUpload'])
.controller('MainCtrl', function($scope, $http, $upload) {
$scope.onFileSelect = function($files) {
$scope.message = "";
for (var i = 0; i < $files.length; i++) {
var file = $files[i];
console.log(file);
$scope.upload = $upload.upload({
url: 'upload.php',
method: 'POST',
data: {name: $scope.name,place: $scope.place, dilation: dilation, nct: nct },
file: file
}).success(function(data, status, headers, config) {
$scope.message = data;
}).error(function(data, status) {
$scope.message = data;
});
}
};
});
And here is my php code(upload.php)
$result = array("filename" => $_FILES["file"],"name" => $_POST['name'],"place" => $_POST['place'],"dilation" => $_POST['dilation'],"nct" => $_POST['nct']);
echo json_encode($result);
Here is a fiddle : http://jsfiddle.net/aabyv4kx/
and getting response like this
name:qqq,place:eeee,dilation:{\"ng339\":8},nct:{\"ng339\":10}
I am new to angularjs please help me sort this.
Related
I have a task where a form will appear when the star rating is below 3 and must be filled (required). but if the star rating is above 3 then the form does not need to appear and does not need to be filled.
the form is hidden and displayed when the star value below 3 is
<div id="masukan">
<label>Masukan Untuk Kami </label>
<textarea name="masukan" id="masukan" class="form-control" placeholder="Kritik Dan Saran Membangun Anda" required=""></textarea></div>
because the logic is when the rating is below 3 users must fill in the form (show) and if the rating is above 3 users do not have to fill in the form (hide). the problem is when saving to the database where the user gives a 3 star rating.
the code that I now have is like this:
<div id="add_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Berikan Pendapatmu Tentang Bagaimana Kami !!</h4>
</div>
<div class="modal-body">
<form method="post" id="insert_form">
<label>Tanggal Lahir</label>
<input type="date" name="tgl_lahir" id="tgl_lahir" class="form-control" value="Tanggal Lahir Anda !" required="" />
<br />
<label>Pekerjaan</label>
<input type="text" name="pekerjaan" id="pekerjaan" class="form-control" placeholder="Tuliskan Pekerjaan Utama Anda!" required="" />
<br />
<label>Rating Kepuasan</label><br/>
<fieldset id='demo3' class="rating">
<input class="stars" type="radio" id="star53" name="rating" value="5" />
<label class = "full" for="star53" title="5 Bintang"></label>
<input class="stars" type="radio" id="star4half3" name="rating" value="4.5" />
<label class="half" for="star4half3" title="4,5 Bintang"></label>
<input class="stars" type="radio" id="star43" name="rating" value="4" />
<label class = "full" for="star43" title="4 Bintang"></label>
<input class="stars" type="radio" id="star3half3" name="rating" value="3.5" />
<label class="half" for="star3half3" title="3,5 Bintang"></label>
<input class="stars" type="radio" id="star33" name="rating" value="3" />
<label class = "full" for="star33" title="3 Bintang"></label>
<input class="stars" type="radio" id="star2half3" name="rating" value="2.5" />
<label class="half" for="star2half3" title="2,5 Bintang"></label>
<input class="stars" type="radio" id="star23" name="rating" value="2" />
<label class = "full" for="star23" title="2 Bintang"></label>
<input class="stars" type="radio" id="star1half3" name="rating" value="1.5" />
<label class="half" for="star1half3" title="1,5 Bintang"></label>
<input class="stars" type="radio" id="star13" name="rating" value="1" />
<label class = "full" for="star13" title="1 Bintang"></label>
<input class="stars" type="radio" id="starhalf3" name="rating" value="0.5" />
<label class="half" for="starhalf3" title="0,5 Bintang"></label>
</fieldset>
<br />
<br />
<div id="masukan">
<label>Masukan Untuk Kami </label>
<textarea name="masukan" id="masukan" class="form-control" placeholder="Kritik Dan Saran Membangun Anda" required=""></textarea></div>
<br />
<label>Email Anda</label><br/>
<input type="text" name="email_member" id="email_member" class="form-control" readonly value="<?php echo $email_member;?>" />
<br />
<br/>
<input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#insert_form').on("submit", function(event){
event.preventDefault();
if($('#tgl_lahir').val() == "")
{
alert("Tanggal Lahir harus di isi");
}
else if($('#pekerjaan').val() == '')
{
alert("Pekerjaan harus di isi");
}
else
{
$.ajax({
url:"insert.php",
method:"POST",
data:$('#insert_form').serialize(),
beforeSend:function(){
$('#insert').val("Inserting");
},
success:function(data){
$('#insert_form')[0].reset();
$('#add_data_Modal').modal('hide');
$('#employee_table').html(data);
}
});
}
});
});
$('input[type=radio][name=rating]').change(function() {
if ($(this ).val() <=3) {
$ ('#masukan').show();
}
else {
$('#masukan').hide();
}
});
</script>
and this proses.php
<?php
include"page/koneksi.php";
try{
$tgl_lahir = $_POST["tgl_lahir"];
$pekerjaan = $_POST["pekerjaan"];
$rating = $_POST["rating"];
$masukan = $_POST["masukan"];
$email_member = $_POST["email_member"];
if (isset($tgl_lahir) AND isset($pekerjaan) AND isset($rating) AND isset($masukan) AND isset($email_member)) {
$query = $db_con->prepare("insert into tb_voting (tgl_lahir,pekerjaan,kepuasan,masukan,email_member)
values ('$tgl_lahir','$pekerjaan','$rating','$masukan','$email_member')"); }
$query->execute($_POST);
echo "Data telah disimpan";
}catch(PDOException $e){
echo "Error! gagal menyimpan:".$e->getMessage();
}
?>
I'm currently developing warehouse inventory system. And the only task left is how to generate and print the bin IDs of the rack. The code below generate only 1 barcode. It only generates the last checked item. I need to print multiple barcode at once for printing. Here's the link I used as a reference to generate the barcode.
<?php
require ("../../connect/db.php");
$sql = "select * from location_bin where rack_id = 3";
$rack = mysqli_query($mysqli, $sql);
while($row = mysqli_fetch_array($rack)){
$id = $row['bin_id'];
echo "<input type='checkbox' name='barcodeValue' id='barcodeValue' value='$id'/>$id<br>";
}
?>
Here's the script in generating the barcode.
<script type="text/javascript">
function generate(){
$(document).ready( function() {
$("input[name=barcodeValue]:checked").each(function () {
var id = $(this).attr("value");
function generateBarcode(id){
var value = id;
var btype = $("input[name=btype]:checked").val();
var renderer = $("input[name=renderer]:checked").val();
var quietZone = false;
if ($("#quietzone").is(':checked') || $("#quietzone").attr('checked')){
quietZone = true;
}
var settings = {
output:renderer,
bgColor: $("#bgColor").val(),
color: $("#color").val(),
barWidth: $("#barWidth").val(),
barHeight: $("#barHeight").val(),
moduleSize: $("#moduleSize").val(),
posX: $("#posX").val(),
posY: $("#posY").val(),
addQuietZone: $("#quietZoneSize").val()
};
if ($("#rectangular").is(':checked') || $("#rectangular").attr('checked')){
value = {code:value, rect: true};
}
if (renderer == 'canvas'){
clearCanvas();
$("#barcodeTarget").hide();
$("#canvasTarget").show().barcode(value, btype, settings);
} else {
$("#canvasTarget").hide();
$("#barcodeTarget").html("").show().barcode(value, btype, settings);
}
}
function showConfig1D(){
$('.config .barcode1D').show();
$('.config .barcode2D').hide();
}
function showConfig2D(){
$('.config .barcode1D').hide();
$('.config .barcode2D').show();
}
function clearCanvas(){
var canvas = $('#canvasTarget').get(0);
var ctx = canvas.getContext('2d');
ctx.lineWidth = 1;
ctx.lineCap = 'butt';
ctx.fillStyle = '#FFFFFF';
ctx.strokeStyle = '#000000';
ctx.clearRect (0, 0, canvas.width, canvas.height);
ctx.strokeRect (0, 0, canvas.width, canvas.height);
}
$(function(){
$('input[name=btype]').click(function(){
if ($(this).attr('id') == 'datamatrix') showConfig2D(); else showConfig1D();
});
$('input[name=renderer]').click(function(){
if ($(this).attr('id') == 'canvas') $('#miscCanvas').show(); else $('#miscCanvas').hide();
});
generateBarcode(id);
});
});
});
}
</script>
Below is the HTML code.
<div class="title">Type</div>
<input type="radio" name="btype" id="code39" value="code39" checked><label for="code39">code 39</label><br />
<input type="radio" name="btype" id="code93" value="code93"><label for="code93">code 93</label><br />
<input type="radio" name="btype" id="code128" value="code128"><label for="code128">code 128</label><br />
<input type="radio" name="btype" id="datamatrix" value="datamatrix"><label for="datamatrix">Data Matrix</label><br /><br />
</div>
<div class="config" style="display:none">
<div class="title">Misc</div>
Background : <input type="text" id="bgColor" value="#FFFFFF" size="7"><br />
"1" Bars : <input type="text" id="color" value="#000000" size="7"><br />
<div class="barcode1D">
bar width: <input type="text" id="barWidth" value="1" size="3"><br />
bar height: <input type="text" id="barHeight" value="50" size="3"><br />
</div>
<div class="barcode2D">
Module Size: <input type="text" id="moduleSize" value="5" size="3"><br />
Quiet Zone Modules: <input type="text" id="quietZoneSize" value="1" size="3"><br />
Form: <input type="checkbox" name="rectangular" id="rectangular"><label for="rectangular">Rectangular</label><br />
</div>
<div id="miscCanvas">
x : <input type="text" id="posX" value="10" size="3"><br />
y : <input type="text" id="posY" value="20" size="3"><br />
</div>
</div>
<div class="config">
<div class="title">Format</div>
<input type="radio" id="css" name="renderer" value="css" checked="checked"><label for="css">CSS</label><br />
<input type="radio" id="bmp" name="renderer" value="bmp"><label for="bmp">BMP (not usable in IE)</label><br />
<input type="radio" id="canvas" name="renderer" value="canvas"><label for="canvas">Canvas (not usable in IE)</label><br />
</div>
</div>
<div id="submit">
<input type="button" onClick="generate();" value=" Generate the barcode ">
</div>
</div>
<div id="barcodeTarget" class="barcodeTarget"></div>
<canvas id="canvasTarget" width="150" height="100"></canvas>
Output screenshot
Try this, also made a JSFIDDLE
HTML
<input class="thischeckbox" type='checkbox' name='123' id='123' value='123' />123
<br>
<input class="thischeckbox" type='checkbox' name='456' id='456' value='456' />456
<br>
<input class="thischeckbox" type='checkbox' name='789' id='789' value='789' />789
<br>
<div class="title">Type</div>
<input type="radio" name="btype" id="code39" value="code39" checked>
<label for="code39">code 39</label>
<br />
<input type="radio" name="btype" id="code93" value="code93">
<label for="code93">code 93</label>
<br />
<input type="radio" name="btype" id="code128" value="code128">
<label for="code128">code 128</label>
<br />
<input type="radio" name="btype" id="datamatrix" value="datamatrix">
<label for="datamatrix">Data Matrix</label>
<br />
<br />
<div class="config">
<div class="title">Format</div>
<input type="radio" id="css" name="renderer" value="css" checked="checked">
<label for="css">CSS</label>
<br />
<input type="radio" id="bmp" name="renderer" value="bmp">
<label for="bmp">BMP (not usable in IE)</label>
<br />
<input type="radio" id="canvas" name="renderer" value="canvas">
<label for="canvas">Canvas (not usable in IE)</label>
<br />
</div>
<div class="config">
<div class="title">Misc</div>
Background :
<input type="text" id="bgColor" value="#FFFFFF" size="7">
<br /> "1" Bars :
<input type="text" id="color" value="#000000" size="7">
<br />
<div class="barcode1D">
bar width:
<input type="text" id="barWidth" value="1" size="3">
<br /> bar height:
<input type="text" id="barHeight" value="50" size="3">
<br />
</div>
<div class="barcode2D">
Module Size:
<input type="text" id="moduleSize" value="5" size="3">
<br /> Quiet Zone Modules:
<input type="text" id="quietZoneSize" value="1" size="3">
<br /> Form:
<input type="checkbox" name="rectangular" id="rectangular">
<label for="rectangular">Rectangular</label>
<br />
</div>
<div id="miscCanvas">
x :
<input type="text" id="posX" value="10" size="3">
<br /> y :
<input type="text" id="posY" value="20" size="3">
<br />
</div>
</div>
<div id="submit">
<input id="generatecode" type="button" onClick="generate();" value=" Generate the barcode ">
</div>
<div id="barcodeTarget" class="barcodeTarget"></div>
<canvas id="canvasTarget" width="150" height="100"></canvas>
js
$('.barcode2D').hide();
$('.barcode1D').show();
$('#miscCanvas').hide();
$('#generatecode').click(function() {
$('input[type=checkbox]:checked').each(function() {
var id = $(this).attr("id");
generateBarcode(id)
});
});
$(document).on('change', 'input[name=btype]', function() {
if ($(this).attr('id') == 'datamatrix') {
showConfig2D();
} else {
showConfig1D();
}
});
$(document).on('change', 'input[name=renderer]', function() {
if ($(this).attr('id') == 'canvas') {
$('.config').show();
$('#miscCanvas').show();
} else {
$('.config').show();
$('#miscCanvas').hide();
}
});
function generateBarcode(id) {
var value = id;
var btype = $("input[name=btype]:checked").val();
var renderer = $("input[name=renderer]:checked").val();
var quietZone = false;
if ($("#quietzone").val() != '') {
quietZone = true;
}
var settings = {
output: renderer,
bgColor: $("#bgColor").val(),
color: $("#color").val(),
barWidth: $("#barWidth").val(),
barHeight: $("#barHeight").val(),
moduleSize: $("#moduleSize").val(),
posX: $("#posX").val(),
posY: $("#posY").val(),
addQuietZone: $("#quietZoneSize").val()
};
if ($("#rectangular").is(':checked') || $("#rectangular").attr('checked')) {
alert("Test")
value = {
code: value,
rect: true
};
}
if (renderer == 'canvas') {
clearCanvas();
$("#barcodeTarget").hide();
$("#canvasTarget").show().barcode(value, btype, settings);
} else {
$("#canvasTarget").hide();
$("#barcodeTarget").html("").show().barcode(value, btype, settings);
}
}
function showConfig1D() {
$('.config').show();
$('.barcode2D').hide();
$('.barcode1D').show();
}
function showConfig2D() {
$('.config').show();
$('.barcode1D').hide();
$('.barcode2D').show();
}
function clearCanvas() {
var canvas = $('#canvasTarget').get(0);
var ctx = canvas.getContext('2d');
ctx.lineWidth = 1;
ctx.lineCap = 'butt';
ctx.fillStyle = '#FFFFFF';
ctx.strokeStyle = '#000000';
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeRect(0, 0, canvas.width, canvas.height);
}
I have a form
<form id="ajax-form" onsubmit="return false;">
<p class="legend">All fields marked with an asterisk are required.</p>
<fieldset>
<legend>User Details</legend>
<div><label for="post[uname]">Username <em>*</em></label> <input id="post[uname]" type="text" name="uname" value="" /></div>
<p class='note' id='err[Name]'></p>
</fieldset>
<div class="buttonrow">
<input type="submit" value="Submit This Form via AJAX" class="button" />
<input type="button" value="Start Again" class="button" />
Refresh this Page
</div>
</form>
I have two arrays post and err. I'm trying to send them to php and then in php it will json_encode the array and print it on the screen like so:
{
"err": {
"uname": "Please enter a user name"
}
"post": {
"uname": ""
}
}
or this is if the user did enter a name:
{
"post": {
"uname": "Bob Ross"
}
}
There could be multiple fields for post and err but it should still follow the same suite.
How do I send the data to php, I understand it's some sort of serializeArray but it doesn't format it properly when I do:
JSON.stringify($("#ajax-form").serializeArray())
A jsfiddle to full html:
https://jsfiddle.net/dzv8ttjn/1/
Your best bet is to call .serialize(); on the form which will give you something like: user-name=some%20name&email=some%20emale&gender=Female&interests=Software
Send that to the PHP script, and have the script create the format of the response while looping over the $_POST array. Something like the below would work:
(note that I've changed your id's to be more sensible and updated the jQuery version used)
<?php
if(count($_POST)>0){
$response = ['err'=>[], 'post'=>[]];
foreach($_POST as $key => $value)
{
$response['post'][$key]=$value;
if(trim($value) == '') $response['err'][$key]='Please enter a '.$key;
}
echo json_encode($response);
exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Lab4: Form Validation with AJAX,JQuery,JSON and PHP</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script type="text/javascript">
$("#ajax-form").on('submit', function(event) {
event.preventDefault();
var dataString = $(this).serialize();
$.ajax({
type: "POST",
// url: "page.php", // add this line to send to some page other than the this one
data: dataString,
success: function(response) {
if (response) {
alert('test worked');
}
},
error: function(xhr, status, error) {
console.log(xhr);
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<h2>Form Validation with AJAX,JQuery,JSON and PHP</h2>
<div class="form-container">
<span id="ajax-message"></span>
<form id="ajax-form" onsubmit="return false;">
<p class="legend">All fields marked with an asterisk are required.</p>
<fieldset>
<legend>User Details</legend>
<div>
<label for="uname">Username <em>*</em></label>
<input id="uname" type="text" name="user-name" value="" />
<p class='note' id='name-error'></p>
</div>
<div>
<label for="password">Email Address <em>*</em></label>
<input id="password" type="text" name="email" value="" />
<p class='note' id='password-error'></p>
</div>
<div>
<label for="post[gender]">Gender <em>*</em></label>
<input type="radio" name="gender" value="Male" class="form-check-input" id="Male" required> Male
<input type="radio" name="gender" value="Female" class="form-check-input" id="Female" required> Female
<p class='note' id='gender-error'></p>
</div>
<div>
<label for="interests">Interests<em>*</em></label>
<input type="checkbox" name="interests" value="Music" class="form-check-input" id="Music"> Music
<input type="checkbox" name="interests" value="Software" class="form-check-input" id="Software"> Software
<input type="checkbox" name="interests" value="Hardware" class="form-check-input" id="Hardware"> Hardware</div>
</fieldset>
<div class="buttonrow">
<input type="submit" value="Submit This Form via AJAX" class="button" />
<input type="button" value="Start Again" class="button" />
Refresh this Page
</div>
</form>
</div>
<h3>JSON Array</h3>
<pre id='debug'></pre>
</div>
</body>
</html>
hello guys? can you help me with this? i want to get the id of the first input and the text value of the second input in a specific p tag
<p class="receiveitem">
<label for="mat_id">Material</label>
<input type="text" id="4"value="GI Coulping" disabled/>
<label for="rec_qty">Quantity</label>
<input type="text" class="rec_qty" />
<input type="button" class="receive" value=Receive />
</p>
<p class="receiveitem">
<label for="mat_id">Material</label>
<input type="text" id="5"value="Vulca Seal" disabled/>
<label for="rec_qty">Quantity</label>
<input type="text" class="rec_qty" />
<input type="button" class="receive" value=Receive />
</p>
<p class="receiveitem">
<label for="mat_id">Material</label>
<input type="text" id="6"value="teflon tape" disabled/>
<label for="rec_qty">Quantity</label>
<input type="text" class="rec_qty" />
<input type="button" class="receive" value=Receive />
</p>
so when i click the receive button that's in the p tag.
it will output someting like
ID: 4 and Value: 10
already have a js.but i can't get it done.
$(document).ready(function(){
$('input#receive').click(function(){
var mat = $('input[type=text]:first').attr('id');
var qty = $('input[type=text]:last').val;
alert(mat + qty);
});
});
and i dont know where to put the this in my variables mat and qty.please help?
Here is a modified approach using the more semantically correct data attributes (which are broadly supported) (building on #Chase's answer) (and a demo)
<p class="receiveitem">
<label for="mat_id">Material</label>
<input name="mat_id" type="text" data-id="4" value="GI Coulping" disabled="disabled"/>
<label for="rec_qty">Quantity</label>
<input type="text" name="rec_qty" />
<input name="rec_qty" type="button" class="receive" value="Receive" />
</p>
<p class="receiveitem">
<label for="mat_id">Material</label>
<input name="mat_id" type="text" data-id="5" value="Vulca Seal" disabled="disabled"/>
<label for="rec_qty">Quantity</label>
<input type="text" name="rec_qty" />
<input type="button" class="receive" value="Receive" />
</p>
<p class="receiveitem">
<label for="mat_id">Material</label>
<input name="mat_id" type="text" data-id="6" value="teflon tape" disabled="disabled"/>
<label for="rec_qty">Quantity</label>
<input type="text" name="rec_qty" />
<input type="button" class="receive" value="Receive" />
</p>
With this JavaScript
$(document).on("click", "input.receive", function () {
var mat = $(this).siblings("[name='mat_id']").data("id");
var qty = $(this).siblings("[name='rec_qty']").val();
alert("mat id: " + mat + " qty val: " + qty);
});
This approach won't abuse the id attribute which is designed for node identification and not data storage.
$(document).on('click', 'input#receive', function(e){
e.preventDefault();
var qty = $(this).prev().prev('input');
alert(qty);
});
You really need to change your markup to use data or unique IDs though.
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.