I got a problem in ajax I can't add information on mysql so here's what I got:
a index.php file with a table form
<form method="post" name="form" action="">
<textarea style="width:500px; font-size:14px; height:60px; font-weight:bold; resize:none;" name="content" id="content" ></textarea><br />
<input type="submit" value="Post" name="submit" class="submit_button"/>
</form>
and a insert.php file:
<?php
include('config.php');
$content=mysql_real_escape_string($_POST['content']);
$query=mysql_query("INSERT INTO chat(ChatId,ChatText) VALUES('','$content') ");
echo $content;
?>
I leave there the echo $content; because it helps to understand my problem. So... When i write something in my box and I click on submit to insert the information into my sql table It dosen't insert so I leave there the echo code because I'm sure the information reach to my insert.php file.. so I don't really understand why the information is not inserted because the information comes. Any help?
ajax part:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval(function(){
$("#ChatMessages").load("msgs.php");
},1000);
});
</script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".submit_button").click(function() {
var textcontent = $("#content").val();
var dataString = 'content='+ textcontent;
if(textcontent=='')
{
alert("Enter some text..");
$("#content").focus();
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<span class="load">Loading..</span>');
$.ajax({
type: "POST",
url: "insert.php",
data: dataString,
cache: true,
success: function(html){
$("#show").after(html);
document.getElementById('content').value='';
$("#flash").hide();
$("#content").focus();
}
});
}
return false;
});
});
</script>
Related
As the title says, i have try many times to get it working, but without success... the alert window show always the entire source of html part.
Where am i wrong? Please, help me.
Thanks.
PHP:
<?php
if (isset($_POST['send'])) {
$file = $_POST['fblink'];
$contents = file_get_contents($file);
echo $_POST['fblink'];
exit;
}
?>
HTML:
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function() {
$("input#invia").click(function(e) {
if( !confirm('Are you sure?')) {
return false;
}
var fbvideo = $("#videolink").val();
$.ajax({
type: 'POST',
data: fbvideo ,
cache: false,
//dataType: "html",
success: function(test){
alert(test);
}
});
e.preventDefault();
});
});
</script>
</head>
<div style="position:relative; margin-top:2000px;">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<input id="videolink" type="text" name="fblink" style="width:500px;">
<br>
<input id="invia" type="submit" name="send" value="Get Link!">
</form>
</div>
</html>
Your Problem is that you think, that your form fields are automatic send with ajax. But you must define each one into it.
Try this code:
<script>
$(document).ready(function() {
$("input#invia").click(function(e) {
if( !confirm('Are you sure?')) {
return false;
}
var fbvideo = $("#videolink").val();
$.ajax({
type: 'POST',
data: {
send: 1,
fblink: fbvideo
},
cache: false,
//dataType: "html",
success: function(test){
alert(test);
}
});
e.preventDefault();
});
});
</script>
Instead of define each input for itself, jQuery has the method .serialize(), with this method you can easily read all input of your form.
Look at the docs.
And maybe You use .submit() instead of click the submit button. Because the user have multiple ways the submit the form.
$("input#invia").closest('form').submit(function(e) {
You must specify the url to where you're going to send the data.
It can be manual or you can get the action attribute of your form tag.
If you need some additional as the send value, that's not as input in the form you can add it to the serialized form values with formSerializedValues += "&item" + value;' where formSerializedValues is already defined previously as formSerializedValues = <form>.serialize() (<form> is your current form).
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function() {
$("#invia").click(function(e) {
e.preventDefault();
if (!confirm('Are you sure?')) {
return false;
}
// Now you're getting the data in the form to send as object
let fbvideo = $("#videolink").parent().serialize();
// Better if you give it an id or a class to identify it
let formAction = $("#videolink").parent().attr('action');
// If you need any additional value that's not as input in the form
// fbvideo += '&item' + value;
$.ajax({
type: 'POST',
data: fbvideo ,
cache: false,
// dataType: "html",
// url optional in this case
// url: formAction,
success: function(test){
alert(test);
}
});
});
});
</script>
</head>
<body>
<div style="position:relative; margin-top:2000px;">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<input id="videolink" type="text" name="fblink" style="width:500px;">
<br>
<input id="invia" type="submit" name="send" value="Get Link!">
</form>
</div>
</body>
Well I've been having this issue now where my ajax form doesn't show my response value which I enter in the text field. I can't seem to understand why it doesn't show my post value at all.
reset.php
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script>
function submitdata()
{
var email=document.getElementById( "emailfield" );
var datastring='email='+ emailfield;
{
$.ajax({
url: "work2.php",
type:'POST',
data:datastring
cache:false
success: function (html){
$('#msg').html();
}
});
});
</script>
</head>
<body>
<form method="POST">
E-mail: <input type="text" id="emailfield"><br>
<input value="submit" type="submit" onclick="return submitdata()">
</form>
<p id="msg"><p/>
</body>
</html>
work2.php
<?php
$email=$_POST['email'];
echo "response $email";
?>
There are few things you are missing here:
1) You are NOT getting the value from user.
Use:
var emailfield = document.getElementById( "emailfield" ).value;
OR simply
$("#emailfield").val();
2) You are not preventing the default submit process.
Use:
e.preventDefault();
I went ahead and wrote this for you. Just copy all the file and you'll see it working. Hope it helps!
<?php
$data = array();
if(isset($_POST['email'])){
$data = $_POST['email'];
echo json_encode($data);
die();
}
?>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form>
E-mail: <input type="text" id="emailfield"><br>
<input value="submit" type="submit">
</form>
<p id="msg"><p/>
<script type = "text/javascript">
$("form").on("submit", function(e){
e.preventDefault();
var emailfield = $("#emailfield").val();
var email ='email='+ emailfield;
$.ajax({
url: "testing.php",
method: "POST",
dataType: "json",
data: {email: email},
success: function (result) {
alert("result: " + result);
console.log(result);
$("#msg").html(result);
}
});
});
</script>
</body>
</html>
You didn't take value, it's element object, change here
var emailfield = document.getElementById( "emailfield" ).value;
Also put html with value
$('#msg').html(html);
Try it like this.
<html>
<head>
<body>
E-mail: <input type="text" id="emailfield"><br>
<button type="button">Submit</button>
<p id="msg"><p/>
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#emailfield").on("click",function(){
var value = $("#emailfield").val();
$.ajax({
method: "POST",
url: "work2.php",
data: { email: value }
})
.done(function( data ) {
$('#msg').html(data);
});
});
});
</script>
</body>
</html>
I want to display the comment content by fill in the password inputted in the comment form by the end-user but the ajax submit button is not working. Is their any conflict?
Please help me to improve this code.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function() {
var password = $("#search").val();
if (password != "") {
$("#result").html("<img alt="ajax search" src='ajax-loader.gif'/>");
$.ajax({
type: "post",
url: "search.php",
data: "password=" + password,
success: function(data){
$("#result").html(data);
$("#search").val("");
}
});
}
}
$("#button").click(function(){
search();
});
$('#search').keyup(function(e) {
if (e.keyCode == 13) {
search();
}
});
});
</script>
<body>
<?php if(!$userdata->data->ID):?>
<form method="post" action="">
<input type="password" id="search" placeholder="This is a secret question." />
<input type="button" id="button" value="Submit" />
<ul id="result"></ul>
</form>
<?php endif?>
</body>
the same problem but i have solution
it's weird a little bit but
the solution is to remove type="button"
and use type="submit"
Problem 1: My content overlaps itself twice after I post some data back to the same page using jQuery.ajax(). The reason why I'm posting data back to the same page is because I need to pass my JavaScript values to the PHP side.
Question: How do I edit my code such that there will only be 1 copy of my content, before and after posting of data to the same page?
Problem 2: You may have noticed there is a $("#test").html(data); in my bingo function and a <span id="test"></span> in my body. I can't seem to remove them if not the passing of Javascript values to the PHP side would not work as shown by my print_r().
Question: Is there any way I can remove them but still pass my values from JavaScript to PHP using jQuery.ajax()?
bingo.php
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<?php
if (!isset($_POST['varA']) && !isset($_POST['varB']))
{
?>
<script type="text/javascript">
$(document).ready(bingo);
function bingo()
{
jQuery.ajax({
type: "POST",
data: {varA: "123", varB: "456"},
success: function(data)
{
alert("POST to self is successful!");
$("#test").html(data);
}
});
}
</script>
<?php
}
else
{
print_r($_POST['varA']);
echo " - ";
print_r($_POST['varB']);
}
?>
</head>
<body>
<input type="text" value="meow"/>
<span id="test"></span>
</body>
</html>
Omg that is so messy! Try the following code anyway:
<?php
if (isset($_POST['varA']) && isset($_POST['varB'])) {
print_r($_POST['varA']);
echo " - ";
print_r($_POST['varB']);
} else {
?>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(bingo);
function bingo()
{
jQuery.ajax({
type: "POST",
data: {varA: "123", varB: "456", ajax: true},
success: function(data)
{
alert("POST to self is successful!");
$("#test").html(data);
}
});
}
</script>
</head>
<body>
<input type="text" value="meow"/>
<span id="test"></span>
</body>
</html>
<?php
}
?>
If you wish to keep your ! in your conditions, you can do it the other way round also.
<?php
if (!isset($_POST['varA']) && !isset($_POST['varB'])) {
?>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(bingo);
function bingo()
{
jQuery.ajax({
type: "POST",
data: {varA: "123", varB: "456"},
success: function(data)
{
alert("POST to self is successful!");
$("#test").html(data);
}
});
}
</script>
</head>
<body>
<input type="text" value="meow"/>
<span id="test"></span>
</body>
</html>
<?php
}
else {
print_r($_POST['varA']);
echo " - ";
print_r($_POST['varB']);
}
?>
I'm using jQuery's .ajax() to post to a PHP file called process.php. Process.php has a lot of code in it, but for simplicity's sake, let's just say it contains <?php echo 'hello'; ?>.
Is this the proper jQuery to insert process.php's results into div.results? :
$.get('process.php', function(data) {
$('.results').html(data);
});
So far it doesn't seem to be working.
Here's the HTML/Javascript file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("form#form").submit(function() {
var username = $('#username').attr('value');
$.ajax({
type: 'POST',
url: 'process.php',
data: 'username=' + username,
success: function() {
$('form#form').hide(function() {
$.get('process.php', function(data) {
$('.results').html(data);
});
});
}
});
return false;
});
});
</script>
</head>
<body id="body">
<form id="form" method="post">
<p>Your username: <input type="text" value="" name="username" id="username" /></p>
<input type="submit" id="submit" value="Submit" />
</form>
<div class="results"></div>
</body>
</html>
Here's process.php (greatly simplified):
<?php
/* get info from ajax post */
$username = htmlspecialchars(trim($_POST['username']));
echo $username;
?>
If you simply want to place the resulting string back into an element, use load().
$('.results').load('process.php');
However, looking at your code...
$.ajax({
type: 'POST',
url: 'process.php',
data: 'username=' + username,
success: function() {
$('form#form').hide(function() {
$.get('process.php', function(data) {
$('.results').html(data);
});
});
}
});
...shows you have misunderstood something. The correct anonymous function to assign to the success callback would be...
function(data) {
$('form#form').hide()
$('.results').html(data);
}
You could try something like this.
function ajax_login() {
if ($("#username").val()) {
$.post("/process.php", { username : $("#username").val() }, function(data) {
if (data.length) {
$("#login_form").hide();
$("#login_result").html(data);
}
})
} else {
$("#login_result").hide();
}
Then in process.php just echo out some text if the post sucesses.
process.php =>
if (isset($_POST['username'])
{
echo 'hello '.$_POST['username'];
}