<script type="text/javascript">
/* run on document load **/
function disp() {
//var text = document.getElementById('TextArea1').value;
var text = document.getElementById('MainContent_TextArea1').value;
//alert('a')
if (text == null)
{
return false;
}
else
{
var t = text;
var t = text.substr(text.selectionStart, text.selectionEnd -text.selectionStart);
document.getElementById('displayval').value = t;
alert(t)
}
}
</script>
<div>
<input id="TextArea1" runat="server" type="text"/>
<INPUT type="button" onclick= "disp()" visible="true" value="Show"/>
<INPUT type="text" id ="displayval" visible="true" />
</div>
Here I am trying to display the Text which is selected by user. But unfortunately in var t = text.substr(text.selectionStart, text.selectionEnd -text.selectionStart); getting error.
It is not working. Any wrong in this code. Please help me with correcting this..
<script type="text/javascript">
function disp() {
var txtArea = document.getElementById('TextArea1');
var start = txtArea.selectionStart;
var finish = txtArea.selectionEnd;
var sel = txtArea.value.substring(start, finish);
document.getElementById('displayval').value = sel;
alert(sel);
}
</script>
<div>
<input id="TextArea1" runat="server" type="text"/>
<input type="button" onclick= "disp()" visible="true" value="Show"/>
<input type="text" id ="displayval" visible="true" />
</div>
Related
How do I properly count the amount of replaced strings in Javascript. my increment function is in the replacement part of replace function bellow gives me a "0". i am not sure if the problem lies with the function or the way i called it. thanks in advance
<!DOCTYPE html>
<html lang="en">
<body>
<main>
Message:<br />
<textarea id="message" name="message" rows="3" cols="20">Hello 202204</textarea>
<span id="ChCtr"></span>
<br/><br/>
Find:<br />
<input type="text" id="find" name="find" size="30"><br />
<br/><br/>
Replace:<br />
<input type="text" id="replace" name="replace"size="30"><br />
<br/><br/>
<button onclick="newrep()">Find and Replace</button>
<br/><br/>
</main>
<script>
function newrep(){
let temp= document.getElementById("message").value;
var fid = document.getElementById('find').value;
var regexp=new RegExp(fid, "gi");
var rv = document.getElementById('replace').value;
var inp=document.getElementById('message').value;
var count=0;
let str2=(inp.replace(regexp,rv,function(x){count+=1;return"1"}))
document.getElementById("message").value = str2;
document.getElementById("ChCtr").innerHTML = count;
}
</script>
</body>
</html>
you are using replace function in wrong way . there is only two arguments allowed for this
one = search term
two = string or function
if you are using function for replace value then you have to return whatever value you wanted to replace into that function and thats it
function newrep(){
let temp= document.getElementById("message").value;
var fid = document.getElementById('find').value;
var regexp=new RegExp(fid, "gi");
var rv = document.getElementById('replace').value;
var inp=document.getElementById('message').value;
var count=0;
let str2=inp.replace(regexp,x => {
count++;
return rv;
})
document.getElementById("message").value = str2;
document.getElementById("ChCtr").innerHTML = count;
}
<!DOCTYPE html>
<html lang="en">
<body>
<main>
Message:<br />
<textarea id="message" name="message" rows="3" cols="20">Hello 202204</textarea>
<span id="ChCtr"></span>
<br/><br/>
Find:<br />
<input type="text" id="find" name="find" size="30"><br />
<br/><br/>
Replace:<br />
<input type="text" id="replace" name="replace"size="30"><br />
<br/><br/>
<button onclick="newrep()">Find and Replace</button>
<br/><br/>
</main>
</body>
</html>
This will work for you. Cheers :)
function newrep() {
let temp = document.getElementById("message").value;
var fid = document.getElementById("find").value;
var regexp = new RegExp(fid, "gi");
var rv = document.getElementById("replace").value;
var inp = document.getElementById("message").value;
var count = 0;
// Additional condition, when find is empty
if (!fid) {
document.getElementById("ChCtr").innerHTML = count;
return;
}
// corrected your useage of replace function
let str2 = inp.replace(regexp, function () {
count += 1;
return rv;
});
update(str2, count);
}
function update(msg, count) {
document.getElementById("message").value = msg;
document.getElementById("ChCtr").innerHTML = count;
}
<!DOCTYPE html>
<html lang="en">
<body>
<main>
Message:<br />
<textarea id="message" name="message" rows="3" cols="20">Hello 202204</textarea>
<span id="ChCtr"></span>
<br /><br />
Find:<br />
<input type="text" id="find" name="find" size="30"><br />
<br /><br />
Replace:<br />
<input type="text" id="replace" name="replace" size="30"><br />
<br /><br />
<button onclick="newrep()">Find and Replace</button>
<br /><br />
</main>
</body>
</html>
Im Trying to put the Value of dtpFrom to var FDate
I know my Javascript is wrong. I provided them so that you may know what I need to do.
var FDate = "";
var TDate = "";
<script>
function myFunction() {
document.getElementById("FDate").value = document.getElementById("dtpFrom").value;
document.getElementById("TDate").value = document.getElementById("dtpTo").value;
}
</script>
<p>
<strong><b>Find by MAWB: #Html.TextBox("searchstring")</b></strong>
<strong><b>From: #Html.TextBox("fromDate", FDate)</b></strong>
<strong><b>To: #Html.TextBox("toDate", TDate)</b></strong>
<input type="Date" id="dtpFrom" onchange="myFunction()" />
<input type="Date" id="dtpTo" />
<input type="submit" value="Search" />
</p>
https://jsfiddle.net/0zfjy75r/1/
var FDate = "<span id="FDate"></span>";
var TDate = "<span id="TDate"></span>";
<script>
function myFunction() {
document.getElementById("FDate").innerHTML = document.getElementById("dtpFrom").value;
document.getElementById("TDate").innerHTML = document.getElementById("dtpTo").value;
}
</script>
<p>
<strong><b>Find by MAWB: #Html.TextBox("searchstring")</b></strong>
<strong><b>From: #Html.TextBox("fromDate", FDate)</b></strong>
<strong><b>To: #Html.TextBox("toDate", TDate)</b></strong><br>
<input type="Date" id="dtpFrom" onchange="myFunction()" />
<input type="Date" id="dtpTo" />
<input type="submit" value="Search" />
</p>
I've tried many different methods, and even tried searching on SO. No answer was what I was looking for.
What I want is to have two input buttons that do some things in pure javascript.
Button one: Have it say "Add" when the page loads. When clicked, the value changes to "Cancel." Also, when it's clicked, have it display a form with three fields. When it's clicked again, have the form disappear. One named 'name', the second named 'location', the third named 'type'. I want the user to be able to submit these three things and have them be stored in the code.
Button two: Take the user input from the form and each time the user clicks, it displays all three information values, but have the button act as random generator. Let's say the code has 5 separate entries, I want them to be randomly selected and displayed when the button is clicked.
Like I said, I tried to make this work, but couldn't quite get over the top of where I wanted to go with it. If you want to see my original code, just ask, but I doubt it will be of any assistance.
Thanks in advance.
EDIT: Added the code.
function GetValue() {
var myarray = [];
var random = myarray[Math.floor(Math.random() * myarray.length)];
document.getElementById("message").innerHTML = random;
}
var testObject = {
'name': BWW,
'location': "Sesame Street",
'type': Bar
};
localStorage.setItem('testObject', JSON.stringify(testObject));
var retrievedObject = localStorage.getItem('testObject');
function change() {
var elem = document.getElementById("btnAdd1");
if (elem.value == "Add Spot") {
elem.value = "Cancel";
} else elem.value = "Add Spot";
}
window.onload = function() {
var button = document.getElementById('btnAdd1');
button.onclick = function show() {
var div = document.getElementById('order');
if (div.style.display !== 'none') {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
};
};
<section>
<input type="button" id="btnChoose" value="Random Spot" onclick="GetValue();" />
<p id="message"></p>
<input type="button" id="btnAdd1" value="Add Spot" onclick="change();" />
<div class="form"></div>
<form id="order" style="display:none;">
<input type="text" name="name" placeholder="Name of Resturant" required="required" autocomplete="on" />
<input type="text" name="type" placeholder="Type of Food" required="required" autocomplete="off" />
<input type="text" name="location" placeholder="Location" required="required" autocomplete="off" />
<input type="submit" value="Add Spot" />
</form>
</div>
</section>
The randomizer works, and so does the appear/hide form. Only thing is storing the input and switching the input value.
Here's one way to do this. Each form submission is stored as an object in an array. The random button randomly selects an item from the array and displays it below.
HTML:
<section>
<input type="button" id="btnChoose" value="Random Spot" />
<p id="message"></p>
<input type="button" id="btnAdd1" value="Add Spot" />
<div class="form">
<form id="order" style="display:none;">
<input id="orderName" type="text" name="name" placeholder="Name of Resturant" required="required" autocomplete="on" />
<input id="orderType" type="text" name="type" placeholder="Type of Food" required="required" autocomplete="off" />
<input id="orderLocation" type="text" name="location" placeholder="Location" required="required" autocomplete="off" />
<input type="submit" value="Add Spot" />
</form>
</div>
</section>
<div id="randomName"></div>
<div id="randomLocation"></div>
<div id="randomType"></div>
JS:
var formData = [];
var formSubmission = function(name, location, type) {
this.name = name;
this.location = location;
this.type = type;
}
var spotName = document.getElementById("orderName"),
spotLocation = document.getElementById("orderLocation"),
spotType = document.getElementById("orderType");
var addClick = function() {
if (this.value === 'Add Spot') {
this.value = "Cancel";
document.getElementById('order').style.display = 'block';
}
else {
this.value = 'Add Spot';
document.getElementById('order').style.display = 'none';
}
}
document.getElementById("btnAdd1").onclick = addClick;
document.getElementById('order').onsubmit = function(e) {
e.preventDefault();
var submission = new formSubmission(spotName.value, spotLocation.value, spotType.value);
formData.push(submission);
submission = '';
document.getElementById('btnAdd1').value = 'Add Spot';
document.getElementById('order').style.display = 'none';
this.reset();
}
var randomValue;
document.getElementById('btnChoose').onclick = function() {
randomValue = formData[Math.floor(Math.random()*formData.length)];
document.getElementById('randomName').innerHTML = randomValue.name;
document.getElementById('randomLocation').innerHTML = randomValue.location;
document.getElementById('randomType').innerHTML = randomValue.type;
}
I was working on something since you first posted, and here is my take on it:
HTML:
<section>
<p id="message">
<div id="name"></div>
<div id="location"></div>
<div id="type"></div>
</p>
<input type="button" id="btnAdd" value="Add" onclick="doAdd(this);" />
<input type="button" id="btnShow" value="Show" onclick="doShow(this);" />
<div class="form">
<script id="myRowTemplate" type="text/template">
<input type="text" name="name" placeholder="Name of Resturant" required="required" autocomplete="on" onchange="onChanged(this, {{i}})" />
<input type="text" name="type" placeholder="Type of Food" required="required" autocomplete="off" onchange="onChanged(this, {{i}})" />
<input type="text" name="location" placeholder="Location" required="required" autocomplete="off" onchange="onChanged(this, {{i}})" />
</script>
<form id="order" style="display:none;">
<div id="formItems">
</div>
<input type="button" value="Add Spot" onclick="addSpot()" />
</form>
</div>
</section>
JS:
function GetValue() {
if (enteredItems.length) {
var entry = enteredItems[Math.floor(Math.random() * enteredItems.length)];
document.getElementById("name").innerHTML = entry.name;
document.getElementById("location").innerHTML = entry.location;
document.getElementById("type").innerHTML = entry.type;
}
}
function doAdd(elem) {
switch (elem.value) {
case "Add":
document.getElementById('order').style.display = "";
elem.value = "Cancel";
break;
case "Cancel":
document.getElementById('order').style.display = "none";
elem.value = "Add";
break;
}
}
function doShow(elem) {
GetValue();
}
function addSpot(index) { // (note: here, index is only for loading for the first time)
if (index == undefined) index = enteredItems.length;
var newRowDiv = document.createElement("div");
newRowDiv.innerHTML = document.getElementById("myRowTemplate").innerHTML.replace(/{{i}}/g, index); // (this updates the template with the entry in the array it belongs)
if (enteredItems[index] == undefined)
enteredItems[index] = { name: "", location: "", type: "" }; // (create new entry)
else {debugger;
newRowDiv.children[0].value = enteredItems[index].name;
newRowDiv.children[1].value = enteredItems[index].location;
newRowDiv.children[2].value = enteredItems[index].type;
}
document.getElementById("formItems").appendChild(newRowDiv);
}
function onChanged(elem, index) {
enteredItems[index][elem.name] = elem.value;
localStorage.setItem('enteredItems', JSON.stringify(enteredItems)); // (save each time
}
// update the UI with any saved items
var enteredItems = [];
window.addEventListener("load", function() {
var retrievedObject = localStorage.getItem('enteredItems');
if (retrievedObject)
enteredItems = retrievedObject = JSON.parse(retrievedObject);
for (var i = 0; i < enteredItems.length; ++i)
addSpot(i);
});
https://jsfiddle.net/k1vp8dqn/
It took me a bit longer because I noticed you were trying to save the items, so I whipped up something that you can play with to suit your needs.
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);
}
}
I have a dropdown which i create dynamically through javascript.Out of the blue a blank option gets added at 0th position.Now i wanted to remove this blank option through javascript.The only road block i m facing is checking the blank option.Please help
<title>Dynamic DropDownList</title>
<script type="text/javascript" language="javascript">
function AddItemInList()
{
var list = document.getElementById('DropDownList1');
var box = document.getElementById('Text1');
var newListItem = document.createElement('OPTION');
newListItem.text = box.value;
newListItem.value = box.value;
list.add(newListItem);
box.value = "";
box.focus();
}
function RemoveItemInList()
{
var list = document.getElementById('DropDownList1');
if(list.options.length > 0)
{
for(var i = list.options.length - 1; i >= 0; i--)
{
if(list.options[i].selected)
{
list.remove(i);
return false;
}
}
}
else
{
alert('Unable to remove. List is Empty!');
}
}
</script>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<input id="Text1" type="text" />
<input id="Button1" type="button" value="Add New" onclick="AddItemInList();"/>
<input id="Button2" type="button" value="Remove Item" onclick="return RemoveItemInList();"/>
</div>
</form>