JavaScript - Using A Prompt Box To Execute A .php Function.

Hello. This is very long and I think if you look at code it might be quicker. If not, then please read along.

Here is the code and the problem:
Code:

function addtwoboxes
{ 
get values from two text boxes, one about width, the other one about height, 
and store each in a variable; a=width; b=height
checkifwidthproblem();   //to see if the boxes are empty and with numbers
checkifheightproblem();  //to see if the boxes are empty and with numbers

if (width_not_ok==false && height_not_ok==false)
{
Go Ahead and do calculations and other things
}


function checkifwidthproblem()
{
width_not_ok=false;
if problems with the data in the textbox (the a variable is being checked).
{
bring up an alert box  
width_not_ok=true;
}
}  //end of checkifwidthproblem function


function checkifheightproblem()
{
height_not_ok=false;
if problems with the data in the textbox (the b variable is being checked)
{
bring up an alert box  
height_not_ok=true;
}
}  //end of checkifheightproblem function

I would like this function to be setup the same way as the addtwoboxes function, but right 
now I am only calling up the checkifwidthproblem function, and it doesn't execute and the
form gets submitted.  The fillInvoiceNumber function can be called because if I place only 
an alert of Hello in it, it comes up, and then the form gets submitted.  If it do get this 
working, I would also need to be sure that it is seeing the results of the variables 
width_not_ok and height_not_ok, just as they are for the addtwoboxes function.

function fillInvoiceNumber() 
checkifwidthproblem();   //to see if the boxes are empty and with numbers
checkifheightproblem();  //to see if the boxes are empty and with numbers

if (width_not_ok==false && height_not_ok==false)
{
Go Ahead and do calculations and other things
]

This is going to be a bit long, but it's the only way I can be sure of that I have covered everything, so please bear with me and help me out. Thanks.

Please Provide Solution Using my way First, Then suggest Better Ways:

O.k. Before I post the problem, I know, since I took program classes years ago and since I have done a little research here and here, that there are better, more efficient, and tidier ways to do what I am doing, but I have started already this way and would like to continue this way. I will ask what's the better way to do this in another thread, unless 1) you feel like explaining the bettery way and 2) it's not too long or complicated, but AFTER you have provided me with a solution to doing it my way.

The Setup / What My Form is Supposed to Do:

I have a form with two buttons. The user has to enter some information into the form and then click the button to have some calculations done and for other text fields to automatically filled in. After that, the user has to click submit. A note about the submit button: The type is image and the name says submit. The form line has the following:

<form target="abcco" action="https://www.domainname.com" method="post" id="Form" onsubmit="fillInvoiceNumber()">


I will explain what the fillInvoiceNumber() is doing later on.

Data Validation / Verification:

1) I want to ensure that when the user clicks the first button, let's call it GetPrices to make things easier, that it checks to see if data is enterted into the textboxes and that it is the right kind of data.

2) After the GetPrices button is clicked, the user can then enter nonsense into the textboxes and click submit or, never click the GetPrices button, the first button to begin with, and so junk will be submitted.

This is what I have going on:

For the GetPrices button, I have the following:

onclick="addtwoboxes()

(the names I have aren't fully descriptive of all that's going on, as I do have more things happening, but for now I have left them like that).

in the addtwoboxes function I have it calling up two functions, each for a textbox in which the user has to enter width in one and height in another, and if the textboxes are not empty and have the correct data in them, then the calcuations for the addtwoboxes take place; if not, nothing happens (regarding the calculations; an alert box comes up for either or both of the functions in the addtwoboxes function if something is wrong).

So, the two functions that are called in the addtwoboxes() function are

checkifwidthproblem()
checkifheighthproblem()

which I am calling just like that but with a semicolon to the end of each one.

This next now is one of the areas where I do believe this can be combined, since only one value is changing, but I will leave it like this for now.

The checkifwidthproblem() function starts of with a variable:width_not_ok=false;

(after doing some research, I see that this is often set the opposite way or not set at all)

if something is wrong with the data entered into the width textbox, an alert box with a message comes up, and I then have the following variable:

width_not_ok=false;

For the checkifheighthproblem(), it's basically the same as the width problem, except, with it's own set of variables. I had the same ones as the width one, but if things were not ok with the width textbox, but o.k. with the height textbox, the calculations were taking place. So, because of this I used new variables in the height function and had an if statement check both variables for false.

