We Keep Coding

Simple ajax post not working

I am an AJAX noob. I was writing code to understand it, but no matter what I couldn't make it work. Textarea in the code should update comment_area of comment of id=218 when user pressed "save" button. There is probably a mistake in my AJAX code which I couldn't find.
My AJAX script:
<script type="text/javascript">
$(document).ready(function() {
$("#save").submit(function() {
var text = $('#breaking_news_text').val();
var id = 218,
$.ajax({
type: "POST",
url: "update.php",
data: {comment_area:text , id:id}
success: function() {
alert("sucess");
}
});
});
});
</script>
<div id="b_news">
<form method="post" action="">
<div>
<div>
<textarea id="breaking_news_text" class="breaking_news_text" rows="6" cols="50" placeholder="Add text here..." required></textarea>
</div>
</div>
<div>
<input type="button" id="save" value="Save Changes"/>
</div>
</form>
</div>
My update.php file
<?php
include("./inc/connect.inc.php");
if(isset($_POST['comment_area']))
{
$update = mysqli_real_escape_string($mysqli, $_POST['comment_area']);
$sql = "update comments set comment_area='$update' Where id='".$_POST['id']."'";
$result = mysqli_query($mysqli, $sql);
}
?>

The submit works on a form and you have it on the input element.
Try:
$("#b_news form").submit(function(evt) {
evt.preventDefault(); //this is required to stop the default form submission
Documentation can be found here
Also, if these dom elements are dynamically loaded, you might want to read up on event delegation

My ajax code can't send values to other php page [duplicate]

This question already has answers here:
JavaScript: Inline Script with SRC Attribute?
(3 answers)
Closed 6 years ago.
I tested my update.php file and it works perfect and there is not any error when i checked my script via console . Only problem in here . Ajax can't send values "id" "comment_area" to update.php file . What is the mistake in here ?
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js">
$(document).ready(function() {
$("#b_news").submit(function(evt) {
evt.preventDefault();
var text = $('#breaking_news_text').val();
var id = 21;
$.ajax({
type: "POST",
url: "update.php",
data: {
comment_area: text,
id: id
},
success: function() {
alert("sucess");
}
});
});
});
</script>
<form id="b_news" method="post" action="">
<div>
<div>
<textarea id="breaking_news_text" class="breaking_news_text" rows="6" cols="50" placeholder="Add text here..." required></textarea>
</div>
</div>
<div>
<input type="button" id="save" value="Save Changes" />
</div>
</form>
<?php
include("./inc/connect.inc.php");
$id=$_POST['id'];
$update = $_POST['comment_area'];
$sql = "update comments set comment_area='$update' Where id='$id'";
$result = mysqli_query($mysqli, $sql)or die("error");
?>

Seems to me that your button simply can't submit the form because of its type.
Try to change the type attribute of the button to submit this way :
<input type="submit" id="save" value="Save Changes"/>

You have two problems.
First you can only have one script per script element. The script can either be referenced by the src attribute or it can be between the start and end tags.
If you try to do both, as you are here, then only the src will be respected.
Use separate <script> elements for your two scripts.
Second, you have no way to trigger the submit event. The submit event will trigger when the form is submitted, but you can't do that from a textarea or a button. Replace the button with a submit button.

Complete Javascript Ajax php confusion

Hi all I am developing a site in Codeigniter and I have a form that I am posting using PHP and this is absolutely fine. However I have a small dropdown on the side of my page which I am using to jump between pages - in order to do this I am simply using a href and passing variables within the URL.
I need to POST some data however when they click on the link. I don't wish to use a button and was wondering whether this could be acheived using an ajax onclick() event?? - the data I need to post however is within the form. The code structure is roughly:
<form action="main/postback" method="post">
<input type="hidden" name="pagereference" value="2" />
<input type="hidden" name="supervariable" value="7" />
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
<div>
<ul>
<li><a href = 'http:localhost/landing'>click me</a></li>
</ul>
</div>
When someone clicks on the link I want to send an Ajax Post request, but In the php file that I am posting the data I want to be able to retrieve data from within the form. Is this possible? if so could someone please provide an example AJAX request and how to retrieve the data in PHP as I am majorly confused. I tried the following:
<li><a onclick='myFunction()'>click me</a></li>
<script type="text/javascript">
function myFunction()
{
var "test";
$.ajax({
type: "POST",
url: "http://localhost/ciproject/assessment/test",
dataType: String,
success: function(msg){
alert( "Data Saved: " + msg ); //Anything you want
}
});
window.alert("TEST");
}
</script>
Any ideas would be much appreciated, many thanks

You will probably run into problems using complete urls (with the domain name) due to CORS so I would recommend removing that, but you can easily do what you want using something like:
<li><a class="postFormLink">click me</a></li>
<script type="text/javascript">
$('.postFormLink').on('click', function() {
$.ajax({
type: "POST",
url: "/ciproject/assessment/test",
data: $('form').serialize(),
success: function(msg){
alert( "Data Saved: " + msg ); //Anything you want
}
});
window.alert("TEST");
}
</script>
If you have more than one form on your page, you should add an ID or a class to target it instead of using $('form').
Note that I have also removed the inline event handler.

Try the following:
<form action="main/postback" method="post" id="form1">
<input type="hidden" name="pagereference" value="2" />
<input type="hidden" name="supervariable" value="7" />
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
<li><a id="clickme">click me</a></li>
<script type="text/javascript">
$(function () {
$("#clickme").click(function () {
var form_data = $('#form1').serialize();
$.ajax({
type: "POST",
dataType: "text",
url: "ciproject/assessment/test",
data: form_data,
success: function(response){
alert('Job well done');
}
})
})
})
</script>

The following should work, if you put it into your ajax options. You will need to identify your form, the easiest way is to use an id.
data: $("#theFormId").serialize()

Stop 2 Instances of an Ajax form on the same page interfering with each other

I've the following form twice on my homepage:
<form id="get-consultation-form" action="javascript:alert('success!');" >
<h3 class="sub-heading">Book a Consultation</h3>
<div id="message"></div>
<div id="fields">
<input type="text" maxlength="" name="Consultation[name]" placeholder="NAME" />
<input type="text" maxlength="" name="Consultation[number]" placeholder="NUMBER" />
<input type="text" maxlength="" name="Consultation[email]" placeholder="EMAIL" />
<button type="submit" class="btn">Submit</button>
</div>
</form>
The form uses jQuery/Ajax/PHP to forward the data via email:
$(document).ready(function() {
$("#get-consultation-form").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "http://novicecoder.co.uk/priestley/consultation-process.php",
data: str,
success: function(msg) {
$(document).ajaxComplete(function(event, request, settings) {
NProgress.set(0.0);
if (msg === 'OK') {
result = '<div class="thanks" id="thanks">Thank you, we will contact you <span>shortly.</span></div>';
$(this).find("#fields").hide();
NProgress.set(0.5);
$("#message").hide();
$("#message").html(result).slideDown(100);
$("#message").html(result);
}
else
{
result = msg;
$("#message").hide();
$("#message").html(result).slideDown(200);
$("#message").html(result);
}
NProgress.set(1.0);
});
}
});
return false;
});
});
The first form is working perfectly, however as you'll see in my working example, the 2nd is not:
My website
Any ideas why this is happening????

