Javascript calculator result flashes - javascript

My Code: "edited, added "var" in front of all variable, thanks. I tried removing the <form> but it wouldn't function when I did.
<head>
<title>Calculator</title>
<script language="javascript">
function calculate()
{
var v=parseInt(document.forms[0].txt1st.value);
var w=parseInt(document.forms[0].txt2nd.value);
var x=parseInt(document.forms[0].txt3rd.value);
var y=703;
var z = (v/w/x*y).toFixed(3);
document.getElementById("display").innerHTML=z;
}
</script>
</head>
<body>
<form name="cal" method="post" action="">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input name="txt1st" type="text" id="txt1st"></td>
<td><input name="txt2nd" type="text" id="txt2nd"></td>
<td><input name="txt3rd" type="text" id="txt3rd"></td>
<td>x 703</td>
</tr>
</table>
<button onclick="calculate()">Calculate</button>
<div id="display"></div>
</body>
When I click the "Calculate" button the result displays in the div, but only for a split second then disappears. Keep in mind I'm very new to JavaScript. Any help appreciated, thanks.

You are submitting the form and so the page is refreshing.
Add return false; to the end of your calculate function to prevent the form submission.

Related

creating custom page in powerschool

I am trying to create a custom page in powerschool (test server). I have written some piece of code. Actually the problem is that the script is never getting triggered. i was thinking that script will get fired since the password textbox has the keyup event on it. Not sure that i am doing it right. I am new to web pages. Can anyone help?
<!DOCTYPE html>
<html>
<!-- start right frame -->
<head>
<title>Student Information</title>
</head>
<body>
<form id="StudentInformationForm" action="/admin/changesrecorded.white.html" method="POST">
<!-- start of content and bounding box -->
<div class="box-round">
<table border="0" cellspacing="0" cellpadding="3" class="linkDescList">
<colgroup><col><col></colgroup>
<td colspan="2"> </td>
</tr>
<tr class="headerRow">
<td colspan="2" class="bold">-Student Information</td>
</tr>
<tr class="Information">
<td>
<div>
<label>Student Email Address</label>
<input type="text" name="studentEmailAddress" />
</div>
<div>
<label>Student Password</label>
<input type="text" name="studentWebPassword" />
</div>
<div>
<label>Grade</label>
<label name="studentGrade">3<label/>
</div>
<div>
<button name="submit" type="button" disabled>Submit</button>
</div>
</td>
</tr>
</table>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$j(function(){
$j("body").on("keyup","input[name='studentWebPassword']",function(){
var current_password = $j("input[name='studentWebPassword']").val();
var studentGrade = $j("input[name='studentGrade']").val();
var password_valid = true;
var hasNumber = /\d/;
var hasSpeacialCharacters=/^[a-zA-Z0-9- ]*$/;
if(studentGrade>=6) //for the students in Grade 3 to 6
{
//password should be of 5 characters and must contain a number
if (current_password.length<5 && current_password>8 && !hasNumber.test(current_password))
{
password_valid=false;
}
}
if (password_valid && current_password!='') {
$j("#submit").show();
}
});
});
</script>
</body>
</html><!-- end right frame -->
jQuery is never assigned to $j.
You can either replace $j with $ or just add $j = $ in the beginning of the script.
Here's a jsFiddle with the added fix of $j = $
The issue with your script is that you are calling an id that doesn't exist $j("#submit") as <button name="submit" type="button" disabled>Submit</button> doesn't have an id. Additionally the show function doesn't remove the disabled attribute, you will want to use prop('disabled', false).
Here's a jsFiddle with the script fixed and $j = $ fixed as well.

Jquery changing .val() works only for a split second [duplicate]

