How to send String from text area to php via js - javascript

I am trying to get the string value from a textarea in js and send it to my php file. but when i check the value of the variable that receives the string it returns "". however every other value is received.
js file
$(document).ready(function () {
$("#newTestApprove").on("click", function(e) {
$testimonial = escape(document.getElementById("testimonialArea").value);
$client = document.getElementById("client").value;
$event = document.getElementById("event").value;
$status = "submitted";
if ($testimonial.length === 0)
{
alert("Testimonial Field is left empty");
}else
if ($client.length === 0)
{
alert("Client Field is left empty");
}
else if ($event.length === 0)
{
alert("Event Field is left empty");
} else{
obj = {"status":$status, "client":$client, "event":$event, "testimonial":$testimonial};
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
validity = this.responseText;
if (validity === "Successful"){
$('#newTestimonialModal .modal-body').html("Your Testimonial has been Submitted");
$("#newTestApprove").remove();
}
}
};
}
xmlhttp.open("POST", "../php/postTestimonial.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-
urlencoded");
xmlhttp.send("x=" + dbParam);
});
});
php file
<?php
$obj = json_decode($_POST["x"], false);
$testimonial = $obj->testimonial;
echo $testimonial;
?>
When i echo $testimonial it returns ""

please assign variable in javascript as
var testimonial=document.getElementById("testimonialArea").value;
instead of
`$testimonial=escape(document.getElementById("testimonialArea").value);
please try below `eg:
<html>
<body>
Address:<br>
<textarea id="myTextarea"></textarea>
<p>Click the button to alert the contents of the text area.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var testimonial = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = testimonial;
var obj = {"testimonial":testimonial};
var dbParam = JSON.stringify(obj);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("POST", "ajax_info.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname="+dbParam);
}
</script>
</body>
</html>
Php file ->ajax_info.php
<?php
$obj = json_decode($_POST["fname"], false);
$testimonial = $obj->testimonial;
echo $testimonial;
?>

Related

Calling javascript in a php page

I'm trying to call this JS function inside a php page (footer.php), but it's not working. I've tried multiple options, like placing the script inside a php echo, but that didn't work either. I'm stuck here. Any suggestions to call it properly?
<?php
/**
* Header for our theme
*/
electro_get_footer();
?>
<div class="kiyoh">
<span id="cijfer" class="review-cijfer"></span>
<span class="review-cijfer-after"> / 10</span>
<a href="https://kiyoh.nl/lumenlab">
<span id="beoordelingen" class="review-beoordelingen"></span>
<span class="review-beoordelingen-after"> beoordelingen</span>
</a>
</div>
<script type="text/javascript">
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET",
"https://www.kiyoh.nl/xml/recent_company_reviews.xml? connectorcode=xws9TE3TQSX7t7Hrj9xFAbYwhraBaenGFHYWt9jKyx4CRV5vFW&company
_id=16907&reviewcount=all&showextraquestions=1", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("cijfer").innerHTML =
xmlDoc.getElementsByTagName("total_score")
[0].childNodes[0].nodeValue;
document.getElementById("beoordelingen").innerHTML =
xmlDoc.getElementsByTagName("total_reviews")
[0].childNodes[0].nodeValue;
}
</script>
I have change the url in the xhttp.open() function and it work.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
} else {
console.log("readyState: " + this.readyState);
console.log("Status: " + this.status);
}
};
xhttp.open("GET", "https://www.kiyoh.nl/xml/recent_company_reviews.xml?connectorcode=xws9TE3TQSX7t7Hrj9xFAbYwhraBaenGFHYWt9jKyx4CRV5vFW&company_id=16907&reviewcount=all&showextraquestions=1", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("cijfer").innerHTML = xmlDoc.getElementsByTagName("total_score") [0].childNodes[0].nodeValue;
document.getElementById("beoordelingen").innerHTML = xmlDoc.getElementsByTagName("total_reviews") [0].childNodes[0].nodeValue;
}

Cannot get data as JSON from a PHP file on the server

