|
JavaScript - Form To Display Automatically 3 Calculated Values
Similar TutorialsI have a order form page and on submitting it opens a new web page that displays the order totals. Below is my code and most probably wrong but for me it seems logic. Please assist. Order Form: Code: <td colspan="1" height="120" align="left"> <select style="margin-left: 60px; background-color: #00FF77;" name="prod_bed_359" onchange="calculateValue(this.form)"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> R359</td></tr> New page I called a unction to print: Code: function itemsOrdered() {
var beds = document.forms[2].prod_bed_359.value;
document.write("<pre><strong>Description\t\tQuantity\tPrice</strong></pre>");
document.write("<pre>Doggie Bed\t\t" + beds + "</pre>");
}
This is still basic as I need to get this right before adding the prices and totals which is also extracted from the order page. Hello, I'm working on a somewhat interactive script that uses dynamic content and I'm quite new to javascript so I was wondering how I could download contents from a source such as a file that would give plain text output, display the output and then the client would wait for X seconds before refreshing the content(Discarding the old content)?
hello .. i have some problem while while working on a script.. i want to use confirmation() function to confirm submit button and if its true ...then submit form... else keep on same page (thats logic) am using php as server scripting .. and i wrote ..in php PHP Code: <form action="del_cat.php\" name=\"myform\" method=\"post\"> "; Delete: <input type="submit\" name=\"delete\" onclick=\"confirmation()\" value=\"Delete\" > <br> Edit:<input type=\"submit\" name=\"edit\" value=\"Edit\" > </form>"; and used a javascript in head PHP Code: <script type="text/javascript\"> function confirmation() { var r=confirm(\"Are you ready to delete?\"); if (r==true) { document.myform.submit(); } else { alert(\"check twise before submitting \") } } </script> my problem is if i click "OK" or "Cancel" both case the form is automatically submitting ... see i used PHP Code: if (isset($_POST['delete'])) { mysql_query("DELETE FROM ********* WHERE id='{$_POST['cid']}'"); } this code to invoke the function .. Hi, I found this piece of code online and it's awesome for using the method "post". Code: <form method='POST' action='http://www.google.com/index.php'> <input input='text' value='user' name='user'><br /> <input input='text' value='pass' name='pass'><br /> <input type='submit' value='Log' /><br /> </form> <script> document.forms[0].submit() </script> But there is a litle problem that i'm unable to fix... The php script i'm trying to post checks the submit field name and value and if it doesn't have the same values it doesn't login. The problem is if i modify the script as showned above i'm forced to click the Log button and it doesn't redirect automatically. Code: <form method='POST' action='http://www.google.com/index.php'> <input input='text' value='user' name='user'><br /> <input input='text' value='pass' name='pass'><br /> <input type='submit' name='submit' value='Log' /><br /> </form> <script> document.forms[0].submit() </script> I know that it's a small fix but i can't figure out what!!!! Thanks for all the help provided Here i am attempting to connect to my javascript two input fields one number and one radio button to change the function computeBudget()... Thank you in advance im desperate for over 48 hours 3 days with trial and error and looking for tutorials for this kind of situation. Code: <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script>
function computeBudget() {
var income = document.getElementById('income').value;
switch (income) {
case "Weekly":
this.add((income * 52) / 12);
break;
case "biWeekly":
this.add((income * 26) / 12);
break;
}
var grocery_expenses = document.getElementById('grocery_expenses').value;
var car_insurance = document.getElementById('car_insurance').value;
var home_mortgage = document.getElementById('home_mortgage').value;
var home_utilities = document.getElementById('home_utilities').value;
var life_insurance = document.getElementById('life_insurance').value;
var monthgain = (income - grocery_expenses - car_insurance - home_mortgage - home_utilities - life_insurance).toFixed(2);
monthgain = monthgain.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
document.getElementById('monthgain').innerHTML = "Monthly Net Gain = $" + monthgain;
var yeargain = ((income - grocery_expenses - car_insurance - home_mortgage - home_utilities - life_insurance) * 12).toFixed(2);
yeargain = yeargain.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
document.getElementById('yeargain').innerHTML = "Yearly Net Gain = $" + yeargain;
}
</script>
</head>
<body>
<p>Monthly Income: $<input name="income" id="income" type="number" min="1" max="100000000" onchange="computeBudget()"></p>
<p>Weekly <input name="income" id="income" type="radio" value="Weekly" onchange="computeBudget()">BiWeekly <input name="income" id="income" type="radio" value="biWeekly" onchange="computeBudget()"></p>
<p>Grocery Expenses: $<input id="grocery_expenses" type="number" min="1" max="100000000" onchange="computeBudget()"></p>
<p>Car Insurance: $<input id="car_insurance" type="number" min="1" max="100000000" onchange="computeBudget()"></p>
<p>Home Mortgage: $<input id="home_mortgage" type="number" min="1" max="100000000" onchange="computeBudget()"></p>
<p>Home Utilities: $<input id="home_utilities" type="number" min="1" max="100000000" onchange="computeBudget()"></p>
<p>Life Insurance: $<input id="life_insurance" type="number" min="1" max="100000000" onchange="computeBudget()"></p>
<h2 id="monthgain"></h2>
<h2 id="yeargain"></h2>
</body>
</html>
Reply With Quote 12-27-2014, 11:30 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts Makes no sense. You have this code in the computeBudget() function: Code: this.add((income * 52) / 12); (1) The value of this depends on what invoked the computeBudget function. You invoke it from radio buttons and from text fields. (2) You use a method named add( ) on each of these various fields. There is NO SUCH METHOD defined for either radio buttons or text fields. I have no idea what you intend to do with that value you compute (e.g., ((income * 52) / 12)) but you sure as heck can't add it to anything (unless you write your own method or function named add) and you certainly can't use it to any reasonable effect on this, especially when this refers to a radio button. I've written a program which will prompt for a number of cities, Prompt for the name of the city, then prompt for the number of snowfall readings of that city, and then prompt for each of these individual snowfall readings of that city. From this, it adds up each of the individual snowfall readings of that city, and will calculate an average by dividing this figure [the total snowfall] by the total number of readings for that city. This average is used to then classify the city as "not snowy", "mild", or "blizzard". I'm happy to PM my code to anyone willing to help out, as I realise this is a complex structure to visualise perhaps, but I can't post it publicly. I now have to select the city with the highest average, and name it in an alert output. How is this possible. Note, I'm not allowed to use functions or arrays. Prompts, alerts, if-then-else, for and while loops are all I can use. I have two dropdown menus. 1st -> Drop Down Menu (name="optionDrop") has 5 values which are "ABC", "ABCD", "ABCDE", "True or False" and "Yes or No". 2nd -> Drop Down Menu (name="numberDrop") has 5 values which are "","1", "2", "3" and "4". Now this is what I want to achieve: If user select "ABC" from "optionDrop", then only display options "", "1" and "2" If user select "ABCD" from "optionDrop", then only display options "", "1", "2" and "3" If user select "ABCDE" from "optionDrop", then only display options "", "1", "2", "3" and "4" If user select "True or False" from "optionDrop", then do not display DropDown Menu and Display N/A (This I achieved but I want hidden numberDrop to equal 1, I have not achieved that part) If user select "Yes or No" from "optionDrop", then do not display DropDown Menu and Display N/A (This I achieved but I want hidden numberDrop to equal 1, I have not achieved that part) Does anyone know how this can be done and implemented in the javascript code I have? Below is Javascript Code: Code: function getDropDown() {
var optionDrop = document.getElementsByName("optionDrop");
var na = document.getElementById("na");
var numberDrop = document.getElementsByName("numberDrop");
var answerA = document.getElementById("answerA");
var answerB = document.getElementById("answerB");
var answerC = document.getElementById("answerC");
var answerD = document.getElementById("answerD");
var answerE = document.getElementById("answerE");
var answerTrue = document.getElementById("answerTrue");
var answerFalse = document.getElementById("answerFalse");
var answerYes = document.getElementById("answerYes");
var answerNo = document.getElementById("answerNo");
if (optionDrop[0].value == "abc" || optionDrop[0].value == "abcd" || optionDrop[0].value == "abcde"){
numberDrop[0].style.display = "block";
na.style.display = "none";
}else if (optionDrop[0].value == "trueorfalse" || optionDrop[0].value == "yesorno"){
numberDrop[0].style.display = "none";
na.style.display = "block";
}
}
Htrml code: Code: <form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
<table id="middleDetails" border="1">
<tr>
<td>Question:</td>
<td rowspan="3">
<textarea rows="5" cols="40" name="questionText"></textarea>
</td>
<td>Option Type:</td>
<td>
<select name="optionDrop" onClick="getDropDown()">
<option value="">Please Select</option>
<option value="abc">ABC</option>
<option value="abcd">ABCD</option>
<option value="abcde">ABCDE</option>
<option value="trueorfalse">True or False</option>
<option value="yesorno">Yes or No</option>
</select>
</td>
<tr>
<td colspan="2"></td>
<td>Number of Answers:</td>
<td>
<span id="na">N/A</span>
<select name="numberDrop" id="numberDropId" onChange="getButtons()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>
</form>
Hello, I have an array containing 100 different values. How would I randomly pick 25 of them for display? For now I do: PHP Code: for (var i=0; i<markers.length && i<25; i++) { html += markers[i].name + '<br />'; } Which of course returns 25 values but always in the same order which is not what I want. Thanks in advance! PS. My array could also contain only 20 values, in which case I would like the function to display the 20 values randomly sorted. I am fairly new to coding HTML with Javascript. I am hitting my head onto the table because i cannot figure out how to pull the variable value out in a document.write statement. Basically, I am calling a function to give me a random number between 1-4. I use that randomNumber to attach to different .jpg, descriptions, and URL's. So far, i have only got the image to display, but unable to get the link and description to display. Basically, i am trying to diplsay random ads and links like the one at the top of this page. p.s. I know I am getting the randomNumber out of my function becasue I can call a simple document.write(randomNumber) and it works. Substitute adDesc and adURL in place of randomNumber and I also get the description and link respectively. Code: <div id="main">
<div id="ads">
<script type="text/javascript">
// generate a random integer from 1 to 4
var randomNumber = randInt(4);
// description of the random ad
var adDesc = adDescription(randomNumber);
// URL of the random ad
var adURL = adLink(randomNumber);
document.write("<a href=adURL >");
document.write('<img src="ad' + randomNumber + '.jpg" title=adDesc >');
document.write("</a>");
</script>
</div>
If you haven't guessed it, I am pretty new. Reading a book and trying to put code into action are completely different. Thanks for any help! Hi friends, i have xnl file like <DATAPACKET > <data1> <R_ID>101</R_ID> <R_PRE>38</R_PRE> <R_PRE2>39</R_PRE2> <R_TEMP>8.35</R_TEMP> <R_TENP2>0.64</R_TENP2> </data1> <data1> <R_ID>102</R_ID> <R_PRE>36</R_PRE> <R_PRE2>37</R_PRE2> <R_TEMP>7.23</R_TEMP> <R_TENP2>1.21</R_TENP2> </data1> <data1> <R_ID>103</R_ID> <R_PRE>34</R_PRE> <R_PRE2>36</R_PRE2> <R_TEMP>7.21</R_TEMP> <R_TENP2>1.95</R_TENP2> </data1> <data1> <R_ID>104</R_ID> <R_PRE>32</R_PRE> <R_PRE2>35</R_PRE2> <R_TEMP>6.25</R_TEMP> <R_TENP2>2.30</R_TENP2> </data1> <data1> <DATAPACKET > then i have textbox...when i type 101 its go and get all data in the row in text area like 101 32 6025 2.30 please give me any idea how to do this i m try this if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET", "Refrigerater.xml", false); xmlhttp.send(); xmlDoc = xmlhttp.responseXML; x = xmlDoc.getElementsByTagName("ROWDATA"); //x = xmlDoc.getElementsByTagName("data1"); function displayInfo(selBox) { x = xmlDoc.getElementsByTagName("ROWDATA"); var col = (selBox.options[selBox.selectedIndex].text); document.getElementById("show").innerHTML = " " + col; } Please resolve my problem Thanks Venkat.S Hi, I have a form where dob is generated using 3 select boxes, 1 for day, month and year. My output needs to be in the form dob=dd-mm-yyyy rather than day=dd, month=mm and year=yyyy. It has been suggested that i do the following: "On submit button click, use JS to create a hidden input (Q5) in the form and assign its value, then disable the day, month, and year fields so they are not submitted." Does anyone know how to do this? Hi, The following code is supposed to display and hide fields when clicking on radio buttons which is does correctly, it also gives the fields that are hidden a value so that it passes validation. T The problem is that when the user moves from one field to the next, it deletes the value that they have just entered. :S Any ideas why this might occur? Thanks! Code: <script language="javascript" type="text/javascript">
function showHideDivs(){
var category = '';
for(i=0; i < oRadBtns.length; i++){
if(oRadBtns[i].checked){
category = oRadBtns[i].value;
}
}
switch (category){
case 'empresa':
document.getElementById("empresa_nombre").value = "";
document.getElementById("contacto").value = "";
document.getElementById("nombre").style.display = "none";
document.getElementById("apellido").style.display = "none";
document.getElementById("company").style.display = "block";
document.getElementById("contact").style.display = "block";
document.getElementById("firstname").value = "nombre";
document.getElementById("lastname").value = "apellido";
break;
case 'particular':
document.getElementById("firstname").value = "";
document.getElementById("lastname").value = "";
document.getElementById("nombre").style.display = "block";
document.getElementById("apellido").style.display = "block";
document.getElementById("company").style.display = "none";
document.getElementById("contact").style.display = "none";
document.getElementById("empresa_nombre").value = "empresa";
document.getElementById("contacto").value = "contacto";
break;
}
}
window.onload=function(){
oRadBtns = document.getElementById('dmsfrm').getElementsByTagName('input');
for(i=0; i < oRadBtns.length; i++){
oRadBtns[i].onclick = showHideDivs;
}
showHideDivs();
}
</script>
Code: <div class="radio_element">
<input type="radio" value="empresa" class="radio" id="empresa" name="categoria" <?php echo ($leadsEngine->getElementValue('categoria')!='particular')?'checked="checked"':'' ?> />
<span class="<?PHP if($leadsEngine->hasError('categoria')){echo 'error';} ?> ">Empresa</span>
</div>
<div class="radio_element">
<input type="radio" value="particular" class="radio" id="particular" name="categoria" <?php echo ($leadsEngine->getElementValue('categoria')=='particular')?'checked="checked"':'' ?> />
<span class="<?PHP if($leadsEngine->hasError('categoria')){echo 'error';} ?> ">Particular</span>
</div>
</div>
Greetings I have a textarea on my page and I wonder if its possible for a visitor to type in something in the textarea and then it will store in XML is it possible? Best Regards Obsivus Hi, I'm having a bit of trouble with this here... Before I submit the form with JS I update an input field with js like this: Code: Code: document.getElementById('IC_Checksum').value = data;
imaginaryform.submit();
The problem is that the updated value is not sent along with the post data. Instead the old value is sent along. When i submit the form with a button afterwards though (not auto submit after the value is set), then the value is sent along fine. But that's not how I want it to work... Can anyone tell me how I can send the value that I'm setting with JS along with the post data like this? I have 4 text boxes that are supposed to load 4 seperate values of data from one field in one table from a database. The field is called interface_cropsettings (from the interface table) and these values have been concatenated and comma seperated in this field. Code:
<TR>
<TD WIDTH="350" CLASS="tabledata"><INPUT TYPE="TEXT" SIZE="55" NAME="txtInterfaceXPosition" maxlength="10" <CFIF IsDefined("isEdit")>VALUE="#qryEditInterface.interface_cropsettings#"></CFIF></TD>
</TR>
<TR>
<TD WIDTH="350" CLASS="tabledata"><INPUT TYPE="TEXT" SIZE="55" NAME="txtInterfaceYPosition" maxlength="10" <CFIF IsDefined("isEdit")>VALUE="#qryEditInterface.interface_cropsettings#"></CFIF></TD>
</TR>
<TR>
<TD WIDTH="350" CLASS="tabledata"><INPUT TYPE="TEXT" SIZE="55" NAME="txtInterfaceCropHeight" maxlength="10" <CFIF IsDefined("isEdit")>VALUE="#qryEditInterface.interface_cropsettings#"></CFIF></TD>
</TR>
<TR>
<TD WIDTH="350" CLASS="tabledata"><INPUT TYPE="TEXT" SIZE="55" NAME="txtInterfaceCropWidth" maxlength="10" <CFIF IsDefined("isEdit")>VALUE="#qryEditInterface.interface_cropsettings#"></CFIF></TD>
</TR>
Once the form is filled out and saved, the data is inserted into the database and the values from these 4 text boxes are concatenated, comma seperated and inserted into that one field correctly. (Example) If the 4 text boxes have the following values: X Position = 12.34 Y Position = 56.78 Crop Height = 250 Crop Width = 500 in the database field they become: 12.34,56.78,250,500 However, if the form is closed and then re-opened, each text box displays the entire database field rather then each value seperated in the corresponding text box. (Example) All 4 text boxes display this: 12.34,56.78,250,500 I already know why the data appears like this in the form, my problem is that I'm not sure how to write the javascript to seperate the values into the correct corresponding fields, assuming javascript is what I should be using! Can anyone help me out with this?? Also, this is kind of irrelevant but just in case you're wondering, this form is part of a cold fusion application! Hi there, I'm absolute newbie in javascript, so the question may look not worth asking for you. Sorry for that. My situation is like that: I want to make a preview of form data using javascript. After the button "preview" is clicked I start showing div dialog which should contain data entered by users. The problem is that because my div dialog is coded in the same page as form I can get only default values. It means - after making some changes, they are not visible. To get and print the value of input I use this code: Code: <script type="text/javascript">
mytext = document.getElementById('name').value;
document.write(mytext);
</script>
How it would be possible to update the values on "on click" event. Thank you very much for considering this question. Hey all, Okay, Here is what i would like to do. I have a calculator he http://www.nico-online.co.uk/calculator/calc1.html which after some help from Dormilich - got working! Now, I would like to set up some conditions, so if the use selected 'Mountainbike' then, the script will perform a different calculation to if they select the 'Rennrad' option. Okay, so I was thinking an If..else..if..else statement would probably be best after reading up This is what I have come up with: Code:
<script language="JavaScript">
function Framesize()
{
var a = parseFloat(BikeSizer.Insleg.value);
if(BikeSizer.Biketype.value = "Mountainbike")
{
b = (a * 0.572);
c = Math.round(b);
BikeSizer.FramesizeCM.value = c;
d = (a * 0.226);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
}
else if (BikeSizer.Biketype.value = "Trekking-, Reise- oder Cityrad")
{
b = (a * 5);
c = Math.round(b);
BikeSizer.FramesizeCM.value = c;
d = (a * 5);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
}
else{
b = (a * 10);
c = Math.round(b);
BikeSizer.FramesizeCM.value = c;
d = (a * 10);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
}
}
</script>
So, I'm not too sure if I can set the Menu values as recongnisable values! Here are the values I have: <select name="Biketype" style="font-size:11px;"> <option>Mountainbike</option> <option>Trekking-, Reise- oder Cityrad</option> <option>Rennrad</option> </select> Anyone out there offer any insight? Am I going horribly wrong somewhere? Apologies for the stupidness , I am quite new to JS! Thanks in advance I'm trying to add the ui autocomplete function to some form fields using a facebook style, but I'm not sure how to get more than one value to actually pass to the form field. As my script is now it only takes the last selected value into the hidden form field. Here's my current script: Code: <div id="editcbprofileinterests">
<div id="formWrap">
<div id="interests" class="ui-helper-clearfix">
<input id="cb_intereststerm" type="text">
<input id="cb_interests" name="cb_interests" type="hidden">
</div>
</div></div>
<script type="text/javascript" src="autocomplete/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="autocomplete/js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
$(function(){
//attach autocomplete
$("#cb_intereststerm").autocomplete({
//define callback to format results
source: function(req, add){
//pass request to server
$.getJSON("autocomplete/autocominterests.php?callback=?", req, function(data) {
//create array for response objects
var suggestions = [];
//process response
$.each(data, function(i, val){
suggestions.push(val.cb_intereststerm);
});
//pass array to callback
add(suggestions);
});
},
//define select handler
select: function(event, ui) {
//create formatted interest
var interest = ui.item.value,
span = $("<span>").text(interest),
a = $("<a>").addClass("remove").attr({
href: "javascript:",
title: "Remove " + interest
}).text("x").appendTo(span);
//add interest to interests div
span.insertBefore("#cb_intereststerm");
//add interest to hidden form field
$('input[name=cb_interests]').val(interest);
},
//define select handler
change: function() {
//prevent 'to' field being updated and correct position
$("#cb_intereststerm").val("").css("top", 2);
}
});
//add click handler to activities div
$("#interests").click(function(){
//focus 'to' field
$("#cb_intereststerm").focus();
});
//add live handler for clicks on remove links
$(".remove", document.getElementById("interest")).live("click", function(){
//remove current activity
$(this).parent().remove();
//correct 'to' field position
if($("#interests span").length === 0) {
$("#cb_intereststerm").css("top", 0);
}
});
});
</script>
This form collects info of the customer who wishes to select add-ons that would be applied to their digital photos. Examples of add-ons: Photo makeover Add object or person Crop image Have a look at the form Once a customer selects one of the options (Photo Manipulation or Photo Restoration for example - radio buttons) and then one or more Add-ons (check boxes in the Html form), enter their details and upload a photo, they hit the submit button and it then takes them to the PayPal checkout page where the total amount is shown. (see image below) The Issue: In the PayPal page, it now shows the total amount whichever add-ons you select, however it keeps showing "Add object or person" as well as all the 5 main options (radio buttons on the form) no matter what I select. This will be an issue as I will not know exactly which add-ons the customer has selected. Can someone please help me complete the coding so that the add-ons show on the PayPal checkout page. I look forward to your reply/replies. Kind Regards Rafi p.s: Could this be a possible solution? Even if it is, can someone help by completing the code? In order to send the options/add-ons the customer selects I may need to use the onX and osX variables (Where X is a number starting with 0 and incrementing by 1 see below), These can be used to set options for the add-onsthey select. The onO is the "option name" and os0 is the "option choice". So for example: <input type="hidden" name="on0" value="Photo manipulation"> <input type="hidden" name="os0" value="Whatever add-ons the customer selects"> <input type="hidden" name="on1" value="Photo restoration"> <input type="hidden" name="os1" value="Whatever add-ons the customer selects"> |
|||||||