So, the checkifheighthproblem() starts of with the variable: height_not_ok=false and if there is a problem with the data entered into the height textbox, an alert box comes up and the variable height_not_ok=true is set.

When the user presses the GetPrices button, this function works excellently. Everything goes as it should.

The problem is when the form is being submitted. I would like the textboxes to be rechecked. So, right now I have a function called fillInvoiceNumber() in which it is joining two strings together after getting their values from a drop down menu. This has to be done at the time of submission only for the page that's processing the results to have them interpreted the way I want it to.

Prior to joining those strings, I would like it check and see if everything is o.k. with the two textboxes by calling the two functions of that check height and width and if they are not, for the alert boxes to come up, for the joining of the strings to not take place, and for the form to not be submitted. However, the fillInvoiceNumber() function is not executing either function at all. If it does work, I would also need to be sure that it is seeing the results of the variables width_not_ok and height_not_ok.

I've been messing with this code for about a couple of hours, and I did everything down to the wire..yet still I am unable to get it to work. When I input the numbers, and click off to the side nothing appears down at the final textarea of the form which is suppose to show the average.

I've tried just about everything, sadly all I have to go by is other example codes, and the very intricate instructions which states I must pass the values to the calcAvg() to the second function of performCalc(), which I did, and then I assigned the var calcResult another value. From there I did the return..and after that I'm rather loss as to what to do next to get this code to work, any tips?

Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calculation Average</title>
<script type="text/html">
/* <![CDATA[ */


function calcAvg() {
var calcResult=document.numbers.number1.value + document.numbers.number2.value +document.numbers.number3.value + document.numbers.number4.value + document.numbers.number5.value
}
function performCalc() {
var calcResult = calcResult / 5
return calcResult;
}
			
/* This is what I got so far, as you can see I need plenty of help!*/
</script>

</head>
<H1> Calculate Average of Numbers</H1>
<body>

<form action="" name="numbers">
<table>
<tr>
<td>
<tr>
<td>Enter the five numbers:<br />
</td></tr>
<tr><td>
<input type="text" name="number1" size="3"
onchange="calcAvg()" text="0" /></td>
</tr>
<tr>
<td>
<input type="text" name="number2" size="3"
onchange="calcAvg()" text="0" /></td>
</tr>
<tr>
<td>
<input type="text" name="number3" size="3"
onchange="calcAvg()" text="0" /></td>
</tr>
<tr>
<td>
<input type="text" name="number4" size="3"
onchange="calcAvg()" text="0" /></td>
</tr>
<tr>
<td>
<input type="text" name="number5" size="3"
onchange="calcAvg()" text="0" /></td>
</tr>
</table>
</form>


<form action="" name="averageResult">
<p>
Estimate average:
<input type="text" name="average" size="5"
style="border-style: none; border-color:
inherit; border-width: medium;
background-color: Transparent" text="0" /></p>
</form>
</body>
</html>

After following the instructions from the answer below:
http://bytes.com/topic/javascript/an...arent-document

I was able to have the child window perform the function defined in the parent window.

The function was to only have an alert window pop up as the child page was loading.

I easily modified this to my intention which was to have a parent function performed when the child window was clicked.

Using the body tag:

Code:

<body onclick="parent.FUNCTION NAME HERE()">

I first change the method in which the function would be triggered, all went well there. then I tried to change which function would be triggered. (Basically use the function I wanted to happen on click of the child window rather then the function from the test). Once I did this switch, nothing happens.

The site this is being used on is:


http://tylerpanesar.ca/

What I want is when the menu bar is open in the parent window, the user chooses a link and the menu closes and goes to that link in the child window.
This already works.
However if the user opens the menu bar and then changes there mind and continues with the page the are currently on (clicks any content in the child window), the menu stays open.

Currently the menu "hides" only when you choose one of the menu items, but it does not "hide" when you CLICK on child document. If you could figure out how to get it to "hide" on a "mouse out" that would be the better option.

I attempted this method however i could only get it to "toggle" the menu on "mouse out". This method does however create an annoying flicker when you hover over the menu items (as it is toggling the open menu command I guess). If I had it "hide" the menu on "mouse out" it would "hide" as soon as you moved off of the main button. The viewer doesn't even have a chance to click a link. or at least that is what happens when I did it. You may have a better method to achieve this.

