I am looking to use an onclick button function in JQuery which when clicked returns the value in the button to the text area of a form. So for example I am building a calculator when i click 1 , 1 should be the value in the form input area. Any clues how i can do that?
<FORM NAME="Calc">
<TABLE BORDER=4>
<TR>
<TD>
<INPUT id ="enter" TYPE="text" NAME="Input" Size="16">
<br>
</TD>
</TR>
<TR>
<TD>
<button type ="submit" NAME="one" value="1"> 1 </button>
First brush up the basics of language
<button class="btncalc" value="1" type="button"></button>
$('.btncalc').click(function(){
$'#enter').val($(this).val());
});`
You could do something like this:
<input type="text" value="">
<button>1</button>
<button>2</button>
<button>3</button>
<script>
$( "button" ).click(function() {
var current = $("input").text();
var update = $( this ).text();
$("input").val( current + update );
});
</script>
I would avoid using <button type ="submit" NAME="one" value="1"> 1 </button> for your inputs in your calculator because this will cause a full form post due to type ="submit".
https://www.w3.org/TR/html-markup/button.submit.html
I grabbed most of the code from here (3/4 down the page). This will give you a feel for how it will work.
http://api.jquery.com/val/
Sounds like fun I hope it turns out nice :)
Related
I want create simple calculator using only jquery. When I try to track which button is pressed from the list (name=numbers), it displays the value of the first button. For example, I constantly get 1
<html>
<head>
<script type="text/javascript" src="Z:\ПИ-313\2 подгруппа\Баталова Шаниязов\Веб - технологии\Веб - технологии\jquery-3.3.1.min.js"></script>
</head>
<body>
<div>
<input id="field" type="text"/>
<input type="button" value="<<">
<input type="button" value="C">
</div>
<div>
<button name="numbers" value="1">1</button>
<button name="numbers" value="2">2</button>
<button name="numbers" value="3">3</button>
<input type="button" value="+">
</div>
<div>
<input type="button" name="numbers" value="4">
<input type="button" name="numbers" value="5">
<input type="button" name="numbers" value="6">
<input type="button" value="-">
</div>
<div>
<input type="button" name="numbers" value="7">
<input type="button" name="numbers" value="8">
<input type="button" name="numbers" value="9">
<input type="button" value="*">
</div>
<div>
<input type="button" name="numbers" value="0">
<input type="button" value=",">
<input type="button" value="/">
</div>
<div>
<button id="calc">=</button>
</div>
<script>
$(document).ready(function(){
$(':button[name=numbers]').click(function() {
var number = $(':button[name=numbers]').val();
$('#field').val(number);
});
});
</script>
</body>
It is because with ':button[name=numbers]' you select all buttons with the name numbers, which, in your code snippet, means all of them. You get the first value: 1.
In Javascript you have this. In your click() function this is 'the item clicked'. In this case perfect, beause you want the value of 'the item clicked':
var totalSum = Number( $('#field').val() ); // easier to save if outside the click;
$(':button[name="numbers"]').click(function() {
$('#field').val( totalSum + this.value);
});
Little code review, this is what I've done:
Moved the totalSum out of the click. You can now do other computations with it, without having to select it from the DOM
I used this.value instead of $(this).val(). jQuery internally does the same, we just do it directly. Using native javascript where possible will very often be faster and more lightweight.
I just added the value directly in the .val() function. This will save you a line of code (while maintaining readability) and you don't save it in the memory now. It's a small value, but do this trick 1000 times and you will feel the difference. If you must save it in a variable, use let instead of var (and google why :) )
You use name= and them give them all the same name. They must be unique. I think you're looking for class=
You need to use $(this) to get the clicked button
$(document).ready(function(){
$(':button[name=numbers]').click(function() {
var number = $(this).val();
$('#field').val(number);
});
});
This is how I fixed it. Replace this:
var number = $(':button[name=numbers]').val();
$('#field').val(number);
by this:
var number = $(this).val();
$('#field').val($('#field').val() + number);
The mistake is that in your event you are always getting the first element instead of the clicked one.
Second is you are just setting the value of the retrieved data instead of concatenating with whats already existing.
Here is the JSfiddle demo
Here is what I need so far. I need to have the quantity input box's value to be added to a sentence after the input area.
Right now I have this code for the input for quantity:
<label for="quantity">Qty: </label>
<input min="1" type="number" id="quantity" name="quantity" value="1" onkeyup="getVals(this, 'text');" />
<input type="submit" id="add-to-cart" class="btn addtocart" name="add" value="Add to cart" />
<div class="how-many">You have helped save <span id="pTextInput"></span>people</div>
I would like the input value for id quantity to be inserted into the span id="pTextInput".
So basically if the quantity input is set to 2 then the sentence, You have helped save 2 people would show up (the dynamic number being placed in the span.
Hope this makes sense. I can use regular javascript or jquery, whichever is easiest.
If I understood the question correctly, you might be looking for something like this:
<script type="text/javascript">
$(function() {
$("#pTextInput").html("1");
$("#quantity").on("change keyup", function() {
$("#pTextInput").html($(this).val());
});
});
</script>
<label for="quantity">Qty: </label>
<input min="1" type="number" id="quantity" name="quantity" value="1" />
<input type="submit" id="add-to-cart" class="btn addtocart" name="add" value="Add to cart" />
<div class="how-many">You have helped save <span id="pTextInput"></span> people</div>
As you change the input of quantity, the pTextInput value will change with it.
I guess you want this:
function getVals(input) {
document.getElementById("pTextInput").innerHTML = input.value;
}
Also, change getVals(this, 'text') to getVals(this) - no need for 'text'.
I would suggest taking a look at DOM manipulation basics with JS: http://www.w3schools.com/js/js_htmldom.asp
Basically what I want to do is show a div if a keyword has been entered in the search box. For example I type "Television" into the box and it will show a div an ID of Television, but I want to do this for about 5 results. Is this possible to be done with Javascript?
This is all I've got:
HTML:
<form class="pure-form">
<legend></legend>
<input type="text" placeholder="Example: Television" class="pure-input-rounded">
<button type="button" name="answer" onclick="showDiv()" class="pure-button">Search</button>
<div id="noresults" style="display:none; font:'proxima-nova'; color:#BA2E31;" class="results" >No Results were found! :(</div>
Javascript:
function showDiv() {
document.getElementById('noresults').style.display = "block";
}
jsFiddle
Live site
You can use the onkeypress attribute to compare your text box value with predefined strings.
<form class="pure-form">
<legend></legend>
<input type="text" placeholder="Example: Television" class="pure-input-rounded" onkeypress="checkMatch(this)">
<button type="button" name="answer" onclick="showDiv()" class="pure-button">Search</button>
function checkMatch(obj) {
/* get obj text and compare is to some other string */
}
Sure. your code would look something like this:
<form class="pure-form">
<legend></legend>
<input type="text" placeholder="Example: Television" class="pure-input-rounded" onkeyup="showDiv(this.value)">
<button type="button" name="answer" class="pure-button">Search</button>
</form> <script>
function showDiv(value) {
if (value.charAt(value.length - 1) == ' ')
document.getElementById('noresults').style.display = "block";
else
document.getElementById('noresults').style.display = "none";
}
</script>
<div id="noresults" style="display:none; font:'proxima-nova'; color:#BA2E31;" class="results" >No Results were found! :(</div>
So, as Tsikon has already answered You need to have an event defined for your text field and a JS function associated (showdiv()) with it
For eg: Onkeypress/Onchange and length of the field >0
You can probably think of displaying the div only when atleast 3 characters are entered by when you probably know what to display in div.
<input type="text" name="BoqTextBox" />
<input type="AddValueButton" value="+" onclick="Add(BoqTextBox)" />
<input type="MinusValueButton" value="-" onclick="Minus(BoqTextBox)"/>
</div>
<script>
function Add(data) {
var i = 1;
}
</script>
User enters data into 'BoqTextBox' and clicks + button.
All Data in the text box is passed to the 'data' paramter in function Add(data)
How do I do this?
Thanks
First you should add an ID attibute to input[name=BoqTextBox] element because search an alement by name is more dificult. (see http://www.mkyong.com/javascript/how-to-get-element-by-name-in-html-getelementsbyname/)
<input type="text" name="BoqTextBox" id="BoqTextBox" />
Then change the onclick ovent to looks like this:
<input type="AddValueButton" value="+" onclick="Add(document.getElementById('BoqTextBox').value)" />
<input type="MinusValueButton" value="-" onclick="Minus(document.getElementById('BoqTextBox').value)"/>
I hope this works.
so i am using the play framework and I'm try to create multiple submit buttons that call the one form:
So what I have is a list of strings, and i would like to create two buttons that will go back to the server and complete an event, the first is send the second is cancel. What i would like to also do is set the source value equal to what is selected in the foo select object. How would I go about doing this? Do i need to create a javascript even that is fired from the form and then get the var inside that function and then fire off the submit? Im not 100% familiar with play framework and scala, so im not sure if i can get it somehow inside this code without using a new method.
#(myList: List[String], theForm: Form[Obj])
#import helper._
#main("myVar Controller") {
<select id="foo">
</select>
<table border="1">
<tr>
#for(myVar <- myList) {
<td>#myVar
#form(routes.Application.method()) {
<div id="hiddenForm" style="visibility:hidden">
<input type="text" name="commandID" id="commandID" value="10" /> //Send Code
<input type="text" name="source" id="source" value=**"Put selected value of foo here" />**
<input type="text" name="destination" id="destination" value="#myVar" />
</div>
<input type="submit" value="Send" />
}
#form(routes.Application.method()) {
<div id="hiddenForm" style="visibility:hidden">
<input type="text" name="commandID" id="commandID" value="18" /> //Undo code
<input type="text" name="source" id="source" value=**"Put selected value of foo here" />**
<input type="text" name="destination" id="destination" value="#myVar" />
</div>
<input type="submit" value="Undo" />
}
</td>
}
</tr>
</table>
}
First of all, the html isn't valid.
You should first make sure that there aren't elements that have the same id.
You have to use javascript to change a value in your form.
I'm not familiar with scalar or playframework, but if they allow you to use jQuery, I recommend the following solution.
$("#foo").bind("change", function(){$("#source").val($("#foo").val()));});
example:
http://jsfiddle.net/RubenJonker/a8a8p/5
If they don't allow you to use jQuery, then you should put some javascript in the onchange event of the select.
<select onchange="document.getElementById('source').value = this.value">
</select>
example:
http://jsfiddle.net/RubenJonker/a8a8p/4
Incase anyone else has this problem I used the following to solve my problem: Thanks Ruup as your code was the reason why I solved the problem
html:
<select id="foo" >
<option></option>
<option value="test">test</option>
</select>
<input type="text" value="" name="field" id="field" />
and javascript:
$(document).ready(function() {
obj = document.getElementById("foo");
obj.onchange = function()
{
var elements = document.getElementsByName('field');
for (i=0;i<elements.length;i++)
{
elements[i].value = $('#foo').val();
}
}; });