I used this to build a form in Google Apps that allows employees to fill out a form and attach a document that all feeds into a spreadsheet.
My issue now is I need to make certain fields required. I did so by adding the "required" attribute to those fields. That didn't work, so I realized I need to change my submit button from type="button" to type="submit," however, upon doing THAT...my form now doesn't work.
I can't find anything in any of the code that points to only type="button" working to submit the form.
I've included my code below, as well as a link to my sheet/script if anyone wants to poke around in there!
Code.gs
var submissionSSKey = '1zzRQwgXb0EN-gkCtpMHvMTGyhqrx1idXFXmvhj4MLsk';
var folderId = "0B2bXWWj3Z_tzTnNOSFRuVFk2bnc";
function doGet(e) {
var template = HtmlService.createTemplateFromFile('Form.html');
template.action = ScriptApp.getService().getUrl();
return template.evaluate();
}
function processForm(theForm) {
var fileBlob = theForm.myFile;
var folder = DriveApp.getFolderById(folderId);
var doc = folder.createFile(fileBlob);
// Fill in response template
var template = HtmlService.createTemplateFromFile('Thanks.html');
var name = template.name = theForm.name;
var email = template.email = theForm.email;
var brand = template.brand = theForm.brand;
var date = template.date = theForm.date;
var amount = template.amount = theForm.amount;
var split = template.split = theForm.split;
var manufacturer = template.manufacturer = theForm.manufacturer;
var pace = template.pace = theForm.pace;
var reason = template.reason = theForm.reason;
var category = template.category = theForm.category;
var subcategory = template.subcategory = theForm.subcategory;
var message = template.message = theForm.message;
var fileUrl = template.fileUrl = doc.getUrl();
// Record submission in spreadsheet
var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0];
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 13).setValues([[name, email,brand,date,amount,split,manufacturer,pace,reason,category,subcategory,message,fileUrl]]);
// Return HTML text for display in page.
return template.evaluate().getContent();
}
Form.html
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// Javascript function called by "submit" button handler,
// to show results.
function updateOutput(resultHtml) {
toggle_visibility('inProgress');
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = resultHtml;
}
// From blog.movalog.com/a/javascript-toggle-visibility/
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//Toggle Secondary Categories
$(function() {
$('input[type="radio"]').click(function() {
if ($(this).attr("id") == "dealer") {
$(".box").not(".dealer").hide();
$(".dealer").show();
}
if ($(this).attr("id") == "online") {
$(".box").not(".online").hide();
$(".online").show();
}
if ($(this).attr("id") == "advertising") {
$(".box").not(".advertising").hide();
$(".advertising").show();
}
if ($(this).attr("id") == "pricing") {
$(".box").not(".pricing").hide();
$(".pricing").show();
}
if ($(this).attr("id") == "correspondence") {
$(".box").not(".correspondence").hide();
$(".correspondence").show();
}
if ($(this).attr("id") == "meetings") {
$(".box").not(".meetings").hide();
$(".meetings").show();
}
if ($(this).attr("id") == "other") {
$(".box").not(".other").hide();
$(".other").show();
}
});
});
//Calculate Split
function check(split)
{
var split=document.forms[0].split.value
var amount=document.forms[0].amount.value
var tip = (amount*split)
document.forms[0].manufacturer.value=tip
var tip2 = (amount-tip)
document.forms[0].pace.value=tip2
}
</script>
<div id="formDiv" class="form">
<!-- Form div will be hidden after form submission -->
<form id="myForm">
<div class="row">
<h1>Co-op Submission Form</h1>
<h2>Please fill out the form completely, including uploading any documentation associated with your co-op claim.</h2>
</div>
<h3>Your Information</h3>
<h4>Name:</h4> <input name="name" type="text" class="form-control" required/><br/>
<h4>Email:</h4> <input name="email" type="text" class="form-control"required/><br/>
<h3>Co-Op Information</h3>
<h4>Brand:</h4>
<select name="brand" class="form-control" required>
<option>Select Option</option>
<option>Bluebird</option>
<option>Brown</option>
<option>Ferris</option>
<option>Giant Vac</option>
<option>Honda</option>
<option>Hurricane</option>
<option>Jonsered</option>
<option>Little Wonder</option>
<option>RedMax</option>
<option>SCAG</option>
<option>Snapper Pro</option>
<option>Sno-Way</option>
<option>SnowEx</option>
<option>Wright</option>
<option>Ybravo</option>
</select><br/>
<h4>Invoice Date:</h4> <input name="date" type="text" class="form-control"/><br/>
<h4> Total Co-Op Amount</h4> <input type="text" name="amount" class="form-control"/><br />
<h4>Co-Op Split:</h4>
<input type="radio" name="split" onclick="check(this.value)" value="1">100%<br>
<input type="radio" name="split" onclick="check(this.value)" value=".5">50/50<br>
<input type="radio" name="split" onclick="check(this.value)" value=".75">75/25<br />
<input type="radio" name="split" onclick="check(this.value)" value=".25">25/75 (Dealer Pays 50%)<br />
<h4>Manufacturer Amount:</h4> <input type="text" name="manufacturer" style="border:none;font-weight:bold;"><br />
<h4>Pace Amount:</h4> <input type="text" name="pace" style="border:none;font-weight:bold;" >
<h4>Description:</h4> <input name="reason" type="text" cols="20" rows="5" class="form-control" required/><br />
<h4>Co-Op Category:</h4>
<input type="radio" name="category" id="dealer" value="Dealer Advertising">Dealer Advertising<br />
<input type="radio" name="category" id="online" value="Digital/Online Marketing">Digital/Online Advertising<br />
<input type="radio" name="category" id="meetings" value="Meetings and Schools">Meetings and Schools<br />
<input type="radio" name="category" id="advertising" value="PACE Advertising">PACE Advertising<br />
<input type="radio" name="category" id="pricing" value="Program Pricing Promotions">Program Pricing Promotions<br />
<input type="radio" name="category" id="correspondence" value="PACE-to-Dealer Correspondence">PACE-to-Dealer Correspondence<br />
Other: <input type="text" id="other" name="category" class="form-control"/><br />
<!--Dealer Advertising-->
<div class="dealer box" style="display:none;">
<h4>Dealer Advertising:</h4>
<input type="radio" name="subcategory" value="Billboards">Billboards<br />
<input type="radio" name="subcategory" value="Logo Merch">Logo Merch (hats, shirts, pens, etc.)<br />
<input type="radio" name="subcategory" value="Magazine/Newspaper">Magazine/Newspaper<br />
<input type="radio" name="subcategory" value="Open House/Trade Show">Open House & Dealer Trade Show<br />
<input type="radio" name="subcategory" value="POP">POP (lit, posters,displays, etc)<br />
<input type="radio" name="subcategory" value="Radio">Radio<br />
<input type="radio" name="subcategory" value="PACE Trade Show">PACE Trade Show<br />
<input type="radio" name="subcategory" value="TV">TV<br />
<input type="radio" name="subcategory" value="Direct Mail">Direct Mail (post cards, flyers)<br />
<input type="radio" name="subcategory" value="Sponsorships">Sponsorships<br />
</div>
<!--Digital/Online Advertising-->
<div class="online box" style="display: none;">
<h4>Digital/Online Marketing:</h4>
<input type="radio" name="subcategory" value="CMS/Advertising">CMS/Dealer Website Advertising<br />
<input type="radio" name="subcategory" value="TRM Digital Marketing">TRM Digital Marketing (google, facebook, retargeting, demo site, youtube)
</div>
<!--Meetings and Schools-->
<div class="meetings box" style="display: none;">
</div>
<!--PACE Advertising-->
<div class="advertising box" style="display: none;">
<h4>PACE Advertising:</h4>
<input type="radio" name="subcategory" value="Billboards">Billboards<br />
<input type="radio" name="subcategory" value="Logo Merch">Logo Merch (hats, shirts, pens, etc.)<br />
<input type="radio" name="subcategory" value="POP">POP (lit, posters,displays, etc)<br />
<input type="radio" name="subcategory" value="PACE Trade Show">PACE Trade Show<br />
</div>
<!--Program Pricing Promotions-->
<div class="pricing box" style="display: none;">
<h4>Program Pricing Promotions:</h4>
<input type="radio" name="subcategory" value="Promo Prices, Discounts, Rebates - Unassigned">Promo Prices, Discounts, Rebates - Unassigned<br />
<input type="radio" name="subcategory" value="Promo Pricing">Promo Pricing<br />
<input type="radio" name="subcategory" value="Demo">Demo<br />
<input type="radio" name="subcategory" value="Fleet">Fleet<br />
<input type="radio" name="subcategory" value="Spiffs and Rebates">Spiffs and Rebates<br />
</div>
<!--PACE-to-Dealer Correspondence-->
<div class="correspondence box" style="display: none;">
<h4>PACE-to-Dealer Correspondence:</h4>
<input type="radio" name="subcategory" value="Pacesetter Catalog">Pacesetter Catalog<br />
<input type="radio" name="subcategory" value="Dealer Programs (updates, reprints)">Dealer Programs (updates, reprints)<br />
</div>
<h4>Message:</h4> <textarea name="message" class="form-control"></textarea><br/>
<h4> Supporting Documentation:</h4><input name="myFile" type="file"/><br />
<input type="submit" value="Submit" class="btn" onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
google.script.run
.withSuccessHandler(updateOutput)
.processForm(this.parentNode)" />
</form>
<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
Uploading. Please wait...
</div>
<div id="output">
<!-- Blank div will be filled with "Thanks.html" after form submission. -->
</div>
</div>
<!--Begin Footer-->
<div class="footer">
<div class="bottomStrip">
<div class="col-lg-3 col-lg-push-1">© <script type="text/javascript"> document.write(new Date().getFullYear());</script>, PACE, Inc. All rights Reserved.</div>
<div class="col-lg-4 col-lg-push-5">PACE, Inc., 739 S. Mill St., Plymouth, MI 48170-1821</div>
</div>
</div>
<!--End Footer-->
</body>
</html>
The Sheet (I did remove everything from the 'Name' and 'Email' columns, as that contained several of my co-workers' full names and email addresses!)
There's an onclick handler on the input 'submit' button:
google.script.run.withSuccessHandler(updateOutput).processForm(this.parentNode)
Submitting the form will use this script, not the default input submit behaviour. So when you change the type from button to submit, you have to change the script to prevent the default submit behaviour from triggering.
Related
I am trying to disable a button that requires both an input of text being typed and one of three checkboxes being checked. The text is a user name and the checkbox is a difficulty of either easy, medium, or hard. Currently, my function only works if one of the requirements is met. So if the text has been inputted the button is enabled and the same with the checkboxes.
startButton.addEventListener('click', startQuiz);
function disableButton() {
if (document.getElementById("username").value === "") {
document.getElementById("start-btn").disabled = true;
}
if (document.getElementsByName("difficulty").checked) {
document.getElementById("start-btn").disabled = true;
}
else {
document.getElementById("start-btn").disabled = false;
}
}
<div>
<label for="username">Enter your Username</label>
<input type="text" name="username" id="username" onkeyup="disableButton()" placeholder="Enter Username">
</div>
<div id="difficulty" class="center">
<div>
<input type="radio" name="difficulty" id="easy-diff" onclick="disableButton()">
<label for="easy-diff">Easy</label>
</div>
<div>
<input type="radio" name="difficulty" id="medium-diff" onclick="disableButton()">
<label for="medium-diff">Medium</label>
</div>
<div>
<input type="radio" name="difficulty" id="hard-diff" onclick="disableButton()">
<label for="hard-diff">Hard</label>
</div>
</div>
<button id="start-btn" type="submit" class="btn" disabled>Start</button>
every time the value changed, check both input
let diffChecked = false;
let startButton = document.querySelector('#start-btn');
let username = document.querySelector('#username');
let difficulty = document.querySelectorAll('[name="difficulty"]');
username.addEventListener('input', function() {
validateInput();
})
difficulty.forEach(function(item) {
item.addEventListener('click', function() {
diffChecked = true;
validateInput();
})
})
function validateInput() {
if (username.value && diffChecked) {
startButton.disabled = false;
} else {
startButton.disabled = true
}
}
<div>
<label for="username">Enter your Username</label>
<input type="text" name="username" id="username" placeholder="Enter Username">
</div>
<div id="difficulty" class="center">
<div>
<input type="radio" name="difficulty" id="easy-diff">
<label for="easy-diff">Easy</label>
</div>
<div>
<input type="radio" name="difficulty" id="medium-diff">
<label for="medium-diff">Medium</label>
</div>
<div>
<input type="radio" name="difficulty" id="hard-diff">
<label for="hard-diff">Hard</label>
</div>
</div>
<button id="start-btn" type="submit" class="btn" disabled>Start</button>
Instead of a div you must use the Semantic HTML form, that will do the job for you without even writing javascript code.
<form id="difficulty" class="center">
<div>
<input type="radio" name="difficulty" id="easy-diff" required>
<label for="easy-diff">Easy</label>
</div>
<div>
<input type="radio" name="difficulty" id="medium-diff" required>
<label for="medium-diff">Medium</label>
</div>
<div>
<input type="radio" name="difficulty" id="hard-diff" required>
<label for="hard-diff">Hard</label>
</div>
<button type="submit">Enviar</button>
</form>
Inside a form tag, the submit button only works with all required inputs does not have an undefined value.
And you may call your function startQuiz as an action, if you want.
The action attribute specifies where to send the form-data when a form is submitted.
<form id="difficulty" class="center" action="startQuiz()">
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script type="text/javascript">
required = function(fields) {
var valid = true;
fields.each(function () { // iterate all
var $this = $(this);
if (($this.is(':checkbox') && !$this.is(":checked")) || // checkbox
(($this.is(':text') || $this.is('textarea')) && !$this.val()) || // text and textarea
($this.is(':radio') && !$('input[name='+ $this.attr("name") +']:checked').length)) { // radio
valid = false;
}
});
return valid;
}
validateRealTime = function () {
var fields = $("form :input:not(:hidden)"); // select required
fields.on('keyup change keypress blur', function () {
if (required(fields)) {
{submit.disabled = false} // action if all valid
} else {
{submit.disabled = true} // action if not valid
}
});
}
validateRealTime();
</script>
<form action="" method="post" id="submitform" />
Title:
<input type="text" name="title">
Select:
<select>
<option value="">aaa</option>
<option value="1">bbb</option>
<option value="2">ccc</option>
</select>
<br/>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
<br>
Description:
<textarea name="description"></textarea>
<br/>
Category:
<ul class="list:category categorychecklist form-no-clear" id="categorychecklist">
<li id="category-19"><label class="selectit"><input type="radio" id="in-category-19" name="category" value="19"> Animation</label></li>
<li id="category-20"><label class="selectit"><input type="radio" id="in-category-20" name="category" value="20"> Anime</label></li>
</ul>
<input type="submit" value="Submit Topic" class="button-primary" name="submit" id="submit" disabled="disabled" />
</form>
Hi i want to enable the submit button only when all field are filled specially the select input and the file input here's a working code for the other type except the select and the file type
The code below is doing this
When the text field is empty the submit should be disabled
(disabled="disabled").
When something is typed in the text field to remove the disabled
attribute.
If the text field becomes empty again(the text is deleted) the
submit button should be disabled again.
My aim is to enable submit button only once everything has been filled. How do I do this?
Any ideas? how can i disable the submit button when user is not choosing a file or an option in the form
<form action="" method="post" id="submitform" /> Title:
<input type="text" name="title"> Select:
<select>
<option value="">aaa</option>
<option value="1">bbb</option>
<option value="2">ccc</option>
</select>
<br/>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
<br> Description:
<textarea name="description"></textarea>
<br/> Category:
<ul class="list:category categorychecklist form-no-clear" id="categorychecklist">
<li id="category-19"><label class="selectit"><input type="radio" id="in-category-19" name="category" value="19"> Animation</label></li>
<li id="category-20"><label class="selectit"><input type="radio" id="in-category-20" name="category" value="20"> Anime</label></li>
</ul>
<input type="submit" value="Submit Topic" class="button-primary" name="submit" id="submit" disabled="disabled" />
</form>
You closed your form tag
You cannot name or ID anything in a form "submit" - it will stop any future submission by script so get used to not doing it
You COULD just add the required attribute to the fields, then the form would give error when submitted
Here is how to disable in not both text field and textarea have content
$(function() {
$("#submitform").on("input",function() {
const anythingEmpty = $(":input").val().trim() === "";
$("#subBut").prop("disabled",anythingEmpty);
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" id="submitform"> Title:
<input type="text" name="title"> Select:
<select>
<option value="">aaa</option>
<option value="1">bbb</option>
<option value="2">ccc</option>
</select>
<br/>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
<br> Description:
<textarea name="description"></textarea>
<br/> Category:
<ul class="list:category categorychecklist form-no-clear" id="categorychecklist">
<li id="category-19"><label class="selectit"><input type="radio" id="in-category-19" name="category" value="19"> Animation</label></li>
<li id="category-20"><label class="selectit"><input type="radio" id="in-category-20" name="category" value="20"> Anime</label></li>
</ul>
<input type="submit" id="subBut" value="Submit Topic" class="button-primary" disabled="disabled" />
</form>
Plain JS
window.addEventListener("load",function() {
document.getElementById("submitform").addEventListener("input",function() {
const desEmpty = this.querySelector("[name=description]").value.trim() === "";
const txtEmpty = this.querySelector("[name=title]").value.trim() === "";
document.getElementById("subBut").disabled = desEmpty || txtEmpty
})
})
If u add id on every input, u can use next js vanilla code, and add onchange function on form.
<head>
<script>
function validate(){
var submit = document.getElementById('submit');
var title = document.getElementById('title').value === ""? false: true;
var file = document.getElementById("myfile").value === ""? false: true;
var val19 = document.getElementById("in-category-19").checked;
var val20 = document.getElementById("in-category-20").checked;
var checked = val19 || val20;
var textArea = document.getElementById("textarea").value===""?false: true;
var filled =(checked && title&& textArea && file);
filled? submit.disabled=false: submit.disabled=true;
}
</script>
</head>
<body><form onchange="validate();" action="" method="post" id="submitform" /> Title:
<input type="text" id="title" name="title"> Select:
<select>
<option value="">aaa</option>
<option value="1">bbb</option>
<option value="2">ccc</option>
</select>
<br/>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
<br> Description:
<textarea id ="textarea" name="description"></textarea>
<br/> Category:
<ul class="list:category categorychecklist form-no-clear" id="categorychecklist">
<li id="category-19"><label class="selectit"><input type="radio" id="in-category-19" name="category" value="19"> Animation</label></li>
<li id="category-20"><label class="selectit"><input type="radio" id="in-category-20" name="category" value="20"> Anime</label></li>
</ul>
<input type="submit" value="Submit Topic" class="button-primary" name="submit" id="submit" disabled=true />
</form>
</body>
This is what I tried for setting the textbox values but it doesn't seem to be working. I want the textboxes to have the values in them when the page loads. the function is within the script tag.
function setMSRP()
{
var MSRP = "$29,120.00";
var destinationCharge = "$875.00";
var rebate = "-$10,000.00";
var taxes = "6%"
var titlesAndFees = "$209.00";
document.getElementById("txtMSRP").value = MSRP;
document.getElementById("txtDestinationCharge").value = destinationCharge;
document.getElementById("txtRebates").value = rebate;
document.getElementById("txtTaxes").value = taxes;
document.getElementById("txtElectricTitleAndFees").value = titlesAndFees;
}
</script>
</head>
<body onload="setMSRP()">
<form>
<h1>Calculate Focus Price</h1>
<hr/>
<label for="txtMSRP">MSRP:</label>
<input autofocus id="txtMSRP" type="text" readonly="readonly"/>
<br/>
<label for="txtDestinationCharge">Destination Charge:</label>
<input type="text" id="txtDestinationCharge" readonly="readonly"/>
<br/>
<label for="txtRebates">Rebates:</label>
<input type="text" id="txtRebates" readonly="readonly"/>
<br/>
<label for="txtTaxes">Taxes:</label>
<input type="text" id="txtTaxes" readonly="readonly"/>
<br/>
<label for="txtElectricTitleAndFees">Electric Title and Fees:</label>
<input type="text" id="txtElectricTitleAndFees" readonly="readonly"/>
<br/>
<input type="button" id="btnCalculateTotal" onclick="calcTotal()"
</form>
</body>
You have some syntax errors in code. Look at the modified example below:
<html>
<head>
<script>
function setMSRP() {
var MSRP = "$29,120.00";
var destinationCharge = "$875.00";
var rebate = "-$10,000.00";
var taxes = "6%"
var titlesAndFees = "$209.00";
document.getElementById("txtMSRP").value = MSRP;
document.getElementById("txtDestinationCharge").value = destinationCharge;
document.getElementById("txtRebates").value = rebate;
document.getElementById("txtTaxes").value = taxes;
document.getElementById("txtElectricTitleAndFees").value = titlesAndFees;
}
</script>
</head>
<body onload="setMSRP()">
<form>
<h1>Calculate Focus Price</h1>
<hr/>
<label for="txtMSRP">MSRP:</label>
<input autofocus id="txtMSRP" type="text" readonly="readonly" />
<br/>
<label for="txtDestinationCharge">Destination Charge:</label>
<input type="text" id="txtDestinationCharge" readonly="readonly" />
<br/>
<label for="txtRebates">Rebates:</label>
<input type="text" id="txtRebates" readonly="readonly" />
<br/>
<label for="txtTaxes">Taxes:</label>
<input type="text" id="txtTaxes" readonly="readonly" />
<br/>
<label for="txtElectricTitleAndFees">Electric Title and Fees:</label>
<input type="text" id="txtElectricTitleAndFees" readonly="readonly" />
<br/>
<input type="button" id="btnCalculateTotal" onclick="calcTotal()">
</form>
</body>
</html>
I want the textboxes to have the values in them when the page loads.
You don't need JS for this:
<input id="txtMSRP" type="text" value="<your_value>" />
If you wanted placeholders inside the input[type=text], simply use
var textbox = document.querySelector("#textbox");
textbox.setAttribute("placeholder", "This is the Placeholder");
Or use the HTML Attribute to set the value/placeholder:
<input type="text" id="textbox" value="Hello" placeholder="Introductory Statement" />
For testing I have the alert, so the problem seem to be before the alert.
it throws errors at:
var firstPrevClass= "categClass"+PrevClass;
var newCategory = document.getElementsByClassName(firstPrevClass);
Uncaught TypeError: undefined is not a function
Basically in function addCategory I want to create dynamically new divs with different class names (which is creating dynamically).
After that I want to append the new category after the last category.
In function addField I want to put a new field at the category which selected from the selection box.
In function getClass I get the selected className so I can create a new field in the selected div.
How to do it?
/*add new category to SelextBox*/
function addCategory() {
var categoryValue = document.getElementById("newCateg").value;
var y = document.getElementById('selectCategory');
var option = document.createElement("option");
var hid = document.getElementById("nextValue").value;
var newClass = "categClass" + hid;
option.setAttribute("class", newClass);
option.value = categoryValue;
option.text = categoryValue;
y.add(option);
var PrevClass = hid-1 ;/*i do this to get the first previous class*/
var firstPrevClass= "categClass"+PrevClass;
alert(newClass);
var newCategory = document.getElementsByClassName(firstPrevClass);
var div = document.createElement('div');
div.setAttribute('class',newClass );
var a = document.createElement('a');
a.setAttribute('class', 'titles');
var input_checkC = document.createElement('input');
input_checkC.setAttribute('type', 'checkbox');
input_checkC.setAttribute('class', 'check');
var textNodeCateg = document.createTextNode(categoryValue);
div.appendChild(a);
div.appendChild(input_checkC);
div.appendChild(textNodeCateg);
var last = newCategory.length;
newCategory[last].appendChild(div);
document.getElementById("nextValue").value++;
alert(newClass);
}
function getClass(sel) {
var x =sel.options[sel.selectedIndex].className;
document.getElementById("submitSelection").value=x;
}
function addField() {
var val = document.getElementById("submitSelection").value;
var existedCategory = document.getElementsByClassName(val);
var fieldValue = document.getElementById("newField").value;
var div = document.createElement('div');
var input_check = document.createElement('input');
input_check.setAttribute('type', 'checkbox');
input_check.setAttribute('class', 'check');
var input = document.createElement('input');
input.setAttribute('type', 'text');
var br = document.createElement('br');
var textnode = document.createTextNode(fieldValue);
div.appendChild(input_check);
div.appendChild(textnode);
div.appendChild(input);
div.appendChild(br);
existedCategory.appendChild(div);
}
<ul>
<li>Προσθέστε το όνομα της νέας κατηγορίας</li>
<p>Ονομα Kατηγορίας:
<label>
<input type="text" id="newCateg" />
</label>
<input type="button" id="addCateg" value="Προσθήκη" onclick=" addCategory()" />
</p>
<p> </p>
<li>Επιλέξετε κατω απο ποια κατηγορία θα ανήκει το νεο πεδίο και εισάγεται το όνομα του νέου πεδίου.</li>
<p>Κατηγορία:</p>
<input type="hidden" value="4" id="nextValue" />
<input type="hidden" value="" id="submitSelection" />
<select id="selectCategory" onchange="getClass(this)">
<option>Επιλογή ...</option>
<option class="categClass1">Εξοδα Κατοικίας</option>
<option class="categClass2">Εξοδα Εκπαίδευσης</option>
<option class="categClass3">Εξοδα Ψηχαγωγίας</option>
</select>
<p>Ονομα πεδίου:
<label>
<input type="text" id="newField" />
<input type="button" value="Προσθήκη" onclick="addField()" />
<br />
</label>
</p>
<div class="class_1">
<p class="titles">
<input type="checkbox" class="catChk1 check" onchange="checkAll(subCheck1,subChks)" />Εξοδα Kατοικιας</p>
<div class="field">
<input type="checkbox" class="subCheck1 check" />Ενοίκιο
<input type="text" />
</br>
</div>
<div class="field">
<input type="checkbox" class="subCheck1 check" />Θέρμανση
<input type="text" />
</br>
</div>
<div class="field">
<input type="checkbox" class="subCheck1 check" />Διάφορα Yλικά
<input type="text" />
</br>
</div>
<div class="class_2">
<p class="titles">
<input type="checkbox" class="check" onchange="checkAll(this)" />Εξοδα Εκπαίδευσης παιδιού</p>
<div class="field">
<input type="checkbox" class="check" />Φροντιστήρια
<input type="text" />
</br>
</div>
<div class="field">
<input type="checkbox" class="check" />Βιβλία
<input type="text" />
</br>
</div>
<div class="field">
<input type="checkbox" class="check" />Σχολική Υλη
<input type="text" />
</br>
</div>
<div class="class_3">
<p class="titles">
<input type="checkbox" class="check chk" onchange="checkAll(this)" />Για Ψυχαγωγία</p>
<div class="field">
<input type="checkbox" class="check" />
<label>Θέατρο</label>
<input type="text" />
</br>
</div>
<div class="field">
<input type="checkbox" class="check" />
<label>Ψάρεμα</label>
<input type="text" />
</br>
</div>
<div class="field">
<input type="checkbox" class="check" />
<label>Γήπεδο</label>
<input type="text" />
</br>
</div>
I created a filterable drop Down List using JavaScript. This is the List Box Coding.
<select name="d1" class="leftselect" id="d1" size="5" ondblclick="DropDownTextToBox('d1','t1');" style="display:none;" >
<option>axcsus-COMMON STOCK</option>
<option>aces</option>
<option>bdfs</option>
<option>befs</option>
<option>behs</option>
<option>dfgh</option>
<option>dhes</option>
<option>dwww</option>
<option>pass</option>
<option>pass</option>
</select>
I created 4 Text Field and a arrow character. If i click the arrow character , I'll show the list at the bottom of the control.
<div id="div_name" style="float:left;z-index: 20;">
<input name="t1" type="text" id="t1" onkeyup="value_filtering('d1','t1');" onkeypress="onEnter(event,'d1','t1')" />
<input type="button" class="rightselect" onclick="displayList('d1','t1');" value="▼" />
</div>
<div class="inputbox">
<input name="t2" class="inputbox" type="text" id="t2" onkeyup="value_filtering('d2','t2');" onkeypress="onEnter(event,'d2','t2')" />
<input type="button" class="leftselect" onclick="displayList('d1','t2');" value="▼" />
</div>
<div style="float:left;text-align:center;" >
<input name="t3" type="text" id="t3" onkeyup="value_filtering('d3','t3');" onkeypress="onEnter(event,'d3','t3')" />
<input type="button" class="rightselect" onclick="displayList('d1','t3');" value="▼" />
</div>
<div class="inputbox">
<input name="t4" class="inputbox" type="text" id="t4" onkeyup="value_filtering('d4','t4');" onkeypress="onEnter(event,'d4','t4')" />
<input type="button" class="leftselect" onclick="displayList('d1','t4');" value="▼" />
</div>
In the display List function I'm getting the corresponded textbox position and displayed the List Control under the Text Box. Okie. Now my problem is If i select any option in the text box, I need to display the selected value to the textbox which the listbox shown under. After selecting the value from the list box, How i find in which text box showing the List ? Dynamically how can i find the text box id ?
This is my JS code for displaying the Listbox to the corresponding TextBox.
function displayList(ele,txt)
{
vis=document.getElementById(ele);
obj=document.getElementById(txt);
if (vis.style.display==="none")
vis.style.display="block";
else
vis.style.display="none";
vis.style.position = "absolute";
//alert(getElementPosition(txt).top + ' ' + getElementPosition(txt).left);
vis.style.top = getElementPosition(txt).top+obj.offsetHeight;
vis.style.left = getElementPosition(txt).left;
}
Note : I can call this function at the click event of arrow button. I can easily pass the text Field Id. But in the case ListBox action i can't send the particular ID of the Text Field.
If you have no opposition to using jquery you can using the jquery UI built-in autocomplete which will do pretty much what you're looking for. For more advanced and nicer plugins you can try chosen
Try this.
<script>
var targetInput=null;
function displayList(ele,txt) {
vis=document.getElementById(ele);
obj=document.getElementById(txt);
targetInput = obj;
if (vis.style.display==="none") {
vis.style.display = "block";
} else {
vis.style.display = "none";
vis.style.position = "absolute";
//alert(getElementPosition(txt).top + ' ' + getElementPosition(txt).left);
vis.style.top = getElementPosition(txt).top+obj.offsetHeight;
vis.style.left = getElementPosition(txt).left;
}
}
function selectList(txt) {
if (!targetInput) return;
targetInput.value = txt.value;
txt.style.display = 'none';
}
</script>
<div id="div_name" style="float:left;z-index: 20;">
<input name="t1" type="text" id="t1" onkeyup="value_filtering('d1','t1');" onkeypress="onEnter(event,'d1','t1')" />
<input type="button" class="rightselect" onclick="displayList('d1','t1');" value="▼" />
</div>
<div class="inputbox">
<input name="t2" class="inputbox" type="text" id="t2" onkeyup="value_filtering('d2','t2');" onkeypress="onEnter(event,'d2','t2')" />
<input type="button" class="leftselect" onclick="displayList('d1','t2');" value="▼" />
</div>
<div style="float:left;text-align:center;" >
<input name="t3" type="text" id="t3" onkeyup="value_filtering('d3','t3');" onkeypress="onEnter(event,'d3','t3')" />
<input type="button" class="rightselect" onclick="displayList('d1','t3');" value="▼" />
</div>
<div class="inputbox">
<input name="t4" class="inputbox" type="text" id="t4" onkeyup="value_filtering('d4','t4');" onkeypress="onEnter(event,'d4','t4')" />
<input type="button" class="leftselect" onclick="displayList('d1','t4');" value="▼" />
</div>
<select name="d1" class="leftselect" id="d1" size="5" ondblclick="DropDownTextToBox('d1','t1');" onclick="selectList(this)" style="display:none;">
<option>axcsus-COMMON STOCK</option>
<option>aces</option>
<option>bdfs</option>
<option>befs</option>
<option>behs</option>
<option>dfgh</option>
<option>dhes</option>
<option>dwww</option>
<option>pass</option>
<option>pass</option>
</select>