Wolfazb
Reputation: 65
using jQuery to edit an sql record
i am trying to load into a form an existing data from a database, and allow the user to edit and update it. but for some reason, when the edited data is sent by ajax, all the fields are empty. The loading of the current data, setting it into the fields and the sql query itself, seems to work fine. so i am really lost here.
//bootstrap modal
<!--- Edit Campaign Modal------->
<div id="editCampaignModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit Cmapaign Details:</h4>
</div>
<div class="modal-body">
<div id="new-campaign-com-with-server">
<div id="edit-campaign-add-msg"></div>
<form role="form" id="edit-campaign-form" class="campaign-form" method="post" action="newCampaign.php">
<fieldset class="form-group">
<div class="form-group">
<label for="ecname">Name: </label>
<input type="text" class="form-control" id="ecname" name="cname">
</div>
</fieldset>
<fieldset class="form-group">
<div class="form-group">
<label for="eproduct">Product: </label>
<input type="text" class="form-control" id="eproduct" name="product">
</div>
</fieldset>
<fieldset class="form-group">
<div class="form-group">
<label for="euserId">User ID: </label>
<input type="text" class="form-control" id="euserId" name="userId">
</div>
</fieldset>
<fieldset class="form-group">
<div class="form-group">
<label for="esource">Source: </label>
<input type="text" class="form-control" id="esource" name="source">
</div>
</fieldset> <fieldset class="form-group">
<div class="form-group">
<label for="eformat">Format: </label>
<input type="text" class="form-control" id="eformat" name="format">
</div>
</fieldset>
<fieldset class="form-group">
<div class="form-group">
<label for="etype">Type: </label>
<input type="text" class="form-control" id="etype" name="type">
</div>
</fieldset> <fieldset class="form-group">
<div class="form-group">
<label for="ecostType">Cost Type: </label>
<input type="text" class="form-control" id="ecostType" name="costType">
</div>
</fieldset> <fieldset class="form-group">
<div class="form-group">
<label for="ecostValue">Cost Value: </label>
<input type="text" class="form-control" id="ecostValue" name="CostValue">
</div>
</fieldset>
<fieldset class="form-group">
<div class="form-group">
<label for="esaleType">Sale Type: </label>
<input type="text" class="form-control" id="esaleType" name="saleType">
</div>
</fieldset>
<fieldset class="form-group">
<div class="form-group">
<label for="esaleValue">Sale Value: </label>
<input type="text" class="form-control" id="esaleValue" name="saleValue">
</div>
</fieldset>
<fieldset class="form-group">
<div class="form-group">
<label for="einsertPixel">Insert Pixel:</label>
<input type="text" class="form-control" id="einsertPixel" name="insertPixel">
</div>
</fieldset>
<fieldset class="form-group">
<div class="form-group">
<label for="etimeZone">Time Zone: </label>
<input type="text" class="form-control" id="etimeZone" name="timeZone">
</div>
</fieldset>
<fieldset>
<h2>Alerts</h2>
<fieldset class="form-group">
<div class="form-group">
<label for="eUVLLow">UVL Low: </label>
<input type="text" class="form-control" id="eUVLLow" name="UVLLow">
</div>
</fieldset>
<fieldset class="form-group">
<div class="form-group">
<label for="eUVLHigh">UVL High: </label>
<input type="text" class="form-control" id="eUVLHigh" name="UVLHigh">
</div>
</fieldset>
<fieldset class="form-group">
<div class="form-group">
<label for="eCPLLow">CPL Low: </label>
<input type="text" class="form-control" id="eCPLLow" name="CPLLow">
</div>
</fieldset>
<fieldset class="form-group">
<div class="form-group">
<label for="eCPLHigh">CPL High: </label>
<input type="text" class="form-control" id="eCPLHigh" name="CPLHigh">
</div>
</fieldset>
</fieldset>
<button type="submit" class="btn btn-default" value="Submit-form">Update Changes</button>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!------------------------------>
//The jQuery script
function editCampaign(queryArr)
{
//loading all the array data in to the form
$("#ecname").val(queryArr[1]);
// document.getElementById('ecname').value=queryArr[1];
$("#eproduct").val(queryArr[2]);
$("#euserId").val(queryArr[3]);
$("#esource").val(queryArr[4]);
$("#eformat").val(queryArr[5]);
$("#etype").val(queryArr[6]);
$("#ecostType").val(queryArr[7]);
$("#ecostValue").val(queryArr[8]);
$("#esaleType").val(queryArr[9]);
$("#esaleValue").val(queryArr[10]);
$("#einsertPixel").val(queryArr[11]);
$("#etimeZone").val(queryArr[12]);
$("#eUVLLow").val(queryArr[13]);
$("#eUVLHigh").val(queryArr[14]);
$("#eCPLLow").val(queryArr[15]);
$("#eCPLHigh").val(queryArr[16]);
$("#edit-campaign-add-msg").hide();
$("#edit-campaign-form").show();
$('#editCampaignModal').modal({show: true});
}
function getRowId(event)
{
id = $(event.target).parent().parent().parent().parent().children('td').eq(0).html();
}
$(document).ready(function() {
//event fired on edit campaign 'update changes' button press
$("#edit-campaign-form").submit(function(event){
var data = {
"CID": id
};
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "json",
url: "updateCampaignEditChanges.php",
data: data,
success: function(data)
{
$("#edit-campaign-add-msg").show();
$("#edit-campaign-add-msg").html("Success, Form Updated!");
$("#edit-campaign-form").hide();
}
});
event.preventDefault();
});
});
//the php code for Updating the changes //without form validation for now
<?php
if (is_ajax()) {
test_function();
}
//Function to check if the request is an AJAX request
function is_ajax() {
return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}
function test_function()
{
$servername = "************.com";
$username = "*************";
$password = "**********";
$dbname = "******";
// Create connection
$conn = new mysqli($servername, $username, $password,$dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
else
{
$ID=$_POST["CID"];
$CNAME= $_POST["ecname"];
$PRODUCT= $_POST["eproduct"];
$USERID= $_POST["euserId"];
$SOURCE= $_POST["esource"];
$FORMAT= $_POST["eformat"];
$TYPE= $_POST["etype"];
$COSTTYPE= $_POST["ecostType"];
$COSTVALUE= $_POST["ecostValue"];
$SALETYPE= $_POST["esaleType"];
$SALEVALUE= $_POST["esaleValue"];
$INSERTPIXEL= $_POST["einsertPixel"];
$TIMEZONE= $_POST["etimeZone"];
$UVLLOW= $_POST["eUVLLow"];
$UVLHIGH= $_POST["eUVLHight"];
$CPLLOW= $_POST["eCPLLow"];
$CPLHIGH= $_POST["eCPLHigh"];
$sql = "UPDATE campaign
SET name='$CNAME',
product='$PRODUCT',
user_id='$USERID',
source='$SOURCE',
format='$FORMAT',
type='$TYPE',
cost_type='$COSTTYPE',
cost_value='$COSTVALUE',
sale_type='$SALETYPE',
sale_value='$SALEVALUE',
insert_pixel='$INSERTPIXEL',
time_zone='$TIMEZONE',
uvl_low='$UVLLOW',
uvl_high='$UVLHIGH',
cpl_low='$CPLLOW',
cpl_high='$CPLHIGH'
WHERE cid='$ID'";
$result = $conn->query($sql);
}
$conn->close();
if(isset($_POST["ecname"]))
$result="field was passed correctly :)";
else
$result="field is empty! :O";
echo json_encode($result);
}
?>
i am really sorry for the exceptionally long form, thanks in advance for any help.
Upvotes: 0
Views: 82
Answers (1)
Jeffwa
Reputation: 1143
The PHP to process the form submission is looking for the wrong variables. You are looking for the form field IDs when you should be looking for the form field names. When you submit a form, the name attribute is used as the key, not the id. Either change your HTML to make the name attribute match the id or change your PHP to use the name attribute as the key.
Upvotes: 1
Related Questions
- X-editable Bootstrap PHP database update
- Edit Database entry with AJAX and return edited data
- Editable database table with PHP+Ajax+jQuery
- how to edit table column data with jquery/ajax and save to mysql
- Edit specific record that inside php looped
- edit two columns in table
- Editing a database entry via jquery
- Jquery, Ajax, PHP: Editing mysql entries
- Editing a html table using jquery,php and saving records to mysql
- editing with AJAX and PHP\mysql