Develop Reference

How to get the attribute id from JQuery AJAX generated HTML data? JavaScript

Is it possible to get the attribute id from JQuery AJAX generated HTML data?
I have these in my index.php
<script>
$(document).ready(function () {
function viewRooms()
{
$.ajax({
url:"rooms.php",
method:"POST",
success:function(data){
$('#rooms').html(data);
}
});
}
viewRooms();
$('#save').click(function()
{
var room_number = $('#room_number').val();
var room_type = $('#room_type').val();
$.ajax({
url: "save.php",
method: "POST",
data: 'room_number='+room_number+'&room_type='+room_type,
success: function(data)
});
});
});
</script>
<div id="rooms"></div>
and inside rooms.php
<input type="text" id="room_number" />
<input type="text" id="room_type" />
<button id="save" > </button>
The function save button doesn't work from index.php. also with the id attributed to it.
Please help me if it is possible to do that? Thank's a lot.

Wrap save click handler call in a function something like this.
function saveClick() {
$('#save').click(function()
{
var room_number = $('#room_number').val();
var room_type = $('#room_type').val();
$.ajax({
url: "save.php",
method: "POST",
data: 'room_number='+room_number+'&room_type='+room_type,
success: function(data)
});
});
}
and call this function in ajax success.

Passing javascript variables(array) to php

