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);
}
}
Related
I am creating a website that has a list of user inputs, however at a certain stage I want users to see a summarized page of all their inputs. If the input was not chosen it should not show as part of the summary (as in the script example below).
Here is my problem: there will be multiple user inputs and to write a JS script to achieve what I had done in an example script below will be lots of work and unfeasible. Is there a way the two JS scripts for the individual ID's can be combined into one as in the script below?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<label>For the first test</label>
<input type="text" placeholder="Enter Number" name="clientinfo" id="test1" required>
</div>
<div>
<label>For the second test</label>
<input type="text" placeholder="Enter Number" name="clientinfo" id="test2" required>
</div>
<button id="myBtn">Test</button>
<div style="color:blue;">
<p id="result1"></p>
</div>
<div style="color:red">
<p id="result2"></p>
</div>
<script>
function getUserName() {
var test1 = document.getElementById('test1').value;
var result1 = document.getElementById('result1');
if (test1.length > 0) {
result1.textContent = 'Test1: ' + test1;
} else {
null;
}
}
var myBtn = document.getElementById('myBtn');
myBtn.addEventListener('click', getUserName, false);
</script>
<script>
function getUserName() {
var test2 = document.getElementById('test2').value;
var result2 = document.getElementById('result2');
if (test2.length > 0) {
result2.textContent = 'Test2: ' + test2;
} else {
null;
}
}
var myBtn = document.getElementById('myBtn');
myBtn.addEventListener('click', getUserName, false);
</script>
</body>
</html>
P.s. I would also like to know if a user were to press the test button with an input, remove the input and press the test button again, that the first input would be removed?
You can get all inputs and loop throw the result and create an dom element which will contain the value of the input
and each created element will be added to lets say a result element
See code snippet
function getUserName() {
var inputList = document.getElementsByTagName("INPUT");
var res = document.getElementById("result");
res.innerHTML = "";
var indx = 1;
for (i = 0; i < inputList.length; i++) {
if (inputList[i].value != "") {
var ele = document.createElement("p");
ele.innerHTML ="test " + indx + " : " + inputList[i].value
res.appendChild(ele);
indx++;
}
}
}
var myBtn = document.getElementById('myBtn');
myBtn.addEventListener('click', getUserName, false);
<div>
<label>For the first test</label>
<input type="text" placeholder="Enter Number" name="clientinfo" id="test1" required>
</div>
<div>
<label>For the second test</label>
<input type="text" placeholder="Enter Number" name="clientinfo" id="test2" required>
</div>
<button id="myBtn">Test</button>
<div id="result">
</div>
When I click on back button of next page the check box value should not be reset.
It should be same as I checked or unchecked. The code from the first and next page is below.
First Page
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" name="code" value="ECE">ECE<br>
<input type="checkbox" name="code" value="CSE">CSE<br>
<input type="checkbox" name="code" value="ISE">ISE<br>
<br>
<input type="button" onclick="dropFunction()" value="save">
<br><br>
<script>
function dropFunction() {
var branch = document.getElementsByName("code");
var out = "";
for (var i = 0; i < branch.length; i++) {
if (branch[i].checked == true) {
out = out + branch[i].value + " ";
window.location.href="next.html";
}
}
}
</script>
</form>
</body>
</html>
Next Page
<html>
<head>
<title>Welcome to </title>
</head>
<body color="yellow" text="blue">
<h1>welcome to page</h1>
<h2>here we go </h2>
<p> hello everybody<br></p>
</body>
<image src="D:\images.jpg" width="300" height="200"><br>
<button onclick="goBack()">Go Back</button>
<script>
function goBack() {
window.location.href="first.html";
}
</script>
</body>
</html>
Full solution: example. First add ids to your checkboxes:
<input type="checkbox" name="code" value="ECE" id='1'>ECE<br>
<input type="checkbox" name="code" value="CSE" id='2'>CSE<br>
<input type="checkbox" name="code" value="ISE" id='3'>ISE<br>
<input id="spy" style="visibility:hidden"/>
Then change your dropFunction:
function dropFunction() {
var branch = document.getElementsByName("code");
var out = "";
localStorage.clear();
for (var i = 0; i < branch.length; i++)
if (branch[i].checked == true)
localStorage.setItem(branch[i].id, true);
for (var i = 0; i < branch.length; i++) {
if (branch[i].checked == true) {
out = out + branch[i].value + " ";
window.location.href="next.html";
}
}
}
And add some new javascript code to first.html:
window.onload = function() {
var spy = document.getElementById("spy");
if(spy.value=='visited')
for(var i=1;i<=3;i++)
if(localStorage.getItem(i))
document.getElementById(i).checked=true;
spy.value = 'visited';
}
Say I have <input type="checkbox" id="box1" /> and <div id="createhere"></div> and in a javascript file I have:
function(){
var box=document.getElementById("box").checked;
var s = "";
if(box){
s = "<input type="text" name="text" id="text" />"
document.getElementById("createhere").innerHTML = s;
}else{
s = "";
document.getElementById("createhere").innerHTML = s;
}
}
Now this works BUT it only creates the text box when I refresh the browser(firefox).
How can I do the same without refreshing the browser?
This code work on jQuery. I used jQuery because question has a jQuery tag!
You could try this.
$("#box").on('change', function(){
var check = $(this).prop("checked");
var inputHTML = "";
if ( check )
inputHTML = "<input type='text' name='text' id='text' />";
$("#createhere").html( inputHTML );
}).trigger("change");
Use a change event handler
function update() {
var box = document.getElementById("box").checked;
var s = "";
if (box) {
s = '<input type="text" name="text" id="text" />';
} else {
s = "";
}
document.getElementById("createhere").innerHTML = s;
}
<input type="checkbox" id="box" onchange="update()" />
<div id="createhere"></div>
With jQuery
jQuery(function($) {
$('#box').change(function() {
$('#createhere').html(this.checked ? '<input type="text" name="text" id="text" />' : '');
}).change()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="box" />
<div id="createhere"></div>
So i have this code:
<html>
<head>
<title>Form</title>
<script type="text/javascript">
function showConfirmationDialog() {
var textbox = document.getElementById('textbox');
var location = document.getElementById('location');
alert('You chosen:'+'\n'+'\n'+'Name: '+textbox.value +'\n'+'Address: ' +location.value+'\n');
}
function formfocus() {
document.getElementById('textbox').focus();
}
window.onload = formfocus;
var option;
</script>
</head>
<body>
Your name:
<input type="text" name="FirstName" id="textbox" <br><br/>
Your Address:
<input type="text" name="address" id="location" <br></br><br></br>
Choose your location:
<form name="Radio" id="destination" action="">
Bristol:
<input type="radio" name="selection" value="bristol" onClick="option=0">
London:
<input type="radio" name="selection" value="london" onClick="option=1">
Birmingham:
<input type="radio" name="selection" value="birmingham" onClick="option=2" />
</form>
<br></br> Click:
<input type="button" value="Submit" onclick="showConfirmationDialog();" /><br></br>
</body>
</html>
... This code basically represents a form for a user to fill in and at the end select one of three option provided via the radio buttons. What I wanted to find out was that how do I get the selection from one radio button which the user will need to select, displayed within the alert box after they press submit.
Something like this...
function getSelRadioValue()
for(i = 0; i< document.forms['Radio'].elements['selection'].length ; i++){
if(document.forms['Radio'].elements['selection'][i].checked == true)
return document.forms['Radio'].elements['selection'][i].value;
}
return null;
}
var selectedRadioValue = getSelRadioValue(); //use this variable in your alert.
if(selectedRadioValue == null)
alert("please select a destination");
else if(confirm("You have selected " + selectedRadioValue))
//deal with success
You need to loop through the selection radios to get the checked value:
var selection = document.Radio.selection;
var selectionResult = "";
for(var i = 0; i < selection.length; i++) {
if(selection[i].checked) {
selectionResult = selection[i].value;
}
}
alert('You chosen:'+'\n'+'\n'+'Name: '+textbox.value +'\n'+'Address: ' +location.value+'\n' + 'Location: '+selectionResult);
this is a sample code of what I am doing. unfortunately the alert(nextElem.value) returns "undefined" when I click the second checkbox to get the href of the link after it. do you have any idea how to fix it?
<HTML>
<HEAD>
<TITLE>Checkbox Inspector</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function validate()
{
for (i = 0; i <(document.f1.checkThis.length) ; i++) {
if (document.f1.checkThis[i].checked) {
var elem = document.f1.checkThis[i];
var nextElem = elem.nextSibling;
alert(nextElem.href);
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="f1">
<INPUT TYPE="checkbox" NAME="checkThis" value="http://www.google.com" onClick="validate()">Check here<BR>
click here
</FORM>
</BODY>
</HTML>
Get the link's href with jQuery
http://jsfiddle.net/mplungjan/H9Raz/ :
$('form input:checkbox').click(function () {
alert($(this).nextAll('a').attr("href"));
});
Because of the BRs we need the nextAll, surprisingly since I was using the next selector with an "a"
See here why it did not work: Cleanest way to get the next sibling in jQuery
Get the link's href with forms access and usage of ID - no jQuery
http://jsfiddle.net/mplungjan/fKE3v/
window.onload=function() {
var chks = document.getElementsByName('checkThis');
for (var i=0;i<chks.length;i++) {
chks[i].onclick=function() {
var id = this.id;
var linkId="link_"+id.split("_")[1]
alert(document.getElementById(linkId).href)
}
}
}
<form>
<div>
<input type="checkbox" name="checkThis" id="chk_1" value="http://www.google.com" />Check here<br/>
click here<br>
<input type="checkbox" name="checkThis" id="chk_2" value="http://www.bing.com" />Check here<br/>
click here
</div>
</form>
Forms access to get the next checkbox
<INPUT TYPE="checkbox" NAME="checkThis" value="http://www.google.com" onClick="validate(this.form)">Check here<BR>
<INPUT TYPE="checkbox" NAME="checkThis" onClick="validate(this.form)">Check here2<BR>
function validate(theForm) {
var chk = theForm.checkThis
for (i = 0; i <chk.length) ; i++) {
if (chk[i].checked) {
var nextElem = chk[i+1];
if (nextElem) alert(nextElem.value);
}
}
}
Your problem is that nextElem is the text node immediately after your checkbox, not the next checkbox; text nodes don't have value attributes. For example, try this:
function validate() {
for (i = 0; i < (document.f1.checkThis.length); i++) {
if (document.f1.checkThis[i].checked) {
var elem = document.f1.checkThis[i];
var nextElem = elem.nextSibling;
alert(nextElem);
alert(nextElem.value);
}
}
}
Or, for your convenience:
http://jsfiddle.net/ambiguous/sUzBL/1/