www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Having some trouble with a function

  1. #1
    Join Date
    Feb 2013
    Posts
    2

    resolved [RESOLVED] Having some trouble with a function

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> HTML and JavaScript </title>
    <script type="text/javascript">

    function towerPic()
    {

    }
    function doClear()
    {
    document.AddressForm.customer.value = "";
    document.AddressForm.address.value = "";
    document.AddressForm.city.value= "";
    document.AddressForm.state.value = "";
    document.AddressForm.zip.value = "";
    document.AddressForm.phone.value= "";
    document.AddressForm.email.value= "";
    document.AddressForm.total.value= "0.00";

    document.ComputerForm.cases[0].checked = false;
    document.ComputerForm.cases[1].checked = false;
    document.ComputerForm.cases[2].checked = false;

    document.ComputerForm.monitors[0].checked = false;
    document.ComputerForm.monitors[1].checked = false;
    document.ComputerForm.monitors[2].checked = false;

    document.ComputerForm.printers[0].checked = false;
    document.ComputerForm.printers[1].checked = false;
    document.ComputerForm.printers[2].checked = false;

    return;
    }



    </script>


    </head>

    <body> <h1 align="center">Computer System Order Form</h1> <table border="black" cellpadding="10px" align="center">
    <tr>
    <td>
    <table cellpadding="10px">
    <form name="ComputerForm">
    <tr>
    <td>
    Computer Case Style:</br>
    <input type="radio" onclick="towerPic()" name="cases" id="desktop" value="500.00" /> Desktop Case (500.00) </br>
    <input type="radio" onclick="towerPic()" name="cases" id="mini" value="600.00" /> Mini-Tower Case (600.00) </br>
    <input type="radio" onclick="towerPic()" name="cases" id="full" value="700.00" /> Full-Tower Case (700.00) </br>
    </td>
    <td>
    <img src="tower1.jpg" width="125" height = "125" id="pcCase" >
    </td>
    </tr>
    <tr>
    <td>
    Computer Monitor: <br/>
    <input type="radio" name="monitors" value="250.00" /> 17" LCD Flat Screen (250.00) </br>
    <input type="radio" name="monitors" value="300.00" /> 19" LCD Flat Screen (300.00) </br>
    <input type="radio" name="monitors" value="350.00" /> 21" LCD Flat Screen (350.00) </br>
    </td>
    <td>
    <img src="monitor1.jpg" width="125" height = "125" alt="pc monitor" />
    </td>
    </tr>
    <tr>
    <td>
    Computer Printer:<br/>
    <input type="radio" name="printers" value="100.00" /> Inkjet Printer (100.00) </br>
    <input type="radio" name="printers" value="250.00" /> Laser Printer (250.00) </br>
    <input type="radio" name="printers" value="350.00" /> Color Printer (350.00) </br>
    </td>
    <td>
    <img src="printer1.jpg" width="125" height = "125" alt="pc printer" />
    </td>
    </tr>
    </form>
    </table>
    </td>
    <td>
    <table padding="10px">
    <tr>
    <form name="AddressForm">
    <td>
    Total System Price:
    </td>
    <td>
    $<input type="text" name="total" readonly value="0.00" size="8">
    </td>
    </tr>
    <tr>
    <td>
    &nbsp;
    </td>
    </tr>
    <tr>
    <td>
    &nbsp;
    </td>
    </tr>
    <tr>
    <td>
    &nbsp;
    </td>
    </tr>
    <tr>
    <td>
    Full Name:
    </td>
    <td>
    <input type="text" name="customer" />
    </td>
    </tr>
    <tr>
    <td>
    Street Address:
    </td>
    <td>
    <input type="text" name="address" />
    </td>
    </tr>
    <tr>
    <td>
    City:
    </td>
    <td>
    <input type="text" name="city" />
    </td>
    </tr>
    <tr>
    <td>
    State:
    </td>
    <td>
    <input type="TEXT" name="state" size="2">
    </td>
    </tr>
    <tr>
    <td>
    Zip:
    </td>
    <td>
    <input type="text" name="zip" />
    </td>
    </tr>
    <tr>
    <td>
    Phone Number:
    </td>
    <td>
    <input type="text" name="phone" />
    </td>
    </tr>
    <tr>
    <td>
    Email Address:
    </td>
    <td>
    <input type="text" name="email">
    </td>
    </tr>
    </form>
    <tr>
    <td>
    &nbsp;
    </td>
    </tr>
    <tr>
    <td>
    <input type="button" value="Submit Order" onClick="doSubmit()" />
    </td>
    <td>
    <input type="button" value="Clear Form" onClick="doClear()" />
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>

    </body>
    </html>



    I am currently working on a project for a class. I am coding a computer order form and so far everything is working, except when someone chooses a certain tower,monitor, or printer it is suppose to change the picture to the current choice. I can't seem to figure this out so any help would be appreciated! Also this is the first forum i have every used so if i am in the wrong place, please let me know.

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,656
    there exists a good old tradition at these forums to post a code between [ code ] and [ /code ] tags.

    try doing this to monitors and printers:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     <html>
     <head>
     <title> HTML and JavaScript </title>
     <script type="text/javascript">
     var pccases=['pc_case_1.jpg','pc_case_2.jpg','pc_case_3.jpg'];
     
     
    function picChanger(obj,n){
    var pic_arr=obj.parentNode.id;
    var pic=document.getElementById("pic_"+pic_arr);
    pic.src=eval(pic_arr+"["+n+"]");
    pic.alt=eval(pic_arr+"["+n+"]");
    }
     function doClear()
     {
     document.AddressForm.customer.value = "";
     document.AddressForm.address.value = "";
     document.AddressForm.city.value= "";
     document.AddressForm.state.value = "";
     document.AddressForm.zip.value = "";
     document.AddressForm.phone.value= "";
     document.AddressForm.email.value= "";
     document.AddressForm.total.value= "0.00";
    
     document.ComputerForm.cases[0].checked = false;
     document.ComputerForm.cases[1].checked = false;
     document.ComputerForm.cases[2].checked = false;
    
     document.ComputerForm.monitors[0].checked = false;
     document.ComputerForm.monitors[1].checked = false;
     document.ComputerForm.monitors[2].checked = false;
    
     document.ComputerForm.printers[0].checked = false;
     document.ComputerForm.printers[1].checked = false;
     document.ComputerForm.printers[2].checked = false;
    
     return;
     }
    
    
    
     </script>
    
    
     </head>
    
     <body> <h1 align="center">Computer System Order Form</h1> <table border="black" cellpadding="10px" align="center"> 
     <tr> 
     <td>
     <table cellpadding="10px">
     <form name="ComputerForm">
     <tr>
    <td>
    Computer Case Style:</br>
    <div id="pccases">
    <input type="radio" onclick="picChanger(this,0)" name="cases" id="desktop" value="500.00" /> Desktop Case (500.00) </br>
    <input type="radio" onclick="picChanger(this,1)" name="cases" id="mini" value="600.00" /> Mini-Tower Case (600.00) </br>
    <input type="radio" onclick="picChanger(this,2)" name="cases" id="full" value="700.00" /> Full-Tower Case (700.00) </br>
    </div>
    </td>
    <td>
    <img id="pic_pccases" src="dummy.jpg" width="125" height="125" alt="dummy" /> 
    </td>
    </tr>
    <tr>
    <td>
    Computer Monitor: <br/>
    <input type="radio" name="monitors" value="250.00" /> 17" LCD Flat Screen (250.00) </br>
    <input type="radio" name="monitors" value="300.00" /> 19" LCD Flat Screen (300.00) </br>
    <input type="radio" name="monitors" value="350.00" /> 21" LCD Flat Screen (350.00) </br>
    </td>
    <td>
     <img src="monitor1.jpg" width="125" height = "125" alt="pc monitor" />
     </td>
     </tr>
     <tr>
     <td>
     Computer Printer:<br/>
     <input type="radio" name="printers" value="100.00" /> Inkjet Printer (100.00) </br>
     <input type="radio" name="printers" value="250.00" /> Laser Printer (250.00) </br>
     <input type="radio" name="printers" value="350.00" /> Color Printer (350.00) </br>
     </td>
     <td>
     <img src="printer1.jpg" width="125" height = "125" alt="pc printer" />
     </td>
     </tr>
     </form>
     </table> 
     </td> 
     <td>
     <table padding="10px">
     <tr>
     <form name="AddressForm">
     <td>
     Total System Price:
     </td>
     <td>
     $<input type="text" name="total" readonly value="0.00" size="8">
     </td>
     </tr>
     <tr>
     <td>
     &nbsp;
     </td>
     </tr>
     <tr>
     <td>
     &nbsp;
     </td>
     </tr>
     <tr>
     <td>
     &nbsp;
     </td>
     </tr>
     <tr>
     <td>
     Full Name:
     </td>
     <td>
     <input type="text" name="customer" />
     </td>
     </tr>
     <tr>
     <td>
     Street Address:
     </td>
     <td>
     <input type="text" name="address" />
     </td>
     </tr>
     <tr>
     <td>
     City:
     </td>
     <td>
     <input type="text" name="city" />
     </td>
     </tr>
     <tr>
     <td>
     State:
     </td>
     <td>
     <input type="TEXT" name="state" size="2">
     </td>
     </tr>
     <tr>
     <td>
     Zip:
     </td>
     <td>
     <input type="text" name="zip" />
     </td>
     </tr>
     <tr>
     <td>
     Phone Number:
     </td>
     <td>
     <input type="text" name="phone" />
     </td>
     </tr>
     <tr>
     <td>
     Email Address:
     </td>
     <td>
     <input type="text" name="email">
     </td>
     </tr>
     </form>
     <tr>
     <td>
     &nbsp;
     </td>
     </tr>
     <tr>
     <td>
     <input type="button" value="Submit Order" onClick="doSubmit()" />
     </td>
     <td>
     <input type="button" value="Clear Form" onClick="doClear()" />
     </td>
     </tr>
     </table> 
     </td> 
     </tr> 
     </table>
    
     </body> 
     </html>

  3. #3
    Join Date
    Feb 2013
    Posts
    2
    This worked! My sanity and I thank you

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles