How to get text filed value in ajax? - php

I have a table with dynamic data from database, each row consist of a text filed and 2 link (accept or reject). then if user clicks on any of these link, the row will disappear and the rest of the rows are only visible in table.
I get ID of each row with ajax by clicking on each link, however I also need to get the text-field value.
how can I get it?
I need to have in ajax cause after getting value I need to insert in database with php+sql.
this is my ajax part for link:
$('a.accept').click(function(d) {
d.preventDefault();
var parent = $(this).parent();
$.ajax({
type: 'get',
url: 'Test.php',
data: 'ajax=1&accept=' + parent.attr('id').replace('record-',''),
beforeSend: function() {
parent.animate({'backgroundColor':'#fb6c6c'},300);
},
success: function() {
parent.slideUp(300,function() {
parent.remove();
});
}
});
});
});
how can I include text filed value in it?
please comment me which I'm really in need to solve it,
Thanks

You can add manually your text to the GET request.
(snippet)
data: 'ajax=1&accept=' + parent.attr('id').replace('record-','') + '&text=VALUE',
Substitute text with the name you want to be received in PHP. Substitute VALUE with the text entered on the page that you want to grab - and don't forget to encode the value.

You will need the name of id of the textfield first. Then you could do something like this:
var textboxvalue = $('name or id of textfield').val();
Then you will need to append this value to your data string:
data: 'ajax=1&textvalue='+textboxvalue+'accept=' + parent.attr('id').replace('record-',''),
Then you can use $_GET['textvalue']; to get the value of textbox.

Use following and you're good to go. Also you had extra '});' at the end line of JS fragment. I had it removed. But make sure you give id to text fields in following pattern : text-fld-RECORD_ID where RECORD_ID is the ID of the record.
$('a.accept').click(function(d) {
d.preventDefault();
var parent = $(this).parent();
var id = parent.attr('id').replace('record-','');
//make sure that text field has ID in pattern 'text-fld-RECORD_ID'
var text_fld = $('#text-fld-'+id).val();
$.ajax({
type: 'post', // I suggest using post; get will be harmful in such occasions
url: 'Test.php',
data: {ajax:1,accept:id,text:text_fld},
beforeSend: function() {
parent.animate({'backgroundColor':'#fb6c6c'},300);
},
success: function() {
parent.slideUp(300,function() {
parent.remove();
});
}
});
});

Related

Make ajax call to send data onclick event in div

I have a div, which shows Rate me section. i.e. Five stars. When the user click on it, the rating value gets prompted.
<div class="rateit bigstars" id="rateit99" data-rateit-starwidth="32" data-rateit-starheight="32" onclick="alert($('#rateit99').rateit('value'))">
</div>
In here rather than an alert, I want to make an ajax call, which sends(post data) Rated value to data.php file.
How can it be done?
I don't understand what's on your HTML code, but i can understand what you are trying to achieve.
First clean your HTML code to make it easier to read for the purpose.
Here is an example of how you can receive the data and pass it using ajax
// Use the id of your trigger element
$('#submit').click(function() {
// Make your datastring (you can get other values with var a = $('#id').val();
var dataString = 'value1='+ value1 + '&value2=' + value2 ;
$.ajax({
type: "POST",
url: "data.php",
data: dataString,
cache: false,
success: function(data)
{
// handle the result
}
});
});

Get response from ajax post form call when using data which is displayed using AJAX

I have a dropdown box, and when it changed, i will display a table containing information in the database using JQuery. Now that one is working good. In the same time, I want to apply the "edit in place" to that table. When I clicked a row, then I am able to change the value of the row,however, the data is not change when I submit the new value. I have to refresh my page and then the value will be updated. I suspect it is because of the table which is called using JQuery. But here is the codes. I am using this function to display the table of information:
function loadData(page){
var dataString = "";
dataString = "page="+page;
$.ajax({
type: "POST",
url: "load_data.php",
data: dataString,
success: function(msg){
$("#container").ajaxComplete(function(event, request, settings)
{
$("#container").html(msg);
});
}
});
}
I am using this code to apply "edit in place" which is currently working, but the only thing which is not working is when I want to reload the table with the new value.
$(".edit_tr").live('click',function(){
var ID=$(this).attr('id');
$("#first_"+ID).hide();
$("#first_input_"+ID).show();
var first=$("#first_input_"+ID).val();
}).live('change', function(){
var ID=$(this).attr('id');
var first=$("#first_input_"+ID).val();
var dataString = 'id='+ ID +'&thename='+first;
var initName = $("#hidden_first_input_"+ID).val();
$.ajax({
type: "POST",
url: "edit_page.php",
data: dataString,
cache: false,
success: function(html){
alert(html); // the alert is not coming. even put any process, nothing happen
}
});
});
But the values is updating into the database. I have to refresh, and call the table one more time using JQuery then the value will be updated. Or I can click the paging, then it will be correct. ANy idea why is this happening? Thank you in advance!

