I have a simple text file:
Text1
Text2
Text3
TextN
And would like to create an interface where each time the user presses the next button the text area will be populated with the next text. I guess I have to use an array for that but I am having problems changing the text with the next button. Moreover the code I have only works on Firefox. Does this mean that when I put the website on a server this will be interpreted by Firefox clients only?
function test() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
var contents = xmlhttp.responseText;
myArray = contents.split("\n");
}
}
xmlhttp.open("GET", "deeds.txt", true);
xmlhttp.send();
}
function nextDeed() {
document.getElementById('deed').innerHTML = myArray[0]
}
<html>
<body>
<h1 align="center" style="font-family:Arial;">RELATION TAGGING </h1>
<textarea id="deed" rows="15" cols="160"></textarea>
<input type="button" value="next" onclick="nextDeed()" /><br/>
<div id="result">Result</div>
</body>
</html>
step = 0;
$("#next").click(function(){
step = step +1;
$.ajax({
url: "./text.php?"+"step="+step,
success: function(data){
$("#deed").val(data);
}
});
});
;
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1 align="center" style="font-family:Arial;" >RELATION TAGGING </h1>
<textarea id="deed" rows="15" cols="160">
</textarea>
<input type="button" id="next" value="next" /><br/>
<div id="result">Result</div>
</body>
</html>
PHP code : <?php $data = file_get_contents("file".$_GET["t"].".txt"); echo $data;?>
Related
I made two linked drop down menus with ajax and php. My index.php:
<html>
<head>
</head>
<body>
<form name="form1" action="submit.php" method='POST'>
<select name="country" onchange="window.getStates()">
<option> Select Country</option>
<option value="pakistan">Pakistan</option>
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<input type="text" id="area" style="display: none;" size="16" placeholder="
Enter value"></input>
<input type="submit" id="submit" style="display: none" name="submit" value="submit">
</form>
<script type="text/javascript">
function show() {
{
document.getElementById('area').style.display = 'inline-block';
document.getElementById('submit').style.display = 'inline-block';
}
}
function getStates() {
var xmlhttp;
try {
xmlhttp = new XMLHttpRequest;
} catch (e) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp) {
var form = document['form1'];
var country = form['country'].value;
xmlhttp.open("GET", "http://localhost/getStates.php?country=" + country, true);
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4) {
var s = document.createElement("select");
s.onchange = show();
s.name = "state";
s.innerHTML = this.responseText;
if (form['state']) {
form.replaceChild(s, form['state']);
} else
form.insertBefore(s, form['submit']);
}
}
xmlhttp.send(null);
}
}
</script>
</body>
</html>
my getStates.php code:
<?php
$states=array(
"pakistan" => array("NWFP","Sindh","Bala","Punjab"),
"india" => array("delhi","gujrat","goa","U.P."),
"usa" => array("bgjs","hhtrs","Bhtrshts","Utah"),
"uk" => array("England","Scotland","Bahwgla","Punthwthjab")
);
if(isset($_GET['country']))
{
$c = $_GET['country'];
if(isset($states[$c]))
{
for($i = count($states[$c]) -1; $i>=0; $i--)
{
echo "<option value='".$states[$c][$i]."'>".$states[$c][$i]."</option>";
}
}
}
?>
In the index.php, when i select an option from the second drop down, i want the text box and submit button to be made divisible. How can i do this in a simple way? Please be clear and slow because i am new to ajax.
s.onchange=show();
is not working. That was just a random try but i don't know why it is wrong. Thanks!
I am developing a simple log in form by using XML file values. I have an XML with values last name and first name. I am accessing the file and checking the values against the given values in order to validate log in.
It works fine in chrome, IE and safari. But, In mozilla it is not getting forwarded to the next page. The page just stays in the same page and shows a loading URL icon for indefinite time.
Here is my CODE:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link href="css/stylemp3.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form onsubmit="return myFunction()" action="action.html">
First name:<br/>
<input type="text" required="required" name="firstname" id="firstname"/>
<br>
Last name:<br>
<input type="password" required="required" name="lastname" id="lastname"/>
<br/>
<select class="dropdown" id="ddl">
<option value="haha" selected="selected">show</option>
<option value="hihi" >hide</option>
</select>
<br/>
<input type="text" name="hide" id="hidee" class="hide"/>
<br/>
<input button type="submit" value="Submit"/>
</form>
<div></div>
<script>
window.onload = function() {
document.getElementById("firstname").focus();
};
$( "#ddl" )
.change(function () {
if($( "select option:selected" ).text() == "hide")
{
$("#hidee").hide();
}
else
{
$("#hidee").show();
}
})
.change();
</script>
<script>
function myFunction() {
var lastname = document.getElementsByName('lastname')[0].value;
var firstname = document.getElementsByName('firstname')[0].value;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","login.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("login");
for (i=0;i<x.length;i++)
{
alert(x[i].getElementsByTagName("firstname")[0].childNodes[0].nodeValue);
if((x[i].getElementsByTagName("firstname")[0].childNodes[0].nodeValue) == firstname)
{
alert("Smileeee.....:-))");
if((x[i].getElementsByTagName("lastname")[0].childNodes[0].nodeValue) == lastname)
{
alert("login Successful!!!!!");
return true;
break;
}
}
}
return false;
}
</script>
</body>
</html>
I have following code:
<form action="../p/padd.php" method="POST">
<input type="button" value="Náhľad" OnClick="javascript:nahlad()" />
<textarea tabindex="4" id="textra" name="text" ></textarea>
<input type="submit" value="Vložiť" />
</form>
<span id="nahlad"> </span>
<script>
function nahlad()
{
var textra = document.getElementById("textra").value;
alert (textra);
var xmlhttp;
if (window.XMLHttpRequest) {xmlhttp=new XMLHttpRequest();
}
else
{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('nahlad').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","ssnahlad.php?text=" + textra,true);
xmlhttp.send();
}
</script>
When I enter the following into the textarea (yes there is "new line" with enter)
asd
asd
and click the Nahlad button
ssnahlad.php contains
<?php
$new = $_GET['text'];
echo nl2br($new);
?>
so why does the span with id=nahlad contain
asdasd
instead of
asd
asd
Now that I'm at home and can test, this will work:
var newText = encodeURIComponent(textra);
using encodeURIComponent before you send it will correctly render your output, with no decoding on the server side
calling this get_content function after clicking a link.
function get_content(n)
{
var hr=new XMLHttpRequest();
var url="./updatecontent.php";
var vars="id="+n;
hr.open("POST",url,true);
hr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
hr.onreadystatechange=function()
{
if(hr.readyState==4 && hr.status==200)
{
var return_data=hr.responseText;
document.getElementById("content").innerHTML=return_data;
}
}
hr.send(vars);
document.getElementById("content").innerHTML='<img src="./img/loading.gif">';
}
<div id="content"></div>
The following is the response data
<div id="text-editor" style="width:100%;">
<form action="" method="post">
<textarea class="ckeditor" name="editor1" id="txt1"></textarea>
<input type="submit" name="update" value="Update">
</form>
</div>
<script src="./ckeditor/ckeditor.js"></script>
The response data is succefully added to div id="content"
The relative link to ckeditor is correct.But the textarea is not converting into CKeditor.
where is the mistake? please help.
In this case you need to call CKEDITOR.replace('editor1') after content being changed.
So in your case it will be
function get_content(n)
{
var hr=new XMLHttpRequest();
var url="./updatecontent.php";
var vars="id="+n;
hr.open("POST",url,true);
hr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
hr.onreadystatechange=function()
{
if(hr.readyState==4 && hr.status==200)
{
var return_data=hr.responseText;
document.getElementById("content").innerHTML=return_data;
CKEDITOR.replace('editor1'); // <-- add this line
}
}
hr.send(vars);
document.getElementById("content").innerHTML='<img src="./img/loading.gif">';
}
This section of code is to first get the data and display the data from the XML file. After that there is a button below named submit. When I press submit, it calls the function add() and it will copy the first node from the XML file:
<html>
<body>
<link rel="stylesheet" type="text/css" href="test.css" />
<table>
</tr class="top">
<td>ID</td>
<td>Orgin</td>
<td>Type</td>
<td>Color</td>
</tr>
<script type="text/javascript">
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","test.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("product");
for (i=0;i<x.length;i++)
{
document.write("<tr class=a><td>");
document.write(x[i].getElementsByTagName("orgin")[0].getAttribute("id"));
document.write("</td><td>");
document.write(x[i].getElementsByTagName("orgin")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("type")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("color")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
function add()
{var id=document.getElementById('idProduct').value;
var time=document.getElementById('Time').value;
var org=document.getElementById('orgin').value;
var color=document.getElementById('color').value;
var type=document.getElementById('type').value;
xmlDoc=loadXMLDoc("test.xml"); //Problem happen here, the code doesn't functioning
oldNode=xmlDoc.getElementsByTagName('product')[1];
newNode=oldNode.cloneNode(true);
xml.Doc.documentElement.appendChild(newNode);
}
</script>
<br>
Inputs:
<br>
Time: <input type="text" id="time"><br>
ID: <input type="text" id="idProduct"><br>
Orgin: <input type="text" name="orgin"><br>
Type: <input type="text" name="type"><br>
Color: <input type="text" name="color"><br>
<input type="button" value="submit" onclick="add()"></input>
</body>
</html>
This is the XML file:
<?xml version="1.0" encoding="Big5" ?>
<set>
<product time="5">
<orgin id="1">sony</orgin>
<type>comp</type>
<color>red</color>
</product>
<product time="6">
<orgin id="2">apple</orgin>
<type>others</type>
<color>blue</color>
</product>
</set>
Here is the W3Schools loadxmldoc.js file:
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseXML;
}
Add that to your script block and it may start working (or get you a little further along).