new to site but have been using for a while - its a great help!
I am trying to add two variables from inputs; example 2 + 2 but I keep getting answer 22 not 4.
Once I get around this I will want a form with 5-6 variables and a couple of answers.
Your help please with what I am sure is a very simple answer (I am learning programming).
Here is what I have...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transititonal//EN"
""http://www.w3.org/TR/XHTML1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body>
<form name="profitcalc">
<table border="1" width="600" height="200" cellpadding="10" cellspacing="3">
<tr><th colspan="2">Profit Calculator</th></tr>
<td>
Dollar Rate <input type="number" name="xrate" id="input" onchange="calculate();"/>
<br>
Marketplace Fee <input type="number" name="marketfee" id="input" onchange="calculate();"/>
</td>
<td><input type="number" name="profit" id="output"></td>
<table>
</form>
<script type="text/javascript">
function calculate() {
var vxrate = document.profitcalc.xrate.value;
var vmarketfee = document.profitcalc.marketfee.value;
var vanswer = vxrate + vmarketfee;
document.profitcalc.profit.value = vanswer;
}
</script>
</body>
</html>
The values you read from the <input> fields are strings so Javascript concatenates them, hence the 22 result.
You need to force them to numeric values before performing the arithmetic with parseFloat()
<script type="text/javascript">
function calculate() {
var vxrate = parseFloat(document.profitcalc.xrate.value);
var vmarketfee = parseFloat(document.profitcalc.marketfee.value);
var vanswer = vxrate + vmarketfee;
document.profitcalc.profit.value = vanswer;
}
</script>
[Edit]
Revised to use parseFloat() rather then parseInt() as this code looks like it'll need decimals.
Related
I want to set the values of 2 variables in a gs code to be the text value in 2 text areas on the HTML file.
sidebar.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<input type="button" value="go go go!" onclick="google.script.run.mainFunction();"/>
<strong>Text Area 1</strong>
<textarea id="textarea1" rows="2" cols="35">Text1</textarea>
<strong>Text Area 2</strong>
<textarea id="textarea2" rows="3" cols="35">Text2</textarea>
</body>
</html>
code.gs:
mainFunction() {
var textArea1Value = ???; // should be "Text1"/user's input
var textArea2Value = ???; // should be "Text2"/user's input
// some code
}
How do I achieve this? (what should I write instead of the "???" in the gs code?)
I've tried searching for a solution, but wasn't sure how to implement what I've found as the answers were too specific
Thanks
You need to pass the values as paramaters from the clientside to serverside
For this, obtain the textareas by id within a Javascript code part and pass their values to google.script.run
Sample modification o your code:
sidebar.html:
<input type="button" value="go go go!" onclick="myJSFunction()"/>
<strong>Text Area 1</strong>
<textarea id="textarea1" rows="2" cols="35">Text1</textarea>
<strong>Text Area 2</strong>
<textarea id="textarea2" rows="3" cols="35">Text2</textarea>
<script>
function myJSFunction(){
var text1 = document.getElementById("textarea1").value;
var text2 = document.getElementById("textarea2").value;
google.script.run.mainFunction(text1, text2);
}
</script>
code.gs:
function mainFunction(text1, text2) {
var textArea1Value = text1;
var textArea2Value = text2;
// some code
}
I have this code:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="https://api.pagar.me/1/zipcodes/">
<input type="text" placeholder="cep" name="cep">
<input type="submit">
</form>
</body>
</html>
When I type a number, for example 05423110, I get on the adress bar is "https://api.pagar.me/1/zipcodes/?cep=05423110", but I would like to have "https://api.pagar.me/1/zipcodes/05423110".
What do I need to change on my code?
Thanks!
I would do it like this. The other answer will have the problem where it could potentially append something twice.
I also set it so the button disables for user friendliness (in case the server takes awhile to respond).
This solution does use jQuery, but chances are you will need to do other simple DOM manipulation and this will be very helpful.
Because you don't want the query string in there, but you must have it be GET, then its impossible not to have it append the query string to the URL (because that's what a GET request does).
Instead, I use javascript to simply redirect to the proper URL and ignore the form GET/POST entirely.
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="https://api.pagar.me/1/zipcodes/">
<input type="text" placeholder="cep" name="cep">
<input type="submit">
</form>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
(function() {
var form = $('form');
var baseUrl = form.attr('action');
$('form').submit(function(e) {
e.preventDefault();
form.find('[type="submit"]').prop('disabled', true);
window.location.href = baseUrl + form.find('[name="cep"]').val();
});
})();
</script>
Add method="post" to the form tag, then add an event listener to the form's submit event which append the input value to the action attribute value on the form:
const form = document.forms[0]
form.addEventListener('submit',()=>{form.action+=cep.value})
<form action="https://api.pagar.me/1/zipcodes/" method="post">
<input type="text" placeholder="cep" name="cep" id="cep">
<input type="submit">
</form>
Ofc StackOverflow snippets prevents POST.
I want to display a validation message only when a user types something in the input field. I can't put required in the input box.
<input type="url" class="form-control" name="website_url">
The input data should be a valid website URL.
Can I do this without using Jquery or Javascript?
You can achieve this by javascript like this.
<!DOCTYPE html>
<html>
<body>
Enter your url: <input type="text" id="url" onfocusout="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("url");
var re = //use valid regex here;
if (!re.test(url)) {
alert("url error");
return false;
}
}
</script>
</body>
</html>
you have to use valid regex for url like this
but I prefer to do server side validation to in case javascript is off.
How can I access the value the user submits in the input field at the top and place it in the code after "LIKE" in the SQL query? My code works with the given value, 9999, but I want that value to instead be whatever the user enters into the input field.
<!DOCTYPE html>
<html>
<body>
Enter Tracking Code: <input type="text">
<input type="button" value="Submit">
<table id="switch-hitters" class="table table-condensed table-striped"></table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sheetrock/1.0.1/dist/sheetrock.min.js"></script>
<script>
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1_1elTo5zH1ew6KPYwoWtixX9hzFc8oxdRy5A0LWFkwg/edit#gid=0';
$('#switch-hitters').sheetrock({
url: mySpreadsheet,
query: "select A,B,C,D,E where A like 9999"
});
</script>
</body>
</html>
Updated code:
<!DOCTYPE html>
<html>
<body>
Enter Tracking Code: <input type="text" id="textbox_id">
<input type="button" value="Submit">
<table id="switch-hitters" class="table table-condensed table-striped"</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sheetrock/1.0.1/dist/sheetrock.min.js"></script>
<script>
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1_1elTo5zH1ew6KPYwoWtixX9hzFc8oxdRy5A0LWFkwg/edit#gid=0';
var elem = document.getElementById('textbox_id').value;
$('#switch-hitters').sheetrock({
url: mySpreadsheet,
query: "select A,B,C,D,E where A like "+elem
});
To get the value from the input textbox you can either use the following:
Get value from text box based on its id which you need to set in your code:
<input type="text" id="textbox_id" >
document.getElementById('textbox_id').value
OR
Get value of the first textbox in the HTML document if you don't want to set an id :
document.getElementsByTagName("input")[0].value;
Then in your script :
var elem = document.getElementById('textbox_id').value;
$('#switch-hitters').sheetrock({
url: mySpreadsheet,
query: "select A,B,C,D,E where A like "+elem
});
I am beginner to html and asp. I should write code of the program in Notepad. I want the program that when I click on the Random Button, generate a random number and when I click on the Check button, the program compare between my guess and random number. I write this code but when run the program, not show random number and not compare. Why?
<html>
<head>
<script>
var numOfGuess=new number(0);
var numRandom;
var num;
function RandomNum(){
numRandom=new number(math.floor(math.random()*100));
response.write(numRandom);
numOfGuess=0;
}
fucntion Guess(){
num=document.getElementById("guess");
var alert="";
if(num.value<numRand){
alert="grater than!";
numOfGuess++;
}
esle if (num.value>numRand){
alert="lower than!";]
numOfGuess++;
}
else{
alert="equal!";
numOfGuess++;
}
document.getElementById("message").innerHtml=alert;
}
</script>
</head>
<body>
<input type="text" id="guess">
<input type="submit" onClick='RandomNum()' value="Random">
<p id="message"></p>
<input type="submit" onClick='Guess()' value="Check">
</body>
</html>
Like AnthonyLeGovic said:
you need to be rigorous when programming
here is what you are looking for:
<html>
<head>
<title>test</title>
<script language="javascript">
var numRand = 0;
var numGuess = 0;
var numTry = 1;
function setRand(){
numRand = Math.floor((Math.random()*100)+1);
numTry = 0;
alert("done");
}
function guess(){
var msg = document.getElementById("message");
numGuess=Number(document.getElementById("guess").value);
if(numGuess>numRand){
msg.innerHTML = "lower than!";
}
else if(numGuess<numRand){
msg.innerHTML = "grater than!";
}
else {
msg.innerHTML = "equal! tried " + numTry +"times";
}
numTry++;
}
</script>
</head>
<body>
<input type="text" id="guess" />
<input type="button" onclick="setRand()" value="Random" />
<p id="message"></p>
<input type="button" onclick="guess()" value="Check" />
</body>
do not forget language="javascript" in your script tag else your script will not work!
You need to be rigorous when programming.
There are some syntax errors in your code like :
fucntion instead of function while declaring Guess function.
you declare numRandom as a global variable but you are using numRand then, unfortunately these two variables are not the same at all. Moreover numRand isn't declare (which is logic because it should be numRandom).
you are using innerHtml instead of innerHTML (case sensitive) in order to help the user to find the right number.
Maybe there are some more mistakes I've forgotten right there.