The script that tells it to hide on click is within a jQuery function:

Code:

menua
.click(
function(){
menu.hide();

the code I used for the mouseout toggle was:

Code:

menu
.mouseout(
function(){
menu.toggle();

Here is the script that I am currently using for the menu to open and the "click" hide feature.

This menu feature comes from the following help:

http://www.bennadel.com/blog/1740-Bu...-FaceBook-.htm

Code:

<script type="text/javascript">
        jQuery(function( $ ){
            var menuRoot = $( "#menu-root" );
            var menu = $( "#menu" );
            var menua = $( "#menu a" );
            // Hook up menu root click event.
            menuRoot
                .attr( "href", "javascript:void( 0 )" )
                .click(
                    function(){
                        // Toggle the menu display.
                        menu.toggle();
                        // Blur the link to remove focus.
                        menuRoot.blur();
                        // Cancel event (and its bubbling).
                        return( false );
                    }
                )
            ;
            menua
                .click(
                    function(){
                        // Toggle the menu display.
                        menu.hide();
                    }
                )
            ;
            // Hook up a click handler on the document so that
            // we can hide the menu if it is not the target of
            // the mouse click.
            $( document ).click(
                function( event ){
                    // Check to see if this came from the menu.
                    if (
                        menu.is( ":visible" ) &&
                        !$( event.target ).closest( "#menu" ).size()
                        ){
                        // The click came outside the menu, so
                        // close the menu.
                        menu.hide();
                     }
                }
            );
         });
 </script>

I've tried adding the click to "hide" menu feature to the child document but there is now menu in that document for it to "hide".

What I was trying to was have the child document execute a function from the parent document and have that function executed IN the parent document. I've tried the technique from the link in my very first post but I believe it only calls the function from the parent and executes it IN the child. Which does not work for me as the menu is not in the child.

There should be a way to make the child execute a function FOR the parent.

I apologize for this very wordy post, but I am extremely frustrated with this now as I have been trying to get this to work for a few weeks now.

Any help would be greatly appreciated.
Thanks in advance,
Tyler

Trying to get this prompt window to work so I can begin a calulation function--Am I even in the ballpark?


var chargeAmount = window.prompt("Enter a charge amount", Enter charge amount here.");


var discountPercent;
var totalCharges;

function confirmSubmit() {
if (document.forms[0].name.value == "" || document.forms[0].name.value == "Enter your name") {
window.alert("You must enter your name.");
return false;

}

function confirmReset() {
var resetForm = window.confirm("Are you sure you want to reset the form?");
if (resetForm == true)
return true;
return false;
}
}
/* ]]> */
</script>
</head>

<body>
<h2>Charge Information</h2>
<form action="FormProcessor.html" method="get"
enctype="application/x-www-form-urlencoded"
onsubmit="return confirmSubmit();"
onreset="return confirmReset();">

<p>Customer Name:
<input type="text" name="name" value="Enter your name" />
</p>
<p>Customer Type:</p>
<input type="radio" name="rb" value="regular" />Regular<br />
<input type="radio" name="rb" value="silver" />Silver<br />
<input type="radio" name="rb" value="gold" />Gold<br />
<br /><br />
Total Charges:&nbsp&nbsp<input type=text value="" name="total charges" size=10;>
<br /><br />
Discount:&nbsp&nbsp<input type=text value="" name="discount" size=10;>
<br /><br />
Payment:&nbsp&nbsp<input type=text value="" name="payment" size=10;>
<input type="button" name="calc" value="Calculate Payment" onClick="return calcpay(this.form)">
<input type="reset" name="reset" value="Reset Form" >
</form>
</body>

How do i use html forms in the same way as prompts?

I want to do something like this:

Code:

<html>
<head>
<script type="text/javascript">

var cpu= prompt("What brand of CPU would you like?");
var ram= prompt("What brand of RAM would you like?");
var hdd= prompt("What brand of Hard Drive would you like?");

</script>
</head>
<body>

<script type="text/javascript">

document.write("The brand of CPU I want is "+cpu);
document.write("<br> The brand of RAM I want is "+ram);
document.write("<br> The brand of Hard Drive I want is "+hdd);

</script>
</body>
</html>

But instead of having a notification box, I want a form.

Is this possible? I dont like how it pops up...