My Code: "edited, added "var" in front of all variable, thanks. I tried removing the <form> but it wouldn't function when I did.
<head>
<title>Calculator</title>
<script language="javascript">
function calculate()
{
var v=parseInt(document.forms[0].txt1st.value);
var w=parseInt(document.forms[0].txt2nd.value);
var x=parseInt(document.forms[0].txt3rd.value);
var y=703;
var z = (v/w/x*y).toFixed(3);
document.getElementById("display").innerHTML=z;
}
</script>
</head>
<body>
<form name="cal" method="post" action="">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input name="txt1st" type="text" id="txt1st"></td>
<td><input name="txt2nd" type="text" id="txt2nd"></td>
<td><input name="txt3rd" type="text" id="txt3rd"></td>
<td>x 703</td>
</tr>
</table>
<button onclick="calculate()">Calculate</button>
<div id="display"></div>
</body>
When I click the "Calculate" button the result displays in the div, but only for a split second then disappears. Keep in mind I'm very new to JavaScript. Any help appreciated, thanks.
You are submitting the form and so the page is refreshing.
Add return false; to the end of your calculate function to prevent the form submission.

How to dynamically add to table after submitting form

This is my code currently, how could I change the current code So I'm able to input data from the form after submitting then adds to the table below, I know I got to do more with JS to achieve this, but can't find anything online that will help me accomplish what I want to do
Edit: What Im trying to accomplish which I cant seem to find online resources to help me, to be exact when I put in the movie name and date, after submitting the values should be put in the table below the form
<html>
<head>
<title>Movie Details</title>
<script type="text/javascript">
function movieName(){
var name = document.getElementById("movie").value;
if (true)
{
alert(name);
}
}
function date(){
var released = document.getElementById("dateRelease").value;
if (true)
{
alert(released);
}
}
</script>
</head>
<body>
<div id="add">
<form name="movieAdd" method="GET">
<fieldset>
<legend>Movie Details</legend>
<p>
<label for="movie">Movie Name:</label>
<input type="text" required placeholder="Movie Name" name="movie" id="movie"/>
</p>
<p>
<label for="date">Date Released:</label>
<input type="date" required name="date" id="date"/>
</p>
</fieldset>
<p>
<input type="submit" name="submitButton" value="Submit">
</p>
</form>
</div>
<table id="movieTable" width="350px" border="1">
<tr>
<th>Number</th>
<th>Movie Name</th>
<th>Date Released</th>
</tr>
</table>
</body>
</html>
I'd recommend using jQuery (http://jquery.com/). You can use it to easily select elements from your form, for example:
var movie = $('#movie').val();
You can then easily append a table row with the necessary data, for example:
var $td = $('<td>').text(movie);
$('#movieTable').append($td);
I hope this points you in the right direction.
if you are using php, then you can use post method to achieve this. once the form is posted you can populate the table.
if(isset($_POST['submitButton'])){
echo '<table id="movieTable" width="350px" border="1">';
echo '<tr>';
echo '<th>'.$_POST['moviename'].'</th>';
echo '</tr>';
echo '</table>';
}

Textbox value inside iframe undefined

