I'm currently working on making my website look a bit better and I am planning to replace a current textbox input with a slider/textbox input combination, except I have no idea how to make it work within the current coding.
The current code looks as followed:
<tr><td>Risk:</td><td><?php textbox('CT class=textbox',$risk,10 ); ?></td></tr>
$risk is set to 0 earlier in the code, and when the form is submitted it is used to decide the (obviously) risk you want to use, it ranges from 0 to 100, based on that figure some calculations are made once you hit submit.
I want to use some standard, simple slider which should look something like this:
<input type="range" min="0" max="100" value="0" link-to="risktext">
<br><br>
<input type="text" id="risktext">
javascript part:
$(function() {
$('input').filter( function(){return this.type == 'range' } ).each(function(){
var $slider = $(this),
$text_box = $('#'+$(this).attr('link-to'));
$text_box.val(this.value);
$slider.change(function(){
$text_box.val(this.value);
});
$text_box.change(function(){
$slider.val($text_box.val());
});
The problem I experience now, and I guess it's really easy (and Im really basic at these kind of codes), is how do I link all this to change the value of $risk?
I hope anyone can help me :)
Here's a basic approach of what you are looking for (I think).
<?php
//Assign the risk value to 0 or the value defined in the $_POST variable.
$risk = 0;
if(isset($_POST['range'])) //Use the name of your control
$risk = $_POST['range'];
?>
<html>
<head>
<title></title>
</head>
<body>
<form action="" method="POST">
<input type="range" name="range" min="0" max="100" value="<?php echo $risk; ?>" link-to="risktext" />
<br />
<br />
<input type="text" name="riskText" id="risktext" value="<?php echo $risk;?>" />
<input type="submit" name="submitBtn" value="Submit" />
</form>
</body>
</html>
Related
I am trying to create something that when the script is run it reads the parameters that have been set in there.
For example loading a custom sidebar where the user can enter details or parameters to the run the script with. These parameters will remain until they are changed but shouldn't be required every time you run a script that uses these parameters.
A sort of like settings menu.
I have seen something similar in some addons that have been made can someone please point in right direction on how to go abouts doing this.
I already have the scripts running succesfully just need a UI where the parameters can be entered and set. I would like to avoid reading it from a sheet in the spreadsheet if possible.
Edit:
I see that there is a getscriptproperty available that is available to all users:
so far I have got update (2):
HTML:
function showside(){
SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('body'))
}
function setProperty(objectForm){
PropertiesService.getScriptProperties().setProperties(
{a1: objectForm.a1 ,
a2: objectForm.a2,
p1: objectForm.p1,
p2: objectForm.p3})
return 'Updated'
}
<!DOCTYPE html>
<html>
<head>
<script>
function readProperty(){
var settings = PropertiesService.getScriptProperties(), keys = settings.getKeys()
Logger.log('running')
for (var i =0;i<keys.length;i++){
document.getElementbyID(keys[i].toUpperCase()).value = settings.getProperty(keys[i])
}
}
function handleFormSubmit(objectForm){
google.script.run.setProperty(update).setProperty(objectForm)
}
function update(update){
var div = document.getElementById('output');
div.innerHTML = 'Updated!';
}
</script>
<base target="_top">
</head>
<body onload="readProperty()">
<form id="myForm" onsubmit="handleFormSubmit(this)">
a1<input type="url" id="a1" value="" />
a2<input type="url" id="a2" value="" />
a3<input type="url" id="a3" value="" />
P1<input type="text" id="P1" value="" />
P2<input type="text" id="P2" value="" />
<input type="submit" value="Submit" />
</form>
<div id="output"></div>
</body>
</html>
A rough approach; Improvise from here;
Read comments inside the loadScript();
document.getElementById("formWithData").onsubmit = loadScript();
function loadScript() {
// get data from submitted form
// this way script will re-run with data based on what u give in the form
}
<form id="formWithData">
<input type="text" placeholder ="enter condition 1">
<input type="text" placeholder ="enter condition 2">
<input type="text" placeholder ="enter condition 3">
</form>
I am using Ajax to submit forms in serial. I am trying to make the first s_referee_email + s_referee_fname pair required while the second or others not - there will be up to five of these pairs. I cant seem to figure how to make just the first pair required without breaking the form. I have tried using HTML5 and some answers from stack but havent been able to get anything to work. Any advice is greatly appreciated!
fiddle: https://jsfiddle.net/badsmell/gcrvqbna/
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!--serial submit ajax-->
<script>
function mySubmit(){
var myForms = $("form");
myForms.each(function(index) {
var form = myForms.eq(index);
var serializedForm = form.serialize();
serializedForm += '&s_referer_fname='+$('#s_refererFname').val();
$.post("http://post.aspx", serializedForm, function (data, status) {
if (status === "success"){
window.location.href= "http://redirect";
}
});
});
}
</script>
<title>Forward a copy to a friend</title>
<style type="text/css">
*[class=hide] {
display: none
}
</style>
</head>
<body>
<!--hidden iframe-->
<iframe class="hide" id="myIframe"></iframe>
<form method="post" action="post.aspx" target="myIFrame">
<input type="hidden" name="s_referer_email" value="test#test.com" />
<input type="text" size="30" maxlength="255" name="s_referee_email" value="" required >
<input type="text" size="22" maxlength="50" name="s_referee_fname" value="" required >
</form>
<form method="post" action="post.aspx" target="myIFrame">
<input type="hidden" name="s_referer_email" value="test#test.com" />
<input type="text" size="30" maxlength="255" name="s_referee_email" value="" >
<input type="text" size="22" maxlength="50" name="s_referee_fname" value="" >
</form>
<label for="s_referer_fname">Your name:</label> <br /> <input type="text" name="s_referer_fname" value="" size="20" id="s_refererFname" ><br>
<p><button onclick="mySubmit();">Submit</button> </p>
</body>
</html>
Adding required="required" to the tags can let you make any field compulsory to be filled by user.
You should never use .onclick(), or similar attributes from a userscript.
Userscripts operate in a sandbox, and onclick operates in the target-page scope and cannot see any functions your script creates.
Always use addEventListener() (or an equivalent library function, like jQuery .on()).
So instead of code like:
something.outerHTML += '<input onclick="func()" id="button_id" ...>'
You would use:
something.outerHTML += '<input id="button_id" ...>'
document.getElementById ("button_id").addEventListener ("click", func, false);
And for your answer, one method is to perform a check before actually submitting the forms. Check if the required fields have been filled, if yes, go ahead and submit the form, or else don't submit and show an error message instead.
I am working on a website where there is a donate box with a field and a contribute button.
<div id="donate-bar">
<form name="donate" id="donate">
<span class="donate-text">DONATE</span>
<input type="text" class="amount" name="amount" id="amount" value="$10" size="5">
<input type="submit" id="contribute" formaction="https://website.com/donate" accept-charset="utf-8" formmethod="GET" value="CONTRIBUTE">
</form>
</div>
However, the query gets sent to the donation processor's website as https://website.com/donate?amount=%2410 and doesn't tick the $10 box. If I remove the $ and submit the query again the value is sent and the correct amount is seen on the second page.
Is there an easy way using PHP or Javascript to have it remove the $ when the form is submitted so that https://website.com/donate?amount=%2410 changes to https://website.com/donate?amount=10.
I've tried a couple of things but nothing I've tried has worked. Some examples of code would be super helpful since I'm newer to some of this. Can I parse it as integer on submit? Any help would be greatly appreciated. Thank you!
Why not put the Dollar sign outside of the input and store the value as "10":
<div id="donate-bar">
<form name="donate" id="donate">
<span class="donate-text">DONATE</span>
$<input type="text" class="amount" name="amount" id="amount" value="10" size="5">
<input type="submit" id="contribute" formaction="https://website.com/donate" accept-charset="utf-8" formmethod="GET" value="CONTRIBUTE"></form></div>
$('form#donate').on('submit',function() {
var $input = $('input#amount');
$input.val(parseInt($input.val().replace(/\$/,''),10));
});
$_POST['amount'] = str_replace("$", "", $_POST['amount']);
There is a simple way to fix this.
First of all, one of my suggeestions is that you change the field to
type="number"
Second of all, in PHP, you can use the following to remove the dollar sign:
$amount = str_replace('$', '', $_REQUEST['amount']);
You can use split function in jquery as follows
var value = ($('#amount').val()).split('$');
var amount = value[1] ;
In PHP
$value = explode('$',$_POST['amount']); //results array elements
without $ symbols $amount = $value[1];
Or also in PHP
$amount = preg_replace("/[^0-9]/","",$_POST['amount']);
//gets only integer parts and omits all other
Also in PHP
$amount = str_replace('$', '', $_POST['amount']);
Hope this helps the simplest way is a hidden field:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function() {
//number regex - the format $10
var regex = /\$[1-9][0-9]+/;
//Setting validations
$(document).on('blur', '#pretty_amount', function() {
if(!regex.test($(this).val())) {
//Do something probably clear field
alert("Error Invalid number: " + $(this).val());
} else {
var newValue = $(this).val().match(/[1-9][0-9]+/g);
$('#amount').val(newValue);$('#amount').innerHtml(newValue);
}
});
});
</script>
</head>
<body>
<div id="donate-bar">
<form name="donate" id="donate">
<span class="donate-text">DONATE</span>
<input type="text" style="display: none;" name="amount" id="amount">
<input type="text" class="amount" name="pretty_amount" id="pretty_amount" value="$10" size="6">
<input type="submit" id="contribute" formaction="https://website.com/donate" accept-charset="utf-8" formmethod="GET" value="CONTRIBUTE"></form></div>
</body>
</html>
This does what you want, if I'm not mistaken.
Best regards
so I have a project now, as an addition to my company's website, we want to show our clients how much they can save on gas by buying one of our electric cars, I'm responsible for making it happen, I don't know how to approach this using javascript, can you guys give me a hand? our marketing guy got the idea from this website, that is basically what we want, but I was hoping i could make it a little better on some aspects:
1st-the client wouldn't have to press submit to see the results, as they fill the last field, the calculated part is populated automatically, for this i've been fiddling with the onChange event, unsuccessfully though xD
here's what I have so far, it is not working, at least on dreamweaver's live mode, haven't tested it online yet as I was hoping to develop the whole thing offline:
<script type="text/javascript">
function calc(){
var km=document.getElementById(km).value;
var euro=document.getElementById(euro).value;
var consumo=document.getElementById(consumo).value;
var cem_km=consumo*euro;
var fossil_day=(cem_km*km)/100;
return fossil_day;
}
</script>
<form name="calc" id="calc" >
<p>
Km/dia
<input type="text" name="km" id="km" value="" />
</p>
<p>
€/Litro
<input type="text" name="euro" id="euro" value="" />
</p>
<p>
Litros/100km
<input type="text" onChange="calc()" name="consumo" id="consumo" value="" />
</p>
<input type="button" onClick="calc()" name="submit" id="submit" value="Calcular" />
<script type="text/javascript">
var fossil_day = calc();
document.write('<p>'+fossil_day+'</p>');
</script>
</form>
Please note that although I have this already, I wouldnt mind not doing this at all and using another solution, even if it doesnt use forms, I'm just showing what i have already so you can tell me how I'm wrong and how I can have a better approach at it
there are many errors inside your code
document.getElementById() needs the element id in brackets ''
you can't create a element with the same name,id as a function calc else it will throw an error as it's an object and not a function.
your executing the function onload... but you want it to be executed when the button is clicked & onchange.
you don't need to add value if empty and name if you use getElementById
return false in the function on buttons inside form else it could send the form and so refresh the page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>calc</title>
<script>
function calc(){
var km=document.getElementById('km').value;
var euro=document.getElementById('euro').value;
var consumo=document.getElementById('consumo').value;
var cem_km=consumo*euro;
var fossil_day=(cem_km*km)/100;
document.getElementById('result').innerHTML=fossil_day;
return false
}
</script>
</head>
<body>
<form>
<p>Km/dia<input type="text" id="km"/></p>
<p>€/Litro<input type="text" id="euro" /></p>
<p>Litros/100km<input type="text" onChange="calc()" id="consumo" /></p>
<input type="button" onClick="calc()" value="Calcular" />
</form>
<div id="result"></div>
</body>
</html>
Useing jQuery (and html5 type="number" form fields):
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<p>
Km/dia
<input type="number" name="km" id="km" value="" />
</p>
<p>
€/Litro
<input type="number" name="euro" id="euro" value="" />
</p>
<p>
Litros/100km
<input type="number" name="consumo" id="consumo" value="" />
</p>
<div id="fossil-day"></div>
</form>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script>
function calculate(){
var km = $('#km').val();
var euro = $('#euro').val();
var consumo = $('#consumo').val();
var cem_km = consumo*euro;
var fossil_day = (cem_km*km)/100;
$('#fossil-day').html(fossil_day);
}
$(function() {
/*when #consumo input loses focus, as per original question*/
$('#consumo').blur(function(){
calculate();
});
});
</script>
</body>
</html>
I have a html form where people can enter number of purchase item. Default value of that text field is 1.
<input type="text" size="5" value="1" id="position" class="amntstyle" name="position">
I want another text input field for price where the value would be 15 times of position automatically.
For example if someone enter 3 in position field, the price input field will get value 45 automatically. Like this
<input type="text" size="5" value="45" id="price" class="amntstyle" name="price">
Is it possible?
Thanks a lot for your help.
simple .. use javascript functions and onkeyup
<script type="text/javascript">
function updatePrice(amount, element){
var amount = parseInt(amount);
if(!amount) amount = 0;
var toUpdate = amount*15;
document.getElementById(element).value = toUpdate;
}
</script>
<input type="text" size="5" value="1" id="position" class="amntstyle" name="position" onkeyup="updatePrice(this.value,'price');">
<input type="text" size="5" value="45" id="price" class="amntstyle" name="price">
Here is the YUI3 version:
<script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script>
<script>
YUI().use("node", function(Y) {
var priceNode = Y.one("#price");
var positionNode = Y.one("#position");
positionNode.on("change", function(e) {
priceNode.set("value", positionNode.get("value")*15);
});
});
</script>
Working demo: http://jsfiddle.net/YgheP/
Made it for specific scenario but you can tweak it to your needs.
Hope it feeds your cause. :)
also look for isNaN check and float value as well! parseFloat(string)
code
$('#position').keyup(function() {
var price = parseInt(this.value) * 15;
$('#price').prop('value', price);
});
if you are using jquery then by using plugin formInteract, you just need to do this.
<input type="text" size="5" value="1" id="position" class="amntstyle" name="position">
<input type="text" size="5" value="45" id="price" class="amntstyle" name="price" data-bind-change-value="#position*15">
at bottom of the page just include this plugin file, everything else will be done itself.
here is the link to project
https://bitbucket.org/ranjeet1985/forminteract
You can use this plugin for many purpose like getting value of form, putting value to form, validation of form and many more. you can see some example of code in index.html file of project
You can use this code to attach a eventhandler that will solve your problem:
$("#position").bind("change", function(){
$("#price").val(parseInt($("#position").val()) * 15);
});
Hope that helps