SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry checkbox select/deselect value in drop down

    Here is my drop down menu:

    Code:
    <select id="DDvehAttr" class="FormField" onchange="DDvehAttrChanged(this)" >
                  <option value="-2">Please Select . . .</option>
    <%
                  for (i=0; i < vehAttr.length; i++)
                  {%>
                  <option value="<% = i %>"><% = vehAttr[i] %></option>
                  <%}
    %>
                </select>

    the values are held in a separate file:

    DROP DOWN VALUE CODE
    Code:
    Session("ListAttributes")  
    	= [
    
    		["Saloon Car", 	["Saloon Car"]],
    		["Saloon Car with Parking",    [ "Saloon Car", "Parking Cost"]]	
    		["Executive Car", 	["Executive Car"]],
    		["Executive Car with Parking",    [ "Executive Car", "Parking Cost"]]		
    	];

    Question 1
    In my DROP DOWN VALUE CODE is it possible to make option 2 and option 4 (..with parking) hidden. I know how to hide a drop down value in a standard html form but am not sure as to the format in the above.


    Question 2
    I have a checkbox. When it is ticked I would like the drop down menu to select/deselect the parking value with the car that is chosen.

    Code:
    Add Parking to service<input type=checkbox" onClick="???" />
    so..

    If the dropdown is empty and the checkbox is ticked then whichever car type in the drop down is chosen, it will select that car with the parking option. If checkbox is unticked at any stage it will deselect the parking option with the car type

    i hope this is clear. i look forward to receiving some code to try and report back. many thanks

  2. #2
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) Not that would work in all browsers

    2) Why have a parking option in the dropdown and in a checkbox? Logic error?

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello, yes it does seem silly, the reason is i am trying to edit an off-the-shelf piece of software and am restricted somewhat. im going to try and find an other solution and may post again. cheers

  4. #4
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it is really difficult trying to simplify my request but i will try my best.

    when you choose a car in my drop down menu it updates a price through the following functions (each car produces a different price):

    Code:
    <select id="DDvehAttr" class="FormField" onchange="DDvehAttrChanged(this)" >
                  <option value="-2">Please Select . . .</option>
    <%
                  for (i=0; i < vehAttr.length; i++)
                  {%>
                  <option value="<% = i %>"><% = vehAttr[i] %></option>
                  <%}
    %>
                </select>
    Code:
    function DDvehAttrChanged(control)
    {
        vehAttribIndex = Number(control.options[control.selectedIndex].value);
        Validate(3, vehAttribIndex >= -1);
    }
    Code:
    function Validate(flag, isValid)
    {
        if (flag < 4)
        {
            document.getElementById("Tick4").style.visibility   = "hidden";
            document.getElementById("BookNow").style.visibility = "hidden";
            document.getElementById("Quote").innerHTML          = "";
        }
    
        var m = (1 << flag);
    
        if (isValid)
        {
            validityMask |= m;
        } 
        else
        {
            validityMask &= (~m);
        } 
    
        var e = document.getElementById("Tick" + flag);
        if (e) e.style.visibility = isValid ? "visible" : "hidden";
    
        if ((isValid)
        &&  ((validityMask & 15) == 15)
        &&  (flag < 4))
        {
            // Do ajax quotation here
            var post = {
               T  : PickupDateTime,
               PT : DDPaddrTypeIndex,
               DT : DDDaddrTypeIndex,
               P  : HandlePickup  ? HandlePickup.serverIndex : defPickupIndex,
               D  : HandleDropoff ? HandleDropoff.serverIndex : defDropoffIndex,
               V  : vehAttribIndex
            };
    
            new Ajax.Request(
                'MAjax.asp',
                {
                    onSuccess: ProcessQuotation,
                    parameters: post
                });
        }
    
        if ($("NextButton"))
        {
            if ((isValid)
            &&  ((validityMask & 4095) == 4095))
            {
                $("NextButton").show();
            }
            else
            {
                $("NextButton").hide();
            }
        }
    }
    Code:
    var ProcessQuotation = function(transport)
    {
        var response = transport.responseText;
        Validate(4, true);
        <% if (!!Session("SuppressChargesBeforeBooked")) { %>
        if (response.indexOf("Error") < 0) response = "Ready to Book";
        <% } %>
        document.getElementById("Quote").innerHTML = response;
        <% if (Session("User").IsNewUser) { %>
        document.getElementById("BookNow").style.visibility = "visible";
        <% } %>
    }
    once the price is updated it is immediately displayed on the booking form. it is important to get this price correct at this stage because when they click 'book now' it will take the user to a payment page.

    as well as the car type my users have the choice as to whether they would like to pay for the parking (which is an extra 6 on top of the fare)

    the problem i am having is that i can only add the parking cost (aka Meet & Greet) to the price if i include it in the drop down menu (when the drop down triggers the onchange..process quote etc)

    For example: this drop down selection will show the price of a Saloon car only:
    Code:
    ["Saloon", 	["01. Saloon [SAL]"]],
    To add the meet and greet service i have to create another selection in the drop down and send 2 values to the function like so:
    Code:
    [ "Saloon with Meet & Greet",  [ "01. Saloon [SAL]", "30. Meet & Greet [M&G]" ]],
    I do not want to have 6 cars in my drop down in addition to 6 cars with meet and greet (12 options in total).

    what i want to do

    the meet and greet charge is retreived with the following value:
    "30. Meet & Greet [M&G]"

    I would like a function that when my checkbox is ticked, adds the 'meet and greet charge' to the total quotation. if it is unticked it removes the meet and greet charge from the total quotation (disregarding the drop down altogether)

    you can have a look at the form here:
    http://londonheathrowcars-accounts.com/webbookercc

    i hope that is clear enough.. i have added the 2 FULL pages of code below for those that have the time to view them

    FORM
    Code:
    <%@ Language = "JavaScript" %>
    <% 
    Response.Buffer = true;
    
    var pro = Session("OneFormBooking");
    pro     = pro && ((Session("User") && (!Session("User").IsNewUser)) || 
                      (Session("UserCanRegister") && Session("DefaultAC")));
    
    if (!pro)
    {
        Response.Redirect("default.asp");
        Response.End();
    }
    
    Response.AddHeader('P3P', 'CP="NOI CUR OUR STP"');
    
    var needLogin = !Session("User");
    
    if (needLogin)
    {
       Session("isIE") = (String(Request.ServerVariables("HTTP_User_Agent")).toLowerCase().indexOf("msie") != -1);
       Session("User") = Application("WJB").CreateEmptyUser(Session("DefaultAC"));
       Session("Job")  = null;
    
       if (!Session("User"))
       {
          Response.Redirect("default.asp?L=1");
          Response.End();
       }
    
       Response.AddHeader("Expires", "0" );
       Response.AddHeader("Cache-Control", "no-store, no-cache, must-revalidate" );
       Response.AddHeader("Cache-Control", "post-check=0, pre-check=0" );
       Response.AddHeader("Pragma", "no-cache" );
    
       AfterLogin();
    }
    
    if (!Session("Job"))
    {
        Session("Job") = Session("User").CreateEmptyJob();
        Session("Job").JobType = Session("DefaultJT");
        Session("Job").IgnoreReferences = true;
        Session("HasQuote") = false;
        Session("LAlist")   = null;
        Session("LAindex")  = -1;
        Session("PAlist")   = null;
        Session("PAindex")  = -1;
        Session("DAlist")   = null;
        Session("DAindex")  = -1;
        Session("PTindex")  = 0;
        Session("DTindex")  = 0;
        Session("VAindex")  = -2;
        Session("PPremise") = "";
    
        Session("InvisibleDefaultDA") = new Object();
        Session("InvisibleDefaultVA") = new Object();
    }
    
    var mandRefMask   = 0;
    var refCount      = 0;
    var hasQuote  = Session("HasQuote");
    //* var defPickup = "";
    
    if (!Session("User").IsNewUser)
    {
       var job = Session("Job");
       job.PassengerName   = job.PassengerName   ? job.PassengerName   : Session("User").DefaultPaxName;
       job.PaxTelephoneNum = job.PaxTelephoneNum ? job.PaxTelephoneNum : Session("User").DefaultTelephone;
       job.CustomerEmail   = job.CustomerEmail   ? job.CustomerEmail   : Session("User").DefaultEmail;
       
       refCount = job.ReferenceCount;
       
       for (i=0; i < refCount; i++)
       {
           if (!job.CheckReference(i, job.GetReferenceValue(i))) mandRefMask |= (1 << i);
       }
    
       for (i=0; i < job.DriverAttributeCount ; i++)
       {
           Session("InvisibleDefaultDA")[job.GetDriverAttribute(i)] = true;
       }
       
       for (i=0; i < job.VehicleAttributeCount ; i++)
       {
           Session("InvisibleDefaultVA")[job.GetVehicleAttribute(i)] = true;
       }
    
       if ((Session("PAlist"))
       &&  (Session("PAindex") >= 0))
       {
       }
       else
       {
            var pal = Session("User").DefaultAddress();
            
            if ((pal)
            &&  (pal.Count > 0))
            {
                job.PuAddress  = pal.Address(0);
                job.PuPostcode = pal.Postcode(0);
                job.PuNgrE     = pal.NgrE(0);
                job.PuNgrN     = pal.NgrN(0);
                //*defPickup      = job.PuAddress + " " + job.PuPostcode;
                Session("PAlist")  = pal;
                Session("PAindex") = 0;
            }
            else
            {
                Session("PAlist")  = null;
                Session("PAindex") = -1;
            }
        }
    }
    
    var leadTimeTicks = Number(Session("LeadTimeMins"));
    if (isNaN(leadTimeTicks)) leadTimeTicks = 0;
    Session("User").LeadTimeMins = leadTimeTicks;
    
    leadTimeTicks = 60 * 1000 * leadTimeTicks;
    
    var d = new Date;
    
    var frameTitle = Session("User").IsNewUser ? "Quotation" : "Book Now";
    
    var vehAttr  = new Array();
    
    if (Session("ListAttributes"))
    {
        var la = Session("ListAttributes");
    
        for (i = 0; i < la.length; i++)
        {
            vehAttr[i] = la[i][0];
    
            for (j = 0; j < la[i][1].length; j++)
            {
                Session("InvisibleDefaultVA")[la[i][1][j]] = false;
            }
        }
    }
    
    Session("VehAttr") = vehAttr;
    Session("WizardBooking") = false;
    
    var nextStep       = (Session("User").IsCreditCard) ?  (Session("SecureRoot") + "BookStep51.asp") : (Session("DefaultRoot") + "BookStep6.asp");
    var nextWizardStep = (Session("User").IsCreditCard ? Session("SecureRoot") : Session("DefaultRoot")) + 'BookStep1.asp';
    
    var helpText = "&nbsp;";
    %>
    <!--#include file="includes/literal.inc"-->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!-- $Header: /Projects/Taxi/WebBooker/WJBasp.NV/OneForm.asp 35    27/01/09 14:54 David.g $ -->
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
    <head>
        <meta HTTP-EQUIV="Content-Type" Content="text-html; charset=Windows-1252"/>
        <title><%= Session("Title") %></title>
        <!--#include file="includes/style.inc"-->
        <script type="text/javascript" src="js/help.js"></script>
        <script type="text/javascript" src="js/popcalendar.c.js"></script>
        <script type="text/javascript" src="js/utils.js"></script>
        <script type="text/javascript" src="js/prototype.c.js"></script>
        <script type="text/javascript" src="js/shadower.c.js"></script>
        <script type="text/javascript" src="js/AddressHandler.c.js" ></script>
        <script type="text/javascript" src="customer/AddrShortcuts.js.inc"></script>
        <!--#include file="includes/OneForm.js.inc"-->
    </head>
    <body onLoad="OnLoad();">
    <!--#include file="includes/header.inc"-->
    <% 
    ftop = true;
    var tick = "ImaGen.dll?Sfc-20-" + C.PaleBackground + "-" + C.PaleBackground + "-" + C.MainBoxBG;
    var hi   = "ImaGen.dll?B?-12-"  + C.PaleBackground + "-" + C.HelpTitleBG    + "-" + C.HelpTitleText;
    %>
    <!--#include file="includes/frame.inc"-->
          <col width='30%'/>
          <col width='70%'/>
          <tr>
           <td colspan="2" >
           <table border='<% = Session("isIE") ? "0" : "1px"  %>' width="100%" height="48px" cellspacing="1" cellpadding="3" rules="all" frame="box" 
                   bgcolor='#<% = C.DarkBackground %>' bordercolor='#<% = C.DarkBackground %>' bordercolorlight='#<% = C.DarkBackground %>' bordercolordark='#<% = C.DarkBackground %>' >
            <tr bgcolor='#<% = C.InfoBackground %>'><td><div id="HB" style="display:none;">
             <div id="HD">&nbsp;</div>Click on the <img src="ImaGen.dll?B?-12-<% = C.InfoBackground %>-<% = C.DarkBackground %>-<% = C.MainBoxText %>" align="ABSMIDDLE" /> symbol for more help
             </div></td>
            </tr></table>
           </td>
          </tr>
          <form id="mainForm" name="mainForm" >
          <tr id="R0" onMouseOver="Help(this)" onMouseOut="UnHelp(this)">
             <td class='Pale'>
                <table cellspacing="0" cellpadding="0" border="0"  width="100%" >
                <col width='9%'/>
                <col width='82%'/>
                <col width='9%'/>
                <tr>
                  <td><img src="<% = tick %>" width="32" height="20" class="Tick" id="Tick0" /></td>
                  <td valign='top'><b>Pickup Time:</b></td>
                  <td align='right' ><img src="<% = hi %>"  class="HelpMiniButton" onClick="DetailedHelp(this)" /><td>
                </tr>
                </table>
             </td>
             <td class='Pale' valign='top'>
             <span id="PickupTimeLegend">&nbsp;</span>
             <input type="text" class="FormField" name="PickupTime" maxlength="7" size="7" value="<%= Session('PickupTime')%>" onKeyUp="PUtimeChanged = true;" onblur="reformat(this);CheckPUtime(form);"/>&nbsp;
             on &nbsp; <input type="text" class="FormFieldRO" name="PickupDate" maxlength="16" size="16" readonly="" value="<%= Session('PickupDate')%>"/> &nbsp;
             <INPUT type="image" src="ImaGen.dll?Bdate-25-<% = C.PaleButton %>" onclick='popUpCalendar(this, mainForm.PickupDate, stdDateFormat);return false;' id="button1" name="button1" style='vertical-align: middle;'/>
             </td>
          </tr>
          </form>
          <tr id="R1" onMouseOver="Help(this)" onMouseOut="UnHelp(this)">
             <td class='Pale' valign='top' >
                <table cellspacing="0" cellpadding="0" border="0"  width="100%" >
                <col width='9%'/>
                <col width='82%'/>
                <col width='9%'/>
                <tr>
                  <td valign='top'><img src="<% = tick %>" width="32" height="20" class="Tick" id="Tick1" /></td>
                  <td >
                    <div style="text-align: top;height: 22px;font-weight: bold;">Pickup Address:</div>
                    <div>
                      <select id="DDPaddrType" class="FormField" style="display:none;" onChange="DDPaddrTypeChanged(this)" >
                        <option>Please Select . . .</option>
                        <option>Local Address</option>
                      </select>
                    </div>
                  </td>
                  <td valign='top' align='right' ><img src="<% = hi %>"  class="HelpMiniButton" onClick="DetailedHelp(this)" /><td>
                </tr>
                </table>
             </td>
             <td class='Pale'>
                <div style="height: 30px;">
                  <input type="text" class="FormField" id="PAinput" style="display: none; position: absolute;" size="30" /> <img src='images\AjaxLoader.gif' style="display: none; position: absolute;"  /> 
                  <input type="text" class="FormField" id="PAextra" style="display: none; position: absolute;" size="20" /> 
    			  
                </div>
                <div><span id="PAshow" style="font-weight: bold;"></span>&nbsp;</div>
    			<input type="checkbox" style="margin-top:10px;" />Add Meet & Greet service
             </td>
          </tr>
          <tr id="R2" onMouseOver="Help(this)" onMouseOut="UnHelp(this)">
             <td class='Pale' valign='top' >
                <table cellspacing="0" cellpadding="0" border="0"  width="100%" >
                <col width='9%'/>
                <col width='82%'/>
                <col width='9%'/>
                <tr>
                  <td valign='top' ><img src="<% = tick %>" width="32" height="20" class="Tick" id="Tick2" /></td>
                  <td >
                    <div style="text-align: top;height: 22px;font-weight: bold;">Dropoff Address:</div>
                    <div>
                      <select id="DDDaddrType" class="FormField" style="display:none;" onChange="DDDaddrTypeChanged(this)" >
                        <option>Please Select . . .</option>
                        <option>Local Address</option>
                      </select>
                    </div>
                  </td>
                  <td valign='top' align='right' ><img src="<% = hi %>"  class="HelpMiniButton" onClick="DetailedHelp(this)" /><td>
                </tr>
                </table>
             </td>
             <td class='Pale'>
                <div style="height: 30px;">
                  <input type="text" class="FormField" id="DAinput" style="display: none; position: absolute;" size="30" /> <img src='images\AjaxLoader.gif' style="display: none; position: absolute;"  />
                </div>
                <div><span id="DAshow" style="font-weight: bold;"></span>&nbsp;</div>
             </td>
          </tr>
          <div id="FloatDiv" style="width: 600px; overflow: visible; visibility:hidden; position: absolute; text-align:left; top: 500px; left: 400px; z-index: 1;">
            <div id="AddressDiv" class="Background" style="text-align:left; border-right: #<% = C.PlainText %> 1px solid; border-top: #<% = C.PlainText %> 1px solid; z-index: 1; left: 7px; visibility: hidden; border-left: #<% = C.PlainText %> 1px solid; border-bottom: #<% = C.PlainText %> 1px solid; position: absolute; top: 2px; background-color: #<% = C.AddressListBG %>;" onmousedown='CAddressHandlerBase.ActiveHandler.Select()'>
            </div>
          </div>
    <%
          if (vehAttr.length > 0)
          {
    %>
          <tr id="R3" onMouseOver="Help(this)" onMouseOut="UnHelp(this)">
             <td class='Pale'>
                <table cellspacing="0" cellpadding="0" border="0"  width="100%" >
                <col width='9%'/>
                <col width='82%'/>
                <col width='9%'/>
                <tr>
                  <td><img src="<% = tick %>" width="32" height="20" class="Tick" id="Tick3" /></td>
                  <td valign='top' ><b>Vehicle Type:</b></td>
                  <td align='right' ><img src="<% = hi %>"  class="HelpMiniButton" onClick="DetailedHelp(this)" /><td>
                </tr>
                </table>
             </td>
             <td class='Pale'>
                <select id="DDvehAttr" class="FormField" onchange="DDvehAttrChanged(this)" >
                  <option value="-2">Please Select . . .</option>
    <%
                  for (i=0; i < vehAttr.length; i++)
                  {%>
                  <option value="<% = i %>"><% = vehAttr[i] %></option>
                  <%}
    %>
                </select>
             </td>
          </tr>
    <%
          }
    %>
          <tr id="R4" onMouseOver="Help(this)" onMouseOut="UnHelp(this)">
             <td class='Pale' valign='top' >
                <table cellspacing="0" cellpadding="0" border="0"  width="100%" >
                <col width='9%'/>
                <col width='82%'/>
                <col width='9%'/>
                <tr>
                  <td><img src="<% = tick %>" width="32" height="20" class="Tick" id="Tick4" /></td>
                  <td valign='top' ><b>Quotation:</b></td>
                  <td align='right'><img src="<% = hi %>"  class="HelpMiniButton" onClick="DetailedHelp(this)" /><td>
                </tr>
                </table>
             </td>
             <td class='Pale' valign='top' >
                <table cellspacing="0" cellpadding="0" border="0"  width="100%">
                <col width='70%'/>
                <col width='30%'/>
                <tr><td valign='top'>
                <span id="Quote">
                </span>
                &nbsp;</td>
                <td align="right"><span id="BookNow" style='text-align: right; visibility: hidden;'>
                  <INPUT type="image" src="ImaGen.dll?BBook_Now-25-<% = C.PaleButton %>" onclick="location='OneFormLogin.asp';return false;" style='vertical-align: middle;'/>
                </span>
                </td></tr>
                </table>
             </td>
          </tr>
          <% if (!Session("User").IsNewUser) { %>
          <tr id="R5" onMouseOver="Help(this)" onMouseOut="UnHelp(this)">
             <td class='Pale' valign='top' >
                <table cellspacing="0" cellpadding="0" border="0"  width="100%" >
                <col width='9%'/>
                <col width='82%'/>
                <col width='9%'/>
                <tr>
                  <td><img src="<% = tick %>" width="32" height="20" class="Tick" id="Tick5" /></td>
                  <td valign='top' ><b>Passenger Name:</b></td>
                  <td align='right'><img src="<% = hi %>"  class="HelpMiniButton" onClick="DetailedHelp(this)" /><td>
                </tr>
                </table>
             </td>
             <td class='Pale'>
                <input type="text" class="FormField" name="PassengerName" id="PassengerName" style="width: 22em;" maxlength="80" value="<%= Session("Job").PassengerName %>" />
             </td>
          </tr>
          <tr id="R6" onMouseOver="Help(this)" onMouseOut="UnHelp(this)">
             <td class='Pale' valign='top' >
                <table cellspacing="0" cellpadding="0" border="0"  width="100%" >
                <col width='9%'/>
                <col width='82%'/>
                <col width='9%'/>
                <tr>
                  <td><img src="<% = tick %>" width="32" height="20" class="Tick" id="Tick6" /></td>
                  <td valign='top' ><b>Telephone Number:</b></td>
                  <td align='right'><img src="<% = hi %>"  class="HelpMiniButton" onClick="DetailedHelp(this)" /><td>
                </tr>
                </table>
             </td>
             <td class='Pale'>
                <input type="text" class="FormField" name="PaxTelephoneNum" id="PaxTelephoneNum" style="width: 22em;" maxlength="80" value="<%= Session("Job").PaxTelephoneNum %>" />
             </td>
          </tr>
          <% if (Application("WJB").UseEmail) { %>
          <tr id="R7" onMouseOver="Help(this)" onMouseOut="UnHelp(this)">
             <td class='Pale' valign='top' >
                <table cellspacing="0" cellpadding="0" border="0"  width="100%" >
                <col width='9%'/>
                <col width='82%'/>
                <col width='9%'/>
                <tr>
                  <td><img src="<% = tick %>" width="32" height="20" class="Tick" id="Tick7" /></td>
                  <td valign='top' ><b>E-Mail:</b></td>
                  <td align='right'><img src="<% = hi %>"  class="HelpMiniButton" onClick="DetailedHelp(this)" /><td>
                </tr>
                </table>
             </td>
             <td class='Pale'>
                <input type="text" class="FormField" name="CustomerEmail" id="CustomerEmail" style="width: 22em;" maxlength="80" value="<%= Session("Job").CustomerEmail %>"/>
             </td>
          </tr>
          <% } 
             for (r=0; r < refCount; r++)
             { 
                     var refName    = "Ref" + r;
                     var vbArray    = new VBArray(job.GetReferenceChoices(r));
                     var refChoices = vbArray.toArray();
                     var refValue   = job.GetReferenceValue(r);
                 %>
          <tr id="R<% = 8 + r %>" onMouseOver="Help(this)" onMouseOut="UnHelp(this)">
             <td class='Pale' valign='top' >
                <table cellspacing="0" cellpadding="0" border="0"  width="100%" >
                <col width='9%'/>
                <col width='82%'/>
                <col width='9%'/>
                <tr>
                  <td>
                    <img src="<% = tick %>" width="32" height="20" style="visibility: <% = (mandRefMask & (1 << r)) ? 'hidden' : 'visible' %>;" id="Tick<% = 8 + r %>" />
                  </td>
                  <td valign='top' ><b><% = job.GetReferenceName(r) %>:</b></td>
                  <td align='right'><img src="<% = hi %>"  class="HelpMiniButton" onClick="DetailedHelp(this)" /><td>
                </tr>
                </table>
             </td>
             <td class='Pale'>
             <% if (refChoices.length == 0) { %>
               <input type="text" class="FormField" name="<% = refName %>" id="<% = refName %>" style="width: 22em;" maxlength="80" value="<% = refValue %>" />
             <% } else { %>
               <select class="FormField" name="<% = refName %>" id="<% = refName %>" style="width: 23em;" onChange="RefChoiceChanged(this, <% = r %>)">
               <% if (refValue == "") { %>
               <option value="<% = (mandRefMask & (1 << r)) ? "0" : "1" %>"></option>
               <% } else { %>
               <option value="1"><% = refValue %></option>
               <% }
                  for (c=0; c < refChoices.length; c++)
                  {
                      if (refChoices[c] != refValue) {  %>
                          <option value="1"><% = refChoices[c] %></option>
                      <% } %>
               <% } %>
               </select>
             <% } %>   
             </td>
          </tr>
          <% } %>
          <tr>
            <td colspan=3>
            <table width="100%">
              <col width='33%'/>
              <col width='34%'/>
              <col width='33%'/>
              <tr>
                <td align="left">
                  <INPUT type="image" onClick="location='default.asp';return false;" src="ImaGen.dll?Bcancel-25-<% = C.Button %>"/>
                </td>
                <td align="center"><!--
                  <input type="image" id="WizButton" onclick="GoWizard();return false;" src="ImaGen.dll?Bextra-25-<% = C.Button %>" />-->
                </td>
                <td align="right">
                  &nbsp;
                  <input type="image" id="NextButton" onclick="CheckForm();return false;" src="ImaGen.dll?Bnext-25-<% = C.Button %>" style="display:none;"/>
                </td>
              </tr>
            </table>
            </td>
          </tr>
          <% } else { %>
          <tr>
          <td>&nbsp;</td>
          <td align="right">
              <input type="image" id="LoginButton" onclick="Login();return false;" src="ImaGen.dll?BLogin-25-<% = C.Button %>" />
          </td>
          </tr>
          <% } %>
    
    <% ftop = false; %><!--#include file="includes/frame.inc"-->
    <% if (Session("User").IsNewUser && (!hasQuote)) { %>
    <!--#include file="includes/defaultasp.browserdetect.inc"-->
    <!--#include file="includes/defaultasp.nojavascript.inc"-->
    <% } %>
    </div>
    <!--#include file="includes/helpdiv.inc"-->
    </body>
    </html>
    <% if (needLogin) { %>
    <!--#include file="includes/afterLogin.inc"-->
    <% } %>
    JS
    Code:
    <!-- $Header: /Projects/Taxi/WebBooker/WJBasp.NV/includes/OneForm.js.inc 32    18/12/08 12:03 David.g $ -->
    <SCRIPT type="text/javascript">
    //<![CDATA[
    
    var serverTimeLead      = 0;
    var PUtimeChanged       = false;
    var PUtimeValid         = false;
    var validityMask        = <% = ((vehAttr.length > 0) ? 0 : 8) + ((mandRefMask ^ 0x00F) << 8) %>;
    var vehAttribIndex      = <% = hasQuote ? Session("VAindex") : -2 %>;
    var DDPaddrTypeIndex    = <% = hasQuote ? Session("PTindex") : 0 %> ;
    var DDDaddrTypeIndex    = <% = hasQuote ? Session("DTindex") : 0 %> ;
    var PickupDateTime      = "0";
    var shadowOptions       = { distance: 5, angle: 135, opacity: 0.5, nestedShadows: 3 };
    var HandlePickup        = null;
    var HandleDropoff       = null;
    var nationwideSearch    = <% = Session("NationwideSearch") ? 'true' : 'false' %> ;
    var defPickupIndex      = -1;
    var defDropoffIndex     = -1;
    var HelpT               = [];
    
    /*
    LOG = function() { };
    
    if (typeof console == 'object') LOG = console.log;
    */
    
    function OnLoad()
    {
        var mbs = $$(".Tick");
    
        for (i=0; i < mbs.length; i++)
        {
           mbs[i].style.visibility = "hidden";
        }
    
        <% if (Session("AddressShortcuts") || Session("NationwideSearch")) { %>
        
        if (nationwideSearch)
        {
            var option = "<option>Any Address</option>";
            $("DDPaddrType").insert(option);
            $("DDDaddrType").insert(option);
        }
        
        <% if (Session("AddressShortcuts")) { %>
        if (typeof <% = Session("AddressShortcuts") %> == 'object')
        {
            for (var i=0; i < <% = Session("AddressShortcuts") %>.length; i++)
            {
                var option = "<option>" + <% = Session("AddressShortcuts") %>[i].group + "</option>";
                $("DDPaddrType").insert(option);
                $("DDDaddrType").insert(option);
            }
        }
        <% } %>
    
        $("DDPaddrType").selectedIndex  = DDPaddrTypeIndex;
        $("DDPaddrType").show();
        $("DDDaddrType").selectedIndex  = DDDaddrTypeIndex;
        $("DDDaddrType").show();
        <% } else  { %>
        DDPaddrTypeIndex = 1;
        DDDaddrTypeIndex = 1;
        SetPaddrType(<% = hasQuote ? "false" : "true" %>);
        SetDaddrType(<% = hasQuote ? "false" : "true" %>);
        <% } %>
    
        <% if (vehAttr.length > 0) { %>
        document.getElementById("DDvehAttr").selectedIndex = vehAttribIndex + 2;
        <% } %>
    
        var now         = new Date();
        serverTimeLead = (now.getTimezoneOffset()) - (<% = d.getTimezoneOffset() %>);
        serverTimeLead *= 60000.0;
    
        if (serverTimeLead) $("PickupTimeLegend").innerHTML = "UK Local:&nbsp;&nbsp;";
    
        <% if (hasQuote) { %>
        now.setTime(<% = Session("Job").NominalPickupTime %> + (serverTimeLead));
        <% } else { %>
        now.setTime(now.getTime() + <% = (leadTimeTicks > 0) ? leadTimeTicks : 0 %> + (serverTimeLead));
        <% } %>
    
        formDateTime(now, document.mainForm.PickupTime, document.mainForm.PickupDate);
    
        if (!ie)
        {
            initCal(); 
        }
    
        document.notifyCalendarChange();
    
       <% if ((Session("PAlist"))
          &&  (Session("PAindex") >= 0)) { %>
        SetPaddrType(false);
        defPickupIndex                              = <% = Session("PAindex") %>;
        if (HandlePickup ) HandlePickup.serverIndex = defPickupIndex;
        document.getElementById('PAshow').innerHTML = "<% = Session("PPremise") + Session("PAlist").Address(Session("PAindex")) + ' ' + Session("PAlist").Postcode(Session("PAindex")) %>";
        Validate(1, true);
        <% } %>
    
       <% if ((Session("DAlist"))
          &&  (Session("DAindex") >= 0)) { %>
        SetDaddrType(false);
        defDropoffIndex                              = <% = Session("DAindex") %>;
        if (HandleDropoff) HandleDropoff.serverIndex = defDropoffIndex;
        document.getElementById('DAshow').innerHTML = "<% = Session("DAlist").Address(Session("DAindex")) + ' ' + Session("DAlist").Postcode(Session("DAindex")) %>";
        Validate(2, true);
        <% } %>
    
        <% if (hasQuote) { %>
        Validate(3, true);
        <% } %>
    
        <% if (!Session("User").IsNewUser) { %>
        new CUserHandler("PassengerName",   function(t) { Validate(5,t) }); 
        new CUserHandler("PaxTelephoneNum", function(t) { Validate(6,t) }); 
        <% if (Application("WJB").UseEmail && Session("EmailIsMandatory")) { %>
        new CUserHandler("CustomerEmail",   function(t) { Validate(7,t) }); 
        <% } else { %>
        Validate(7,true);
        <% } %>
        for (var i=0; i < 4; i++)
        {
            var t = $("Ref" + i);
            if (t && (t.tagName.toLowerCase() == 'input'))
            {
                new CRefTextHandler(i);
            }
        }
        <% } %>
    
        <% if (Session("User").IsNewUser && (!hasQuote)) { %>
        new Ajax.Request('MAjax.asp',{ parameters: {A: "P", S: "mi"} });
        <% } %>
    
        HelpT.R0  = "Enter the required Pickup Date and Time.";
        <% if (leadTimeTicks > 0) { %>
        HelpT.R0 += " You must book at least <% = Session('User').LeadTimeFormatted %> in advance.";
        <% } %>
        HelpT.R1  = "Enter the Pickup Address. First select the type of address you want, then search for the exact place.";
        HelpT.R2  = "Enter the Dropoff Address. First select the type of address you want, then search for the exact place.";
        HelpT.R3  = "For your convenience, we offer a choice of vehicles. Choose the most appropriate type of Vehicle for your needs.";
        HelpT.R4  = 
        <% if (!!Session("SuppressChargesBeforeBooked")) { %>
        "Indicates whether we have enough information to book a trip.";
        <% } else { %>
        "Indicates the cost of the trip.";
        <% } %>
        HelpT.R5  = "Enter the Passenger Name. This is a mandatory field.";
        HelpT.R6  = "Enter a contact Telephone Number. This is a mandatory field.";
        HelpT.R7  = "Enter a contact Email address. This is a<% = Session("EmailIsMandatory") ? " mandatory" : "n optional" %> field.";
        <% for (var r=0; r < 4; r++) 
        {
           var job = Session("Job"); %>
        HelpT.R<% = 8+r %> = "Enter an appropriate value for the '<% = Literal(job.GetReferenceName(r)) %>' reference.";
        <% } %>
    }
    
    function OnLoadMove(elementID)
    {
        var c        = document.getElementById(elementID);
        var x        = c.offsetLeft;
        x           += 60;
        c.style.left = x + "px";
    }
    
    var delayHelp   = null;
    var unDelayHelp = null;
    
    function Help(tr)
    {
        if (delayHelp)
        {
            clearTimeout(delayHelp);
        }
    
        if (unDelayHelp)
        {
            clearTimeout(unDelayHelp);
            unDelayHelp = null;
        }
    
        $("HD").innerHTML = HelpT[$(tr).id];
        delayHelp = setTimeout(HelpDelayed, 800);
    }
    
    function HelpDelayed()
    {
        delayHelp = null;
        $("HB").show();
    }
    
    function UnHelp(tr)
    {
        if (delayHelp)
        {
            clearTimeout(delayHelp);
            delayHelp = null;
        }
    
        if (unDelayHelp)
        {
            clearTimeout(unDelayHelp);
        }
    
        unDelayHelp = setTimeout(UnHelpDelayed, 800);
    }
    
    function UnHelpDelayed()
    {
        unDelayHelp = null;
        $("HB").hide();
    }
    
    var dhFirst = true;
    
    function DetailedHelp(tr)
    {
        if (dhFirst)
        {
           $("helpLayer").style.width = "350px";
           $("helpLayer").style.left  = "20px";
           $("helpLayer").style.top   = "20px";
           dhFirst = false;
        }
    
        var elements = $(tr).ancestors();
        for (var i=0; i < elements.length; i++)
        {
            if ((elements[i].tagName == "TR")
            &&  (String(elements[i].id).substr(0,1) == "R"))
            {
                var AS = "";
    
                <% if (Session("AddressShortcuts")) { %>
                if (typeof <% = Session("AddressShortcuts") %> == 'object')
                {
                    for (var j=0; j < <% = Session("AddressShortcuts") %>.length; j++)
                    {
                        AS = AS + ((j > 0) ? ", " : "") + <% = Session("AddressShortcuts") %>[j].group;
                    }
                }
                <% } %>
    
                new Ajax.Request(
                  'MAhelp.asp',
                  {
                     onSuccess: ProcessHelp,
                     parameters: { H: String(elements[i].id), L: serverTimeLead, A: AS }
                  });
    
                break;
            }
        }
    }
    
    function ProcessHelp(transport)
    {
        $("fullHelpText").innerHTML = transport.responseText;
        showHelp();
    }
    
    function DDPaddrTypeChanged(control)
    {
        DDPaddrTypeIndex = control.selectedIndex;
        if (HandlePickup) HandlePickup.destruct();
        HandlePickup     = null;
        Validate(1, false);
        $("PAinput").hide();
        $("PAshow").innerHTML = "";
        defPickupIndex   = -1;
     
        SetPaddrType(true);
    }
    
    function SetPaddrType(p)
    {
        var v = function(t) { Validate(1, t) };
    
        if (DDPaddrTypeIndex == 1)
        {
            HandlePickup = new CAddressHandlerSearch("PAinput", "PAshow", "P", v, false);
        }
        else if ((nationwideSearch) && (DDPaddrTypeIndex == 2))
        {
            HandlePickup = new CAddressHandlerSearch("PAinput", "PAshow", "P", v, true);
        }
        else if (DDPaddrTypeIndex > 1)
        {
            HandlePickup = new CAddressHandlerShortcuts("PAinput", "PAshow", "P", v, <% = Session("AddressShortcuts") %>[DDPaddrTypeIndex - (nationwideSearch ? 3 : 2)]);
        }
    
        if (p && HandlePickup) HandlePickup.Prompt();
    }
    
    function DDDaddrTypeChanged(control)
    {
        DDDaddrTypeIndex = control.selectedIndex;
        if (HandleDropoff) HandleDropoff.destruct();
        HandleDropoff    = null;
        Validate(2, false);
        $("DAinput").hide();
        $("DAshow").innerHTML = "";
        defDropoffIndex = -1;
    
        SetDaddrType(true);
    }
    
    function SetDaddrType(p)
    {
        var v = function(t) { Validate(2, t) };
    
        if (DDDaddrTypeIndex == 1)
        {
            HandleDropoff = new CAddressHandlerSearch("DAinput", "DAshow", "D", v, false);
        }
        else if ((nationwideSearch) && (DDDaddrTypeIndex == 2))
        {
            HandleDropoff = new CAddressHandlerSearch("DAinput", "DAshow", "D", v, true);
        }
        else if (DDDaddrTypeIndex > 1)
        {
            HandleDropoff = new CAddressHandlerShortcuts("DAinput", "DAshow", "D", v, <% = Session("AddressShortcuts") %>[DDDaddrTypeIndex - (nationwideSearch ? 3 : 2)]);
        }
    
        if (p && HandleDropoff) HandleDropoff.Prompt();
    }
    
    function DDvehAttrChanged(control)
    {
        vehAttribIndex = Number(control.options[control.selectedIndex].value);
        Validate(3, vehAttribIndex >= -1);
    }
    
    function CheckPUtime(f)
    {
        if (!PUtimeChanged)
        {
            return;
        }
    
        var puTime     = new Date();
        var now        = new Date();
        var e          = makeDateTime(f.PickupTime, f.PickupDate, puTime);
        PUtimeValid    = false;
        PUtimeChanged  = false;
        PickupDateTime = "0";
    
        now.setTime(now.getTime() + serverTimeLead);
    
        if (e == 1)
        {
            alert("Pickup Time is invalid\n\nCorrect value should be like 12:30 or 23:59");
            f.PickupTime.focus();
        }
        else if (e == 2)
        {
            alert("Pickup Date is invalid");
        }
        else if ((now.getTime() - puTime.getTime()) > (5 * 60 * 1000))
        {
            alert("Pickup time can't be in the past");
        }
        else if ((now.getTime() - puTime.getTime()) > ((5 * 60 * 1000) - <% = leadTimeTicks %>))
        {
            alert("You must book at least <% = Session('User').LeadTimeFormatted %> in advance");
        }
        else
        {
            PUtimeValid    = true;
            PickupDateTime = String(puTime.getTime() - serverTimeLead);
        }
    
        Validate(0, PUtimeValid);
    }
    
    function Validate(flag, isValid)
    {
        if (flag < 4)
        {
            document.getElementById("Tick4").style.visibility   = "hidden";
            document.getElementById("BookNow").style.visibility = "hidden";
            document.getElementById("Quote").innerHTML          = "";
        }
    
        var m = (1 << flag);
    
        if (isValid)
        {
            validityMask |= m;
        } 
        else
        {
            validityMask &= (~m);
        } 
    
        var e = document.getElementById("Tick" + flag);
        if (e) e.style.visibility = isValid ? "visible" : "hidden";
    
        if ((isValid)
        &&  ((validityMask & 15) == 15)
        &&  (flag < 4))
        {
            // Do ajax quotation here
            var post = {
               T  : PickupDateTime,
               PT : DDPaddrTypeIndex,
               DT : DDDaddrTypeIndex,
               P  : HandlePickup  ? HandlePickup.serverIndex : defPickupIndex,
               D  : HandleDropoff ? HandleDropoff.serverIndex : defDropoffIndex,
               V  : vehAttribIndex
            };
    
            new Ajax.Request(
                'MAjax.asp',
                {
                    onSuccess: ProcessQuotation,
                    parameters: post
                });
        }
    
        if ($("NextButton"))
        {
            if ((isValid)
            &&  ((validityMask & 4095) == 4095))
            {
                $("NextButton").show();
            }
            else
            {
                $("NextButton").hide();
            }
        }
    }
    
    var ProcessQuotation = function(transport)
    {
        var response = transport.responseText;
        Validate(4, true);
        <% if (!!Session("SuppressChargesBeforeBooked")) { %>
        if (response.indexOf("Error") < 0) response = "Ready to Book";
        <% } %>
        document.getElementById("Quote").innerHTML = response;
        <% if (Session("User").IsNewUser) { %>
        document.getElementById("BookNow").style.visibility = "visible";
        <% } %>
    }
    
    document.notifyCalendarChange = function() 
    {
        PUtimeChanged = true;
        CheckPUtime(document.getElementById("mainForm"));
    }
    
    var CUserHandler = Class.create(
        {
        initialize:
            function(inputElement, validate)
            {
                this.inputElement = $(inputElement);
                this.Validate     = validate;
                this.valid        = false;
    
                this.inputElement.observe('keyup', this.OnChange.bindAsEventListener(this));
                this.OnChange();
            }
            ,
        OnChange:
            function(e)
            {
                var wasValid = this.valid;
                this.valid   = this.inputElement.value != "";
    
                if (wasValid != this.valid)
                {
                    this.Validate(this.valid);
                }
            }
        }
    );
    
    function Check(i, t)
    {
        if (i.value == "")
        {
            alert(t + " can't be empty");
            i.focus();
            return false;
        }
    
        return true;
    }
    
    function PassPax(wizard)
    {
        var post = {
           P  : $("PassengerName").value,
           T  : $("PaxTelephoneNum").value,
           <% if (Application("WJB").UseEmail) { %>
           E  : $("CustomerEmail").value,
    	   <% } else { %>
           E  : "",
    	   <% } %>
           W  : wizard ? "Y" : "N",
           PI : HandlePickup  ? HandlePickup.serverIndex : defPickupIndex,
           DI : HandleDropoff ? HandleDropoff.serverIndex : defDropoffIndex
        };
    
        new Ajax.Request(
            'MAjax.asp',
            {
                onSuccess: function() { location = wizard ? "<% = nextWizardStep %>" : "<% = nextStep %>"; },
                parameters: post
            });
    }
    
    function CheckForm()
    {
        var ok = Check($("PassengerName"), "Passenger Name");
        ok     = ok && Check($("PaxTelephoneNum"), "Telephone Number");
        <% if (Application("WJB").UseEmail && Session("EmailIsMandatory")) { %>
        ok     = ok && Check($("CustomerEmail"), "E-Mail field");
        <% } %>
    
        if (ok) PassPax(false);
    }
    
    function GoWizard()
    {
        PassPax(true);
    }
    
    function RefChoiceChanged(control, refIndex)
    {
       var sel = control.selectedIndex;
       var ref = control.options[sel].innerHTML;
       
       Validate(refIndex + 8, control.options[sel].value);
    
       new Ajax.Request(
           'MAjax.asp',
           {
           parameters:
               { R: refIndex, V: ref }
           });
    }
    
    function Login()
    {
        location = ((validityMask & 31) == 31) ? "OneFormLogin.asp" : "default.asp?L=1";
    }
    
    var CRefTextHandler = Class.create(
        {
        initialize:
            function(refIndex)
            {
                this.refIndex       = refIndex;
                this.inputElement   = $("Ref" + refIndex);
                this.inputValue     = "";
                this.requestPending = false;
                this.timer          = null;
                
                this.fOnBlur    = this.OnBlur.bindAsEventListener(this);
                this.fOnKeyUp   = this.OnKeyUp.bindAsEventListener(this); 
                this.fAddressChange = this.AddressChange.bind(this);
    
                this.inputElement.observe('blur',  this.fOnBlur  );
                this.inputElement.observe('keyup', this.fOnKeyUp );
            }
            ,
        OnBlur:
            function(e)
            {
                if (this.inputElement.value != this.inputValue)
                {
                    if (this.timer)
                    {
                        clearTimeout(this.timer);
                        this.timer = null;
                    }
                    
                    Validate(this.refIndex + 8, false);
                    
                    this.AddressChange();
                }
            }
            ,
        OnKeyUp:
            function(e)
            {
                if (this.inputElement.value != this.inputValue)
                {
                    if (this.timer)
                    {
                        clearTimeout(this.timer);
                    }
                    
                    Validate(this.refIndex + 8, false);
                    
                    this.inputValue = this.inputElement.value;
                    this.timer      = setTimeout(this.fAddressChange, 400);
               }
           }
            ,
        AddressChange:
            function()
            {
                this.timer = null;
    
                if (this.requestPending)
                {
                    this.timer = setTimeout(this.fAddressChange, 300);
                }
                else
                {
                    this.inputValue     = this.inputElement.value;
                    this.requestPending = true;
                    Validate(this.refIndex + 8, false);
     
                    new Ajax.Request(
                        'MAjax.asp',
                        {
                        onSuccess:
                            this.OnSuccess.bind(this),
                        onComplete:
                            this.OnComplete.bind(this),
                        parameters:
                            { R: this.refIndex, V: this.inputValue }
                        }
                    );
                }
                
            }
            ,
        OnComplete:
            function(transport)
            {
                this.requestPending = false;
            }
            ,
        OnSuccess:
            function(transport)
            {
                var response = transport.responseText;
                Validate(this.refIndex + 8, !!parseInt(response));
            }
        }
    );
    
    //]]>
    </SCRIPT>

  5. #5
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would hide the checkbox; it would simplify coding and not be so confusing to the user.
    This will change the checkbox depending on the selection
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    function DDvehAttrChanged(control) {
    document.form1.parking.checked = (control.value&#37;2)? true : false;
    }
    </script>
    
    <style type="text/css">
    * {margin:0;padding:0;}
    </style>
    
    </head>
    <body>
    <form action="#" method="" name="form1">
    <select id="DDvehAttr" name="DDvehAttr" class="FormField" onchange="DDvehAttrChanged(this)" >
                  <option value="-2">Please Select . . .</option>
                  <option value="0">Saloon Car</option>
                  <option value="1">Saloon Car with Parking</option>
                  <option value="2">Executive Car</option>
                  <option value="3">Executive Car with Parking</option>
                </select>
    <input type="checkbox" name="parking"> <!-- hide this -->
    </form>
    </body>
    </html>

  6. #6
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello, thank you all for your efforts those that read through this post but i will be discontinuing it at this stage because i am going around in circles. admin can delete this post if need be.

    thanks


Bookmarks

Posting Permissions

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