Converting Text input to an actual parameter for javascript function - javascript

I need to convert the messbox value so it can be passed into the loadPHPDoc function, but i cannot seem to successfully transfer the data. It successfully loads the php document when i place quotation marks around the actual parameter, but i do not, it simply does not use the function, and does not work. Here's my code:
<!DOCTYPE html>
<html>
<body>
<p id="myDiv">no</p>
<script>
function loadPHPDoc(str){
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "testSubmit.php";
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","testSubmit.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var sender = "q=" + str;
xmlhttp.send(sender);
document.getElementById("myDiv").innerHTML = str;
}
</script>
<p>Message <input type= "text" id="messbox"></p>
<button type= "button" onclick="loadPHPDoc(document.getElementById(messbox).value)">input</button>
</body>
</html>

document.getElementById() receives a string as a parameter, so:
<button type= "button" onclick="loadPHPDoc(document.getElementById('messbox').value)">input</button>

Related

use numeric variable as str & increment it

I want to change the value of str used in ajax (str is the string inputted in the html form) part by giving it a variable value, so that by clicking on a button that changes the variable value, the loaded data row in mySQL changes. But it doesn't work. What can I do for this ?
(the ajax works, it's just that the button click doesn't change anything)
Here is the code:
<!DOCTYPE html>
<html>
<head>
<script>
var Pokemon_ID = 0
function changePokemon(str) {
document.getElementById("right-btn").onclick = function() {
Pokemon_ID++;
str = Pokemon_ID
}
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","get_id.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
First name: <input type="text" onkeyup="changePokemon(this.value)">
</form>
<div id="txtHint"></div>
<a id="right-btn" onclick="changePokemon(str)"></a>
</body>
</html>
Just try this out and confirm if it works. I had tried to correct the code according to my understanding of your requirement.
<!DOCTYPE html>
<html>
<head>
<script>
function changePokemon() {
let str = document.getElementById("inpStr").value;
let tempStr=parseInt(str)+1;
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","get_id.php?q="+tempStr,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
First name: <input type="text" id="inpStr" onkeyup="changePokemon()">
</form>
<div id="txtHint"></div>
<a id="right-btn" onclick="changePokemon()"></a>
</body>
</html>
Change your HTML codes to
<form>
First name:
<input type="text">
</form>
<div id="txtHint"></div>
<a id="right-btn" onclick="changePokemon(++ Pokemon_ID)">Go</a>
I dont know what does your changePokeMon() function do, but change your script to
var Pokemon_ID = 0
function changePokemon(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
}
xmlhttp.open("GET", "get_id.php?q=" + str, true);
xmlhttp.send();
}

Getting user input for ajax post request?

I am going through the Ajax tutorial at:
http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
They have this example for submitting request to a server:
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","demo_post2.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>
The problem I have with the above example is that the values for fname and lname are hardcoded. How can allow a user to enter different values for fname and lname via a <form> tag and still be able to use ajax javascript code?
created jsfiddle example for the same:-
http://jsfiddle.net/c2S5d/24/
added two inputs for fname and lname and fetched there values and set into the params.(As of now commented the code for ajax send) try above given link and enter some values into the text boxed and see the alert)
code:-
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc() {
alert("calle")
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value
//xmlhttp.open("POST","demo_post2.asp",true);
//xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var param = "fname=" + fname + "&lname=" + lname;
alert(param)
//xmlhttp.send(param);
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
<input type='text' id='fname' />
<input type='text' id='lname' />
</body>
</html>

I made a request to the Twitter API. How can I get the JSON response from my PHP script to my JavaScript?

I'm doing a Twitter API request that returns JSON of all tweets containing #awkward . Here's the successful response on a server: http://babbage.cs.missouri.edu/~atgvyc/php/election_tweets/index.php
But I want to be able to use that JSON in my JavaScript and parse through it with a for-loop to pull out certain information (particularly the geotags and location). I thought I could do this with AJAX and then JSON.parse, but it's not working the way I thought it would.
Any suggestions?
Here's my PHP script:
<?php
require_once('TwitterAPIExchange.php');
$settings = array(
'oauth_access_token' => "XXX",
'oauth_access_token_secret' => "XXX",
'consumer_key' => "XXX",
'consumer_secret' => "XXX"
);
$url = 'https://api.twitter.com/1.1/search/tweets.json';
$getfield = '?q=#awkward&geocode=38.949926,-92.330037,35mi&result_type=recent';
$requestMethod = 'GET';
$twitter = new TwitterAPIExchange($settings);
echo $twitter->setGetfield($getfield)
->buildOauth($url, $requestMethod)
->performRequest();
?>
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Sample elections tweets</title>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var json = JSON.parse(xmlhttp.responseText);
//here's where i'd like to put a for-loop
}
}
xmlhttp.open("GET","index.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<body>
Ok, I think I know what you are trying to do now. There really isn't an out of the box "for each" like there is in php, which is why a lot of frameworks implement there own (jQuery's $.each()), or make prototypes. But, you may be able to do what you need with the below. You can replace all the console.log() with alert() if you want, but it gets hectic not being in Chrome's dev tools (f12 on most machines). Also, if Dale Musser is still there tell him hello! MIZ
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var json = JSON.parse(xmlhttp.responseText);
//log entire json struct to developer console for easy viewing
console.log(json);
//you can reference individual pieces of json by doing something like
//json.statuses or json.statuses[2]
var statuses = json.statuses;
for(var i=0;i<statuses.length;i++){
var curStatus = statuses[i];
//access bits directly
var tweetAuthor = curStatus.user.name;
var tweetTime = curStatus.created_at;
//iterate hashtags
var hashtags = curStatus.entities.hashtags;
for(var k=0;k<hashtags.length;k++){
console.log("Hashtag: " + hashtags[k].text);
}
//iterate all elements of tweet
for(var key in curStatus){
var attrName = key;
var attrValue = curStatus[key];
console.log("attribute name: " + attrName);
console.log("attribute key: " + attrValue);
if(attrName = "text") {
//Do something with tweet texts... like:
//document.getElementById("statuses").appendChild(attrValue);
}
}
}
}
}
xmlhttp.open("GET","index.php",true);
xmlhttp.send();
}

