Get data-id from url using javascript ajax - javascript

i've got stuck to get the data-id value from url. After user click the edit link from the url, i want to show the data in the modal dialog. I use the ajax script, but it doesnt work clearly. The modal dialog show an error warning.
This is my class_view.php
<script>
$(document).ready(function(){
$(".edit").on('click', function(e){
var id = $(e.relatedTarget).data('id');
$.ajax({
type: 'post',
url: "class/edit_class_form.php",
data: 'id=' + id,
success: function(data){
$('.show_class').html(data);
}
});
});
});
</script>
<table width="40%">
<thead>
<tr>
<th>No.</th>
<th>Kode</th>
<th>Name</th>
<th>Capacity</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$query = $db->prepare("SELECT * FROM class ORDER BY name ASC");
$query->execute();
for($no=1; $data = $query->fetch();){
?>
<tr>
<td><?php echo $no++;?></td>
<td><?php echo $data['code'];?></td>
<td><?php echo $data['type']." ".$data['name'];?></td>
<td><?php echo number_format($data['capacity'], 2, '.', ',');?> Ton</td>
<td>edit
</td>
</tr>
<?php };?>
</tbody>
</table>
</div>
<?php
include 'setting/class/edit_class_form.php';
?>
I use pure css modal. This is the code of my edit_class_form.php
<div id="edit_form" class="modal">
<div class="md-medium">
X
<h2>Edit Class</h2>
<form method="post" action="setting/class/edit_class_update.php" id="form" autocomplete="off">
<div class="md-content">
<table class="show_class">
<?php
require '../../inc/koneksi.php';
if($_POST['id']){
$id=$_POST['id'];
$stmt = $db->prepare("SELECT * FROM class WHERE id=:id");
$stmt->execute(array(':id' => $id));
?>
<?php while($row=$stmt->fetch(PDO::FETCH_ASSOC)){?>
<tr>
<td>Class Code</td>
<td><input type="text" name="code" size="5" maxlength="3" value="<?php echo $row['code'];?>" required></td>
</tr>
<tr>
<td>Class Type</td>
<td><input type="text" name="type" size="10" maxlength="5" value="<?php echo $row['type'];?>" required></td>
</tr>
<tr>
<td>Class Name</td>
<td><input type="text" name="name" size="40" maxlength="35" value="<?php echo $row['name'];?>" required></td>
</tr>
<tr>
<td>Capacity</td>
<td><input type="text" name="capacity" size="15" value="<?php echo $row['capacity];?>"maxlength="11" required> Persons</td>
</tr>
</table>
<?php }}?>
</div>
<div class="md-footer">
Cancel
<input type="submit" value="insert"">
</div>
</form>
</div>
</div>
Can you help me?

