How do I post some text to a php doc and then the php doc check's it and returns a response?
In this example checks if entered value is "test" then return and alert TRUE else return and alert FALSE.
HTML/javascript (test_php_response.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test_response</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function post_to_php() {
$.post( "test_response.php", function( data ) {
if (data == true){
alert("true");
}else{
alert("false");
}
});
}
</script>
</head>
<body>
<a href="javascript:post_to_php();" class='button'>click_here</a>
<form name="response_form" id="response_form" action="test_response.php" method="POST">
<input id="response_form_textbox" name="response_form_textbox" type="text" >
</form>
</body>
</html>
PHP (test_response.php)
<?php
$text_field = $_POST['response_form_textbox'];
if ($text_field == 'test'){
echo 'true';
}else{
echo 'false';
}
?>
DEMO
----EDIT solved / working version below:-----
HTML/javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test_response</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function post_to_php() {
$.post( "test_response.php", $('#response_form').serialize(), function(data) {
if (data === "true"){
alert("true");
}else{
alert("false");
}
});
}
</script>
</head>
<body>
<a href="javascript:post_to_php();" class='button'>click_here</a>
<form name="response_form" id="response_form" action="test_response.php" method="POST">
<input id="response_form_textbox" name="response_form_textbox" type="text" >
</form>
v.05
</body>
</html>
PHP
<?php
$text_field = $_POST['response_form_textbox'];
if ($text_field == 'test'){
echo 'true';
}else{
echo 'false';
}
?>
You aren't sending any data . The second argument of $.post is for that data but you omitted it.
Thus in your php $_POST will be empty.
The easiest way to send form data is to use serialize()
$.post( "test_response.php", $('#response_form').serialize(), function( data ) {
if (data){
alert("true");
}else{
alert("false");
}
});
Reference:
serialize() docs
$.post() docs
Related
I'm new to JS and i want to receive the value from a variable in JS, send it by post (or ajax) to a PHP file, and see the text display. The thing is i've been trying different ways to do it but i always get a undefined index in php.
My code is below
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PRUEBA AJAX JS PHP HTML</title>
</head>
<body>
<H1>prueba</H1>
<input type="checkbox" name="switch" id="switch" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#switch").change(function ()
{
var checked=$("#switch").attr("checked");
if(checked)
{
$("switch").removeAttr("checked");
console.log("estado apagado switch 1");
var estados="1";
$.post("accion.php", {estado: "david"});
}else
{
$("#switch").attr("checked","checked");
console.log("estado encendido switch 1");
var estados="2";
$.post("accion.php", {estado: "david 2"});
}
});
</script>
</body>
</html>
accion.php
<?php
$est = $_POST['estado'];
echo $est;
if ($est=="david") {
echo "no mameees";
}else{
echo "no mameees no se puso ";
}
?>
Someone has any idea ?
$("#switch").change(function () {
var checked=$("#switch").prop("checked");
if(checked)
{
console.log(checked);
}else{
console.log(checked);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Switch <input type="checkbox" name="switch" id="switch" >
Use prop instead of attr to find checkbox is checked or not.
You can let php check if the checkbox was checked or not in a success callback from $.post:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PRUEBA AJAX JS PHP HTML</title>
</head>
<body>
<H1>prueba</H1>
<input type="checkbox" name="switch" id="switch" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#switch").change(function ()
{
var checkbox = $("#switch");
$.post("accion.php", {estado: checkbox.val()}, function(data){
$("h1").html(data);
});
});
</script>
</body>
</html>
accion.php
<?php
$checkbox = isset($_POST['estado']) && $_POST['estado'] == 'on'; // 'on' is the default checkbox value when you don't specify it in html
if ($checkbox) {
echo "it's been checked";
}else{
echo "it wasn't checked";
}
?>
PS: when working with ajax ( check out $.post options) i recommend using dataType: 'json' and your php should respond with a valid JSON, you have json_encode for that.
use
var checked = $('#switch').is(':checked');
instead of
var checked=$("#switch").attr("checked");
I'm having mistakes do not know where error
Having trouble using JavaScript or Ajax and text display the same page
Please help me in the wrong reform
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pop up example</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
document.getElementById('myform').addEventListener("submit",upload);
function upload()
{
var xhr = new XMLHttpRequest();
xhr.open("POST","/upload.php",true);
{
var formdata = new formData(myform);
xhr.send(formdata);
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200)
{
//some code to check if submission succeeded
url = xhr.responseText();
if(url == 'failed')
Console.log('upload failed'); // do something for failure
else
document.getElementById('urlBox').innerHTML = url;
}
}; return false;
}
</script>
</head>
<body>
<form id="myform" method="POST" action=<?php ($_SERVER["PHP_SELF"]); ?>>
<p>chose url:
<select size="1" name="D1">
<option value="google_drive">google drive</option>
<option value="clody">clody</option>
</select>
<input type="text" name="T1" size="40">
<input type="submit" value="go" name="B1">
<input type="reset" value="reset" name="B2">
</p>
</form>
</body>
</html>
and this upload.php file
<?php
if(!empty($_POST['D1']) && !empty($_POST['T1'])){
$providers = array(
'google_drive' => 'Goole drive^https://drive.google.com/file/d/{replace}/view',
'clody' => 'Cloudy^https://www.cloudy.ec/embed.php?id={replace}'
);
if(isset($providers[$_POST['D1']])){
$url = str_replace('{replace}', $_POST['T1'], $providers[$_POST['D1']]);
echo "$url";
}
}
else{
echo "failed";
}
?>
and thank you all
Add following line in your html page
<div id='urlBox'></div>
It is normal your semicolon after xhr.open("POST","/upload.php",true) ?
You can try replace this line:
<form id="myform" method="POST" action=<?php ($_SERVER["PHP_SELF"]); ?>>
For this:
<form id="myform" method="POST" action="<?php ($_SERVER["PHP_SELF"]); ?>">
The differece is in your action. You're not using ""
I Use below html page for tag-it. But when i submit the form, i can't get the value from form.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="http://girlzunderground.com/code/tagit.js"></script>
<script >
$(function() {
$('#demo3').tagit({
tagSource:function( request, response ) {
$.ajax({
url: "http://localhost/test.com/tag/tagdb.php",
dataType: "json",
data: {
q: request.term
},
success: function( data ) {
response( data );
}
});
},
triggerKeys:['enter', 'comma', 'tab'],
allowNewTags: false
});
});
//http://girlzunderground.com/php/profile-tags.php?t=books&txt=book
</script>
</head>
<body>
<div class="box">
<form action="display.php" method="post">
<ul id="demo3" class="tagit">
<li class="tagit-new" >
<input id="test1" name="test1[]" style="width:200px;" class="tagit-input ui-autocomplete-input" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"/>
</li>
</ul>
<input type="text" value="qqq" name="q"/>
<input type="submit" value="submit"/>
</form>
</div>
</body>
</html>
But when i submit the form, i can't get input "test1" value. But i can get input "q" value.
This is my display.php page
<?php
$Category=$_POST['test1'];
$q=$_POST['q'];
echo $q;
//exit();
$allCourse=NULL;
$count=0;
foreach($Category as $Cat)
{
$count=$count+1;
$allCourse=$allCourse.'~'.$Cat;
}
$allCourse=$allCourse.'~';
echo $allCourse;
?>
How can i get my tag-it value from html form..
I have sample code to prove my work
try to change code to lastest ie version but stiuck on ie10
I have object create on index.html
and pass to parent frame1.html
frame1.html pass to frame2.html this page still set/get data
frame2.html open pageX.html
The problem happen when try to set value on pageX but can get value
when call function to set value page display error Function Expected
This code still work on ie9
I don't know about object behavior change between ie9 to ie10
This is my sample
it has 4 html
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title> New Document </title>
<script type="text/javascript">
var zo_gbl_data = new Object ( );
</script>
</head>
<frameset>
<frame src='frame1.html'>
</frameset>
</html>
frame1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title></title>
<script type="text/javascript">
var zo_gbl_data = parent . zo_gbl_data;
function initObj() {
zo_gbl_data . data_lv1 = new Object();
zo_gbl_data . data_lv1 . data = 0;
}
function getObjectLv1() {
alert(zo_gbl_data . data_lv1 . data);
}
function setObjectLv1() {
zo_gbl_data . data_lv1 . data += 1;
}
initObj();
</script>
</head>
<body>
<input type='button' value='Set Object lv1' onclick='setObjectLv1()'><br>
<input type='button' value='Get Object lv1' onclick='getObjectLv1()'><br>
<input type='button' value='open menu' onclick='window.open("frame2.html", "_self")'>
<input type='button' value='open Page' onclick='window.open("pageX.html", "", "", true)'>
</body>
</html>
frame2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title></title>
<script type="text/javascript">
var zo_gbl_data = getGbData();
function getGbData() {
return ( parent . zo_gbl_data );
}
function getData() {
var lo_data;
lo_data = zo_gbl_data;
alert(lo_data . data_lv1 . data);
}
function setObjectLv1() {
var lo_data;
lo_data = zo_gbl_data ;
lo_data . data_lv1 . data += 1;
}
</script>
</head>
<body>
<input type='button' value='Get Opener' onclick='getData()'><br>
<input type='button' value='set Data' onclick='setObjectLv1()'><br><br>
<input type='button' value='open Page' onclick='window.open("pageX.html", "", "", true)'>
</body>
</html>
pageX.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title></title>
<script type="text/javascript">
var zo_gbl_data = getGbData();
function getGbData() {
return ( opener . zo_gbl_data );
}
function getData() {
var lo_data;
lo_data = zo_gbl_data ;
alert(lo_data . data_lv1 . data);
}
function setObjectLv1() {
var lo_data;
lo_data = zo_gbl_data ;
lo_data . data_lv1 .data += 1;
}
</script>
</head>
<body>
<input type='button' value='Get Opener' onclick='getData()'><br>
<input type='button' value='set Opener' onclick='setObjectLv1()'><br>
</body>
</html>
html code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="script.js">
</script>
</head>
<body bgcolor="#FFFFCC">
<center>
<form>
<select id="newLocation">
<option value="1.jpg">index</option>
<option value="script.js">posts</option>
<option value="2.jpg" selected="selected">blog</option>
</select>
</form>
javascript :
window.onload = startInit;
function startInit() {
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
}
function jumpPage() {
var newLoc = document.getElementById("newLocation");// what does this statement return ?
var newPage = newLoc.options[newLoc.getSelectedIndex].value;
if(newPage != "")
window.location = newPage;
}
Why don't get to to new page i.e the value when i select an option from the combo box ?
Also what does document.getElementById("newLocation"); this statement (the first statement of the function jumpPage) return ?
You can try
var newPage = newLoc.options[newLoc.selectedIndex].value;
The statement
var newLoc = document.getElementById("newLocation");
just finds the DOM (HTML) element <... id="newLocation" ...>, i.e. your <select id="newLocation"> .
document.getElementById("newLocation") will return you the SELECT object (i.e., the reference to your drop-down).
Regarding the JS, it has an error. You should change newLoc.getSelectedIndex to newLoc.selectedIndex.