How to send dynamic option text and value using jquery and php - php

I have design a dynamic html table and it contains 2 table columns :
column1: Item Name. It comes from selected option.
column2: Item Price. It comes from selected option value.
Right now I am selecting option in first column and passing value into input field in second column. After adding as many rows I need, I want to pass both their text and value in php.
But php is getting only option value instead of having both text and value.
Here is my code
$('#myTable').on('change', '.mySelect', function() {
// you can use .closest() to find
// particular input on same row with select
$(this).closest('tr').find('.amount').val($(this).val());
//$(this).closest('tr').find('.mySelect').val($(".mySelect option:selected").text());
});
$('#myTable').on('click','.remScnt', function(e) {
e.preventDefault();
// find the tr element of remove link
// which is a parent
$(this).closest('tr').remove()
});
$(".mySelect option").filter(function() {
//may want to use $.trim in here
return $(this).text() == $(this).val();
}).prop('selected', true);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
table, th, td {
border-collapse: collapse;
margin: 10px auto;
}
</style>
<script>
function addMore() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
var x = document.getElementById("myTable").rows[1].cells;
cell1.innerHTML = x[0].innerHTML;
cell2.innerHTML = x[1].innerHTML;
}
function removeLast() {
document.getElementById("myTable").deleteRow(-1);
}
function removeRowNo() {
var index = document.getElementById('value').value
document.getElementById("myTable").deleteRow(index);
}
</script>
</head>
<body>
<form action="testlist.php" method="post">
<table>
<tr>
<td>
Month:
</td>
<td>
<select name="SALMT" id="month" onchange="" size="1">
<option value="" disabled selected>Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</td>
<td>
Year:
</td>
<td> <input type="text" name="SALYR">
</td>
</tr>
<tr>
<td>
Employee ID:
</td>
<td> <input type="text" name="EMPID">
</td>
<td>
Name:
</td>
<td><input type="text" name="NM">
</td>
</tr>
<tr>
<td>
Department Code:
</td>
<td> <input type="text" name="DPTID">
</td>
<td>
Designation:
</td>
<td><input type="text" name="DSG">
</td>
</tr>
</table>
<table id="myTable">
<tr>
<th>Items</th>
<th>Amount</th>
</tr>
<tr>
<td >
Remove
<select class="mySelect" name="DESCRP[]" >
<option disabled="" selected="">Select</option>
<option value="100">Item-1</option>
<option value="200">Item-2</option>
<option value="300">Item-3</option>
<option value="400">Item-4</option>
<option value="500">Item-5</option>
</select>
</td>
<td> <input type="text" class="amount" name="ALAMT[]"></td>
</tr>
</table>
<table>
<tr>
<td><input type="submit" /> </td>
</tr>
</table>
</form>
<br>
<table>
<tr>
<td><button onclick="addMore()">Add More</button></td>
<td><button onclick="removeLast()">Remove Last Row</button></td>
</tr>
<tr>
<td><input type="text" maxlength="3" name="value" id='value'></td>
<td><button onclick="removeRowNo()">Remove By Row No.</button></td>
</tr>
</table>
</body>
</html>
Here is php code:
<?php
var_dump($_POST);
echo "<br>";
echo count($_POST["DESCRP"]);
foreach ($_POST["DESCRP"] as $d) {
echo "<br>";
echo $d;
}
echo "<br>Amount:";
echo count($amount = $_POST["ALAMT"]);
foreach ($_POST["DESCRP"] as $a) {
echo "<br>";
echo $a;
}
?>


You mean
<td>
<select class="mySelect">
<option value="">Select</option>
<option value="100">Item-1</option>
<option value="200">Item-2</option>
<option value="300">Item-3</option>
<option value="400">Item-4</option>
<option value="500">Item-5</option>
</select>
<input type="hidden" class="descr" name="DESCRP[]" />
</td>
<td> <input type="text" class="amount" name="ALAMT[]"></td>
using
$('#myTable').on('change', '.mySelect', function() {
$(this).closest('tr').find('.amount').val($(this).val());
$(this).closest('tr').find('.descr').val($("option:selected",this).text());
});


For DESCRP[0] = item-1, DESCRP[1] = item-5
modify the select as follows :
<option value="Item-1" data-val="100">Item-1</option>
$('#myTable').on('change', '.mySelect', function() {
$(this).closest('tr').find('.amount').val($(this).attr('data-val'));
});

