I want to calculate the price after a button click.
I have 3 buttons which are selectable.
For example : button1 = 50$, button2 = 100$, button3 = 200$
Now I want to update the price after a button click.
Is there any solution to handle this? Because, If i send the Ajax request and update my html-element the price isn't added. My old price always disappear.
So if the user selects button1 the price is 50$, but if the user also selects button2 my price is 100$, not $150.
Thanks :)
Here is the idea:
<script>
function add(x) {
document.getElementById('result').innerText = +(document.getElementById('result').innerText) + x;
}
</script>
<form>
<input type="button" onclick="add(50)" value="50">
<input type="button" onclick="add(100)" value="100">
<input type="button" onclick="add(200)" value="200">
</form>
<div id='result'></div>
Note: +(x) forces conversion of x to number
Related
I want to auto calculate shipping when the quantity changed?
How can "Calculate shipping botton" auto submit when updated quantity?
This script worked in the first time when i clicked to quantity button, it do not work in the next time. I appreciate your help!
<button class="quantity__button" name="minus" type="button">Minus</button>
<button class="quantity__button" name="plus" type="button">Plus</button>
<input type="button" class="get-rates" value="CALCULATE SHIPPING" />
<script>
$('.quantity__button').click(function(){
$('.get-rates').click();
})
</script>
I want to get input from the user in a type="number" text box.
the limitation is a number between 1994-1998.
I currently have two buttons. One "submit" button and a second ("button") button that goes to the next screen.
I want to make the 2 buttons one.
Which means that as soon as I click the "Move to Next page" button, the input is also checked.
And you can move to the next screen only with proper input.
would much rather do it only with HTML and less with JavaScript if possible.
If there is no option then it is also possible with JavaScript.
function check () {
console.log('Checked!');
}
<div>
between 1994 and 1998: <input id="section5input" type="number" name="quantity" min="1994" max="1998">
<input type="submit">
Calculate the answers!
</div>
</div>
<div class="box" id="section6">
<h1>fin!</h1>
<div class="question-text">
<input style="padding: 20px;" type="button" class="btn" onclick="check();">check!!!
</div>
</div>
From what I understand you want to go to next page only if input is correct then check this out. I have created a form and placed your html inside it. Now the submit button will only work if check function return true.
function check(){
//return true, if correct
//return false, if incorrect
return true;
}
<form action='yourURLforNextPage' method="POST">
Between 1994 and 1998:
<input id="section5input" type="number" name="quantity" min="1994" max="1998">
<input type="submit" onclick="return check();">
</form>
function check(){
let val = document.getElementById("section5input");
if((val.value!= "" && null) && (val.value> 1994 && val.value<1998) ){
//code to render to next screen
}
}
I am just trying to increment a number in a form. This works but the input is big, tried to size with no luck. And I don't want the increment up/down inside the input box. Changing the box to text, gets me the right sizing and no up/down. But the increment doesn't work.
Is there an easier way. Also when I put inside a <form> tag, the plus minus button don't work.
function HaFunction() {
document.getElementById("HNumber").stepUp();
}
function HmFunction() {
document.getElementById("HNumber").stepDown();
}
Number: <input type="number" id="HNumber" class=verd15 value="0">
<span class=verd13>
<button onclick="HaFunction()"><b>+</b></button>
<button onclick="HmFunction()"><b>-</b></button>
</span>
You can make the input smaller with CSS:
<input style="width:40px" type="number" id="HNumber" class=verd15 value="0">
Hope this helped
You can write your own function that increments the number in a text input.
If you have a form, make sure your buttons use type="button". By default it's type="submit", so clicking on the button will submit the form and you'll reload the page.
function addToInput(element, amount) {
var val = parseInt(element.value, 10) || 0;
val += amount;
element.value = val;
}
function HaFunction() {
addToInput(document.getElementById("HNumber"), 1);
}
function HmFunction() {
addToInput(document.getElementById("HNumber"), -1);
}
<form>
Number: <input type="text" id="HNumber" class=verd15 value="0">
<span class=verd13>
<button type="button" onclick="HaFunction()"><b>+</b></button>
<button type="button" onclick="HmFunction()"><b>-</b></button>
</span>
</form>
Currently, this is all I have in terms of code for this:
1 >
This <a> link will probably need some changes, since ideally the user could click on the number and revert to that question number.
and 2 buttons
<input class="btn btn-success NavigationButtons" id="BackButton" type="submit" name="Previous" value="Back" />
<input class="btn btn-success NavigationButtons" id="ForwardButton" type="submit" name="NextPage" value="#Session["ForwardButtonText"]" onclick="RadBtnValidation()"/>
So what I need, is every time the user clicks the button with id="ForwardButton" is for the 1 > to change to 1 > 2 > and vice versa whe the user clicks the back button. Thanks in advance
You can store numbers and append they inside a every button click.
var numberList = [];
init();
function init(){
numberList.push(1);
ShowNumber();
}
$("#BackButton").click(function(){
numberList.pop();
ShowNumber();
});
$("#ForwardButton").click(function(){
numberList.push(numberList[numberList.length-1] + 1);
ShowNumber();
});
function ShowNumber(){
$("#txtPageNumber").html("");
for(var i=0; i<numberList.length;i++)
{
$("#txtPageNumber").append(numberList[i] + ">");
}
}
https://jsfiddle.net/gnne36nw/1/
I have a working form that generates a string, and by clicking on a button it places the string inside a text area box.
I also have a reset button that suppose to reset all fields but not the text area with the strings.
Here is some of my code.
HTML:
<form>
<!--some more code and inputs-->
</tbody> </table> </p> <p> <input value="Generate URL" onclick="createURL1();" type="button">
<input name="result" size="70" class="clearit" type="text" ></input>
<input type="button" value="Add The Link" onClick="addtext();"></p>
<textarea id="t5" style="width:600px;" name="outputtext" ></textarea><br><br>
</p> </td> </tr> </tbody> </table>
<input type="reset" value="Clear" id="reset" ></input>
JavaScript:
$(document).ready(function(){
$('#reset').on('click',function(e){
e.preventDefault();
$('.clearit').val("");
});
});
I gave all the inputs that I want to reset a class (clearit) and the reset button got an ID: reset. The only field I didn't want to be reset got a different id.
it's supposed to work and its not.. Please Help :)
use this javascript function and exclude the element with id you dont want to reset and you can specify the way to reset either by left input blank or dropdown equal -1
and it works on IE and fire fox tesed
function resetLabels()
{
//mainForm is the name of form
var cells = document.mainForm.elements;
for (var i= 0; i < cells.length; i++) {
if(cells[i].name !='txtName')//for example to not reset by name
cells[i].value='';
// cells[i].className = '';
// cells[i].style.color = 'black';
// or cells[i].value='-1' for drop down
// or cells[i].name= ''; name and id to compare and exclude specific elements
// or cells[i].id= '';
//and i suggest to name like txt... and ddl...to
//know the type by name and id or just check the type
//of element by using cells[i].type
}
}