You can get the data-id of an element in this way then you can add the value to the url for your ajax call and your data should be an object
data: {id: id}
You can also var_dump($_POST) to check what are you receiving in PHP
$(document).ready(function() {
$(".edit").on('click', function(e) {
$this = $(this);
const id = $this.data("id")
$.ajax({
type: 'post',
url: "class/edit_class_form.php",
data: {
id: id
},
success: function(data) {
$('.show_class').html(data);
}
});
});
});
.edit {
cursor: pointer;
background: green;
width: 90px;
padding: 20px;
text-align: center;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="edit" data-id="5445454">Click me </div>

Related

Fetch data and return result to dynamic created element

I have created php form as be image onchange select stock to display other cell.
<table id="example1" class="table table-striped" >
<thead>
<th style="width:10px">#</th><th style="width:300px">Name</th><th>Stock</th><th>Qty</th><th>Qty</th>
</thead>
<tr>
<TD style="width:10px"><INPUT type="checkbox" name="chk"/></TD>
<td>
<select class="form-control" id="icode" name="icode[]" onchange="get_stock(this.parentElement.parentElement)">
<?php
$sql_br="select * from jsl_store.item_master order by itemname";
$sql_br_r = oci_parse($con, $sql_br);
oci_execute($sql_br_r);
while (oci_fetch($sql_br_r)) {
?>
<option value=<?php echo oci_result($sql_br_r,1); ?>><?php echo oci_result($sql_br_r,2); ?></option>
<?php
}
?>
</select>
</td>
<td><input type="text" class="form-control" id="istock" name="istock[]"></td>
<td><input type="text" class="form-control" id="iqty"></td>
<td><input type="text" class="form-control" id="rqty"></td>
</tr>
</table>
function get_stock(thisRow) {
var x=thisRow.getElementsByTagName('select')[0].value;
$.ajax({
url: 'itemstock.php?u=1&itemcode=' + x,
success: function(data) {
$("[name='istock[]']").val(data);
}
});
}

Dynamic Rows Form Submit

I have a decent sized form on my website which has an insert row button at the bottom, this adds rows to the bottom of the form to which I can also click the corresponding delete button to delete that single row to.
Screenshot of the bottom of the form
Now, the issue arises when I click the "Send" button. If I have added a few rows to the form and then click the "Send" button, the rows disappear from the form and so do their values. I want it so once I've added the rows and click the send button, the form keeps its state properly and keeps the rows that I previously added.
HTML Code can be found here:
<form name="contact" action="request-a-quote.php" method="POST">
<table class="form">
<thead>
<?php if (isset($form_error_message)) { echo $form_error_message; } ?>
<tr>
<th colspan="3">Company Information</th>
</tr>
</thead>
<tbody>
<tr>
<th class="desktop_only">Company Name *</th>
<td colspan="2"><input name="company_name" type="text" <?php if ($error_company_name=='Y' ) { echo 'class="error_on_field"'; } ?>
<?php if ($detect->isMobile()) { echo 'placeholder="Company Name"'; } ?> maxlength="45" value="
<?php if (isset($company_name)) echo $company_name; ?>"></td>
</tr>
</tbody>
<thead>
<tr>
<th colspan="3">Contact Information</th>
</tr>
</thead>
<tbody>
<tr>
<th class="desktop_only">Contact person name *</th>
<td colspan="2"><input name="contact_person_name" type="text" <?php if ($error_contact_person_name=='Y' ) { echo 'class="error_on_field"'; } ?>
<?php if ($detect->isMobile()) { echo 'placeholder="Contact Person Name"'; } ?> maxlength="45" value="
<?php if (isset($contact_person_name)) echo $contact_person_name; ?>"></td>
</tr>
<tr>
<th class="desktop_only">Contact person e-mail *</th>
<td colspan="2"><input name="contact_person_email" type="email" <?php if ($error_contact_person_email=='Y' ) { echo 'class="error_on_field"'; } ?>
<?php if ($detect->isMobile()) { echo 'placeholder="Contact Person Email"'; } ?> size="40" value="
<?php if (isset($contact_person_email)) echo $contact_person_email; ?>" /></td>
</tr>
<tr>
<th class="desktop_only">Contact address *</th>
<td colspan="2"><input name="contact_address" type="text" <?php if ($error_contact_address=='Y' ) { echo 'class="error_on_field"'; } ?>
<?php if ($detect->isMobile()) { echo 'placeholder="Contact Address"'; } ?> maxlength="45" value="
<?php if (isset($contact_address)) echo $contact_address; ?>"></td>
</tr>
<tr>
<th class="desktop_only">Contact person phone *</th>
<td colspan="2"><input name="contact_person_phone" type="text" <?php if ($error_contact_person_phone=='Y' ) { echo 'class="error_on_field"'; } ?>
<?php if ($detect->isMobile()) { echo 'placeholder="Contact Person Phone"'; } ?> maxlength="45" value="
<?php if (isset($contact_person_phone)) echo $contact_person_phone; ?>"></td>
</tr>
</tbody>
<thead>
<tr>
<th colspan="3">Boiler Information</th>
</tr>
</thead>
<tbody>
<tr>
<th class="desktop_only">Boiler brand / manufacturer *</th>
<td colspan="2"><input name="boiler_brand_manufacturer" type="text" <?php if ($error_boiler_brand_manufacturer=='Y' ) { echo 'class="error_on_field"'; } ?>
<?php if ($detect->isMobile()) { echo 'placeholder="Boiler brand / Manufacturer"'; } ?> maxlength="45" value="
<?php if (isset($boiler_brand_manufacturer)) echo $boiler_brand_manufacturer; ?>"></td>
</tr>
<tr>
<th class="desktop_only">Average annual fuel consumption (kW or £)</th>
<td colspan="2"><input name="average_annual_fuel_consumption" type="text" <?php if ($detect->isMobile()) { echo 'placeholder="Average annual fuel consumption (kW or £)"'; } ?> size="60" value="
<?php if (isset($average_annual_fuel_consumption)) echo $average_annual_fuel_consumption; ?>" ></td>
</tr>
<tr>
<th class="desktop_only">Current cost per kW (Pence)</th>
<td colspan="2"><input name="current_cost_per_kw" type="text" <?php if ($detect->isMobile()) { echo 'placeholder="Current cost per kW (Pence)"'; } ?> size="60" value="
<?php if (isset($current_cost_per_kw)) echo $current_cost_per_kw; ?>" ></td>
</tr>
<tr>
<th>Type of fuel</th>
<td colspan="2">
<select name="type_of_fuel">
<option value="0">Please Select...</option>
<option <?php if ($type_of_fuel == "Gas") echo "selected=selected" ?>>Gas</option>
<option <?php if ($type_of_fuel == "Oil") echo "selected=selected" ?>>Oil</option>
<option <?php if ($type_of_fuel == "LPG") echo "selected=selected" ?>>LPG</option>
<option <?php if ($type_of_fuel == "Other") echo "selected=selected" ?>>Other</option>
</select>
</td>
</tr>
</tbody>
<thead>
<tr>
<th colspan="3">Boiler Capacity</th>
</tr>
</thead>
<tbody>
<tr>
<th>Type of boiler</th>
<td colspan="2">
<select name="type_of_boiler">
<option value="0">Please Select...</option>
<option <?php if ($type_of_boiler == "Thermostatically Controlled") echo "selected=selected" ?>>Thermostatically Controlled</option>
<option <?php if ($type_of_boiler == "CHP") echo "selected=selected" ?>>CHP</option>
<option <?php if ($type_of_boiler == "Steam") echo "selected=selected" ?>>Steam</option>
</select>
</td>
</tr>
<tr>
<th class="desktop_only">Total capacity</th>
<td colspan="2"><input name="total_capacity" type="text" <?php if ($detect->isMobile()) { echo 'placeholder="Total Capacity"'; } ?> size="60" value="
<?php if (isset($total_capacity)) echo $total_capacity; ?>" ></td>
</tr>
<tr>
<th class="desktop_only">Boiler capacity</th>
<td colspan="2"><input name="boiler_capacity" type="text" <?php if ($detect->isMobile()) { echo 'placeholder="Boiler Capacity"'; } ?> size="60" value="
<?php if (isset($boiler_capacity)) echo $boiler_capacity; ?>" ></td>
</tr>
</tbody>
<thead>
<tr>
<th colspan="3">Required Measurements (up to 4 meters)</th>
</tr>
</thead>
<tbody class="row">
<tr>
<td colspan="3" class="center">
<img src="images/required-measurements.jpg" alt="Required Measurements" />
</td>
</tr>
</tbody>
</table>
<table id="addrows">
<thead>
<tr>
<th></th>
<th>Circumference</th>
<th>Length</th>
<th></th>
</tr>
</thead>
<tbody class="row">
<tr>
<th>Measurement 1</th>
<td><input name="circumference_1" type="text" <?php if ($detect->isMobile()) { echo 'placeholder="Circumference 1"'; } ?> size="60" value="
<?php if (isset($circumference_1)) echo $circumference_1; ?>" ></td>
<td><input name="length_1" type="text" <?php if ($detect->isMobile()) { echo 'placeholder="Length 1"'; } ?> size="60" value="
<?php if (isset($length_1)) echo $length_1; ?>" ></td>
<td style="width:200px;"></td>
</tr>
</tbody>
</table>
<p><input type="button" id="insert_row" value="Insert row"></p>
<script>
$('#addrows').on('click', 'input[type="button"]', function() {
$(this).closest('tr').remove();
})
$('p input[type="button"]').click(function() {
$('#addrows').append('<tr><th>Measurement 2</th><td><input type="text" class="fname" /></td><td><input type="text" class="fname" /></td><td><input type="button" value="Delete" /></td></tr>')
});
</script>
<table class="form">
<tr id="send_holder">
<td class="calculate" colspan="3">
<input type="submit" id="send" value="Send">
<input type="hidden" name="submitted" value="TRUE">
</td>
</tr>
</table>
</form>
PHP Code can be found here:
<?php
// Taken from http://php.net/manual/en/function.mail.php - Example #4 Sending HTML email
// PHP script triggers if SEND button has been clicked
if (isset($_POST['submitted'])) {
// Set up Fasthosts mandatory settings to enable email sending
$email_from = 'EMAIL'; // Must be an email set-up in Fasthosts, mailbox or forwarder
ini_set('SMTP','smtp.fasthosts.co.uk' );
ini_set('sendmail_from', $email_from);
$website_name = 'NAME'; // Change to the name of the website in which the form is
$form_name = 'Request a Quote'; // Change to the name of the form
// Populate PHP variables from $_POST array
$company_name = htmlentities(trim($_POST['company_name']),ENT_QUOTES,"ISO-8859-15");
$contact_person_name = htmlentities(trim($_POST['contact_person_name']),ENT_QUOTES,"ISO-8859-15");
$contact_person_email = htmlentities(trim($_POST['contact_person_email']),ENT_QUOTES,"ISO-8859-15");
$contact_address = htmlentities(trim($_POST['contact_address']),ENT_QUOTES,"ISO-8859-15");
$contact_person_phone = htmlentities(trim($_POST['contact_person_phone']),ENT_QUOTES,"ISO-8859-15");
$boiler_brand_manufacturer = htmlentities(trim($_POST['boiler_brand_manufacturer']),ENT_QUOTES,"ISO-8859-15");
$average_annual_fuel_consumption = htmlentities(trim($_POST['average_annual_fuel_consumption']),ENT_QUOTES,"ISO-8859-15");
$current_cost_per_kw = htmlentities(trim($_POST['current_cost_per_kw']),ENT_QUOTES,"ISO-8859-15");
$type_of_fuel = htmlentities(trim($_POST['type_of_fuel']),ENT_QUOTES,"ISO-8859-15");
$type_of_boiler = htmlentities(trim($_POST['type_of_boiler']),ENT_QUOTES,"ISO-8859-15");
$total_capacity = htmlentities(trim($_POST['total_capacity']),ENT_QUOTES,"ISO-8859-15");
$boiler_capacity = htmlentities(trim($_POST['boiler_capacity']),ENT_QUOTES,"ISO-8859-15");
$circumference_1 = htmlentities(trim($_POST['circumference_1']),ENT_QUOTES,"ISO-8859-15");
$length_1 = htmlentities(trim($_POST['length_1']),ENT_QUOTES,"ISO-8859-15");
// Check for errors and update error variables, e.g. $error_on_name, etc.
if (empty($company_name)) { $error_company_name = 'Y'; }
if (empty($contact_person_name)) { $error_contact_person_name = 'Y'; }
if (empty($contact_person_email)) { $error_contact_person_email = 'Y'; }
if (empty($contact_address)) { $error_contact_address = 'Y'; }
if (empty($contact_person_phone)) { $error_contact_person_phone = 'Y'; }
if (empty($boiler_brand_manufacturer)) { $error_boiler_brand_manufacturer = 'Y'; }
$errors_exist = $error_company_name.$error_contact_person_name.$error_contact_person_email.$error_contact_address.$error_contact_person_phone.$error_boiler_brand_manufacturer;
// No errors exist - Set up and send emails and redirect
if (!empty($errors_exist)) {
$form_error_message = '<tr><td colspan="2"><p id="form_error_message">There are a few pieces of information that we need from you before this form comes through to us. They are highlighted below in red, so please fill those in again and click the <strong>Submit</strong> button again.</p></td></tr>';
// Else, i.e. if $errors array is empty
} else {
// Set up email recipient(s)
$to1 = $contact_person_email; // First email is sent to the person who submitted the form; $email
$to2 = 'email_address'; // Second email is sent to the website owner; change this to the relevant email address
// Set up email subject(s)
$subject1 = 'Thanks for your submission - '.$website_name.' - '.$form_name.' form'; // Do not change
$subject2 = 'Website submission - '.$website_name.' - '.$form_name.' form'; // Do not change
// Set up email message(s)
$message1 = '
<div style="font-family: arial, tahoma, sans serif; font-size: small; color: #666;">
<p>Hi '.$contact_person_name.',</p>
<p>Thanks for completing our '.$form_name.' form on the '.$website_name.' website. We\'ll be in touch as soon as we can!</p>
<p>With kind regards<br />'.$website_name.'</p>
</div>';
$message2 = '
<div style="font-family: arial, tahoma, sans serif; font-size: small; color: #666;">
<p>The following submission has been made via the '.$form_name.' form:</p>
<h2>Company Information</h2>
<p>Company Name: '.$company_name.'</p>
<h2>Contact Information</h2>
<p>
Contact Person Name: '.$contact_person_name.'
<br />Contact Person Email: '.$contact_person_email.'
<br />Contact Address: '.$contact_address.'
<br />Contact Person Phone: '.$contact_person_phone.'
</p>
<h2>Boiler Information</h2>
<p>
Boiler Brand/Manufacturer: '.$boiler_brand_manufacturer.'
<br />Average Annual Fuel Consumption: '.$average_annual_fuel_consumption.'
<br />Current Cost per kW: '.$current_cost_per_kw.'
<br />Type of Fuel: '.$type_of_fuel.'
</p>
<h2>Boiler Capacity</h2>
<p>
Type of Boiler: '.$type_of_boiler.'
<br />Total Capacity: '.$total_capacity.'
<br />Boiler Capacity: '.$boiler_capacity.'
</p>
</div>';
// To send HTML mail, the Content-type header must be set
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
// Additional headers can be set here; Change From to website owner
$headers .= 'From: NAME <' . $email_from . '>' . "\r\n";
// Send emails
mail($to1, $subject1, $message1, $headers);
mail($to2, $subject2, $message2, $headers);
// Errors exist - populate $form_error_message ready for output to browser
}
} // END-OF-IF (isset($_POST['submitted']))
// Stage M3. Add <p> to end of $form_error_message
$form_error_message = $form_error_message.'</p>';
?>
Once you're doing a form submit (instead of an Ajax call) it's pretty easy.
In your form:
<input type="text" name="measure[]" value="This input is fixed">
Each time you add a new input (from the group "measure") it should has the same name as an array: name="measure[]" like the input above.
Then in PHP you just need to run into this array to get all fields.
<?php
$total_elements = count($_POST['measure']);
for ( $i=0;$i<$total_elements;++$i ) {
echo $_POST['measure'][$i];
}
?>
Hope it helps.

Send php variable onclick through javascript code

I have a form table, in which when I click on Show button, then a popup window open. Till now everything is good.
But after click on Show button, I also want to send php variable in popup window and want to show values related to that variable. How it can be possible?
My table is below
<table align="center">
<?php
include("connection.php");
$query1=mysql_query("select * from career") or die(mysql_error());
while($row1=mysql_fetch_array($query1))
{
extract($row1);
?>
<tr>
<td>Designation</td>
<td><input type="text" name="des" value="<?php echo $designation; ?>"></td>
</td>
</tr>
<tr>
<td>Number of position</td>
<td><input type="text" name="des" value="<?php echo $no_of_position; ?>"></td>
</td>
</tr>
<tr>
<td>Experience</td>
<td><input type="text" name="des" value="<?php echo $experience; ?>"></td>
</td>
</tr>
<tr>
<td>Qualification</td>
<td><input type="text" name="des" value="<?php echo $qualification; ?>"></td>
</td>
<tr>
<td>Job profile</td>
<td><input type="text" name="des" value="<?php echo $job_profile; ?>"></td>
</tr>
<tr>
<td><?php echo"$id"; ?></td>
<td><button onclick="document.getElementById('id01').style.display='block'" style="width:auto;" id="id1">Show</button>
</td>
</tr>
<tr>
<td></td>
<td> </td>
</tr>
<?php } ?>
</table>
In above code when I click on Show Button, then popup window open, code is below:
<div id="id01" class="modal1">
<form class="modal1-content animate" action="xyz.php">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close modal1">×</span>
</div>
<div class="container">
<div>Content</div>
</div>
</form>
</div>
<script>
// Get the modal1
var modal1 = document.getElementById('id01');
// When the user clicks anywhere outside of the modal1, close it
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
}
</script>
I want to send id variable, by which I can fetch values from database in popup window.
Thank you.
If I understand correctly you need an ajax call to a php page like this:
modalService.php
if(!isset($_GET['id']){
echo "no request";
exit;
}
$id = $_GET['id'];
//Do your query and echo the modal content
table
<td><?php echo $id; ?></td>
<td>
<button onclick="myFunction('<?php echo $id; ?>')" >Show</button>
</td>
JS
function myFunction(id){
var modal = document.getElementById("id01");
modal!==null && (modal.style.display="block");
var modalServiceUrl = "./modalService.php?id="+id;
//xhr to get modalService
}
EDIT: USING JQUERY
<button data-queryid="<?php echo $id; ?>" class="showModal">Show</button>
jQuery(document).ready(function($){
var modal = document.getElementById("id01");
$("button.showModal").on("click", function(){
modal.fadeIn();
var id = $(this).attr("data-queryid");
var modalServiceUrl = "./modalService.php?id="+id;
modal.load(modalServiceUrl);
});
});

What to use instead of innerHTML in jQuery to get value?

<table border="0" cellpadding="10" cellspacing="1" id="edit">
<tr>
<div class="input-label">
<td>Name:</td>
</div>
<td><div class="input-tbox"><input type="text" name="Myname" id="names" contenteditable="true" onblur="saveToDatabse(this,'name','<?php echo $id;?>')" onclick="showEdit(this);" value="<?php echo $name; ?>"/></div></td>
</tr>
<tr>
<td>Username:</td>
<td><div class="input-tbox"><input type="text" name="myuser" id="user" contenteditable="true" onblur="saveToDatabse(this,'userName','<?php echo $id;?>')" onclick="showEdit(this);" value="<?php echo $username; ?>" /></div></td>
</tr>
<tr>
<td>Email:</td>
<td><div class="input-tbox"><input type="text" name="mail" id="email" contenteditable="true" onblur="saveToDatabse(this,'email','<?php echo $id;?>')" onclick="showEdit(this);" value="<?php echo $usermail; ?>" /></div></td>
</tr>
</table>
I have saveToDatabase() function at onblur event.
This is my function,
function saveToDatabse(editableObj,column,id){
$(editableObj).css("background","#FFF url('../images/loaderIcon.gif')no-repeat right");
$.ajax({
url:"update.php",
type:"POST",
data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
cache: false,
sucsess:function(data){
$(editableObj).css("background","#FDFDFD");
}
});
}
when I'm updating it set a blank value. I it's think because the use of innerHTML . I know innerHTML is not for jquery. So what can I use there for getting the value from this object of saveToDatabse() function?
$.ajax({
url:"update.php",
type:"POST",
data:({'column':column,'editval':editableObj.value,'id':id}),
cache: false,
sucsess:function(data){
$(editableObj).css("background","#FDFDFD");
},
error:function(data){
alert(data); /*this will help to to find the error*/
}
});
<table border="0" cellpadding="10" cellspacing="1" id="edit">
<tr>
<div class="input-label">
<td>Name:</td>
</div>
<td><div class="input-tbox"><input type="text" name="Myname" id="names" contenteditable="true" onblur="saveToDatabse(this,'name','<?php echo $id;?>')" onclick="showEdit(this);" value="<?php echo $name; ?>"/></div></td>
</tr>
<tr>
<td>Username:</td>
<td><div class="input-tbox"><input type="text" name="myuser" id="user" contenteditable="true" onblur="saveToDatabse(this,'userName','<?php echo $id;?>')" onclick="showEdit(this);" value="<?php echo $username; ?>" /></div></td>
</tr>
<tr>
<td>Email:</td>
<td><div class="input-tbox"><input type="text" name="mail" id="email" contenteditable="true" onblur="saveToDatabse(this,'email','<?php echo $id;?>')" onclick="showEdit(this);" value="<?php echo $usermail; ?>" /></div></td>
</tr>
</table>
Jquery code
If you want the value from textbox you should use value instead of innerHTML
function saveToDatabse(editableObj,column,id){
$(editableObj).css("background","#FFF url('../images/loaderIcon.gif')no-repeat right");
$.ajax({
url:"update.php",
type:"POST",
data:'column='+column+'&editval='+editableObj.value+'&id='+id,
cache: false,
sucsess:function(data){
$(editableObj).css("background","#FDFDFD");
}
});
}

ajax not returning value

Here is a problem i am having.
Ajax is not willing to return me any values and display it in a message box
Here is my register.php
<?php
//register.php
$username = $_POST['txtusername'];
$response= array();
$response[]= $_POST['txtusername'];
$response[]= $_POST['txtusername'];
echo json_encode($response);
?>
My form is as follows
<div id="divregister">
<div id="display"></div>
<table>
<tr>
<td colspan="3" style='text-align: center;font-weight: bold;'>Register</td>
</tr>
<tr>
<td style='text-align: right;'>First Name</td>
<td class="registerinputfieldscolumn">
<input value= "<?php if(isset($_POST['txtfirstname'])) {echo $_POST['txtfirstname'];} ?>" type="text" name="txtfirstname" id ="txtfirstname" ></td>
<td class="registererrordisplay" id="registererrorfirstname"></td>
</tr>
<tr>
<td style='text-align: right;'>Last Name</td>
<td class="registerinputfieldscolumn">
<input value= "<?php if(isset($_POST['txtlastname'])) echo $_POST['txtlastname']; ?>" type="text" name="txtlastname" id="txtlastname"></td>
<td class="registererrordisplay" id="registererrorlastname"></td>
</tr>
<tr>
<td style='text-align: right;'>E-Mail Address</td>
<td class="registerinputfieldscolumn">
<input value= "<?php if(isset($_POST['txtemail'])) echo $_POST['txtemail']; ?>" type="text" name="txtemail" id="txtemail"></td>
<td class="registererrordisplay" id="registererroremail"></td>
</tr>
<tr>
<td style='text-align: right;'>Username</td>
<td class="registerinputfieldscolumn">
<input value= "<?php if(isset($_POST['txtusername'])) echo $_POST['txtusername']; ?>" type="text" name="txtusername" id ="txtusername"></td>
<td class="registererrordisplay" id="registererrorusername"></td>
</tr>
<tr>
<td style='text-align: right;'>Password</td>
<td class="registererrordisplay"><input type="password" name="txtpassword" id="txtpassword"></td>
<td id="registererrorpassword"></td>
</tr>
<tr>
<td style='text-align: right;'>Confirm</td>
<td class="registerinputfieldscolumn">
<input type="password" name="txtconfirmpassword" id="txtconfirmpassword"></td>
<td></td>
</tr>
<tr>
<td id ="registerdisplay" style='text-align: right;font-size: 12px;color:red;'>dfghjkl</td>
<td style='text-align: right;'>
<input type='button' id ="btnregister" style='width: 60px;height:25px;margin-right:75px;' value="Register"></td>
<td></td>
</tr>
</table>
</div>
Here is the ajax script is as follows.
Am not getting any response in the alert box.
Any help from you guy is greatly appreciated.
<script>
$(document).ready(function(){
$("#btnregister").click(function(){
$.ajax({
type: 'POST',
url: 'register.php',
dataType: 'text',
success: function(data) {alert(data);},
data: {"txtusername": $("#txtusername").val()}
});
});
});
</script>
data: {txtusername: sample}
Where did you define that 'sample' variable? It seems that it doesn't exist so you actually send no value. Then nothing is returned, because there's no data to create response.

Categories