Update textarea From User Input by jQuery and Ajax - php

I am trying to update a value in my php file and present it in a textarea using jquery and ajax. to make it short, I have:
1- A Form with User Input and Submit button and a Text area
2- A PHP file called data.php
3 -and the html file
Here is my codes
<form>
<input type="text" name="name"><br>
<textarea name="wstxt" id="wstxt" cols="40" rows="5"></textarea>
<input type="button" name="txta-update" id="txta-update" value="Update Textarea" />
</form>
PHP is as simple as:
<?php
$name = "Jordano";
echo $name;
and here is the jquery
$(document).ready(function() {
$('#txta-update').click(function() {
$.ajax({
type: "GET",
url: "data.php",//get response from this file
success: function(response){
$("textarea#wstxt").val(response);//send response to textarea
}
});
});
});
can you please tell me how I can send the input value to php and update the textarea from new value?
Thanks
Update

Send data like this
data:{name:$('input[name="name"]').val()}
you js file becomes
$.ajax({
type: "GET",
url: "data.php", //get response from this file
data:{name:$('input[name="name"]').val()},
success: function (response) {
$("textarea#wstxt").val(response); //send response to textarea
}
});
or
$(document).ready(function () {
$('#txta-update').click(function () {
var name_val = $('input[name="name"]').val();
$.ajax({
type: "GET",
url: "data.php", //get response from this file
data: {
name: name_val
},
success: function (response) {
$("textarea#wstxt").val(response); //send response to textarea
}
});
});
});
To get value in PHP
<?php
$name = $_GET['name'];
echo $name;
?>

Related

how to get the data from ajax request then use it in php conditional statemtn

I want to create an ajax post request that gets the value of the radio button then use it in a PHP conditional statement.
So far i have tried this code (all code is from one php file):
$(document).ready(function () {
$('.radio-buttons input[type="radio"]').click(function(){
var subject= $(this).val();
$.ajax({
url: 'home.php',
type: 'POST',
data: {
'subject': subject
},
success: function(response) {
alert(response);
}
});
});
});
<form id="form1" method="POST" class="radio-buttons ">
<input class="radio-filter" type="radio" name="subject" value="A">A</input>
<input class="radio-filter" type="radio" name="subject" value="B">B</input>
</form>
if (isset($_POST['subject'])) {
echo "Showing!";
}
the alert message shows the value of the radio button when I clicked them but the echo in PHP condition is not showing.
You are using alert(subject); which will just alert the value of the radio button as you've mentioned.
Change that line to alert(response); to alert the response on success.
The alert(subject) needs to be alert(response).
Change alert(subject) to alert(response)
because 'subject' is what you have been sent! so after it 'subject' will receipt by your PHP process and returned as response(echo "Showing") on value of the function an object success: function(response)
and alert the response to see data/text "Showing"
$(document).ready(function () {
$('.radio-buttons input[type="radio"]').click(function(){
var subject= $(this).val();
$.ajax({
url: 'home.php',
type: 'POST',
data: {
'subject': subject
},
success: function(response) {
alert(response);
}
});
});
});

How to access PHP super global post variable after AJAX request

I have a form in index.php:
<form action="submit.php" method="post" id="registerSubmit">
<input type="text" name="name" id="name" placeholder="Name">
<button id="submit" type="submit">Submit</button>
</form>
<div id="result"></div>
When the form is submitted it gets intercepted by Jquery:
$(document).ready(function(){
$("#registerSubmit").submit(function( e ) {
e.preventDefault();
$.ajax({
url: "load.php",
method: "post",
data: "",
dataType: "text",
success: function(Result) {
$('#result').text(Result)
}
})
});
});
However, when the AJAX request gets sent to load.php. I am not able to access the super global post variable:
<?php
$name = $_POST['name'];
echo $name;
?>
I'm able to access the form data through Jquery, but I didn't want to have to parse JSON to send to Mysql. How can I access the super global post form data after the AJAX request and if it's not accessible, what are best practices for sending php form data through Ajax to Mysql?
You need to pass data through AJAX call
$(document).ready(function(){
$("#registerSubmit").submit(function( e ) {
e.preventDefault();
$.ajax({
url: "load.php",
method: "POST",
data: $(this).serialize(), // Send all form data to AJAX
dataType: "text",
success: function(Result) {
$('#result').text(Result)
}
})
});
});
You need to pass data through AJAX call When the form is submitted.
$(document).ready(function(){
$("#registerSubmit").submit(function( e ) {
e.preventDefault();
var name = document.getElementById("name").value;
var dataString ='name=' + name;
$.ajax({
url: "load.php",
method: "post",
data: "dataString",
dataType: "text",
success: function(Result) {
$('#result').text(Result)
}
})
});
});
In the load.php page
<?php
$name = $_POST['name'];
echo $name;
// code for insert in mysql with PHP.
?>

On button click perform ajax for sending values in forms are in while loop