Unexpected Identifier Error after Ajax call

I have this HTML code:
<div id="texttheory" class="centertext">'. $short .' </div>';
<button id="thbutton" class="theory_button" onclick="javascript:changetheory('.$long.')">
<img id="imagebutton" src="./images/arrows.png" width="15px" heigth="22px">
</button>
which I produce inside a php script called by a javascript function:
function showTheory (kl) {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("theory").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gettheory.php?kl="+kl,true);
xmlhttp.send();
}
The function changetheory is in a js library properly included in html head tag and it works like this:
function changetheory (content, old) {
document.getElementById("texttheory").innerHTML= content;
document.getElementById("thbutton").setAttribute ('onclick', "javascript:changetheory("+old+", "+content+")");
}
when i click on the thbutton to switch the two text i get error:
Uncaught SyntaxError: Unexpected identifier
on line 1 of the html file.
Anyone can see what's the problem is?
You're missing quotes around the content string for the onclick event.
<button id="thbutton" class="theory_button" onclick="javascript:changetheory('.$long.')">
Should be
<button id="thbutton" class="theory_button" onclick="javascript:changetheory(\''.$long.'\')">

How to "search" through the response of an XMLHttpRequest

I have a question regarding the followng code
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
return xmlhttp.responseText;
}
}
xmlhttp.open("GET","index.html",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
Now I want to search through the xmlhttp.responseText (in other words call the function loadXMLDoc()) for key words, like for example "testfile" and if it exists multiple example "testfile_1" and "testfile_2"....."testfile_n" then "doSomething"
like this
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
return xmlhttp.responseText;
}
}
}
function searchADocument(wordToSearchFor){
xmlhttp.open("GET","index.html",true);
xmlhttp.send();
int numberOfTimesWordOccurs=0;
var thePageToSearchThrough [] = loadXMLDoc();
for (i=0; i<thePageToSearchThrough.length; i++){
if(thePageToSearchThrough[i]==wordToSearchFor)
numberOfTimesWordOccurs++;
}
If (numberOfTimesWordOccurs > 1)
document.write(" testfile_1" testfile_2 testfile_n
)
Else
window.location="http://selnc05.go.se:8080/component_test/build/testfile.html";
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="searchADocument("testfile")">Change Content</button>
</body>
</html>
I don't know where to start since I don't know what type xmlhttp.responseText is, can I store it in an array and scan it using for loop etc?
Thanks in advance. =)
EDIT
What am Im doing wrong here
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
return xmlhttp.responseText;
}
}
xmlhttp.open("GET","index.html",true);
xmlhttp.send();
}
function searchADocument(){ //wordToSearchFor
var txt=loadXMLDoc();
if(txt.test('hello'))alert('responseText contains "hello"');
else{
document.getElementById("myDiv").innerHTML ="helloaj";
}
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="searchADocument()">Change Content</button>
</body>
</html>
get the following error message on if(txt.test('hello')) Jscript error:'undefined' is null or not an object
EDIT 3
Im guessing im just dumb as hell, but I still can't get this to work, why can't I store the xmlhttp.responseText into a variable?
Like this
<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var txt=xlmhttp.responseText;//This aint working, why, how can I store xlmhttp.responseText into a variable, that I can peform a search on?
document.getElementById("myDiv").innerHTML=txt;//This aint working, why?????
}
});
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">Change Content</button>
</body>
</html>
I can add that the above actually works if I replace the following
var txt=xlmhttp.responseText;
document.getElementById("myDiv").innerHTML=txt;
with this
document.getElementById("myDiv").innerHTML=xlmhttp.responseText;
I haven't got the call back function to work as mentiond below, all I get is that xmlhttp is undefined, so I ask on this that works(at least half the way I want it to).
Again sorry for not understanding, but there must be something obvious that I don't get about this, that this simply isn't possible to store this in a variable or something.
var txt=loadXMLDoc();
loadXMLDoc doesn't return anything, so txt is undefined after this. Of course undefined doesn't have the test method, which is a method of String.prototype.
Instead assign a callback handler to your XMLHttpRequest and do whatever you want there.
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4)
if (xmlhttp.status==200) {
// do something with xmlhttp.responseText
} else {
// do something appropriate with status
}
}
Update: Though I think it's usually not preferrable to have these kind of copy-pasta examples, I can show you where you should put this piece of code. Instead of doing this:
function searchADocument() { //wordToSearchFor
var txt = loadXMLDoc();
if (txt.test('hello'))
alert('responseText contains "hello"');
else
document.getElementById("myDiv").innerHTML = "helloaj";
}
where you test the return value of loadXMLDoc (which, as already stated, returns immediately, so before the request is completed), you should put your code inside the callback handler, that you assign by setting onreadystatechange:
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var txt=xmlhttp.responseText; /* manipulate the DOM here */
if (txt.test('hello'))
alert('responseText contains "hello"');
else
document.getElementById("myDiv").innerHTML = "helloaj";
}
}

Categories

Resources