So I've been running into some problems when trying to send special characters though an ajax call.
<textarea id="area" cols="70" rows="30"></textarea>
<button id="submit">Submit</button>
<script>
$('#submit').click(function (e) {
e.preventDefault();
var info = $('#area').val();
$.ajax({
type: "POST",
url: 'pages/assignments/response.php',
data: {area: info},
success: function (response) {
console.log(response);
}
});
});
</script>
response.php:
if (!empty($_POST['area'])) {
$data = $_POST['area'];
echo $data;
};
Related
My ajax successfully return the value but my problem is I can't use the value to my function. How do I convert this div to a value?
<?php
echo $ajax_user_id = '<div id="result"></div>'; //value can display here
getName($ajax_user_id); //value wont work here
?>
<form method="post" id="registerSubmit">
<input type="text" name="user_id" id="user_id">
<button id="submit" type="submit">Submit</button>
</form>
<script>
$(document).ready(function(){
$("#registerSubmit").submit(function( e ) {
e.preventDefault();
$.ajax({
url: "test.php",
method: "post",
data: $(this).serialize(),
dataType: "text",
success: function(Result) {
$('#result').text(Result)
}
})
});
});
</script>
You can't use it that way.because jQuery is a scripting language which runs in browser when DOM is fully loaded and elements are available to make selectors.While php is server side language which runs on server way before page load.anyway to fulfill your need you can try something like this.
<form method="post" id="registerSubmit">
<input type="text" name="user_id" id="user_id">
<button id="submit" type="submit">Submit</button>
</form>
<script>
$(document).ready(function(){
$("#registerSubmit").submit(function( e ) {
e.preventDefault();
$.ajax({
url: "test.php",
method: "post",
data: $(this).serialize(),
dataType: "text",
success: function(Result) {
$('#result').text(Result);
getNameAjax(Result);
}
})
});
});
function getNameAjax(val)
{
$.ajax({
type: "POST",
url: GetNameAjax.php,
data:{'user_id':val},
success: function(res){
$('#name').html(res);
}
});
}
</script>
GetNameAjax.php file you can write like this
$ajax_user_id=$_POST['user_id'];
function getName($ajax_user_id)
{
return "name on the basis of id";
}
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.
Been looking at some tutorials, since I'm not quite sure how this works (which is the reason to why I'm here: my script is not working as it should). Anyway, what I'm trying to do is to insert data into my database using a PHP file called shoutboxform.php BUT since I plan to use it as some sort of a chat/shoutbox, I don't want it to reload the page when it submits the form.
jQuery:
$(document).ready(function() {
$(document).on('submit', 'form#shoutboxform', function () {
$.ajax({
type: 'POST',
url: 'shoutboxform.php',
data: form.serialize(),
dataType:'html',
success: function(data) {alert('yes');},
error: function(data) {
alert('no');
}
});
return false;
});
});
PHP:
<?php
require_once("core/global.php");
if(isset($_POST["subsbox"])) {
$sboxmsg = $kunaiDB->real_escape_string($_POST["shtbox_msg"]);
if(!empty($sboxmsg)) {
$addmsg = $kunaiDB->query("INSERT INTO kunai_shoutbox (poster, message, date) VALUES('".$_SESSION['username']."', '".$sboxmsg."'. '".date('Y-m-d H:i:s')."')");
}
}
And HTML:
<form method="post" id="shoutboxform" action="">
<input type="text" class="as-input" style="width: 100%;margin-bottom:-10px;" id="shbox_field" name="shtbox_msg" placeholder="Insert a message here..." maxlength="155">
<input type="submit" name="subsbox" id="shbox_button" value="Post">
</form>
When I submit anything, it just reloads the page and nothing is added to the database.
Prevent the default submit behavior
$(document).on('submit', 'form#shoutboxform', function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'shoutboxform.php',
data: $(this).serialize(),
dataType: 'html',
success: function(data) {
alert('yes');
},
error: function(data) {
alert('no');
}
});
return false;
});
Use the following structure:
$('form#shoutboxform').on('submit', function(e) {
e.preventDefault();
// your ajax
}
Or https://api.jquery.com/submit/ :
$("form#shoutboxform").submit(function(e) {
e.preventDefault();
// your ajax
});
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;
?>
Been asking a lot of jquery questions lately, I'm trying my best to learn a lot about it.
Anyway, I am sending an Ajax HTTP request to a PHP page in order to make a login form without requiring a page refresh. Now since it may take some time to connect the database and get the login information etc..
Now I do have loading as a .html but how can I hide the loading data once data has loaded?
Tried to use a few functions but didn't seem to work.
Thanks so far, this site has helped me a lot through the learning process.
Here's the JavaScript:
$(document).ready(function() {
// Make a function that returns the data, then call it whenever you
// need the current values
function getData() {
return {
user_login: $('#user_login').val(),
pass_login: $('#pass_login').val()
}
}
function loading(e) {
$('#content').html('Loading Data');
}
function check(e) {
e.preventDefault();
$.ajax({
url: 'ajax/check.php',
type: 'post',
data: getData(), // get current values
success: function (data) {
$('#content').hide('slow');
alert(9);
}
});
}
// Don't repeat so much; use the same function for both handlers
$('#field').keyup(function(e) {
if (e.keyCode == 13) {
var username = $('#user_login').val();
loading(e);
check(e);
}
});
$('#submit').click(function(e) {
if (e.keyCode != 13) {
loading(e);
check(e);
}
});
});
Here is the HTML:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/login.js"></script>
<div id="content"> Loading...</div>
<div id="field">
<input type='text' name='user_login' id='user_login' placeholder='eg: Mark#gmail.com'> <br>
<input type='password' name='pass_login' id='pass_login'> <br>
<input type="submit" name="submit" id="submit" value="Login">
</div>
function check(){
$.ajax({
url: 'ajax/check.php',
type: 'post',
error: function(){
alert('An error has occured.');
},
beforeSend: function(){
$('#content').show('slow').html('Loading');
//loading(e);
},
data: {user_login: $('#user_login').val(),pass_login: $('#pass_login').val()}, // get current values
success: function (data) {
$('#content').hide('slow');
alert(9);
}
});
}
$('#submit').click(function(){
check();
});
$('#field, #field input').keyup(function(e){
var username = $('#user_login').val();
if (e.keyCode == 13) {
check();
}
});
Markup
<div id="field">
<input type='text' name='user_login' id='user_login' placeholder='eg:Mark#gmail.com'> <br>
<input type='password' name='pass_login' id='pass_login'> <br>
<input type="button" name="submit" id="submit" value="Login">
</div>
Good luck!!!
First of all, i'm not sure if your code will return a success. This code will help you find out if the response is not successfully. If you get a browser alert. It means you have a server side error. Its either the url path is wrong or your server response statuscode is 500 (Internal error).
$.ajax({
url: 'ajax/check.php',
type: 'post',
error: function(){
alert('An error has occured.');
},
beforeSend: function(){
$('#content').show('slow').html('Loading');
//loading(e);
},
data: getData(), // get current values
success: function (data) {
$('#content').hide('slow');
alert(9);
}
});
Refactoring your code entirely will look like this. Choose first or second:
$.ajax({
url: 'ajax/check.php',
type: 'post',
error: function(){
alert('An error has occured.');
},
beforeSend: function(){
$('#content').show('slow').html('Loading');
//loading(e);
},
data: {user_login: $('#user_login').val(),pass_login: $('#pass_login').val()}, // get current values
success: function (data) {
$('#content').hide('slow');
alert(9);
}
});