I have build calc and I wanted to add a logs for calculator but my script is not working. Someone see
where is mistake? I am learning for a few days and decided to make a project but after many hours of looking at code, browsing everything in internet I decided to ask you. I know there are probably many easier projects for a beginner, but I don't want to abandon a project before finishing.
Here is js script.
funtion changeContent() {
var x = document.getElementById('textarea');
var liczba11 = document.getElementById('liczba1');
var liczbaa2 = document.getElementById('liczba2');
x.value = x.value + liczba11.value + liczbaa2.value + '\r\n';
}
<form action="">
<fieldset>
<legend>Sumowanie dwóch liczb - wprowadź dane</legend>
<p>Liczba1 <input type="text" name="liczba1" id="liczba1" /></p>
<p>Liczba2 <input type="text" name="liczba2" id="liczba2" /></p>
<p>Wynik : <input type="text" name="wynik" readonly="readonly" /></p>
<button
onclick="this.form.elements['wynik'].value = parseFloat(this.form.elements['liczba1'].value) + parseFloat(this.form.elements['liczba2'].value); return false"
>
Oblicz
</button>
</fieldset>
</form>
<form action="">
<div>
<textarea
name="uwagi"
id="textarea"
cols="30"
rows="3"
value="text"
disabled="disabled"
></textarea>
</div>
</form>
<button onclick="changeContent()">Click to change</button>
It's really difficult to implement, calculation in programming language. There's so mutch anything to handle, priority, divizion by zero. With the power of programming language there's eval function in javascript it can be easy to do.
const btn = document.querySelector('button')
const str = document.querySelector('#liczba1')
const result = document.querySelector('#r')
btn.addEventListener('click', function(e){
e.preventDefault()
if ( /^[0-9\*\/\-\+\(\)]+$/.test(str.value))
{
result.innerText = eval(str.value) // Be awaire of using eval function
console.log(eval(str.value))
} else
result.innerText = 'Error, type missmatch'
})
<fieldset>
<legend>String of calculation</legend>
<p>Example: 3+4 OR 4*3 OR some complicate 7895*265+(423-(4/65+3))</p>
<p><input type="text" name="liczba1" id="liczba1"/></p>
<p>Result <strong id="r"></strong> </p>
<button>
Result
</button>
</fieldset>
IMPORTANT
Check intentionnally using eval function.
Instead of using the onclick handler to hold the code, you can run a function from it.
You also misspelled function.
I added the logging code to the runCalc function so that it all happens at the same time, no extra button needed.
function runCalc(){
liczba11 = document.getElementById('liczba1');
liczbaa2 = document.getElementById('liczba2');
wynik = document.getElementById('wynik');
logs = document.getElementById('textarea');
wynik.value = parseFloat(liczba11.value) + parseFloat(liczbaa2.value);
logs.value += parseFloat(liczba11.value) + " + " + parseFloat(liczbaa2.value) + " = " + wynik.value + "\r\n";
}
<form action="">
<fieldset>
<legend>Sumowanie dwóch liczb - wprowadź dane</legend>
<p>Liczba1 <input type="text" name="liczba1" id="liczba1" /></p>
<p>Liczba2 <input type="text" name="liczba2" id="liczba2" /></p>
<p>Wynik : <input type="text" name="wynik" id="wynik" readonly="readonly" /></p>
<button type="button"
onclick="runCalc()"
>
Oblicz
</button>
</fieldset>
</form>
<form action="">
<div>
<textarea
name="uwagi"
id="textarea"
cols="30"
rows="3"
value="text"
disabled="disabled"
></textarea>
</div>
</form>
Related
Please let me know why this doesn't work and how I can achieve this as simple as possible. my professor wants the simplicity to reflect 15 minutes or work. I just don't grasp it though. Thanks in advance!
<script language="JavaScript">
var obj = {
name = "",
address = "",
ccNumber = "",
}
function printObj() {
document.getElementById("display").innerHTML = obj.name + " " + obj.address + " " + obj.ccNumber;
}
function storeInput(user_input1, user_input2, user_input3) {
name = document.getElementById("myObject").form.user_input1;
address = document.getElementById("myObject").form.user_input2;
ccNumber = document.getElementById("myObject").form.user_input3;
}
</script>
<form>
<label><b>Enter full name</b></label>
<input type="text" name="message" id="user_input1">
</form>
<form>
<label><b>Enter billing address</b></label>
<input type="text" name="message" id="user_input2">
</form>
<form>
<label><b>Enter CC number</b></label>
<input type="text" name="message" id="user_input3">
</form>
<input type="submit" onclick="obj.storeInput(user_input1, user_input2, user_input3);obj.showInput()"><br />
<p id='display'></p>
Ok! You need your storeInput() to reference the declared object. Currently with your code as it is storeInput() is an independent function but for you event handler (onclick) to work. You need to redefine the storeInput() as
obj.storeInput() = function(user_input1, user_input2, user_input3) {.....};
This will get the job done. It will not store the values, but will display them.
<!DOCTYPE html>
<html>
<body>
<form>
<label><b>Enter full name</b></label>
<input type="text" name="message" id="user_input1">
<label><b>Enter billing address</b></label>
<input type="text" name="message" id="user_input2">
<label><b>Enter CC number</b></label>
<input type="text" name="message" id="user_input3">
</form>
<input type="submit" onclick="aFunction();"><br />
<p id='display'></p>
<script>
function aFunction(){
var x = document.querySelector('#user_input1').value; // gets value of user_input1 field
var y = document.querySelector('#user_input2').value; // gets value of user_input2 field
var z = document.querySelector('#user_input3').value; // gets value of user_input3 field
document.querySelector('#display').innerHTML = x + ' ' + y + ' ' + z; // puts the values in <p> with id of 'display'
}
</script>
</body>
</html>
Hope this helps you understand.
I am working with a form which uses Javascript for a process. When i try to read the textbox value in form with PHP, It's not showing output.
My code is
HTMLCode is
<form class="form-inline" method="POST" action="staff.php" onSubmit=" return questiontable()" >
<div class="form-group">
<label for="qscount">Number of Questions: </label>
<input type="number" name="qscount" class="form-control" id="qscount" style="width:150px;" placeholder="No of questions"> <br>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" id="gobtn" onClick="return disable()" >Go</button> <br>
<p id="btnhide"> </p>
</div>
</form>
Javascript is
<script type="text/javascript">
function questiontable()
{
var qs = document.getElementById("qscount").value;
var count;
for(count=1; count<=qs; count++)
{
document.getElementById("demo").innerHTML += '<br><font style="font-size: 20px">'+ count+'. <input class="textboxtest" style="width:850px;" type="text" name=" q'+ count +' " placeholder="Question "><br>' ;
document.getElementById("demo").innerHTML +='<br><input style="margin-left: 25px;" type="radio" name="a'+count+'" value="c1"> <input class="testbox" type="text" name="o'+count+'1" placeholder="Option 1">';
return false;
}
</script>
PHP Code is
<?php
if (isset($_POST['qscount'])){
echo $_POST['qscount'];
}
?>
I want to use this qscount value in another php page. How to get this textbox value in PHP and use it in another page ?
Javascript function() should return true, since you are using return function() in onclick attribute of button type=submit
<script type="text/javascript">
function questiontable()
{
var qs = document.getElementById("qscount").value;
var count;
for(count=1; count<=qs; count++)
{
document.getElementById("demo").innerHTML += '<br><font style="font-size: 20px">'+ count+'. <input class="textboxtest" style="width:850px;" type="text" name=" q'+ count +' " placeholder="Question "><br>' ;
document.getElementById("demo").innerHTML +='<br><input style="margin-left: 25px;" type="radio" name="a'+count+'" value="c1"> <input class="testbox" type="text" name="o'+count+'1" placeholder="Option 1">';
}
return true;
}
</script>
This will continue the form posting onclick of the button
If you are trying to create the number of questions on click dynamically using javascript,
then use syntax to call questionTable
<button type="button" class="btn btn-primary" id="gobtn" onClick="javascript:return questiontable()" >Create Questions</button>
Remove
onSubmit=" return questiontable()"
from the form
Now when the question table is rendered, please show the button type="submit"
<button type=submit value="Go" name="cmdGo">Go</button>
to trigger form submission
Hope it helps!
<body bgcolor="pink">
<form name="sorter" action="result.jsp" method="post">
<div align="right">
<textarea style="overflow:auto;resize:none" id="sorter2" name="sorter2" rows="4" cols="50" maxlength="100" wrap="hard"></textarea><br>
<input type="button" value="Numbers in Asc" onClick="SortNumbers()">
</div>
<div align="center">
<textarea style="overflow:auto;resize:none" id="sorter3" name="sorter3" rows="4" cols="50" maxlength="100" wrap="hard"></textarea><br>
<input type="button" value="words in Asc" onClick="SortWords()">
</div>
<p align="center">
<input type="Submit" value="View">
</p>
</form>
For this correspondig html page i have javascript as follows it is working properly but my question is when i click on view button it goes to next page(result.jsp) how can i pass current page data using cookies and how to display in result.jsp page,thanks in advance
javascript is:
function SortNumbers(){
var arr=document.getElementById("sorter2").value.split(",");
arr.sort(function(a,b){
return a-b
});
document.getElementById("sorter2").value=arr;
alert("The least value is:"+arr[0])
alert("Highest value is:"+arr[arr.length-1])
}
function SortWords() {
var inputvalues = document.getElementById("sorter3").value.split(" ");
inputvalues.sort(function (x, y) {
return x.length > y.length;
});
//document.getElementById("sorter3").value = inputvalues;
alert("smallest word is: " + inputvalues[0])
alert("longest word is: " + inputvalues[inputvalues.length - 1]);
document.getElementById("sorter3").value = inputvalues.join(' ');
}
for a uni assignment I need to validate my form before posting it. When an error occurs, there needs to be a text message in the same block as the error-input field (so no pop-up message). I'm not very good at JavaScript so I could really use some help.
Here's my html
<div id="form">
<form name="myForm" method="post" >
<p class="head">Deelnemer</p>
<fieldset id="deelnemer">
<label class="title">Naam:</label>
<input type="text" id="txtName" name="txtName" size="15"/>
</fieldset>
<p class="head">Opmerkingen</p>
<fieldset id="opmerkingen">
<textarea name="opmerkingen" rows="5" cols="40"></textarea>
</fieldset>
<p id="button">
<input type="submit" name="submit" value="Aanmelden" onclick="validate()"/>
</p>
</form>
And my Javascript so far (this show a popup message)
function validate()
{
var userName = document.getElementById("txtName").value;
if (userName.length == 0)
{
alert("Please, enter your name");
return false;
}
else
{
alert("Thank you, " + userName);
}
}
I hope someone has an answer for me! Thanks
So, what you want is just to make appear a message close to the textfield with the error?
For that, you jusst need to modify a little bit your htm and js:
<p class="head">Deelnemer</p>
<fieldset id="deelnemer">
<label class="title">Naam:</label>
<input type="text" id="txtName" name="txtName" size="15"/>
<div id="txtNameError" style="display: none;">Please, enter your name</div>
<p class="head">Opmerkingen</p>
<fieldset id="opmerkingen">
<textarea name="opmerkingen" rows="5" cols="40">
</textarea>
</fieldset>
<p id="button">
<input type="submit" name="submit" value="Aanmelden" onclick="validate()"/>
</p>
</form>
And, in your js file, you replace your alert by the id you need to dispay:
{
var userName = document.getElementById("txtName").value;
if (userName.length == 0)
{
/*alert("Please, enter your name");*/
document.getElementById("txtNameError").style.display = "block";
return false;
}
else
{
alert("Thank you, " + userName);
}
}
Well so far i havent been able to get it to change the input box value.
What i want it to do?
I want it to take the text from the first box. And when you click the button splits it and appends them to the 2nd and 3rd box.
I don't want to use jquery or any libraries purely javascript.
Any questions ask away.
Not sure what im doing wrong here. Seems it should work. Any help? Thanks
Edited this is working for what i need.... not sure if its the best way but it does work
Code
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var urls_1;
var split_text;
function addto_boxes(form) {
var split_text = document.getElementById("text_to_split").value;
var urls_1 = split_text.split(" ", 100000);
document.getElementById("input_box1").value = document.getElementById("input_box1").value + urls_1[0] + " ";
document.getElementById("input_box2").value = document.getElementById("input_box2").value + urls_1[1] + " ";
}
</SCRIPT>
</HEAD>
<BODY>
<input id="Split" type="button" value="Add to boxes" onclick="addto_boxes(this.form);"/><Br>
<textarea NAME="texttosplit" id="text_to_split" VALUE="" rows="4" cols="75"></textarea><Br>
<FORM NAME="myform" ACTION="" METHOD="GET">Put 1st urls in this box:
<textarea NAME="inputbox" id="input_box1" VALUE=""rows="4" cols="75"></textarea><Br>
Put 2nd urls in this box: <Br>
<textarea NAME="inputbox2" id="input_box2" VALUE=""rows="4" cols="75"></textarea><Br>
<INPUT TYPE="reset">
</FORM>
</BODY>
</HTML>
This should work for you
HTML
<input id="Split" type="button" value="Add to boxes" />
<Br>
<textarea NAME="texttosplit" id="text_to_split" VALUE="" rows="4" cols="75"></textarea>
<Br>
<FORM NAME="myform" ACTION="" METHOD="GET">Put 1st urls in this box:
<textarea NAME="inputbox" id="input_box1" VALUE="" rows="4" cols="75"></textarea>
<Br>Put 2nd urls in this box:
<Br>
<textarea NAME="inputbox2" id="input_box2" VALUE="" rows="4" cols="75"></textarea>
<Br>
<INPUT id="reset" TYPE="reset">
</FORM>
Javascript
var aBox1 = [];
var aBox2 = [];
document.getElementById("Split").addEventListener("click", function () {
var urls_1 = document.getElementById("text_to_split").value.trim().split(" "),
url1 = urls_1[0] || "",
url2 = urls_1[1] || "";
if (url1.length) {
aBox1.push(url1);
}
if (url2.length) {
aBox2.push(url2);
}
document.getElementById("input_box1").value = aBox1.join(" ");
document.getElementById("input_box2").value = aBox2.join(" ");
}, false);
document.getElementById("reset").addEventListener("click", function () {
aBox1.length = 0;
aBox2.length = 0;
}, false);
On jsfiddle