I'm new to JQuery and trying to learn more since my work requires me to do a lot of JQuery and AJAX. Now i have this practice project that i use to play around with JQuery and i can't seem to figure out the cause of this problem.
Here's the structure of the website
- index html with an iframe in it containing several buttons
- several html files for each of the iframe
Index.html
<div style="width:750px; height:450px; overflow:hidden; margin: 0 auto; position:relative; margin-top:35px;">
<div id="btn1" style="float:left"> <p> About Us </p> </div>
<div id="btn2" style="float:left"> <p> Objective </p> </div>
<div id="btn3" style="float:left"> <p> Constrains </p> </div>
<div id="btn4" style="float:left"> <p> Modelling </p> </div>
<div id="btn5" style="float:left"> <p> Contact Us </p> </div>
<div id="btn6" style="float:left"> <p> Feedback </p> </div>
<div id="content" style="position:absolute"> <iframe id="main",name="main" frameborder=0 height=450 width=750></iframe> </div>
2.html -- where my textbox resides
<div id="content" style="width: 730px; height: 430px !important;">
<form id="Form_obj", action="index.html", method="post">
<table width="100%" border="1" cellpadding="0">
<tr>
<td>Objective Function:</td>
<td colspan="2"><label id="msg">Your Objective Function</label></td>
</tr>
<tr>
<td></td>
<td align="center", colspan="2"><input type="button", id="Subbutton", value="-", disabled=true><input type="button", id="Addbutton", value="+", disabled=true><input type="submit", value="Submit">
<input type="button", id="Btnclear", value="Clear">
</td>
</tr>
<tr>
<td>Enter Objective Function values:</td>
<td align="right"><input type="text",id="Obj_coef1", name="Obj_coef1", size="5"><input type="text", id="Var_name1",name="Var_name1", size="15"></td>
<td><input type="button", id="Add_var_button", value="Add Variables"></td>
</tr>
</table>
</form>
main.js
$(document).ready(function(){
$("#main").load(function(){
$("#main").ready(function(){
// now read contents
$("#main").contents().find("#Add_var_button").click(function(){
alert("button is clicked");
alert($("#main").contents().find("#Obj_coef1").val());
//alert($("#main").contents().find("#Obj_coef1").val());
//var coef = $("#main").contents().find("#Obj_coef1").val();
//var var_name = $("#main").contents().find("#Var_name1").val();
//var coef_element_name = $("#main").contents().find("#Obj_coef1").getAttribute("name");
//var var_element_name = $("#main").contents().find("#Var_name1").getAttribute("name");
//alert("coef = " + coef);
//alert("var = " + var_name);
//$("#main").contents().find("#msg").text("Jquery changed the text");
//$("#main").contents().find("#msg").append(" appended");
});
});
});
});
Everytime i click the button the alert appears and i can also append text to #msg(label)but for some reason, but when value of the textbox is always undefined even after i changed the value inside the textbox.
What am i missing here?
I figured it out.
Here's my script
var iframe = $("#main");
iframe.load(function(){
iframe.ready(function(){
alert("iframe ready");
// get textboxes and buttons
var btnClear = iframe.contents().find("#Btnclear");
var btnAddVar = iframe.contents().find("#Add_var_button");
var btnAdd = iframe.contents().find("#Addbutton");
var btnSub = iframe.contents().find("#Subbutton");
var msg = iframe.contents().find("#msg");
var obj_coef_input = iframe.contents().find("#Obj_coef1");
var var_name_input = iframe.contents().find("#Var_name1");
btnAddVar.click(function(){
alert("btn add clicked");
btnAdd.prop('disabled',false);
btnSub.prop('disabled',false);
});
btnClear.click(function(){
alert("btn add clicked");
obj_coef_input.prop('value', "");
});
});
});
Oh and don't forget to add $(document).ready(function(){}); to wrap the script
I don't think the find() method is working correctly. I would suggest just using a jQuery selector to get the value. Here's an example:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
var text = $('#blah').val();
alert(text);
})
});
</script>
</head>
<body>
<input type="text" id="blah" /><input type="button" value="button" id="button"/>
</body>

how to insert some variables into an html by attaching it the var at the end of html page

I am using a microcontroller and I'm communicating with it via a html page.
The pages are stored as some constant in the microcontroller and are sent to PC for display purposes.
I want to attach my variable data at the end of html page that is sent into the PC to display them in the boxes that are in the middle of the page.
Before that I was forced to find the exact position of variable in the html in the box .
Is there any way to show the data that is attached at the end of the html in the middle boxes of the page?
<!DOCTYPE html>
<html>
<head>
<title>SAAT Co</title>
<h1><center><font color="red"> SAAT Co </font></center></h1>\r\n<h1><fontcolor="blue"> Ethernet Display T24M08 </font></h1>\r\n
<script>
<--
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
-->
</script>
</head>
<body>
<form name="myForm" action="http://192.168.1.250" onsubmit="return validateForm()" method="post">
<table>
<tr>
<td>Firmware Version :</td>
<td><input type="text" name="dev-info" value=" " ></td>
</tr>
<tr>
<td>MAC Adress :</td>
<td><input type="text" name="mac-addr"></td>
</tr>
<tr>
<td>IP Adress :</td>
<td><input type="text" name="ip-addr"></td>
</tr>
</table>
<input type="submit" value="Apply/Reboot">
</form>
</body>
</html>
If I understand you correctly, you can accomplish what you're trying to do by assigning your values to their appropriate textboxes. The example below does this by giving your textbox an ID and then using javascript to insert your value into that textbox.
<td>MAC Adress :</td>
<td><input type="text" id='MacAddy' name="mac-addr"></td>
...
</form>
</body>
</html>
<script>
document.getElementById('MacAddy').value = "your_value_here";
</script>
The javascript can be appended to the document in the fashion you described in your post.

Categories

Resources