Related

Post table rows which are checked with other select boxes

This may be a duplicate question,
But still, I did not find the answer.
My requirement is :
How to get the table rows which are CHECKED.
Here is my issue's screenshot. enter image description here
My checkbox name is 'check[]'
and the name of the select box is 'class[]',
and the form is posted to process.php.
How to get the value of 'class[]' where the checked boxes are checked so that I can then process with PHP-MYSQL?
My code is here:
<div class="col-md-5">
<form action="process.php" method="post">
<table class="table" id="table">
<tr><th>Opt</th><th>Name</th><th>Next Class</th></tr>
<? $q = $sdb->where('ac_CurClass',4)->get('tbl_accounts');
foreach ($q as $r){ ?>
<tr>
<td><input type="checkbox" name="sel[]" class="checkbox small" value="<?=$r['ac_Id'];?>"></td>
<td><?=ac_details($r['ac_Id'])->ac_Name;?></td>
<td>
<select class="form-control small" name="class[]">
<? $c = $sdb->where('c_Id',ac_details($r['ac_Id'])->ac_CurClass,">")->get("tbl_classes");
foreach($c as $d) {?>
<option value="<?=$d['c_Id'];?>"><?=$d['c_Name'];?></option>
<? } ?></select>
</td>
</tr>
<? } ?>
</table>
<button type="submit" class="btn btn-danger">Update</button>
</form>
</div>

Hope this code is help full for you
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="col-md-5">
<form action="#" method="post">
<table class="table" id="table">
<thead><tr><th>Opt</th><th>Name</th><th>Next Class</th></tr></thead>
<tbody id="cont">
<tr>
<td><input type="checkbox" name="sel[]" class="checkbox small" value="1"></td>
<td>asass</td>
<td>
<select class="form-control small" name="class[]">
<option value="">Select option</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" name="sel[]" class="checkbox small" value="2"></td>
<td>asass</td>
<td>
<select class="form-control small" name="class[]">
<option value="">Select option</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" name="sel[]" class="checkbox small" value="3"></td>
<td>asass</td>
<td>
<select class="form-control small" name="class[]">
<option value="">Select option</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-danger" id="submit">Update</button>
</form>
</div>
<script>
$(document).ready(function(){
$('#submit').click(function(){
$("#cont input:checkbox:checked").map(function(){
alert('Checkbox value - '+$(this).val()+' / Select Box value - '+$(this).parent().next().next('td').find('select').val());
//alert('Select Box value - '+$(this).parent().next().next('td').find('select').val());
});
});
});
</script>
After that you can pass a Ajax so that only checked rows post.

Try as follows
Post as form
<form action="process.php" method="post">
In process.php file
if($check[0]===true){
$nextclass1 = $_POST['list_box'];
}
if($check[1]===true){
$nextclass2= $_POST['list_box'];
}

select option selected in loop

I am trying to get the value from a selectbox. The form is placed multiple times on my page with a php loop (that's why I use classes instead of id's).
<html>
<body>
<table>
<form class="lesmaker">
<tr>
<td colspan="5">
<select name="type" class="type">
<option value="open">Open vraag</option>
<option value="info">Informatie</option>
<option value="discussie">Klassikaal</option>
<option value="meerkeuze" selected="selected">Meerkeuze</option>
</select>
</td>
</tr>
<tr>
<td colspan="5">
<select name="media" class="media">
<?php foreach($images as $image){if(substr($image,0,1) != '.'){ ?>
<option style="background-image:url(<?=$d_images.$image?>)" value="<?=$image?>" <?php if($r_media== $image) echo 'selected="selected"'; ?>><?=$image?></option>
<?php }} ?>
</select>
</td>
</tr>
</form>
</table>
<table>
<form class="lesmaker">
<tr>
<td colspan="5">
<select name="type" class="type">
<option value="open">Open vraag</option>
<option value="info">Informatie</option>
<option value="discussie">Klassikaal</option>
<option value="meerkeuze" selected="selected">Meerkeuze</option>
</select>
</td>
</tr>
<tr>
<td colspan="5">
<select name="media" class="media">
<?php foreach($images as $image){if(substr($image,0,1) != '.'){ ?>
<option style="background-image:url(<?=$d_images.$image?>)" value="<?=$image?>" <?php if($r_media== $image) echo 'selected="selected"'; ?>><?=$image?></option>
<?php }} ?>
</select>
</td>
</tr>
</form>
</table>
</body>
</html>
With jQuery I am trying to get the selected option.
$(function(){
$('.lesmaker').each(function() {
console.log($(this).find('.type').val());
});
});
The code above is not working. How do I need to do this?