I have a function where the user inputs are stored in a variable in javascript.
$('#btnsubmit').click(function() {
var seat = [], item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
item = $(this).attr('title');
seat.push(item);
});
var bookseats = seat;
$.ajax({
type: 'POST',
url: 'confirm.php',
data: {'bookseats': bookseats},
});
});
When the user clicks on the #btnsubmit button, I want to send this variable(actually an array) to a PHP file named confirm.php.
<form method="POST" action="confirm.php">
<div align="center"><input type="Submit" id="btnsubmit" value="Submit" /></div>
</form>
In my PHP file, I've written the code to get the sent variable as follows.
$bookseats = "";
if(isset($_POST['bookseats']))
{
$bookseats = $_POST["bookseats"];
print_r($bookseats);
}
When executed, nothing happens in the PHP file(doesn't print the bookseats).Is there something wrong with this code?

You're not using a "success" callback to get the output of the PHP code. See success callback
$.ajax({
type: 'POST',
url: 'confirm.php',
data: {'bookseats': bookseats},
success: function(data) {
console.log(data); // or alert(data);
}
});
Also, I think you should stop the propagation of the default behavior of the button, to prevent the browser to redirect the page to the form's action URL:
$('#btnsubmit').click(function(ev) {
ev.preventDefault();
As #Malovich pointed out, as of jQuery 1.8, you could also use .then():
$.ajax({
type: 'POST',
url: 'confirm.php',
data: {'bookseats': bookseats}
}).then(function(data) {
console.log(data); // or alert(data);
}, function(){
console.log("Error");
});

not able to submit form without page reloading

I have the following code that i wish to use to submit form without reloading the page, but it reloads the entire page and when checked in console the script.php page is also not getting executed.
Code on index.php page
<script>
$(function() {
$(".submit").click(function() {
var name = $("#name").val();
var dataString = 'name=' + name;
console.log(dataString);
$.ajax({
type: "POST",
url: "script.php",
data: dataString,
success: function() {
$('#result').html(response);
}
});
return false;
});
});
</script>
<form method="post" name="form">
<input id="name" name="name" type="text" />
<input type="submit" value="Submit" class="submit" />
</form>
<div id="result"></div>
code on script.php page
<?php
$name=$_POST['name'];
echo $name;
?>
Can anyone please tell how i can submit the form without reloading the page and also display the result from script.php page on index.php page

update your function. pass event object in function. and use event.preventDefault() to prevent default submit action.
$(".submit").click(function(e) {
e.preventDefault();

try this
<script>
$(function() {
$(".submit").click(function(event) {
event.preventDefault();
var name = $("#name").val();
var dataString = 'name=' + name;
console.log(dataString);
$.ajax({
type: "POST",
url: "script.php",
data: dataString,
success: function() {
$('#result').html(response);
}
});
return false;
});
});
OR
<input type="button" class="submit" />Submit

You need to send the data from the script.php page back to your index.php page. Swich out the little bit of ajax for this:
$.ajax({
type: "POST",
url: "script.php",
data: "datastring",
dataType: "json",
success: function(dataType){
$("#result").html(dataType);
}
});
In your script.php:
<?php
$name=$_POST['name'];
echo json_encode($name);
?>

Do not mix form submit and button click.
If you are a click event of button then use type="button" and if you are doing $("form").submit() then use type="submit".
Also check for
$(".submit").click(function(e) {
e.preventDefault();
and check your ajax post data , do
$.ajax({
type: "POST",
url: "script.php",
//changes made here
data: { name: $("#name").val()},
//changes made here. you have not written response
success: function(response) {
$('#result').html(response);
}
});

Instead of listening to the input's click event, you should listen to the form's submit.
<script>
$(function() {
$("#name-form").on('submit', function(e) {
e.preventDefault(); // prevent form submission
var name = $("#name").val();
var dataString = 'name=' + name;
console.log(dataString);
$.ajax({
type: "POST",
url: "script.php",
data: dataString,
success: function(response) {
$('#result').html(response);
}
});
});
});
</script>
<form id="name-form" method="post" name="form">
<input id="name" name="name" type="text" />
<input type="submit" value="Submit" class="submit" />
</form>
<div id="result"></div>

Passing POST variables from jQuery to PHP, want to update div

I am trying to pass the form value "New Value" from jQuery to a PHP script, and then update the "to_change" div from "Old value" to "New value". It seemed like the AJAX call succeeded, but the POST variables are not being sent to the PHP script, and when I use getJSON, I do not succeed. How could I resolve this issue?
Javascript/HTML code:
<html>
<head>
<script src = 'jquery-1.10.2.js'></script>
<script>
$(document).ready(function() {
$("#form_tmin").submit(function(event) {
var values = $(this).serialize();
$.ajax({
type: "POST",
url: "parameters_form2.php",
data: values,
dataType: "json",
success: function(data){
$.getJSON("parameters_form2.php", function(tmin) {
document.getElementById("to_change").innerHTML = tmin[1];
});
}
});
return false;
});
});
</script>
</head>
<body>
<div id="to_change">Old value</div>
<form id="form_tmin" name="form_tmin">
<input type="hidden" id="tmin_value" name="tmin_value" value="New value">
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>
PHP code:
<?php
header('Content-Type: application/json');
if ($_POST["tmin_value"]) {
$tmin[1] = $_REQUEST["tmin_value"];
}
else {
$tmin[1] = "FAILURE";
}
echo json_encode($tmin);
?>

You already have json response in data just set this data in where ever you want to display. you don not need $.getJSON again.
try like this:
$(document).ready(function() {
$("#form_tmin").submit(function(event) {
var values = $(this).serialize();
$.ajax({
type: "POST",
url: "parameters_form2.php",
data: values,
dataType: "json",
success: function(data){
document.getElementById("to_change").innerHTML = data[1];
}
});
return false;
});
});

You already have the response of query, no need to use $.getJson again
Instead just use:
success: function(data){
$("to_change").html(data[1]);
}

jquery ajax form submit

Is this code correct? I'm trying to submit it and also I would like on submit if text area would be empty again.
<script type="text/javascript">
$(document).ready(function(){
$("form#submit").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var fid = $(".messag").attr("id");
var val = $("#mess_ar").val();
$.ajax({
type: "POST",
url: "send_message.php",
data: "fid="+ fid +"&val="+ val,
success: function(){
$("#mess_ar").
}
});
return false;
});
}):
</script>
I'm trying to upload this:
<form id="submit" method="POST">
<textarea name="mess_cont" id="mess_ar" autofocus="autofocus" cols="70" rows="5"> </textarea>
<button id="mess_but" type="submit">Send</button>
</form>
Thankx...

Looks good. To empty the textarea use the following in the ajax success callback:
$("#mess_ar").val('');

​$(function(){
$("form#submit").submit(function(e){
e.preventDefault();
var fid = $(".messag").attr("id");
var val = $("#mess_ar").val();
$.ajax({
type: "POST",
url: "send_message.php",
data: "fid="+ fid +"&val="+ val,
success: function(){
$("#mess_ar").val("");
}
});
});
});​
Use
$("#submit").on('submit', function(e){...});
instead of
$("#submit").submit(function(e){...});
if you are using latest version of jquery.

What are you actually looking for? Does it return the data in response too? Add the functions to track your the error case too. Make something like
<script type="text/javascript">
$(document).ready(function(){
$("form#submit").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var fid = $(".messag").attr("id");
var val = $("#mess_ar").val();
$.ajax({
type: "POST",
url: "send_message.php",
data: "fid="+ fid +"&val="+ val,
success: function(incoming_data){
// ALERT incoming data if coming
$("#mess_ar").text(""); // DO YOUR JOB CONTINUOU
},
error: function() {
alert("BROKEN REQUEST.");
}
});
return false;
});
});
</script>
Else, seems all fine.