IDs are unique.
Try to change form elements to diferent ids.
Or instead use classes.
If you use classes you can use $('.messages-class').closest() inside the form submit() for only interact in the current form.

You can't have an element with the same ID on a page twice. Replace your #get-consultation-form ID with a class, that should solve your issue. This also applies to the elements within the form like #fields and #message.

How to find a sibling element's value using jQuery upon click

I'm trying to find the value of the userid and password in the below HTML using the following jQuery code, but it doesn't return any value. What am I doing wrong?
<div id='mainpane'>
<form id='login' method='post' action='#'>
<p>User Id:<input id='userid' type='text' name='userid'></input></p>
<p>Password:<input id='password' type='text' name='password'></input></p>
<p><input id='submit' type='submit' name='Submit' value='Submit'></input></p>
</form>
<div id="message"></div>
<p>Not a member? Signup</p>
</div>
Here's the jQuery code:
$(document).ready(function() {
$('#login').delegate('input#submit','click',function(){
alert('user id is: '+$(this).parent().parent().find('#userid').html());
var request = $.ajax({
type:"POST",
url:"/login",
data: {userid:$('#userid').text(), password:$('#password').text}
});
});
The alert comes back with an empty data. Appreciate any pointers on what am I doing wrong.
Thanks, Kalyan.

use .val() to retrieve an input's value.
var userid = $("#userid").val();
var pass = $("#password").val();

Just do:
$.post('/login', $('#login').serialize(), function() {});
in place of your $.ajax call :), the .serialize() takes all the form inputs' values and pass them to the server, encoded for you as well :)

You have quite a few issues so here's the corrected code with notes:
jQuery
$(function() {
// same as document.ready
$('#login').submit(function(event){
// runs whenever the form is submitted - either enter or submit button is clicked
event.PreventDefault();
// since the form is submitted via ajax you wil want to keep the page from changing
alert('user id is: '+$('#userid').val());
// no need to reach back through the DOM with .parent() use the ID its the fastest, also you get input values with .val()
$.ajax({
type:"POST",
url:"/login",
data: $('#login').serialize()
// serialize() creates an object of all the form data based on the name attribute and values - very clean
});
});
});
HTML
<div id='mainpane'>
<form id='login' method='post' action=''>
<p>User Id:<input id='userid' type='text' name='userid'/></p>
<p>Password:<input id='password' type='text' name='password'/></p>
<p><input id='submit' type='submit' name='Submit' value='Submit'/></p>
</form>
<div id="message"></div>
<p>Not a member? Signup</p>
</div>
Inputs are self closing.

you try this code
$(document).ready(function() {
$('#login').delegate('input#submit','click',function(){
alert('user id is: '+$(this).parent().parent().find('#userid').val());
var request = $.ajax({
type:"POST",
url:"/login",
data: {userid:$('#userid').val(), password:$('#password').val()}
});
});
});