this same code was working yesterday, iframe[0].contentWindow.document.body.innerHTML has value "success".
But, today iframe[0].contentWindow.document.body is "". I cannot find innerHTML.
Same is result of iframe[0].contentDocument.body.
html
<form id="formid" method="post" action="file/upload" enctype="multipart/form-data" target="frame">
<input id="" type="file" name="file" />
</form>
<iframe id="frame" name="frame" width="0px" height="0px" frameborder="0"></iframe>
js
var iframe = $('#frame');
document.getElementById("formid").submit();
$("#frame").ready(function(){
$("#frame").load(function () {
data = iframe[0].contentWindow.document.body.innerHTML;
if(data == "success"){
successFunction(); // calling function if success
}
});
});
Using different path to iframe innerHtml worked:
JS:
function fileUpload(form, action_url) {
var iframe = document.createElement("iframe");
iframe.setAttribute("id", "frame");
iframe.setAttribute("name", "frame");
iframe.setAttribute("width", "0");
iframe.setAttribute("height", "0");
iframe.setAttribute("frameborder", "0");
form.parentNode.appendChild(iframe);
iframeId = document.getElementById("frame");
var eventHandler = function () {
if (iframeId.detachEvent) iframeId.detachEvent("onload", eventHandler);
else iframeId.removeEventListener("load", eventHandler, false);
if (iframeId.contentDocument) {
content = iframeId.contentDocument.body.innerHTML;
} else if (iframeId.contentWindow) {
content = iframeId.contentWindow.document.body.innerHTML;
} else if (iframeId.document) {
content = iframeId.document.body.innerHTML;
}
setTimeout('iframeId.parentNode.removeChild(iframeId)', 200);
}
if (iframeId.addEventListener) iframeId.addEventListener("load", eventHandler, true);
if (iframeId.attachEvent) iframeId.attachEvent("onload", eventHandler);
form.setAttribute("target", "frame");
form.setAttribute("action", action_url);
form.setAttribute("method", "post");
form.submit();
}
Html:
<form>
<input type="file" name="file" /></br>
<input type="button" value="upload" onClick="fileUpload(this.form,'url'); return false;" >
</form>
Related
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>
Basically I have a form that needs to be submitted in order that the next section of the site appears, in this case it's when a video plays through and ends, the values are submitted via POST so i can't just have a hardcoded URL as i could if i used GET ie. thecycle.ie/test02.php?click='SCENE 09'. The EventListener works but i just can't get it to submit the form.
function listen(evnt, elem, func)
{
if (elem.addEventListener)
elem.addEventListener(evnt, func, false);
else if (elem.attachEvent)
{
var r = elem.attachEvent("on" + evnt, func);
return r;
}
else window.alert("I'm sorry, I'm afraid I can't do that.");
}
listen("ended", document.getElementById("bgvid"), changePage);
function changePage() {
document.getElementById('formID').submit(); // SUBMIT FORM
}
Below is the full page
<form name="formID" id="formID" method="post" action="test02.php">
<input type="hidden" id="bgstate" name="bgstate" value="1">
<input type="hidden" id="vostate" name="vostate" value="">
<input type="hidden" id="choice" name="choice" value="0">
<script type="text/javascript">
$(document).ready(function() {
var bgAudio = document.getElementById("background_audio");
if(bgAudio) {
bgAudio.volume = 1.0;
bgAudio.play();
}
});
</script>
<script type="text/javascript">
function PlayBG()
{
document.getElementById("bgstate").value = "0";
var bgAudio = document.getElementById("background_audio");
bgAudio.volume = 1.0;
bgAudio.play();
}
function StopBG()
{
document.getElementById("bgstate").value = "1";
var bgAudio = document.getElementById("background_audio");
bgAudio.volume = 0.0;
bgAudio.pause();
bgAudio.currentTime = 0;
}
</script>
<div id="timeline">
<!-- top point of ogham -->
<img src="img/timeline/timeline_start.png" width="31" height="31" id="timeline_01"><br>
<input name="click" id="timelineButton" type="image" value="SCENE 01" src="img/timeline/timeline_A.png" alt="navigation" onmouseover="javascript:this.src='img/timeline/timeline_A_on.png'" onmouseout="javascript:this.src='img/timeline/timeline_A.png'">
<input name="click" id="timelineButton" type="image" value="SCENE 02" src="img/timeline/timeline_C.png" alt="navigation" onmouseover="javascript:this.src='img/timeline/timeline_C_on.png'" onmouseout="javascript:this.src='img/timeline/timeline_C.png'">
<input name="click" id="timelineButton" type="image" value="SCENE 03" src="img/timeline/timeline_D_on.png" alt="navigation" onmouseover="javascript:this.src='img/timeline/timeline_D_on.png'" onmouseout="javascript:this.src='img/timeline/timeline_D_on.png'">
<!-- bottom point of ogham -->
<img src="img/timeline/timeline_end.png" alt="timeline"><br>
</div>
<div id="banner">
<img src="img/smalllogo.png" alt="the cycle">
<div class="menu">
<ul>
<li>
Home
</li>
<li>
Wiki
</li>
<li>
About
</li>
</ul>
</div>
<div id="music">
<img src="img/music.png" alt="music">
<input type="image" src="img/play.png" alt="play" onclick="PlayBG(); return false;" value="Play" onmouseover="javascript:this.src='img/play_on.png'" onmouseout="javascript:this.src='img/play.png'">
<input type="image" src="img/stop.png" alt="stop" onclick="StopBG(); return false;" value="Stop" onmouseover="javascript:this.src='img/stop_on.png'" onmouseout="javascript:this.src='img/stop.png'">
</div>
</div>
<script type="text/javascript">
function PlayVO18()
{
document.getElementById("vostate").value = "0";
var voAudio = document.getElementById("voiceover_audio18");
var bgAudio = document.getElementById("background_audio");
var oldBGVolume = bgAudio.volume;
voAudio.volume = 1.0;
voAudio.play();
}
function StopVO18()
{
document.getElementById("vostate").value = "1";
var voAudio = document.getElementById("voiceover_audio18");
voAudio.volume = 0.0;
voAudio.pause();
voAudio.currentTime = 0;
}
</script>
<audio id="voiceover_audio18" class="voiceover_audio" src="audio/vo_balor_07.mp3"></audio>
<audio id="background_audio" class="background_audio" src="audio/myth_cycle_01.mp3" loop=""></audio>
<video autoplay="" poster="img/balorlugh_01.jpg" id="bgvid">
<source src="vids/balorlugh_01.webm" type="video/webm">
<source src="vids/balorlugh_01.mp4" type="video/mp4">
</video>
<div id="decision">
<div class="container">
<div class="toggle18">
<h2>Balor<input type="image" src="img/speech.png" alt="play" onclick="PlayVO18(); return false;" value="Play" onmouseover="javascript:this.src='img/speech_on.png'" onmouseout="javascript:this.src='img/speech.png'"></h2>
<p>You have made a grave mistake, my friend. We will have your hand in the end, even if it takes a few lashings to strengthen your resolve... what is that?</p>
<br>
<div class="toggle">
<script type="text/javascript">
function listen(evnt, elem, func)
{
if (elem.addEventListener)
elem.addEventListener(evnt, func, false);
else if (elem.attachEvent)
{
var r = elem.attachEvent("on" + evnt, func);
return r;
}
else window.alert("I'm sorry, I'm afraid I can't do that.");
}
listen("ended", document.getElementById("bgvid"), changePage);
function changePage()
{
document.getElementById('formID').submit(); // SUBMIT FORM
}
</script>
<button type="submit" name="click" id="submit" class="buttons" value="SCENE 09">Skip</button>
<input type="hidden" id="submit" name="bgstate" value="SCENE 09">
</div>
</div>
</div>
</div>
<script type="text/javascript">
var menu_elements = document.querySelectorAll('.toggle'),
menu_length = menu_elements.length;
for (var i = 0; i < menu_length; i++)
{
menu_elements[i].addEventListener('click', function (e)
{
var target = document.querySelector('.container>.' + e.target.classList[0]); // clicked element
Array.prototype.filter.call(target.parentNode.children, function (siblings)
{
siblings.style.display = 'none'; // hide sibling elements
});
target.style.display = 'block'; // show clicked element
});
}
function MakeChoice08()
{
document.getElementById("choice").value = "08";
}
function MakeChoice04()
{
document.getElementById("choice").value = "04";
}
</script>
</form>
You can`t use "submit" in NAME or ID attribute along with the submit() method, as it will be confused between what it considers an object referenced by the name or id and the method.
Just change <button type="submit" name="click" id="submit" class="buttons" value="SCENE 09">Skip</button> to
<button type="submit" name="click" id="somethingelse" class="buttons" value="SCENE 09">Skip</button>
and <input type="hidden" id="submit" name="bgstate" value="SCENE 09"> to
<input type="hidden" id="somethingelse2" name="bgstate" value="SCENE 09">
My input texts work fine when i click the 'Edit HTML Below then Click Display' button, but my tinymce textareas won't work when I edit them. They'll send it's old value to the iframe, but not the new value. How can I send the new values when I edit the tinymce textareas? Here's the jsfiddle: http://jsfiddle.net/Ms3NG/1/ and code below:
<script type="text/javascript">
function init(buttonid, name, iframeid) {
document.getElementById(buttonid).addEventListener('click',function() {
// this.style.backgroundColor = '#cc0000';
gJSL_displayInput(name, iframeid)
},false);
gJSL_displayInput(name, iframeid);
}
window.onload = function() {
init('thisButton','test','iframetest');
init('thisButtona','testa','iframetesta');
init('thisButtonb','testb','iframetestb');
}
function gJSL_displayInput(nameInput, idOutput) {
var loc = "::JSLearning::gJSL_displayInput()";
try {
var ifrm = document.getElementById(idOutput);
var cnt = (ifrm.contentWindow || ifrm.contentDocument);
var doc;
doc = cnt.document;
doc.open();
var inputs = document.getElementsByName(nameInput);
for(var i = 0; i < inputs.length; i++) {
doc.write(inputs[i].value + "<br />");
}
doc.close();
} catch (e) {
exceptionAlert(loc, e);
}
}
</script>
<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script>
tinymce.init({selector:'textarea'});
</script>
<div class="scrollbar">
<input id="test1" name="test" value="ajkla;ldkfj">
<input id="test2" name="test" value="bla2">
<input id="test3" name="test" value="bla3">
<input id="test4" name="test" value="bla4">
<input id="test5" name="test" value="bla5">
<br><br>
<textarea class="ckeditor" id="test6" name="test"></textarea>
<br><br>
<input id="test7" name="test" value="bla7">
<br><br>
<textarea id="test8" name="test">HELLO WORLD</textarea>
<br><br>
<textarea id="test9" name="test">HI EVERYBODY</textarea>
<br><br>
<input id="thisButton" type="button" name="Display" value="Edit HTML Below then Click to Display"/>
</div>
<div class="scrollbar"><iframe id="iframetest" src="" style="background: White;"></iframe></div>
You can use this code:
content8 = tinyMCE.get('test8').getContent();
doc.write(content8);
content9 = tinyMCE.get('test9').getContent();
doc.write(content9);
to get the values from the tinyMCE updated values.
Check this JSFiddle that I've build for you.
The last time I used tinyMCE, it doesn't have autoupdate textarea feature..
So, before submit the form, use .getContent() to update your textarea..
here is the link http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent
So, your code will looks like
function gJSL_displayInput(nameInput, idOutput) {
var loc = "::JSLearning::gJSL_displayInput()";
try {
var ifrm = document.getElementById(idOutput);
var cnt = (ifrm.contentWindow || ifrm.contentDocument);
var doc;
doc = cnt.document;
doc.open();
var inputs = document.getElementsByName(nameInput);
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].tagName == 'TEXTAREA')
doc.write(tinyMCE.get(inputs[i].id).getContent() + "<br />");
else
doc.write(inputs[i].value + "<br />");
}
doc.close();
} catch (e) {
exceptionAlert(loc, e);
}
}
Basically I have signup and signin and I they're both divs which appear and disappear on the click of a link but I wish for one to close if the other is clicked and then opened.
Example:
signin area is open and signup button is clicked. I wish for signin area to disappear and for the signup content to be revealed.
Current Code:
<script language="javascript">
function toggle() {
var ele = document.getElementById("signin");
var text = document.getElementById("signtext");
var ele2 = document.getElementById("signup");
var text2 = document.getElementById("signuptext");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
ele2.style.display = "block";
text2.innerHTML = "hide";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
ele2.style.display = "block";
text2.innerHTML = "hide";
}
}
function toggle2() {
var ele2 = document.getElementById("signup");
var text2 = document.getElementById("signuptext");
var ele = document.getElementById("signin");
var text = document.getElementById("signtext");
if(ele2.style.display == "block") {
ele2.style.display = "none";
text2.innerHTML = "show";
ele.style.display = "block";
text.innerHTML = "hide";
}
else {
ele2.style.display = "block";
text2.innerHTML = "hide";
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
Html :
<div id="signin" style="display: none">
<form action="loginscript.php" method="post">
<p>Username:<input type="text" id="username"></p>
<p>Password:<input type="password" id="password"> <input type="submit" value="submit"></p>
</form>
</div>
<div id="signup" style="display: none">
<h1>peek-a-boo</h1>
</div>
Try this.There is no need of creating two different functions.Lesser the number of functions=Better the code + smarter is the coder!!!!
function toggle(id){
switch(id)
{
case 'signin':
document.getElementById('signin').style.display='block';
document.getElementById('signup').style.display='none';
break;
case 'signup':
document.getElementById('signup').style.display='block';
document.getElementById('signin').style.display='none';
break;
}
HTML
<div id="signin" onclick="toggle(this.id)"> SignIN</div>
<div id="signup" onclick="toggle(this.id)"> SignUp</div>
You can invoke a function on "onclick" event and hide the div using CSS:Visibility property
<a id="myLink" href="#" onclick="MyFunction();">link text</a>
Try this one:
function signUpIn(objId) {
document.getElementById('signin').style.display = 'none';
document.getElementById('signup').style.display = 'none';
document.getElementById(objId).style.display = 'block';
}
Your html changes:
<div id="signin" style="display: block">
</div>
<div id="signup" style="display: none">
</div>
Sign Up
Sign In
Check if it works for you.
Try to grab concept from this, may not be a perfect, but still contain some learning part -
Check this working Fiddle - http://jsfiddle.net/j7LDD/
Working Code -
HTML PART -
<form id="signup" method="get" style="display:none;">
<label>SignUp Name</label>
<input type="text" name="signupname" />
<input type="submit" name="signupsubmit" value="signup" />
</form>
<form id="signin" method="get" style="display:none;">
<label>SignIn Name</label>
<input type="text" name="signinname" />
<input type="submit" name="signinsubmit" value="signin" />
</form>
<button id="signupbutton" onclick="toggle(this.id);">SignUp</button>
<button id="signinbutton" onclick="toggle(this.id);">SignIn</button>
JS PART -
<script>
function toggle( val ) {
if( "signupbutton" == val ) {
document.getElementById("signup").style.display = 'block';
document.getElementById("signin").style.display = 'none';
}
else {
document.getElementById("signin").style.display = 'block';
document.getElementById("signup").style.display = 'none';
}
}
</script>
here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
document.getElementById("radio1").onchange = function() {
if(this.checked == true) {
document.getElementById("list1").style.visibility = "hidden";
document.getElementById("list1").style.display = "none";
}
};
document.getElementById("radio2").onchange = function() {
if(this.checked == true) {
document.getElementById("list1").style.visibility = "visible";
document.getElementById("list1").style.display = "block";
}
};
</script>
</HEAD>
<BODY>
<form method = "post">
<br /><p id="first"><label>First Name:</label><input type="text" name="first" size="30" /></p>
<br /><p id="last"><label>Last Name:</label><input type="text" name="last" size="30" /></p>
<br /><p id="instructor"><label>Instructor:</label><select name="instructor">
<option value="instructor1">instructor1</option>
<option value="instructor2">instructor2</option></select></p>
<br /><p id="hospitalorientation"><label>Hospital Orientation:</label>
<div id='buttons'>
<label><input id="radio1" type="radio" name="hospital" /> Not Complete </label>
<label><input id="radio2" type="radio" name="hospital" /> Complete </label>
</div>
<div id="list1" style="display: none;">
<label>Month Complete:
<select>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</label>
</div>
</form>
</BODY>
</HTML>
I will have more fields like the hospital field, so i will need to do it more than one. I need a drop down to show when a certain radio button is selected. But everything i try in javascript doesnt work. I am new to javascript.
I think its because the code is executed BEFORE the list is actually added to the document structure.
Encapsulate it in a window.onload handler like this:
...
<script type="text/javascript">
window.onload=function()
{
document.getElementById("radio1").onchange = function()
{
if(this.checked == true)
{
document.getElementById("list1").style.visibility = "hidden";
document.getElementById("list1").style.display = "none";
}
};
document.getElementById("radio2").onchange = function()
{
if(this.checked == true)
{
document.getElementById("list1").style.visibility = "visible";
document.getElementById("list1").style.display = "block";
}
};
}
</script>
...
Lg
warappa
Your biggest issue here is that the javascript is going to execute prior to the radio buttons being created. Therefore document.getElementById(...) is not going to find the element, as it doesn't exist. Try adding your code to a function and having that function run onload of the body.
as a side issue you dont need the style.visibility... line
one more thing:
Typically, its better to add event listeners using the attachEvent or addEventListener methods (allows more control, and multiple listeners for one action) like this:
function addEvent(el, eType, fn, uC) {
if (el.addEventListener) {
el.addEventListener(eType, fn, uC);
return true;
}
else if (el.attachEvent) {
return el.attachEvent('on' + eType, fn);
}
else {
el['on' + eType] = fn;
}
}
and then just use
addEvent(
document.getElementById("radio1"),
"change",
function(){
if(this.checked == true){
document.getElementById("list1").style.display = "none";
}
},
false);
This is both cross-browser and better practice
You have to wait until your object (radio button load) Here is some code that works. Or call the window.onload
<script type="text/javascript">
function checkEm() {
if (document.getElementById("radio1").checked) {
document.getElementById("list1").style.visibility = "hidden";
document.getElementById("list1").style.display = "none";
};
if (document.getElementById("radio2").checked) {
document.getElementById("list1").style.visibility = "visible";
document.getElementById("list1").style.display = "block";
};
};
</script>
<label><input id="radio1" type="radio" name="hospital" onclick="checkEm()" /> Not Complete </label>
<label><input id="radio2" type="radio" name="hospital" onclick="checkEm()" /> Complete </label>