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>
Related
function onEdit(e) {
var columnToWatch = 116;
var sheet = SpreadsheetApp.getActiveSheet();
var clickedCell = sheet.getActiveCell();
if (clickedCell.getColumn() == columnToWatch) {
showOptionWindow(clickedCell);
}
}
function showOptionWindow(clickedCell) {
var html = '<html><body><form><p>Options :</p>';
html += '<input type="checkbox" name="option1" value="APIs/Storefront">APIs/Storefront<br>';
html += '<input type="checkbox" name="option2" value="Employee Rewards">Employee Rewards<br>';
html += '<input type="checkbox" name="option3" value="Channel Incentives">Channel Incentives<br>';
html += '<input type="checkbox" name="option4" value="Customer Rewards">Customer Rewards<br>';
html += '<input type="checkbox" name="option5" value="Payouts">Payouts<br>';
html += '<br>'
html += '<input type="submit" value="Submit" style="font-weight:bold; background-color:black; color:white;" onclick="google.script.run.processForm(this.form)">';
html += '</form></body></html>';
var ui = HtmlService.createHtmlOutput(html)
.setWidth(250)
.setHeight(275);
SpreadsheetApp.getUi().showModalDialog(ui, 'Pillar Selection');
}
function processForm(form) {
var selectedOptions = [];
if (form.option1.checked) {
selectedOptions.push(form.option1.value);
}
if (form.option2.checked) {
selectedOptions.push(form.option2.value);
}
if (form.option3.checked) {
selectedOptions.push(form.option3.value);
}
if (form.option4.checked) {
selectedOptions.push(form.option4.value);
}
if (form.option5.checked) {
selectedOptions.push(form.option5.value);
}
var sheet = SpreadsheetApp.getActiveSheet();
var clickedCell = sheet.getActiveCell();
clickedCell.setValue(selectedOptions.join(', '));
SpreadsheetApp.getUi().alert('You selected: ' + selectedOptions.join(', '));
SpreadsheetApp.getUi().close();
}
When the user submits the form by clicking the submit button, the script runs the processForm function to process the form data. The selected options are stored in an array, selectedOptions, and joined into a string with a comma-space separator. The value of the clicked cell is then set to the joined string of selected options and a confirmation alert is displayed to the user.
I think it would be simpler to just allow the user to close the dialog than automate it because no solutions are working. I did find an article about this topic on Spreadsheet Dev regarding your issue.
Hope it helps!
Try this:
Use an installable onEdit trigger:
function showOptionWindow() {
var html = '<html><body><form><p>Options :</p>';
html += '<input type="checkbox" name="option1" value="APIs/Storefront">APIs/Storefront<br>';
html += '<input type="checkbox" name="option2" value="Employee Rewards">Employee Rewards<br>';
html += '<input type="checkbox" name="option3" value="Channel Incentives">Channel Incentives<br>';
html += '<input type="checkbox" name="option4" value="Customer Rewards">Customer Rewards<br>';
html += '<input type="checkbox" name="option5" value="Payouts">Payouts<br>';
html += '<br>'
html += '<input type="button" value="Submit" style="font-weight:bold; background-color:black; color:white;" onclick="google.script.run.withSuccessHandler((v) => {google.script.host.close();}).processForm(this.parentNode)"/>';
html += '</form></body></html>';
var ui = HtmlService.createHtmlOutput(html)
.setWidth(250)
.setHeight(275);
SpreadsheetApp.getUi().showModelessDialog(ui, 'Pillar Selection');
}
function onMyEdit(e) {
//e.source.toast("Entry")
const sh = e.range.getSheet();
if (e.range.columnStart == 1 && sh.getName() == "Sheet0") {
//e.source.toast("Gate1")
showOptionWindow(e.range);
}
}
function processForm(obj) {
Logger.log(JSON.stringify(obj))
var selectedOptions = [];
if (obj.hasOwnProperty("option1")) {
selectedOptions.push(obj.option1);
}
if (obj.hasOwnProperty("option2")) {
selectedOptions.push(obj.option2);
}
if (obj.hasOwnProperty("option3")) {
selectedOptions.push(obj.option3);
}
if (obj.hasOwnProperty("option4")) {
selectedOptions.push(obj.option4);
}
if (obj.hasOwnProperty("option5")) {
selectedOptions.push(obj.option5);
}
Logger.log(JSON.stringify(selectedOptions));
var sheet = SpreadsheetApp.getActiveSheet();
var clickedCell = sheet.getActiveCell();
clickedCell.setValue(selectedOptions.join(', '));
SpreadsheetApp.getUi().alert('You selected: ' + selectedOptions.join(', '));
return true;
}
Here is an example of how to close the modal dialog. I have split the html into its own file to better manage the html code.
Code.gs
function showTest() {
var html = HtmlService.createHtmlOutputFromFile("HTML_Test");
SpreadsheetApp.getUi().showModalDialog(html,"Test");
}
HTML_Test.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form>
<p>Options :</p>
<input type="checkbox" name="option1" value="APIs/Storefront">APIs/Storefront<br>
<input type="checkbox" name="option2" value="Employee Rewards">Employee Rewards<br>
<input type="checkbox" name="option3" value="Channel Incentives">Channel Incentives<br>
<input type="checkbox" name="option4" value="Customer Rewards">Customer Rewards<br>
<input type="checkbox" name="option5" value="Payouts">Payouts<br>
<br>
<input type="submit" value="Submit" style="font-weight:bold; background-color:black; color:white;" onclick="clickSubmit(this.form)">
</form>
<script>
function clickSubmit(form) {
try {
google.script.run.withSuccessHandler(
function() {
google.script.host.close();
}
).processForm(form);
}
catch(err) {
alert(err);
}
}
</script>
</body>
</html>
i want to make form as many as input text, i'm strugling to make a new form into the new div. if input is 3 then make 3 form, if input is 2 then input is just 2.
<input type="text" id="CountForm">
<form name="regis" id="regis" method="post" action="">
<input id="name1" name="name1" />
<input id="email1" name="email1" />
<input id="phone1" name="phone1" />
</form>
Is it this ?
var add = document.getElementById('button');
add.addEventListener('click', function(){
var num = parseInt(document.getElementById('CountForm').value);
var wrapper = document.querySelector('.wrapper');
wrapper.innerHTML = '';
for(var i =1; i<= num; i++){
var form =
`<form name="regis" id="regis${i}" method="post" action="">
<input id="name1" name="name1" />
<input id="email1" name="email1" />
<input id="phone1" name="phone1" />
</form>`
wrapper.innerHTML = wrapper.innerHTML + form;
}
})
<input type="text" id="CountForm" placeholder = "Enter form number">
<input type=button id = "button" value = "add">
<div class = "wrapper">
</div>
You can do like this as below
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
div{
padding:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<title>jQuery add textbox example</title>
<body>
<h1>jQuery add textbox example</h1>
<body>
<form name="regis" id="regis" method="post" action="">
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type='textbox' id='textbox1' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</form>
</body>
You may Try For this:
var add = document.getElementById('button');
add.addEventListener('click', function(){
var num = parseInt(document.getElementById('CountForm').value);
var wrapper = document.querySelector('.wrapper');
wrapper.innerHTML = '';
for(var i =1; i<= num; i++){
var form =
`<form name="regis" id="regis${i}" method="post" action="">
<input id="name1" name="name1" placeholder="please enter name"/>
<input id="email1" name="email1" placeholder="please enter email" />
<input id="phone1" name="phone1" placeholder="please enter phone"/>
<input type="button" id="button12" name="button12" value="submit"/>
</form>`
wrapper.innerHTML = wrapper.innerHTML + form;
}
})
<input type="text" id="CountForm" placeholder = "Enter form number">
<input type=button id = "button" value = "add">
<div class = "wrapper">
</div>
I have a form where users have 10 text fields. But initially only 1 text field is shown. If the user needs to enter more data they can click on the add one button and then displays the next text field from the maximum of 10.
like so:
Im working with angular.js so I thought about using ng-show to hide & show fields.
<div class="form-group">
<input type="text" class="form-control" name="pointOne" ng-show="pointOne">
<input type="text" class="form-control" name="pointTwo" ng-show="pointTwo">
<input type="text" class="form-control" name="pointThree" ng-show="pointThree">
<span><button ng-click="addOne()">Add One</button></span>
</div>
I am unable to figure out the most effective way to doing this. Any hints, help or suggestions would be great.
Haven't tested it but this is how I would do it:
<div class="form-group" >
<input ng-repeat="i in getNumber(number)" type="text" class="form-control" name="point{{i}}" ng-show="$index<=counter">
<span><button ng-click="addOne()">Add One</button></span>
</div>
And in your controller just add something like this:
$scope.number = 10;
$scope.getNumber = function(num) {
return new Array(num);
}
$scope.counter=0;
$scope.addOne= function() {
$scope.counter++;
}
You could easily add elements to the DOM:
function createPetField() {
var input = document.createElement('input');
input.type = 'text';
input.name = 'pet[]';
return input;
}
var form = document.getElementById('myForm');
document.getElementById('addPet').addEventListener('click', function(e) {
form.appendChild(createPetField());
});
To go the Angular route, I'd suggest using ng-repeat. Here's a fiddle that might not be exactly what you're looking for, but it shows how to use ng-repeat and you can modify as needed:
Fiddle: https://jsfiddle.net/jvsnao97/5/
<body ng-app="myApp" ng-controller="myController">
<button ng-click="add_input()">Add Input</button>
<br/><br/>
<input type="text" class="form-control" ng-repeat="x in random_array" name="point{{$index}}">
</body>
var app = angular.module("myApp", []);
app.controller("myController", ["$scope", function($scope) {
$scope.random_array = [0]
$scope.add_input = function() {
var i = $scope.random_array.length
$scope.random_array.push(i)
}
}]);
When you want a new <input>, you simply push a new element to $scope.random_array.
Probably good way is to make array of input fields and then ng-repeat them. When user clicks on AddOne, then just push input field in array, and it will be there.
<html>
<head>
<title>jQuery add / remove textbox</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
div{
padding:8px;
}
</style>
</head>
<body>
<h1>jQuery add / remove textbox example</h1>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
</head><body>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type='textbox' id='textbox1' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</body>
</html>
JQuery can be used to add inputs in your addOne() method.
Like so:
var maxInputs = 10;
var currentInput = 0;
function addOne() {
currentInput++;
if (currentInput > maxInputs) {
currentInput = maxInputs;
return;
}
var name = "point" + currentInput;
var $input = $("<input type='text' class='form-control' name='" + name + "' ng-show='" + name + "'>");
$(".form-group").append($input);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<span><button onclick="addOne()">Add One</button></span>
</div>
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);
}
}
The form below is working as I want except for one thing. When I click the 'Add' link I the texts of all the textboxes go back to its default value like seen in the images. How can I fix it? Thanks.
before click:
after click on 'Add':
Code:
function addSection() {
var str = '<div>' +
'<input type="text" name="composer" value="Compositor" />' +
'<input type="text" name="peca" value="Peca" size="40" />' +
'<input type="button" value="x" style="width: 26px" onclick="delSection(this)" /><br />' +
'</div>';
document.getElementById("programa").innerHTML += str;
}
function delSection(field) {
field.parentNode.outerHTML = "";
}
window.onload = addSection;
</script>
<fieldset>
<legend>Programa</legend>
<div id="programa">
</div>
<a href="#" onclick="addSection()" >Add</a><br />
</fieldset>
<input type="submit" value="Inscrever Aluno" name="submit" />
You can overcome this, using appendChild()
JS
function newSet() {
var div = document.createElement("div");
var composer = document.createElement("input");
composer.type="text";
composer.value = "Compositer";
var peca = document.createElement("input");
peca.type = "text";
peca.value = "Peca";
var button = document.createElement("input");
button.type = "submit"
div.appendChild(composer);
div.appendChild(peca);
div.appendChild(button);
return div
}
function addSection() {
document.getElementById("programa").appendChild(newSet());
}
Demo
This is the correct JS to insert new elements:
function addSection() {
var newDiv = document.createElement('div');
var str = '<input type="text" name="composer" value="Compositor" />' +
'<input type="text" name="peca" value="Peca" size="40" />' +
'<input type="button" value="x" style="width: 26px" onclick="delSection(this)" /><br />';
newDiv.innerHTML = str;
document.getElementById("programa").appendChild(newDiv);
}
You need to find a solution for naming (or identification) of the elements so you can remove them with delSelection(field)
create a name like name="composer[]" and name="peca[]"
if you don't understand how to implement the above code then go to
http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/