Form Validation when Input field is in HTML table and its type is "hidden"

I have a working code to change the colors of table cells when clicked on a colored button and when the mouse is dragged on table cell all the cells involved in the drag gets that color, here is the code http://jsfiddle.net/28SMv/76/ ,
Now i want to do form validation like when the first table cell gets a color i want to echo out value and send it to database, i am not able to set the table cell values to the selected color, please help!
Try it!
Show line and column id and value to store in your database.
Live demo
To save data use:
var Params = { identificador: identificador, color : color };
$.ajax({
url: 'pagetosave.php',
type: 'post',
data: Params,
success: function (data) {
alert('saved...');
}
});
Replace it on each command.
Will be triggered once for each ....
your php page will receive two parameters.... identificador e color.
You could try like this:
$('our_table td').click(function(){
$(this).css('background-color', selectedColor);
alert($(this).children("input").val());
$.ajax({
url: "add-product.php",
type: "post",
data: $(this).children("input").val().serialize(),
error: function(data){
alert("There was an error while inserting into the database. );
},
success: function(data) {
Display_Load();
$("#content").load("pagination_data.php?page=1", function() {
Hide_Load()
});
}
});
});
It doesn't seem to be letting me do the alert in Fiddle, but once you can get the variable, just do an AJAX call to update a database somewhere.
Let me know if you need more help.

jQuery Droppable - Make an Update Statement after an element gets dropped

I want to do an update statement in my database, after an element gets dropped on a jQuery UI droppable element.
$("#pictures th div").droppable({drop: function(ev, ui) {
alert('You filled this box with a picture');
var this_id = $(ui.draggable).attr("alt");
var draggableId = ui.draggable.attr("id");
}
I know how to get the information (see the code above) I need, but how can I put them now into the database ?
Thank you !
At this point, you can use jQuery's $.post() method to post to a PHP file you've written. In the $.post(), you can pass the ids you would like to have written to your database.
So something like this:
$.post("/save.php", { imageId: this_id, draggedId: draggableId }, function (data) {
alert("success!");
});
Post the variable values to other page lyk this:
$.ajax({
type: "POST",
url: "data.php",
data: "Cat=" + id + "&Wid=" + WID
});
and then on data.php page get the values lyk this:
$Cat=$_POST['Cat'];
$WID=$_POST['Wid'];
simply store them in database by using insert query,hope it will help you.

jQuery/Ajax - Click to reveal

I want to basically create a link which says:
Click here to show contact information
Upon clicking it, it will ping a script via an ajax request, the ajax request will look up the user table where the ID is what is contained in the alt tag, it will return a certain field from the database and then the div will change from this link, to a contact number.
I'm sure some of you have seen this done before, for example:
Click to see persons phone number
They click it, and it changes to their phone number.
How would I go about doing this? I want to do it using ajax instead of having the phone number in the source code, because that really defeats the purpose of them having to click to reveal if bots can get it from the source code.
Thanks :)
Somethign along the lines of
$("#reveal").click(function(){
$.get('getphoneNumber.php',{id:$(this).attr('alt')}, function(data) {
$('#reveal').html(data);
});
});
with a php script called getphoneNumber.php that accepts a get parameter of id
Try this one
$('#reveal').click(function () {
var th = $(this);
$.get('/get-the-phone-number', { id: th.attr('alt') }, function (response) {
th.text(response);
});
});
Also, I'd recommend you put the id number inside a data-contact-id attribute and access it via th.data('contact-id') instead of using the alt attribute. Ignore me if you have other reasons to do this.
$("#reveal").live('click',function(event) {
var link = $(this).attr('alt');
var dataString = 'alt=' + link ;
$.ajax({
type: "POST",
url: "url",
cache:false,
data: dataString,
success: function(data){
this.href = this.href.replace(data);
}
});
}
Click here to show contact information
<div id="myHiddenDiv"></div>
$("#reveal").click(function(){
$.get("test.php", { id: $(this).attr("alt") },
function(data){
$("#myHiddenDiv").html(data);
$("#myHiddenDiv").show();
});
});
This example works assuming you've only got one of these "plugins" on your site, if you'll have multiple, use this:
Click here to show contact information
<div class="myHiddenDiv"></div>
$(".reveal").click(function(){
var divSelector = $(this).next("div");
$.get("test.php", { id: $(this).attr("alt") },
function(data){
divSelector.html(data);
divSelector.show();
});
});

Categories