when i click the calculate button it is not showing the desired result it show same in btnvalue input as previous,if previousally the btnvalue is 2+3 then it show same after clicking calculate button 2+3 but i want the display as 5.
i have tried all function valueOf etc but i didnot get the result, i m writing my code in subline text3 and excuting it in XAMPP Control Panel v3.2.2
<!DOCTYPE html>
<html>
<head>
<title>calculater</title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
</head>
<body>
<div style="padding-left:40px">
<h2> PHP Calculator</h2>
<form method="post" id="formID">
Enter value: <input type="text" name="btnValue" id='btnValue'> <br> <br>
<div style="padding-left: 105px">
<input type="button" value="9" name="btn1">
<input type="button" value="8" name="btn2">
<input type="button" value="7" name="btn3">
<input type="button" value="+" name="btn4"> <br>
<input type="button" value="6" name="btn5">
<input type="button" value="5" name="btn6">
<input type="button" value="4" name="btn7">
<input type="button" value="-" name="btn8" style="padding-left: 9px"> <br>
<input type="button" value="3" name="btn8">
<input type="button" value="2" name="btn9">
<input type="button" value="1" name="btn10">
<input type="button" value="/" name="btn11" style="padding-left: 9px"> <br>
<input type="button" value="0" name="btn12" style="padding- left:33px">
<input type="button" value="." name="btn13" style="padding-right:9px">
<input type="button" value="x" name="btn14" style="padding left: 7px"><br>
</div> <br>
<input type="button" id="Calculate" value="calculate" name="Calculator">
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('input[type=button]').click(function(){
if($('#btnValue').val()==''){
$('#btnValue').val($(this).val());
}else{
$('#btnValue').val($('#btnValue').val()+($(this).val()));
}
});
$('#Calculate').click(function(){
var cal=$('#btnValue').val( );
$('#btnValue').val(cal.valueOf() );
});
});
</script>
</body>
</html>
I expect the calculate of 2+3 is 5 not 2+3.
From what I can see you have added the click function to all of your buttons here:
$(document).ready(function(){
$('input[type=button]').click(function(){
This includes your calculate button because it is also a input[type=button] it just has an id of Calculate. So even though you have separated the two functions the ready function takes over and places the value of the calculate button into the text field. Try adding the ready click function to only the buttons you have separated by the div tag and exclude the calculate button. I'm not an expert on jquery so I hope this helps you
just like what KJEK-Code said your setting a click listener on all button and then trying to set on the calculate button. Second, cal.valueOf() won't return the calculated value, it will return the same value as cal.
I have added some fixes based on this link: https://codepen.io/simonja2/pen/QbGYbR
<!DOCTYPE html>
<html>
<head>
<title>calculater</title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
</head>
<body>
<div style="padding-left:40px">
<h2> PHP Calculator</h2>
<form method="post" id="formID">
Enter value: <input type="text" name="btnValue" id='btnValue'> <br> <br>
<div style="padding-left: 105px">
<input type="button" value="9" name="btn1">
<input type="button" value="8" name="btn2">
<input type="button" value="7" name="btn3">
<input type="button" value="+" name="btn4"> <br>
<input type="button" value="6" name="btn5">
<input type="button" value="5" name="btn6">
<input type="button" value="4" name="btn7">
<input type="button" value="-" name="btn8" style="padding-left: 9px"> <br>
<input type="button" value="3" name="btn8">
<input type="button" value="2" name="btn9">
<input type="button" value="1" name="btn10">
<input type="button" value="/" name="btn11" style="padding-left: 9px"> <br>
<input type="button" value="0" name="btn12" style="padding- left:33px">
<input type="button" value="." name="btn13" style="padding-right:9px">
<input type="button" value="x" name="btn14" style="padding left: 7px"><br>
</div> <br>
<input type="button" id="Calculate" value="calculate" name="Calculator">
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('input[type=button]').click(function(){
console.log($(this).val());
if($(this).val() == "calculate") {
var cal=$('#btnValue').val( );
$('#btnValue').val(calculate(cal));
console.log(cal.valueOf());
} else {
if($('#btnValue').val()==''){
$('#btnValue').val($(this).val());
} else {
$('#btnValue').val($('#btnValue').val()+($(this).val()));
}
}
});
calculate = (value) => {
for (var i = 0; i < value.length; i++) {
if(isOperator(value[i])) {
var o = value[i];
var a = value.slice(0, i);
var b = value.slice(i+1);
return operate(a, b, o);
}
}
return value;
}
isOperator = function(value) {
return value === '/' || value === '*' || value === '+' || value === '-';
};
operate = function(a, b, operation) {
a = parseFloat(a);
b = parseFloat(b);
console.log(a, b, operation);
if (operation === '+') return a + b;
if (operation === '-') return a - b;
if (operation === '*') return a * b;
if (operation === '/') return a / b;
}
});
</script>
</body>
</html>
Related
I have multiple buttons that need to be activated at the same time. When each button is click from the input it returns what is type. The problem is I need all the buttons to be fire off at the same time. When I have a separate button fire off theses buttons though I get undefined and not the input.
$(document).on("click", "#devSaveBtn", function () {
if (
$("#primaryBtn").trigger("click") &&
$("#secondaryBtn").trigger("click") &&
$("#thirdBtn").trigger("click")
) {
var getInput = $(this)
.closest("td")
.find("input[name='Object Name']")
.val();
console.log("Input = " + getInput);
var getInput2 = $(this)
.closest("td")
.find("input[name='Project Name']")
.val();
console.log("Input2 = " + getInput2);
var getInput3 = $(this)
.closest("td")
.find("input[name='Description']")
.val();
console.log("Input3 = " + getInput3);
} else {
console.log("This is not working");
}
});
<button type="button" input type="submit" id="devSaveBtn" class="devbutton devinithidden readonlyhidden" title="Reset Changes" style="visibility: visible; background-color: #f4d8b4;"><i class="fa fa-save"></i>
Save</button>
<td class="noncomponentswidth" id="recordObjName">
<p>
<input type="text" id="OBJ_NAME" name="Object Name" placeholder="" required minlength="8">
<button id="primaryBtn">Primary</button>
</p>
<button style="display: none;">Submit</button>
</td>
<td class="noncomponentswidth" id="recordProjectName">
<input type="text" id="DEPLOYER_PROJECT" name="Project Name" placeholder="">
<button id="secondaryBtn">Secondary</button>
</td>
<td class="noncomponentswidth" id="recordDeployerCandidate" placeholder="">
<input type="text" id="DESCRIPTION" name="Description" placeholder="" style="resize: vertical; width: 40em; height: 85px;">
<button id="thirdBtn">Third</button>
</td>
$(document).on("click", "#devSaveBtn", function () {
var getInput = $("input");
for (var i = 0; i < getInput.length; i++)
console.log(getInput[i].id, " => Input", i, " = ", getInput[i].value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js" integrity="sha512-CX7sDOp7UTAq+i1FYIlf9Uo27x4os+kGeoT7rgwvY+4dmjqV0IuE/Bl5hVsjnQPQiTOhAX1O2r2j5bjsFBvv/A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button type="button" input type="submit" id="devSaveBtn" class="devbutton devinithidden readonlyhidden" title="Reset Changes" style="visibility: visible; background-color: #f4d8b4;"><i class="fa fa-save"></i>
Save</button>
<td class="noncomponentswidth" id="recordObjName">
<p>
<input type="text" id="OBJ_NAME" name="Object Name" placeholder="" required minlength="8">
</p>
</td>
<td class="noncomponentswidth" id="recordProjectName">
<input type="text" id="DEPLOYER_PROJECT" name="Project Name" placeholder="">
</td>
<td class="noncomponentswidth" id="recordDeployerCandidate" placeholder="">
<input type="text" id="DESCRIPTION" name="Description" placeholder="" style="resize: vertical; width: 40em; height: 85px;">
</td>
I have a requirement where I have to keep the button to be disabled initially and enable it only when the length of my input is 10.
<div class="form-group">
<label for="MSISDN_Value" class="m-r-10">MSISDN:</label>
<input type="number"
onkeyPress="if(this.value.length === 10) return false;"
[(ngModel)]="MSISDN_Value"
id="MSISDN_Value"
name="MSISDN_Value"
class="form-control display-inline-block width70p m-b-5">
</div>
<div class="form-group">
<button class="btn btn-primary m-l-65" type="submit"
[disabled]="true">Search</button>
</div>
I tried [disabled] = "MSISDN_Value.length !== 10" but it did not work, there are many solutions that disable buttons, but I couldn't find any solution which enables buttons in Angular5.
Hii the problem is you are checking integer value with === operator which is returning false. see my below code.
<div class="form-group">
<label for="MSISDN_Value" class="m-r-10">MSISDN:</label>
<input type="number"
#num
max=10
(change)="toggle2($event)"
id="MSISDN_Value"
name="MSISDN_Value"
class="form-control display-inline-block width70p m-b-5">
</div>
<div class="form-group">
<button class="btn btn-primary m-l-65" type="submit"
[disabled]="this.num.value==10?false:true">Search{{this.num.value===10}}</button>
</div>
//.ts file
toggle2(event){
console.log(event.target.value)
}
After searching, I took the help of events and used (input) function binding and fired an event on even.target.value changes to toggle [isDisabled]
<div class="form-group">
<label for="MSISDN_Value" class="m-r-10">ISMSDN/IMEI:</label>
<input type="number" onkeyPress="if(this.value.length === 10) return false;" (input)="onSearchChanges($event.target.value)" [(ngModel)]="MSISDN_Value" id="MSISDN_Value" name="MSISDN_Value" class="form-control display-inline-block width59p m-b-5">
</div>
<div class="form-group">
<button class="btn btn-primary m-l-96" type="submit" [disabled]="searchDisabled">Search</button>
</div>
component.ts file
onSearchChanges(value) {
if(value.length === 10){
this.searchDisabled = false;
} else{
this.searchDisabled = true;
}
}
I am trying to make a text field appear and disappear based on the selection of a list box.
Unfortunately, I am not able to do so and box appears without being hidden.
I would appreciate any help in this.
I am putting this as HTML file in google script opening in side bar.
HTML file
<!DOCTYPE html>
<script>
loadSelectList();
function loadSelectList() {
google.script.run.withSuccessHandler(function(ar) {
let select = document.createElement("select");
select.id = "CompNameID";
select.name = "CompName"; // Added
select.required = "required";
// select.setAttribute("onchange", "selected()");
document.getElementById("CompNM").appendChild(select);
ar.forEach(function(e, i) {
let option = document.createElement("option");
option.value = e;
option.text = e;
document.getElementById("CompNameID").appendChild(option);
});
}).getCompanyFromSpreadsheet();
};
function selected() {
const value = document.getElementById("select1").value;
console.log(value);
}
$("#CompNameID").change(function() {
if ($(this).val() == "Other") {
$('#OtherCompName').show();
$('#otherField1').attr('required', '');
$('#otherField1').attr('data-error', 'This field is required.');
} else {
$('#OtherCompName').hide();
$('#otherField1').removeAttr('required');
$('#otherField1').removeAttr('data-error');
}
});
$("#CompNameID").trigger("change");
</script>
<html>
<head>
<base target="_top">
</head>
<body>
<hr /><b>Please fill in the form and hit submit</b><br><hr /><br>
<form id="myForm" onsubmit="google.script.run.withSuccessHandler(google.script.host.close).paddProject(this)">
<input type="hidden" name="rowNUM" required="required" value=<?= rawnumber ?>>
<input type="hidden" name="recID" required="required" value=<?= recordid ?>>
<input type="hidden" name="TimeStamp" required="required" value=<?= timestamp ?>>
<label><b>Company:</b></label><br>
<div id="CompNM" class="dropdown-content"></div><br>
<div id="OtherCompName" class="otheroption-field">
<label for="otherField1"><b>Group: Heres One!</b></label>
<input type="text" id="otherField1">
</div><br>
<label><b>Short Description:</b></label><br>
<textarea name="ShortDesc" cols="35" rows="1" required="required"></textarea><br><br>
<label><b>Detail Description:</b></label><br>
<textarea name="DetailDesc" cols="35" rows="10" required="required"></textarea><br><br>
<label><b>Notes:</b></label><br>
<textarea name="Notes" cols="35" rows="10"></textarea><br><br>
<label><b>MSA Link:</b></label><br>
<input type="url" name="MSALink"><br>
<br><br><br>
<input type="submit" value="Submit">
</form><br>
<input type="button" value="Cancel" onclick="google.script.host.close()" />
</body>
</html>
Is there a way to set text in a TextArea? I have four Buttons and when I click on a Button I want the text in the Button to appear in the TextArea.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="practice.css">
<script>
var elem = document.getElementById('ta1');
function displayText(e){
elem.setText(elem.getText());
}
</script>
</head>
<body>
<div>
<input class="button" type="button" id="button0" value="testing1"/>
<input class="button" type="button" id="button1" value="testing2" />
<input class="button" type="button" id="button2" value="testing3"/>
<input class="button" type="button" id="button3" value="testing4"/>
</div>
<textarea id = "ta1" disabled rows="3" cols="50"></textarea>
</body>
</html>
I thought of creating a method displayText(e) that collects the Button text and sets it in the TextArea. But I am not sure how to access the Button text. And once I get the text, how do I save it in the TextArea? Any ideas?
So do you mean like this?
<!DOCTYPE html>
<head>
<script>
document.addEventListener('DOMContentLoaded', start, false);
function start(){
document.getElementById("button0").addEventListener("click", function(){addText(this);} );
document.getElementById("button1").addEventListener("click", function(){addText(this);} );
document.getElementById("button2").addEventListener("click", function(){addText(this);} );
document.getElementById("button3").addEventListener("click", function(){addText(this);} );
function addText(elem) {
document.getElementById("ta1").innerHTML += elem.value;
}
};
</script>
</head>
<body>
<textarea id = "ta1" disabled rows="3" cols="50">
</textarea>
<br>
<input class="button" type="button" id="button0" value="testing1"/>
<input class="button" type="button" id="button1" value="testing2" />
<input class="button" type="button" id="button2" value="testing3"/>
<input class="button" type="button" id="button3" value="testing4"/>
</body>
</html><html>
Use the .value property to display preset text into a text area.
<!DOCTYPE html>
<html>
<body>
<textarea id="demo" cols="10" rows="20">
</textarea>
<script>
var cars = ["Saab", "Volvo", "BMW"];
for(var i = 0; i < cars.length;i++){
document.getElementById("demo").value += " " + cars[i];
}
</script>
</body>
</html>
for each button, give an onclick to a separate function and have each function look something like this:
function button1 () {
var node = document.createTextNode(x); /*var x, or whatever you want the variable
to be called will be the text you want it to display. You will have to define this in
an earlier variable already defined*/
var container = document.getElementById("ta1");
container.appendChild(node); //Appends text node to inside the TA
}
You could do it by adding "onclick" to the input statement as follows:
// add **onclick="function()"** to the button
<div>
<input class="button" type="button" id="button0" value="testing1" onclick="addText1"/>
<input class="button" type="button" id="button1" value="testing2" onclick="addText2"/>
<input class="button" type="button" id="button2" value="testing3" onclick="addText3"/>
<input class="button" type="button" id="button3" value="testing4" onclick="addText4"/>
</div>
// use stylesheet for positioning, etc.
<div id="text1"></div>
<div id="text2"></div>
<div id="text3"></div>
<div id="text4"></div>
//now when you click the button, it will call the respective function in the script
<script>
var text1 = "Enter text 1";
var text2 = "Enter text 2";
var text3 = "Enter text 3";
var text4 = "Enter text 4";
function addText1(){document.getElementById("text1").innerHTML += text1;}
function addText2(){document.getElementById("text1").innerHTML += text2;}
function addText3(){document.getElementById("text1").innerHTML += text3;}
function addText4(){document.getElementById("text1").innerHTML += text4;}
</script>
I have a HTML like this:
<div class="search">
<input type="text" id="search_text" name="search_text" placeholder="Search by Name ...">
<select>
<option>Filter</option>
<option>By date</option>
<option>By size</option>
</select>
From: <input type="date" id="start_date" name="start_date">
To: <input type="date" id="end_date" name="end_date">
Size:<input type="text" id="size" name="size" placeholder="size">
<input type="submit" onclick="return search()" value="Search">
</div>
I want to show From: and To: only when By date is selected in filter and I want to show "Size" only when By size is selected in filter.
OK, I made an exception and did the coding for you!
Here's a jQuery solution:
Working example: http://jsfiddle.net/khRjq/
<div class="search">
<input type="text" id="search_text" name="search_text" placeholder="Search by Name ...">
<select id="selectmode">
<option value="">Filter...</option>
<option value="date">By date</option>
<option value="size">By size</option>
</select>
<div class="bydateinputs" style="display: none">
From: <input type="date" id="start_date" name="start_date">
To: <input type="date" id="end_date" name="end_date">
</div>
<div class="bysizeinputs" style="display: none">
Size:<input type="text" id="size" name="size" placeholder="size">
</div>
<input type="submit" onclick="return search()" value="Search">
</div>
JS:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
$('#selectmode').change(function()
{
if ($(this).val() == 'date')
{
$('.bydateinputs').show();
$('.bysizeinputs').hide();
}
if ($(this).val() == 'size')
{
$('.bydateinputs').hide();
$('.bysizeinputs').show();
}
});
});
</script>
First, put them into a div.
Filter
By date
By size
From:
To:
Size:
Then use jquery to handle select change event
$("select").change(function() {
if($(this).text == "By date")
{
$("div.size").hide();
$("div.from").show();
$("div.to").show();
}
else if($(this).text == "By size")
{
$("div.size").show();
$("div.from").hide();
$("div.to").hide();
}
else
{
$("div.size").hide();
$("div.from").hide();
$("div.to").hide();
}
});
If you don't want to include jQuery, you can follow this fiddle :
HTML :
<div class="search" id="searchDiv">
<input type="text" id="search_text" name="search_text" placeholder="Search by Name ..."/>
<select onchange="changeSearchType(this)">
<option value="">Filter</option>
<option value="dateinput">By date</option>
<option value="sizeinput">By size</option>
</select>
<div id="dateinput" style="display:none;">
From: <input type="date" id="start_date" name="start_date"/>
To: <input type="date" id="end_date" name="end_date"/>
</div>
<div id="sizeinput" style="display:none;">
Size:<input type="text" id="size" name="size" placeholder="size"/>
</div>
<input type="submit" onclick="return search()" value="Search">
</div>
JavaScript :
function changeSearchType(el){
var e = el.value,
divs = document.getElementById("searchDiv").getElementsByTagName('div');
for(var i = 0, l = divs.length; i < l ; i++){
divs[i].style.display = 'none';
}
if(e != '') document.getElementById(e).style.display = 'block';
}