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">';
}
Related
I have following Code. But the String in the Database is empty. Why does it not work to get the string from the input field?
HTML
<div id="todo">
<h2>Todo Liste</h2>
<form method="get">
<input type="text" name="username" placeholder="name" required>
<input type="text" class="inputField" name="inputData" id="myInput" placeholder="title" required><br><br>
<span onclick="newElement(); sendData(this.value)" class="addBtn">Add</span><br><br>
</form>
JavaScript
function sendData(str) {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
document.getElementById("txtHint").innerHTML = this.responseText;
}
xmlhttp.open("GET", "saveData.php?q=" + str);
xmlhttp.send();
}
To get the Value on the html page:
<p>Response from PHP <span id="txtHint"></span></p>
to bring the data in the html
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
document.getElementById("myUL").appendChild(li);
}
and i want to get the data of the text, a user typed in. this is where i fail.
My idea was
console.log(document.getElementsByClassName("inputField"));
How can I get the element?
Hi everyone
So there is my code :
HTML :
<html>
<body>
<form enctype="multipart/form-data" method="post" name="image">
<input onchange="test();" type="file" accept="image/*" capture="camera" name="file" id="camera">
<input id="go" type="submit" value="Stash the file!" style="display: none;" />
</form>
<div id="output"></div>
</body>
<script src="./script.js"></script>
</html>
JS :
var form = document.forms.namedItem("image");
form.addEventListener('submit', function(ev) {
var
oOutput = document.getElementById("output"),
oData = new FormData(document.forms.namedItem("image"));
oData.append("CustomField", "This is some extra data");
var oReq = new XMLHttpRequest();
oReq.open("POST", "./upload.php", true);
oReq.onload = function(oEvent) {
if (oReq.status == 200) {
oOutput.innerHTML = "Uploaded!";
} else {
oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
}
};
oReq.send(oData);
ev.preventDefault();
}, false);
function test() {
document.getElementById("go").click()
}
My problem is it's totaly functional but litlle... dirty.
I try to submit the form with JS document.forms.namedItem("image").submit(); but the EventListener dont catch it.
And i dont want to add JQuery to my project just for that (for those who have an answer who use JQuery).
The solution is certainly right before my eyes but i dont find an other way to do it.
Thanks all in advance.
I think you can simplify like this :
function pleaseUpload() {
console.log('upload fonction ...');
}
<html>
<body>
<form enctype="multipart/form-data" method="post" name="image">
<input onchange="pleaseUpload();" type="file" accept="image/*" capture="camera" name="file" id="camera">
</form>
<div id="output"></div>
</body>
<script src="./temp.js"></script>
</html>
Your confusing form.submit() with submit button click.
There is no need for a hidden submit button.
var output = document.getElementById("output");
var form = document.querySelector("form[name='image']");
form.addEventListener('submit', function(ev) {
ev.preventDefault();
var oOutput = document.getElementById("output")
var oData = new FormData(document.forms.namedItem("image"));
oData.append("CustomField", "This is some extra data");
var oReq = new XMLHttpRequest();
oReq.open("POST", "./upload.php", true);
oReq.onload = function(oEvent) {
if (oReq.status == 200) {
oOutput.innerHTML = "Uploaded!";
} else {
oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
}
};
oReq.send(oData);
}, false);
function test() {
form.submit();
output.textContent = "form submitted!";
}
<form enctype="multipart/form-data" method="post" name="image">
<input onchange="test();" type="file" accept="image/*" capture="camera" name="file" id="camera">
</form>
<div id="output"></div>
I'm having trouble getting my code to work. The first section of my javascript does not work. The last part works but inserts the image after the message.
Could my code be in conflict with my other javascript file? That does not explain why the second part works and add the image anyways though?
My javascript is in the same file as my HTML because otherwise the onload function wouldn't work.
<script>
window.onload = function(){
var uploadField = document.getElementById("frontImages");
uploadField.onchange = function() {
if(this.files[0].size > 200){
alert("File is too big!");
this.value = "";
};
};
}
window.onload = function() {
var uploadField = document.getElementById("itemImages");
uploadField.onchange = function() {
if(this.files[0].size > 200){
alert("File is too big!");
this.files = "";
};
};
}
</script>
My HTML:
<div class="row">
<div class="col-md-6">
<label>Front Image:</label>
<input type="file" name="frontImage[]" id="frontImages" class="form-control uploadButton" required="true">
<div id="previewFront" class="previewImage">
<img id="previewFrontImage" style="display: none;" src="#"/>
</div>
<label>Please upload a jpg, jpeg, gif or a png file. (MAX 2MB)</label>
</div>
<div class="col-md-6">
<label>Item Image(s):</label>
<input type="file" name="itemImages[]" id="itemImages" class="form-control uploadButton" multiple="true" required="true">
<div id="previewItemImages" class="previewItemImage"></div>
<label>Please upload a jpg, jpeg, gif or a png file. (MAX 2MB)</label>
</div>
</div>
You should use
window.addEventListener("load", function(event) {
//your code
});
instead of window.onload, because when you set window.onload second time you overwrite your previously setted function. window.addEventListener allow you to add more than one event.
Documentation: https://developer.mozilla.org/en-US/docs/Web/Events/load
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;?>
I want to insert html and JavaScript code with textarea field in my database. Problem is code has inserted but its replaced all double question with backlash. How to insert this code with textarea.
<div id="TA_cdsratingsonlynarrow539" class="TA_cdsratingsonlynarrow"><ul id="Ny62NY" class="TA_links r04zlbt"><li id="jb9xdEapRG" class="sc9nmfeVX"><a target="_blank" href="https://www.tripadvisor.com/"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"/></a></li></ul></div><script src="https://www.jscache.com/wejs?wtype=cdsratingsonlynarrow&uniq=539&locationId=671932&lang=en_US&border=false&shadow=false&display_version=2"></script>
It is possible to insert/inject html and javascript code using textarea input field into the current page.
consider, you've following textarea:
<div id="output"></div>
<div style="margin: 25px auto; width: 80%; height: auto;">
<form id="myform" name="myform">
<textarea id="mytextarea" name="mytextarea" cols="90" rows="20"></textarea>
<br> <button type="button" id="mybutton">execute</button>
</form>
</div>
Now, you can add event listener to that above button to extract html and javascript code from the textarea and insert them to the page:
window.addEventListener('load', function () {
document.getElementById('mybutton').addEventListener('click', function (e) {
var mytextarea = document.getElementById('mytextarea');
var pattern = /<script>([^]+?)<\/script>/mg;
var matches, txt = mytextarea.value;
if (txt) {
while (matches = pattern.exec(txt)) {
if (matches[1]) {
var tContent = matches[1].replace(/(\n|\r)+/gm, '');
var s = document.createElement('script');
s.innerText = tContent;
document.body.appendChild(s);
}
}
txt = txt.replace(pattern, '');
}
if (txt) {
document.getElementById('output').innerHTML = txt;
}
});
});