I want the script to save the value of the text only when it's checked.
If possible I also want to save the value of it only when it's clicked as a variable so I can do this for example
Name: {here the variable} #if checked
<html>
<head>
<title>Feedback</title>
<script language="Javascript" >
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' +
encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);
}
function addTextHTML()
{
document.addtext.name.value = document.addtext.name.value + ".html"
}
function addTextTXT()
{
document.addtext.name.value = document.addtext.name.value + ".txt"
}
</script>
</head>
<body>
<form name="addtext" onsubmit="download(this['name'].value, this['text'].value)">
<input type="checkbox" name="text" id="test" value=name>
<label for="test">Test</label>
<br>
<input type="text" name="name" value="" placeholder="File Name">
<input type="submit" onClick="addTextHTML();" value="Save As HTML">
<input type="submit" onClick="addTexttxt();" value="Save As TXT">
</form>
</body>
</html>
Try to use break;. But it will give error and you'll be able to see it on console.
So try something like this;
var text = "";
var a;
for (a = 1; a < 2; a++){
//code will be here which gets in the loop
text += "Working";
}
document.getElementById("demo").innerHTML = text;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<meta http-equiv="X-UA-Compatible" content = "ie=edge">
<title> Keat </title>
</head>
<body>
<p id="demo"></p>
</body>
</html>
This will make loop to but it will restrict the loop.
Related
Tried to run a script from an html message box. But the script doesn't run at all. The code is below:
CreateNewEmployeeSheet.gs
function show_form() {
var ss=SpreadsheetApp.getActive();
var sh=ss.getActiveSheet();
var html = HtmlService.createHtmlOutputFromFile("form.html")
.setWidth(300)
.setHeight(200);
var ui=HtmlService.createHtmlOutput(html);
SpreadsheetApp.getUi().showModelessDialog(ui, 'Neue Mitarbeiter hinzufügen');
}
function resulT(){
var ss=SpreadsheetApp.getActive();
ss.getRange("H3").setValue("OK");
}
form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<title>Document</title>
</head>
<body>
<div>
<p>Select a maintenance drone:</p>
<div>
<input type="radio" id="fristarbeiter" name="drone" value="fristarbeiter"
checked>
<label for="huey">Fristarbeiter</label>
</div>
<div>
<input type="radio" id="feststelle" name="drone" value="feststelle">
<label for="dewey">Feststelle</label>
</div>
<br>
<input type="button" value="Submit" class="action" onclick="form_data()" >
<input type="button" value="Close" onclick="google.script.host.close()" />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function form_data(){
google.script.run.withSuccessHandler(response => {
// do something with the response here to indicate success
}).withFailureHandler(error => {
console.error("appendData() ERROR: " + error.message);
alert("appendData() ERROR: " + error.message);
}).resulT();
var values = [{
"fristarbeiter":$("input[name=fristarbeiter]:checked").val(),
}];
closeIt()
};
function closeIt(){
google.script.host.close()
};
</script>
</body>
</html>
The "debug" output is:
Ho {message: "There was an error during the transport or process…this request. Error code = 10, Path = /wardeninit", name: "TransportError", stack: "TransportError: There was an error during the tran…/js/4186432569-warden_bin_i18n_warden.js:195:263)"}
Is there a problem with access allowance?
Change this part of your code and retry again, should be working now
From:
var html = HtmlService.createHtmlOutputFromFile("form.html")
.setWidth(300)
.setHeight(200);
var ui=HtmlService.createHtmlOutput(html);
SpreadsheetApp.getUi().showModelessDialog(ui, 'Neue Mitarbeiter hinzufügen');
To:
var html = HtmlService.createTemplateFromFile('form')
var ui=html.evaluate().setWidth(300) .setHeight(200);
SpreadsheetApp.getUi().showModelessDialog(ui, 'Neue Mitarbeiter hinzufügen');
I am creating a website that allows the user to create a contact, and there is a search box that allows the user to search in the created contacts.
The problem is when the user creates contact and searches, the search box does not work.
The code is running well when I create the contacts manually in the HTML file. It means that the search box only searches in the HTML file, and doesn't search in the newly created contacts by the innerHTML code by JavaScript.
And please answer me with JAVASCRIPT code, not jQuery.
This is my code, only HTML and JAVASCRIPT , no css :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Javascript Project 11</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form id="myForm">
<input id="create" type="text" placeholder="create">
<button id="btn" type="submit">Submit</button>
</form>
<br>
<input id="search" placeholder="search..." type="text">
<div id="demo">
<!--HERE IS YOUR LIST OF CONTACTS-->
<ul id="names">
</ul>
</div>
<script src="js/main.js"></script>
</body>
</html>
Javascript code:
//CREATE NEW CONTACT
//CREATE NEW LI I MEAN
document.getElementById('myForm').addEventListener('submit', createContact)
function createContact(e) {
//input
var menuItem = document.getElementById('menuItem');
var newName = document.getElementById('create').value;
var demo = document.getElementById('demo');
demo.innerHTML +=
'<li class=menuItem>' + newName + '</li>';
e.preventDefault();
}
//Search Filter
var searchBox = document.getElementById('search');
searchBox.addEventListener('keyup', filter);
function filter() {
var ul = document.getElementById('names');
var li = ul.querySelectorAll('li.menuItem');
var searchBoxValue = document.getElementById('search').value.toUpperCase();
for (var i = 0; i < li.length; i++) {
var newName = document.getElementById('create').value;
var a = li[i].getElementsByTagName('a')[0];
if (a.innerHTML.toUpperCase().indexOf(searchBoxValue) > -1) {
li[i].style.display = '';
}
else {
li[i].style.display = 'none';
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Javascript Project 11</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form id="myForm">
<input id="create" type="text" placeholder="create">
<button id="btn" type="submit">Submit</button>
</form>
<br>
<input id="search" placeholder="search..." type="text">
<div id="demo">
<!--HERE IS YOUR LIST OF CONTACTS-->
<ul id="names">
</ul>
</div>
<script src="js/main.js"></script>
</body>
</html>
You append new items to <div id="demo"> instead of <ul id="names">. It should be like this:
var names = document.getElementById('names');
names.innerHTML += '<li class="menuItem">' + newName + '</li>';
//CREATE NEW CONTACT
//CREATE NEW LI I MEAN
document.getElementById('myForm').addEventListener('submit', craeteContact)
function craeteContact(e) {
//input
var menuItem = document.getElementById('menuItem');
var newName = document.getElementById('create').value;
var names= document.getElementById('names');
names.innerHTML +=
'<li class="menuItem">' + newName + '</li>';
e.preventDefault();
}
//Search Filter
var searchBox = document.getElementById('search');
searchBox.addEventListener('keyup', filter);
function filter() {
var ul = document.getElementById('names');
var li = ul.querySelectorAll('li.menuItem');
var searchBoxValue = document.getElementById('search').value.toUpperCase();
for (var i = 0; i < li.length; i++) {
var newName = document.getElementById('create').value;
var a = li[i].getElementsByTagName('a')[0];
if (a.innerHTML.toUpperCase().indexOf(searchBoxValue) > -1) {
li[i].style.display = '';
}
else {
li[i].style.display = 'none';
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Javascript Project 11</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form id="myForm">
<input id="create" type="text" placeholder="create">
<button id="btn" type="submit">Submit</button>
</form>
<br>
<input id="search" placeholder="search..." type="text">
<div id="demo">
<!--HERE IS YOUR LIST OF CONTACTS-->
<ul id="names">
</ul>
</div>
<script src="js/main.js"></script>
</body>
</html>
it's because you place li elements in #demo instead of #names
you should use console.log() to debug
Use an array to save names and then search the array. why you get data from UI everytime
var searchBox = document.getElementById('search');
searchBox.addEventListener('keyup', filter);
document.getElementById('myForm').addEventListener('submit', craeteContact)
var names = [];
function craeteContact(e) {
var menuItem = document.getElementById('menuItem');
var newName = document.getElementById('create').value;
var demo = document.getElementById('demo');
names.push(newName.toUpperCase()); // add new name to array
demo.innerHTML += '<li class=menuItem>' + newName + '</li>';
e.preventDefault();
}
function filter() {
var searchValue = searchBox.value.toUpperCase();
for (var i = 0; i < names.length; i++) {
if (names[i].indexOf(searchValue) > -1) {
console.log("found");
}
else {
console.log("not found");
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Javascript Project 11</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form id="myForm">
<input id="create" type="text" placeholder="create">
<button id="btn" type="submit">Submit</button>
</form>
<br>
<input id="search" placeholder="search..." type="text">
<div id="demo">
<!--HERE IS YOUR LIST OF CONTACTS-->
<ul id="names">
</ul>
</div>
<script src="js/main.js"></script>
</body>
</html>
I want display the form data to new tab using JavaScript only. This is not proceeding my task. How to achieve this?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script language="JavaScript">
function showInput() {
var message_entered = document.getElementById("user_input").value;
document.getElementById('display').innerHTML = message_entered;
}
</script>
</head>
<body>
<form>
<label><b>Enter a Message</b></label>
<input type="text" name="message" id="user_input">
</form>
<input type="submit" onclick="showInput();"><br />
<label>Your input: </label>
<p><span id='display'></span> </p>
</body>
</html>
var data = "<p>This is new tab'</p><br/>"+message_entered;
newWindow = window.open("data:text/html," + encodeURIComponent(data),
"_blank", "width=200,height=100");
newWindow.focus();
DEMO
i need a little help, figuring out my javascript output format
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>cleaner</title>
<script language="javascript" type="text/javascript">
function show (text){
var userInput = document.getElementById('textbox').value;
userInput = userInput.replace(/\W/g, '');
userInput = userInput.replace(/ /gi,", ");
document.getElementById('text').innerHTML = userInput;
}
</script>
</head>
<body>
<input type='textbox' name='textbox' id='textbox' value="Title Here"/>
<input type=button name=button value="OK" onClick="show()"/>
<div id="text"></div></body></html>
my input
& ^A % - _ ^ % clean* this$ keyword-
my result is
A_cleanthiskeyword
i want a result like this
a, clean, this, keyword
what should i add in my replace code?
thanks
Please check this code this will works for you
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>cleaner</title>
<script language="javascript" type="text/javascript">
function show ()
{
var userInput = document.getElementById('textbox').value;
var num = userInput.indexOf('A');
userInput = userInput.match(/[a-z]+/gi).join(", ").toLowerCase().replace(/ /g, '');
document.getElementById('text').innerHTML = userInput.substring(num-1);
}
}
</script>
</head>
<body>
<input type='textbox' name='textbox' id='textbox' value="Title Here"/>
<input type=button name=button value="OK" onClick="show()"/>
<div id="text"></div>
</body></html>
Here is link for JSFiddle for your code jsfiddle
Try this:
function show (text){
var userInput = document.getElementById('textbox').value;
userInput = userInput.match(/[a-z]+/gi).join(", ").toLowerCase();
document.getElementById('text').innerHTML = userInput;
}
I have here a working code that lets the user input something and it displays the output right away, but I want to create a function triggered by a button that would clear the output area itself. Is this possible with my code?
Here is my complete code:
<html>
<meta charset="UTF-8">
<head>
<title>Sample Array</title>
<script>var index = 0;</script>
</head>
<body>
Input:
<input type="text" id="input">
<input type="button" value="GO" onClick="press(input.value)">
<p id = "display">
<script>
var sample = new Array();
function press(Number)
{
if ( Number != '' )
{
sample[index] = Number;
document.getElementById("display").innerHTML += sample[index] + "<br>";
index++;
}
else
alert("empty");
document.getElementById('input').value = '';
}
</script>
</body>
</html>
Try this,
Javascript:
function Clean(){
document.getElementById('display').innerHTML='';
}
HTML:
<input type="button" value="Clean" onClick="Clean()"/>
Do this:
Notes:
-I have closed the P element.
-A new button was added "Clean" and you can use JQuery as it is shown below to clean the output (remember to have JQuery referenced in your page).
<html>
<meta charset="UTF-8">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Sample Array</title>
<script>var index = 0;</script>
</head>
<body>
Input:
<input type="text" id="input" />
<input type="button" value="GO" onClick="press(input.value)"/>
<input type="button" value="Clean" onClick="$('#display').html('');"/>
<p id = "display"></p>
<script>
var sample = new Array();
function press(Number)
{
if ( Number != '' )
{
sample[index] = Number;
document.getElementById("display").innerHTML += sample[index] + "<br>";
index++;
}
else
alert("empty");
document.getElementById('input').value = '';
}
</script>
</body>