$(function() {
$('.lesmaker').each(function() {
console.log($(this).find('table tr td').find('.type').val());
});
});
You need to change your HTML to following:
<form class="lesmaker">
<table>
<tr>
<td colspan="5">
<select name="type" class="type">
<option value="open">Open vraag</option>
<option value="info">Informatie</option>
<option value="discussie">Klassikaal</option>
<option value="meerkeuze" selected="selected">Meerkeuze</option>
</select>
</td>
</tr>
</table>
</form>
form needs to be either outside of table or inside of td :)

$(function() {
$('.type').each(function() {
console.log($('option:selected', this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<form class="lesmaker">
<tr>
<td colspan="5">
<select name="type" class="type">
<option value="open">Open vraag</option>
<option value="info">Informatie</option>
<option value="discussie">Klassikaal</option>
<option value="meerkeuze" selected="selected">Meerkeuze</option>
</select>
</td>
</tr>
<tr>
<td colspan="5">
<select name="type" class="type">
<option value="open">Open vraag</option>
<option value="info">Informatie</option>
<option value="discussie" selected="selected">Klassikaal</option>
<option value="meerkeuze" >Meerkeuze</option>
</select>
</td>
</tr>
<tr>
<td colspan="5">
<select name="type" class="type">
<option value="open">Open vraag</option>
<option value="info" selected="selected">Informatie</option>
<option value="discussie" >Klassikaal</option>
<option value="meerkeuze" >Meerkeuze</option>
</select>
</td>
</tr>
</form>
</table>
Just use the class of select and use $('option:selected', this).val()

I need to pass data to form itself and to another form in action attribute in html

I have a form where I have two combo boxes, one is category and other one is city. According to what I select from category, I need to go to different pages and I achieved that task as shown below.
ex: If I select Cars in category I need to go to Cars.html. If I select Motorbikes & Scooters I need to go to Motorbikes&Scooters.html:
<form action="<?php $_SERVER["PHP_SELF"]; ?>" method="post" name="myform1">
<tr>
<td>
<label name="category">Category</label>
</td>
<td>
<select id="place" name="Category">
<option value="select">Please select a Category</option>
<option value="Cars">Cars</option>
<option value="Motorbikes & Scooters">Motorbikes and Scooters</option>
<option value="Three Wheelers">Three Wheelers</option>
<option value="Vans & Busses">Vans and Busses</option>
<option value="Heavy-Duty vehicles">Heavy-Duty vehicles</option>
</select>
</td>
</tr>
<tr>
<td>
<label name="City">City</label>
</td>
<td>
<input type="text" id="textbox1" name="city">
</td>
<td>
</form>
<script>
document.getElementById('goTo').onclick = function(e){
e.preventDefault();
var yourPath = "",
yourPage = document.getElementById('place').value;
extension = '.html';
window.location = yourPath + yourPage + extension;
}
</script>
My question is after this I need to pass selected condition and city to Cars.html or Motorbikes&Scooters.html etc. page (according to what is selected in combo box). How can I do this?

I really only know how to do jQuery, so sorry about that. Anyway here is what I would suggest.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<form action="" method="post" id="myform1">
<table>
<tr>
<td>
<label name="category">Category</label>
</td>
<td>
<select id="place" name="Category">
<option value="select">Please select a Category</option>
<option value="Cars">Cars</option>
<option value="Motorbikes & Scooters">Motorbikes and Scooters</option>
<option value="Three Wheelers">Three Wheelers</option>
<option value="Vans & Busses">Vans and Busses</option>
<option value="Heavy-Duty vehicles">Heavy-Duty vehicles</option>
</select>
</td>
</tr>
<tr>
<td>
<label name="City">City</label>
</td>
<td>
<input type="text" id="textbox1" name="city">
</td>
<td>
<input type="submit" name="goTo" value="GO" />
</td>
</tr>
</table>
</form>
<script>
$(document).ready(function() {
$("#myform1").submit(function(e) {
var page = $("#place").val().replace(/[^a-zA-Z0-9\-\_]/g, "");
var city = $("input[name=city]").val();
var url = '/' + page + '.html?city=' + encodeURIComponent(city);
window.location = url;
console.log(url);
e.preventDefault();
});
});
</script>

Cascading drop down list with ajax in php

I have a cascading dropdown list which is fetched from the database through ajax.
The list loads but its not posting to the database nor is the code seen behind.
function getXMLHTTP() { //function to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getCity(stateid)
{
//alert(stateid);
var strURL="findCity.php?state="+stateid;
var req = getXMLHTTP();
if (req)
{
req.onreadystatechange = function()
{
if (req.readyState == 4) // only if "OK"
{
if (req.status == 200)
{
document.getElementById('citydiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
and the php file
<? $state=$_GET['state'];
$link = mysql_connect('localhost', '', ''); //change the configuration if required
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('a'); //change this if required
$query="select FOR_CODE,FOR_DESC from maruti_city where FOR_STAT_CODE='{$state}' order by FOR_DESC";
$result=mysql_query($query);?>
<select name="city" onchange="getDealer(this.value)" class="sel" >
<option value="0">Select City</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value><?=$row['FOR_DESC']?></option>
<?} ?>
</select>
The DDL's Load but these values are not getting posted to the database.
form
<div class="container">
<table width="528" border="0" cellpadding=1 class="formTable" style="width: 515px;font-family:arial;font-size:12px;" >
<form action="form_submit.php" method="POST" name="alto800" id="alto800" onsubmit="return validate();">
<tbody>
<tr>
<td width="52%">Name</td>
<td width="48%" >Mobile/Phone No.</td>
</tr>
<tr>
<td>
<select name="title" id="mr" class="sel">
<option value="mr">Mr.</option>
<option value="mrs">Mrs.</option>
</select>
<input type="text" name="name" id="name" class="formName" />
</td>
<td>
<input type="text" name="mobile" id="mobile"/>
</td>
</tr>
<tr>
<td >State</td>
<td >City</td>
</tr>
<tr>
<td>
<select name="state" id="state" class="sel" onchange="getCity(this.value)">
<option value="0">Select state</option>
<option value="AN">ANDAMAN</option>
<option value="AP">ANDHRA PRADESH</option>
<option value="AR">ARUNANCHAL PRADESH</option>
<option value="AS">ASSAM</option>
<option value="BH">BIHAR</option>
<option value="CG">CHATTISGARH</option>
<option value="CH">CHANDIGARH</option>
<option value="DL">DELHI</option>
<option value="DM">DAMAN</option>
<option value="DN">DADRA & NAGAR HAVELI</option>
<option value="GJ">GUJRAT</option>
<option value="GO">GOA</option>
<option value="HN">HARYANA</option>
<option value="HP">HIMACHAL PRADESH</option>
<option value="JH">JHARKHAND</option>
<option value="JK">JAMMU & KASHMIR</option>
<option value="KL">KERALA</option>
<option value="KT">KARNATAKA</option>
<option value="MH">MAHARASHTRA</option>
<option value="ML">MEGHALAYA</option>
<option value="MN">MANIPUR</option>
<option value="MP">MADHYA PRADESH</option>
<option value="MZ">MIZORAM</option>
<option value="NG">NAGALAND</option>
<option value="OS">ORISSA</option>
<option value="PJ">PUNJAB</option>
<option value="PY">PONDICHERRY</option>
<option value="RJ">RAJASTHAN</option>
<option value="SK">SIKKIM</option>
<option value="TN">TAMIL NADU</option>
<option value="TR">TRIPURA</option>
<option value="UP">UTTAR PRADESH</option>
<option value="UT">UTTARANCHAL</option>
<option value="WB">WEST BENGAL</option>
</select>
</td>
<td><div id="citydiv">
<select name="city" id="city" class="sel" onChange="getDealer(this.value)" >
<option value="0">Select state first</option>
</select>
</div>
</td>
</tr>
<tr>
<td >Preffered Dealer</td>
<td > </td>
</tr>
<tr>
<td colspan="2"><div id="dealerdiv"><select name="dealer" style="width:500px;height:25px;" >
<option value="0">Select city first</option>
</select> </div> </td>
</tr>
<tr>
<td>Email Address</td>
<td> </td>
</tr>
<tr>
<td><input type="text" name="email" id="email" /></td>
<td> </td>
</tr>
<tr>
<td >Your Query</td>
<td rowspan="2" ><br />
<br /> </td>
</tr>
<tr>
<td>
<textarea name="query" id="query"></textarea>
</td>
</tr>
<tr>
<td >
<div style="height:10px"></div>
<input type="image" name="submit" value="submit" src="images/submit.png" />
</td>
<td ></td>
</tr>
</tbody>
</form>
</table>

Loading data from form into MySQL with PHP and AJAX

I have a standard HTML form, and I'd like to store the data from that form into a MySQL database. I had everything working correctly, but now am wanting to implement AJAX to prevent the page from refreshing, and all of sudden am running into trouble.
Problem: the "success" alert is not being generated, and the data is not being saved into the database.
I have very, very little exposure into Jquery/AJAX, and am learning on-the-go, so please bear with me if I made an elementary mistake.
*UPDATE 1***
This is my new AJAX code. The data from the form is now getting saved into the database, but still no success alerts. In fact, NO pop-up appears.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('form').bind('submit', function(){
$.ajax({
type: 'post',
url: "InsertNewMentor.php",
data: $("form").serialize(),
success: function() {
alert("Success!");
}
});
return false;
});
});
</script>
This is the form (includes AJAX code at the end). (update: no longer using this code, see above)
<form>
<table cellpadding="10">
<tr>
<td><b>Chapter:</b></td>
<td><input type="text" name="chapter"></td>
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" name="first"></td>
<td>Last Name:</td>
<td><input type="text" name="last"></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</td>
<td>Ethnicity:</td>
<td>
<form action="">
<select name="ethnicity">
<option value="white">White/Caucasian</option>
<option value="hispanic">Hispanic</option>
<option value="asian">Asian/Pacific Islander</option>
<option value="native_american">Native American Indian</option>
<option value="other">Other</option>
</form>
</td>
</tr>
<tr>
<td>Year in School</td>
<td>
<form action="">
<select name="year_in_school">
<option value="freshman">Freshman</option>
<option value="sophomore">Sophomore</option>
<option value="junior">Junior</option>
<option value="senior">Senior</option>
</select>
</form>
</td>
<td>Phone Number:</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td>Email Address:</td>
<td><input type="text" name="email"></td>
<td>Street Address:</td>
<td>
<input type="text" name="address">
</td>
</tr>
<tr>
<td>Apt/Suite:</td>
<td>
<input type="text" name="suite_num">
</td>
<td>City:</td>
<td>
<input type="text" name="city">
</td>
</tr>
<tr>
<td>State:</td>
<td>
<select name="state">
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
</td>
<td>Zip Code:</td>
<td>
<input type="text" name="zip_code">
</td>
</tr>
<tr>
<td>Cumulutative GPA:</td>
<td><input type="text" name="gpa"></td>
<td>Major/Area of Study:</td>
<td><input type="text" name="major"></td>
</tr>
<tr>
<td>Twitter handle:</td>
<td>
<input type="text" name="twitter_handle">
</td>
</tr>
<tr>
<td colspan="2">
<p>Please describe any relevant teaching experience:</p>
<textarea rows="6" cols="45" name="teaching_experience">
</textarea>
</td>
<td colspan="2">
<p>Why do you want to join Moneythink?</p>
<textarea rows="6" cols="43" name="why_moneythink">
</textarea>
</td>
</tr>
</table>
<table>
<tr>
<td><input type="submit" value="Apply"></td>
<td><input type="reset" value="Clear"></td>
</tr>
</table>
</form>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('form').bind('submit', function(){
$.ajax({
type: 'post',
url: "/InsertNewMentor.php",
data: $("form").serialize(),
success: function() {
alert("form was submitted");
}
});
return false;
});
});
</script>
And this is InsertNewMentor.hp
<?php
$username="";
$password="";
$database="";
$first = $_POST['first'];
$last = $_POST['last'];
$email = $_POST['email'];
$gpa = $_POST['gpa'];
$year = $_POST['year_in_school'];
$address = $_POST['address'];
$phone = $_POST['phone'];
$gender = $_POST['gender'];
$ethnicity = $_POST['ethnicity'];
$year_in_school = $_POST['year_in_school'];
$suite_number = $_POST['suite_num'];
$city = $_POST['city'];
$state = $_POST['state'];
$zip_code = $_POST['zip_code'];
$major = $_POST['major'];
$twitter_handle = $_POST['twitter_handle'];
$why_moneythink = $_POST['why_moneythink'];
$teaching_experience = $_POST['teaching_experience'];
$date = date("m/d/Y");
mysql_connect(localhost,$username,$password);
#mysql_select_db($database) or die( "Unable to select database");
$query = "INSERT INTO students VALUES ('','$address','$phone','$first','$last','$gender', '$ethnicity', '$year_in_school', '$email', '$suite_number','$city','$state','$zip_code','$major','$gpa','$twitter_handle','$why_moneythink','$teaching_experience','pending','$date')";
mysql_query($query);
mysql_close();
?>

First of all , the serialize() function returns a text string ,and not an array of values - for further information read jQuery documentaion.
Now for the ajax submittion -
$(function() {
$('form').bind('submit', function(){
$.ajax({
type: 'post',
url: "/InsertNewMentor.php",
**data: {dataString: $("form").serialize()} ,**
success: function() {
alert("form was submitted");
}
});
return false;
});
You have got to send a JSON formatted data , as explanied above ( notice the change in the data field)
In the PHP code , when posting , you only post the field you send through ajax - i.e - dataString.
Furtheremore , in the success function you might use :
success: function(result) {
alert(result);
}
});
so you could debug any errors , if exist.
Good luck.

<form id="formPost" method="POST">
<table cellpadding="10">
<tr>
<td><b>Chapter:</b></td>
<td><input type="text" name="chapter"></td>
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" name="first"></td>
<td>Last Name:</td>
<td><input type="text" name="last"></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</td>
<td>Ethnicity:</td>
<td>
<select name="ethnicity">
<option value="white">White/Caucasian</option>
<option value="hispanic">Hispanic</option>
<option value="asian">Asian/Pacific Islander</option>
<option value="native_american">Native American Indian</option>
<option value="other">Other</option>
</td>
</tr>
<tr>
<td>Year in School</td>
<td>
<select name="year_in_school">
<option value="freshman">Freshman</option>
<option value="sophomore">Sophomore</option>
<option value="junior">Junior</option>
<option value="senior">Senior</option>
</select>
</td>
<td>Phone Number:</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td>Email Address:</td>
<td><input type="text" name="email"></td>
<td>Street Address:</td>
<td>
<input type="text" name="address">
</td>
</tr>
<tr>
<td>Apt/Suite:</td>
<td>
<input type="text" name="suite_num">
</td>
<td>City:</td>
<td>
<input type="text" name="city">
</td>
</tr>
<tr>
<td>State:</td>
<td>
<select name="state">
<option value="Alabama">Alabama</option>
.....
</select>
</td>
<td>Zip Code:</td>
<td>
<input type="text" name="zip_code">
</td>
</tr>
<tr>
<td>Cumulutative GPA:</td>
<td><input type="text" name="gpa"></td>
<td>Major/Area of Study:</td>
<td><input type="text" name="major"></td>
</tr>
<tr>
<td>Twitter handle:</td>
<td>
<input type="text" name="twitter_handle">
</td>
</tr>
<tr>
<td colspan="2">
<p>Please describe any relevant teaching experience:</p>
<textarea rows="6" cols="45" name="teaching_experience">
</textarea>
</td>
<td colspan="2">
<p>Why do you want to join Moneythink?</p>
<textarea rows="6" cols="43" name="why_moneythink">
</textarea>
</td>
</tr>
</table>
<table>
<tr>
<td><input type="submit" value="Apply"></td>
<td><input type="reset" value="Clear"></td>
</tr>
</table>
</form>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('form').bind('submit', function(){
$.ajax({
type: 'post',
url: "/InsertNewMentor.php",
data: $("#formPost").serialize(),
success: function() {
alert("form was submitted");
}
});
return false;
});
});
</script>
try this

Categories