I have a tax calculator with many inputs which pass data to each other. The user only sees one input and the other inputs are in a hidden div (used just for calculation propose).
the Google-Chrome element inspector not showing the value of inputs when they are in hidden div (however it shows the value of inputs with attribute type="hidden"). So how can I inspect and debug the form with hidden divs?
$(document).ready(function(){
$("#price").on("input paste keyup",function(){
var power=$("#power").val();
$("#taxSet").val(parseInt($("#price").val()) * 0.1);
$("#taxAmount").val(parseInt($("#taxSet").val())*power +
parseInt($("#price").val()));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="price">
<div style="display:none">
<input id="power" value="5">
<input id="taxSet">
<input id="taxAmount">
</div>
Did you mean "I can't see attribute on DOM" like #power?.
My first suggest use attr, so change attribute value.
var fakeValye = 10;
$("..blah").val(fakeValue).attr('value', fakeValue);
If you don't say this, you just talking about debugging. You should use debugger keyword.
I refactored your code for you.
$(document).ready(function() {
$("#price").on("input paste keyup", function() {
debugger;
var power = $("#power").val();
var taxtSet = parseInt($("#price").val()) * 0.1;
$("#taxSet").val(taxtSet);
var taxAmount = parseInt($("#taxSet").val()) * power + parseInt($("#price").val())
$("#taxAmount").val(taxAmount);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="price">
<div style="display:none">
<input id="power" value="5">
<input id="taxSet">
<input id="taxAmount">
</div>
Related
I can't make a and an tag combine on HTML.
I'm trying to have text that when you click on it both click a checkbox and also lead you somewhere on the page i've tried to make it like that:
<a href"#somewhere"><label for"somecheckbox">Some Text</label></a>
But only the label worked, then I tried it like that:
<label for"somecheckbox"><a href"#somewhere">Some Text</a></label>
But then only the link works, is there any way in which we can use both?
The problem is you are trying to nest interactive content. This is something you can't do via the W3C spec. See the a tag, for instance with it's permitted content.
You will need to use javascript to achieve what you want to do.
Here is a quick example:
var links = document.querySelectorAll("[data-for]");
//Set Event Handler
for(var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function(event){
//Get the target cb from the data attribute
var cbTarget = this.dataset.for;
//Check the cb
document.getElementById(cbTarget).checked = true;
});
}
.head {margin-bottom: 100vh;}
<div class="head">
Click Me <input type="checkbox" id="aCheckBox" />
</div>
<div id="aTarget">A Target</div>
It's not possible to do both navigation and toggle checkbox using tags, please use javascript to focus on target when checkbox is checked.
document.getElementById("somecheckbox").addEventListener("change", function(e){
// see if it is checked
if(e.target.checked){
// and focus to specific id
document.getElementById("somewhere").focus();
}
})
When you click on the label, both the check box is checked and it goes to a location.
const label = document.querySelector('[for=checkbox]');
const checkBox = document.querySelector('[name=checkbox]');
label.addEventListener('click', function (){
checkBox.setAttribute("checked", "true");
location.href = "#location";
});
#location {
position: absolute;
bottom: -100px;
}
<label for="checkbox">
<input type="checkbox" name="checkbox"/>
Check
</label>
<p id="location"> Some location </p>
<!DOCTYPE html>
<html>
<body>
<script>
function Redirect(){
if (document.getElementById('vehicle3').checked)
{
window.location = "https://www.tutorialspoint.com";
}
}
</script>
<h1>Show checkboxes:</h1>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car<br>
<input type="checkbox" name="vehicle3" id='vehicle3' value="Boat" onClick='Redirect();'> I have a boat<br><br>
<input type="submit" value="Submit">
</body>
</html>
This solution is what everyone suggesting using JavaScript your problem can be solved easily. As soon as you click on the 3rd checkbox it redirects you to a new webpage
I am trying to make a spreadsheet sidebar that allows a user to input data to create records, as well as edit them. So far I understand how to create the sidebar and display it. I've got a working form that can submit values.
What I am struggling with is how to pre-populate the forms. Form instance some records are associated with others, and I'd like to have a hidden field to store and eventually submit the associated id. Eventually users should also be able to edit records and I'd like to use the same form and just populate the fields and reuse the same submission flow.
I've tried a few different things found on here and other places, but nothing seems to work.
Here is the HTML for the sidebar template
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<!-- The CSS package above applies Google styling to buttons and other elements. -->
<style>
</style>
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
$('#accountId').val(<? data.accountId ?>);
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(alertSuccess).createContact(formObject);
}
function alertSuccess(message) {
var div = document.getElementById('alert');
div.innerHTML = "<p>" + message + "</p>";
google.script.host.close();
}
</script>
</head>
<body>
<p>Enter Contact Info</p>
<form id="contact" onsubmit="handleFormSubmit(this)">
Account Id: <br>
<input type="number" name="accountId" value="0" id="accountId" /><br>
Name:<br>
<input type="text" name="name"/><br>
Phone Number:<br>
<input type="text" name="phone"/><br>
Email:<br>
<input type="email" name="email"/><br>
Contact Type:<br>
<input type="radio" name="type" value="emergency" checked> Emergency<br>
<input type="radio" name="type" value="guardian" checked> Guardian<br>
<input type="radio" name="type" value="other" checked> Other<br>
<input type="submit" value="Submit" />
</form>
<div id="alert"></div>
</body>
</html>
And the accompanying .gs file:
var AlternativeContact = ObjectModel("AlternativeContacts");
function newContact() {
var htmlOutput = HtmlService.createTemplateFromFile("new_contact");
var id = ACCOUNT_MANAGER.getRange("M4").getValue();
htmlOutput.data = {accountId: id};
UI.showSidebar(htmlOutput.evaluate());
}
function createContact(contactJSON) {
var newContact = new AlternativeContact(contactJSON);
newContact.save();
return "Success!";
}
The first line that uses ObjectModel is creating and ORM around the data sheet.
Thanks for the help!
Couple changes and it seems to be working in a basic way.
First, in the scriptlet, i needed to us the printing tag. so use in stead of . This was causing the value to not be used in the rendered template.
Second, I changed my jQuery to:
$(document).ready(function () {
$("input#accountId").val(<?= data.accountId ?>);
});
If anyone is able to answer, I'd be curious why using the $(document).ready is needed. Doesn't everything in the get run? is it an order of operation thing?
I need to create a fill in the blanks question where the question text will be loaded dynamically through xml. I don't know the length of the question. I have to place a text area for question and text input for answer. The positioning of these controls should be aligned based on the input.
Any tips on how to achieve this using flex air application?
Check this jQuery plugin. It exactly does what you are looking for.
JEditable
If you are not inclined towards using the plugin, then try the code below:
<div>
<div>
<label class="editable">Name</label>
<input class="editable" type="text" name="name" style="display:none"/>
</div>
<div>
<label class="editable">Type</label>
<input class="editable" type="text" name="type" style="display:none"/>
</div>
<div>
<a class="edit" href="#">Edit</a>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".edit").click(function(){
var $this = $(this);
var text = $this.text();
if(text=="Edit"){
$this.text("Cancel");
}
else{
$this.text("Edit");
}
$(".editable").toggle();
});
$("input.editable").change(function(){
$(this).prev().text($(this).text());
});
});
</script>
To bind the click event handler to the anchor element use the live function of jQuery. e.g:
$("a.ff-save").live("click", function (){
alert("ok");
});
I need to add multiple actions to list group items, all the Purple area needs to follow a link, and the Yellow area to open a Modal.
Currently the list group items are anchors, since is not valid HTML to nest anchors or buttons, I searching for another solution.
Any ideas?
Icon have id, so give id to input and use jQuery code.
$(document).ready(function(){
$('#simple').click(function(){
window.onload = window.location.href = "http://stackoverflow.com";
});
});
$(document).ready(function(){
$('#basic-addo1').click(function(){
window.onload = window.location.href = "http://stackoverflow.com";
});
});
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1" id="simple">
</div>
Is it possible to make an HTML form that responds to the number of things the user wants to send over?
That is, what I have now is:
<form ...>
<select ...>
<option>1</option>
<option>2</option>
...
</select>
***
</form>
When the user selects one of the options, *** should have
<input type="text" ...>
appear the number of times the user selected.
That is, if the user selected 5 from the options, then the user should see 5 input options. If he changes his mind selected 2 instead, then the page should update accordingly to show only 2 input options.
=====[EDIT]=====
I've changed the code to have the input just be text. The code I have does not work. It doesn't update the number of input fields.
<script type="text/javascript">
<!--
function updateOptions(nvars)
{
var n = nvars;
while(n>0) {
var newdiv1 = "<div>Var name: <input type=\"text\" name=\"var-name\"><br></div>";
var newdiv2 = "<div>Var type: <input type=\"text\" name=\"var-type\"><br></div>";
newdiv1.appendTo("#bloo");
newdiv2.appendTo("#bloo");
n--;
}
}
//-->
</script>
<h3>Create a table in the test db!<h3>
<form name="f1" method="POST" action="createTable.php">
Name of Table: <input type="text" name="table-name"><br>
No of vars: <input type="text" name="numvars" onChange="updateOptions(this.value)"><br>
<div id="bloo"></div>
</form>
It worked when I had a document.write instead of an appendTo, but I essentially want the page the remain the same save for the extra input fields after the user changes the value in the numvars field.
That's a good idea when you want the user to be able to upload an arbitrary number of files or something like that. You can do it with Javascript:
Have an empty DIV near the SELECT
Bind a function to the "onchange" event on the select element
In the function, read the value of the SELECT element and:
Empty the DIV
Create an equivalent number of <INPUT type="text"> inside the DIV
Do you need code? If you do, is Prototype OK?
OK, sorry for the delay, lots of work to do lately.
The following should be enough for you to get an idea. You'll have to study JS though, I don't even know what you're doing with the appendTo stuff in your question.
<html>
<head>
</head>
<body>
<form>
<select id="num" value="1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div id="container">
<p>
<input type="text" name="var-name" />
<input type="text" name="var-type" />
</p>
</div>
</form>
<script type="text/javascript">
var selectElm = document.getElementById('num');
var containerElm = document.getElementById('container');
var update = function () {
containerElm.innerHTML = '';
for (var i = 0, l = selectElm.value; i < l; ++i) {
containerElm.innerHTML += '<p><input type="text" name="var-name" /><br /><input type="text" name="var-type" /></p>';
} // add a number of couples of <input> equal to selectElm.value
}
//the following stuff says that when <select> changes the function called "update" must fire. Most of the code is for compatibility across browsers.
var listen, evt;
if (document.attachEvent) {
listen = 'attachEvent';
evt = 'onchange' ;
} else {
listen = 'addEventListener';
evt = 'change';
}
try {
selectElm[listen](evt, update);
} catch (e) {
selectElm[listen](evt, update, false);
}
// You do the same in Prototype with a single line:
// selectElm.observe('change', update);
// jQuery also requires only a single line of code.
</script>
</body>
</html>
Yes use onChange event of your dropdown input field and show/hide your input fields.