I have a database on the server, containing a table customers, and column names in that. I want to make a request to the server where I ask for the first 2 records in the customers table. Once I run the program, the browsers cannot display the records, it shows undefined. Look the image below.
.php:
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);
$conn = new mysqli("127.0.0.1", "abc", "def", "mydatabase");
$result = $conn->query("SELECT names FROM " . $obj->table . " LIMIT " . $obj->limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);
echo json_encode($outp);
?>
.html:
<p id="demo"></p>
<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { "table":"customers", "limit":2 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
for (x in myObj) {
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("GET", "demo_file.php?x=" + dbParam, true);
xmlhttp.send();
</script>
You must be use names instead of name of object in loop in js because in your select query you have names columns and results have names property.
<p id="demo"></p>
<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { "table":"customers", "limit":2 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
console.log(myObj)
for (x in myObj) {
txt += myObj[x].names + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("GET", "demo_file.php?x=" + dbParam, true);
xmlhttp.send();
</script>

Save value of var then pass through function

I am facing a problem in my code.
I want to save the value of text box in var q, and then I want to pass the value of 'a' and 'z' to checkanswer.php, so I can match my query.
In below code am I on right track to do this or not??
function myFunction(a) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("ques").innerHTML = this.responseText;
}
};
xhttp.open("GET", "retrieveQuestion.php?question=" +a, true);
xhttp.send();
var q="<td><input type='text' name='answer' placeholder='submit your answer here'/></td>" ;
document.getElementById("t2").innerHTML=q;
var z="<td align='center'><input type='button' value='submit' onclick ='myfunc1(a,q);'/></td>";
document.getElementById("t3").innerHTML=z;
}
function myfunc1(q1,a1)
{
xhttp.open("GET", "checkanswer.php?question=" +q1 + "&a1=" +a1, true);
xhttp.send();
}

remove parsed element onclick

I have a parsed xml-file that shows twice the same element. Now I want a button that hides one of them with an onclick-statement. Does anyone know how to do this?
<!DOCTYPE html>
<html>
<body>
<p id="dasa"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "customers.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("syl");
document.getElementById("dasa").innerHTML =
x[0].getAttribute('category') + "<br>";
document.getElementById("dasa").innerHTML +=
x[0].getAttribute('category');
}
function remove() {
x[0].removeAttribute('category');
}
</script>
<button onclick="remove()">remove</button>
</body>
</html>
x is undefined in your remove function.
function remove() {
x[0].removeAttribute('category');
}
You want something like this:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "customers.xml", true);
xhttp.send();
var xmlDoc;
var x;
function myFunction(xml) {
xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("syl");
document.getElementById("dasa").innerHTML =
x[0].getAttribute('category') + "<br>";
document.getElementById("dasa").innerHTML +=
x[0].getAttribute('category');
}
function remove() {
x[0].removeAttribute('category');
}
This will make x into a global var set by myfunction.

span tag not working in online name checking using ajax

Here is my code in JavaScript that is calling check.php file for checking online existence of user in the database
<html>
<input type = "text" name="txt1" id="user" onKeyUp="check_username(this.value)"> <br>
<script>
var xmlhttp = false;
if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xmlhttp = new XMLHttpRequest();
}
function check_username(str) {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var arr = xmlhttp.responseText.split("^");
document.getElementById("user").value = arr[1];
if (arr[0] == 1) {
</script>
<span style="color:blue">Username exists</span>
<script>
} else {
</script>
<span style="color:green">user available</span>
<script>
}
}
}
xmlhttp.open("GET", "check.php?txt1="+str, true);
xmlhttp.send();
}
</script>
</html>
And below is check.php file
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("check");
$username = ($_REQUEST['txt1']);
$a = 0;
if (checkexistence($username)) {
$a = 1;
echo $a."^".$username;
} else {
$a = 0;
echo $a."^".$username;
}
function checkexistence($username) {
$check = mysql_query("select uname from t1");
while ($row = mysql_fetch_array($check)) {
if (strcmp($username, $row['uname']) == 0) {
return true;
}
}
return false;
}
?>
It works correctly when I use alert (of course, we cannot use alert as it will become too irritating) but when I am using span tag it do not works correctly giving only
Username exists user available
as output instead of checking after each character we enter in the textfield..
How can I correct it??
Don't close and open the scripts in between of if else statements.
You can achieve this using jQuery library in easily. Download the jQuery library from here. You can include this jQuery files in bottom of the page, like this
<script src="js/jquery.1.11.0.js" type="text/javascript"></script>
Let's do that in different way of manner. Use jQuery method of after() to insert a content in between any where.
And try this code,
<input type = "text" name="txt1" id="user" onKeyUp="check_username(this.value)"> <br>
<span id="exist" style='color:blue'></span>
<span id="avail" style='color:green'></span>
<script>
var xmlhttp = false;
if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xmlhttp = new XMLHttpRequest();
}
function check_username(str) {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var arr = xmlhttp.responseText.split("^");
document.getElementById("user").value = arr[1];
if (arr[0] == 1) {
$("#avail").html();
$("#exist").html('Username exists');
} else {
$("#exist").html();
$("#avail").html('User available');
}
}
}
xmlhttp.open("GET", "check.php?txt1="+str, true);
xmlhttp.send();
}
</script>

Categories