How can I send input values through AJAX on button click? My code is below. Thanks in advance.
while
{
<form class="commentform">
<input type="hidden" class="proid" name="proid" value="<?=$rr['id']?>">
<input type="text" class="form-control" name="comval" placeholder="Write a comment.." autocomplete="off">
<button class="btn btn-post" type="button">Post</button>
</div>
</form>
}
$(document).ready(function() {
$(document).on('click', '.btn-post', function(){
var thePostID = $(this).val;
$.ajax({
url: 'fetch_comments.php',
data: { postID: thePostID },
type: 'POST',
success: function() {
alert(data);
}
});
Firstly, the correct method is $(this).val(), not just $(this).val.
Secondly, you can simplify your code by getting the data from the closest form element using serialize(). Try this:
$(document).on('click', '.btn-post', function() {
var $form = $(this).closest('form');
$.ajax({
url: 'fetch_comments.php',
data: $form.serialize(),
type: 'POST',
success: function() {
alert(data);
}
});
});
$("form").serialize();
Serialize a form to a query string, that could be sent to a server in an Ajax request.

Not able to display ajax response in already created div tag

Hi all i am trying to show ajax response in already created div but i am not able to show. Can you please help me where i am doing wrong.
<form id="coupon" action="">
<label>Have a Coupon?</label>
<input name="couponcode" id="couponcode" value="" />
<input type="submit" value="Apply" />
</form>
<div id="result"></div>
Now my Jquery function is below one.
$("#coupon").submit(function (event) {
/* Stop form from submitting normally */
event.preventDefault();
/* Clear result div*/
$("#result").html('');
/* Get some values from elements on the page: */
var values = $(this).serialize();
/* Send the data using post and put the results in a div */
$.ajax({
url: "coupon.php",
type: "post",
data: values,
success: function (response) {
$('#result').html(response);
}
});
});
My coupon.php file code is below one.
<?php
if (!empty($_POST)) {
$coupon = $_POST['couponcode'];
//json_encode(array('coupon' => $coupon));
echo $coupon;
}
?>
The code needs to concatenate the response in the markup written to the div.
$.ajax({
url: "coupon.php",
type: "post",
data: values,
success: function (response) {
$('#result').html("<div id='message'>"+ response+"</div>");
}
});
try to use
$.ajax({
url: "coupon.php",
type: "post",
data: values,
success: function (response) {
$('#result').text(response);
}
});
default method for form submit is GET but you are sending values through post. Add method=post to form tag
<form id="coupon" action="">
<label>Have a Coupon?</label>
<input name="couponcode" id="couponcode" value="" />
<input type="submit" value="Apply" />
</form>
<div id="result"></div>
<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script>
jQuery(document).ready(function($) {
$("#coupon").submit(function (event) {
/* Stop form from submitting normally */
event.preventDefault();
/* Clear result div*/
$("#result").html('');
/* Get some values from elements on the page: */
var values = $(this).serialize();
/* Send the data using post and put the results in a div */
$.ajax({
url: "coupon.php",
type: "post",
data: values,
success: function (response) {
$('#result').html(response);
}
});
});
});
</script>
Its working fine when i tried this

Processing Jquery Post with PHP

I've been at this for hours, and i'm at a complete loss.... I've tried everything I can but the problem is that i'm not very familiar with Jquery, this is the first time I've ever used it.... Basically, i'm attempting to pass form data to a php script, and then return a variable which will contain the source code of a webpage.
Here is the jquery:
$("button").click(function(){
hi = $("#domain").serialize();
var page;
$.ajax({
type: "POST",
url: "webcrawler.php",
data: hi,
//dataType: "text",
success: function(data){
page = data;
document.write(page);
}
});
});
Here is the html it references:
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="domain" id="domain_label">Name</label>
<input type="text" name="domain" id="domain" size="30" value="" class="text-input" />
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
Here is the PHP that process it:
$search = $_POST["domain"];
if(!$fp = fopen($search,"r" )) {
return false;
}
fopen($search,"r" );
$data = "";
while(!feof($fp)) {
$data .= fgets($fp, 1024);
}
fclose($fp);
return $data;
?>
I think the variable $search is blank, but is that because i'm not sending it correctly with jquery or receiving it correctly with php? Thanks!
Well, when you serialize form data using jQuery, you should serialize the <form>, not the <input> field.
So try this:
$("button").click(function() {
var formData = $('form[name="contact"]').serialize();
var page;
$.ajax({
type: "POST",
url: "webcrawler.php",
data: formData,
success: function(data) {
page = data;
document.write(page);
}
});
});
See you have to do several things:
$("form[id='contact_form']").submit(function (e) {//<---instead click submit form
e.preventDefault(); //<----------------you have to stop the submit for ajax
Data = $(this).serialize(); //<----------$(this) is form here to serialize
var page;
$.ajax({
type: "POST",
url: "webcrawler.php",
data: Data,
success: function (data) {
page = data;
document.write(page);
}
});
});
So as in comments:
Submit form instead button click
Stop the form submission otherwise page will get refreshed.
$(this).serialize() is serializing the form here because here $(this) is the form itself.

Categories