Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 508
  • Last Modified:

Disable Submit Button and Activate it only after box has been checked.


I've got a form with a checkbox and a submit button, but they are independent of each other.    
I'd like to be able to prevent the user from submitting the form until the box has been checked.  

There are two files here.  RequestForm.cfm - see section called "Submit"
And I also included the RequestFormAction.cfm just in case.

THANKS IN ADVANCE!!

Here is my code:
<!---//--------------------------------------------------------------------
Name:           requestform.cfm
Description:    Travel Approval Request form    action = requestform_action.cfm
---------------------------------------------------------------------//--->

<!--- Page header --->
<cfinclude template="shared/header.cfm">

<div id="maincontent">
<br>
<br>

<cfoutput>
   <p><strong>Welcome back, #SESSION.auth.firstName#!</strong></p>
   </cfoutput>

<cf_resetUserSessionVars UserID="#SESSION.auth.userID#"/>

<div>
Please take a moment to review your information in the "My Account" section to ensure your information is up to date.  <p>  <span style="font-weight: bold; color: #990000">As a reminder,  you must also obtain documented approval for travel to your destination from a designated approver.</span>  See Approver List to identify the appropriate approver.</p>
Fill out the following form to register your trip.
</div>

<!--- Login Form --->
<p>&nbsp;</p>
<cfform format="flash"
        skin="haloblue"
        style="background-color:##FFFFFF;" height="600" width="550"
        action="requestform_action.cfm"
        METHOD="post">
       
<!--- Destination Header--->
<cfformgroup type="panel"
            label="Destination"
            style="headerColors:##D6EFFE, ##D6EFFE; fontSize:12; text-align: left;">

       
<!--- Display for Country-picklist --->
     
      <cfformgroup type="hbox">
        <cfselect queryposition="below" label="Country"
                  name="Country" query="Country" value="countryid"
                  display="name" width="200"
                  onChange="#actionPopulate#">
                <option>Please select a Country</option>
        </cfselect>
        <cfselect queryposition="below" disabled="true" label="City"
                  name="City"  width="200">
                 <cfoutput query="city">
                 <option value="#cityid#|#countryid#">#name#</option></cfoutput>        </cfselect>
 </cfformgroup>  
     
       
        <!--- Set initial selected and blocked-out dates.--->
        <cfparam name="Form.departuredate" default="#dateformat(now(), 'mm/dd/yyyy')#">
        <cfparam name="Form.returndate" default="#dateformat(now()+1, 'mm/dd/yyyy')#">
       
       
<!--- Dynamic Calendars for dates --->

<cfformgroup type="hbox">
<cfinput type="dateField" name="departuredate" label="Arriving In-Country:" width="100" value="#Form.departuredate#" required="Yes" align="left">

<cfinput type="dateField" name="returndate" label="Departing" width="100" value="#Form.returndate#" required="Yes">
</cfformgroup>
       
       
<!--- Sponsor Info--->

<cfformgroup type="panel"
             label="Sponsor"
             style="headerColors:##D6EFFE, ##D6EFFE; fontSize:12; text-align: left;">
               
        <cfformgroup type="Horizontal" label="Sponsor Name, Dept:">
        <cfinput type="text" name="SponsorName" width="100" required="Yes">
        <cfinput type="text" name="SponsorDept" width="150" required="Yes">
        </cfformgroup>
               
<cfinput type="text" name="SponsorPhone" width="200" label="Sponsor Telephone:" validate="noblanks,telephone" required="Yes">
               
<cfinput type="Text" name="LocationsVisiting" label="Locations to be visited:" width="250" required>

<cfinput type="Text" name="BusinessReason" label="Business Reason for this trip" width="300" required>
</cfformgroup>
       
        <cfformgroup type="horizontal" label="Are you a first time traveler to this destination?">
        <cfinput name="FirstTimeTraveler" type="radio" label="Yes" value="1" required/>
        <cfinput name="FirstTimeTraveler" type="radio" label="No" value="0" required/>
        </cfformgroup>
       
        <cfformgroup type="horizontal" label="Have you arranged ground transportation through local office?">
        <cfinput name="Protocols" type="radio" label="Yes" value="1" required/>
        <cfinput name="Protocols" type="radio" label="No" value="0" required/>
        </cfformgroup>


        <!--- Submit.--->
            
        <cfformgroup type="panel" label="Submit Registration" style="headerColors:##D6EFFE, ##D6EFFE; fontSize:12; text-align: left;">
            
            <cfinput name="checkbox"  type="checkbox" label="I will obtain and maintain documented approval prior to my departure." enabled="true" required="yes"/>
            
            
        <cfinput type="Submit" name="submitBtn" value="Submit">
        </cfformgroup>
        </cfformgroup>
</cfform>

</div>        
<cfinclude template="shared/footer.cfm">




<!---//--------------------------------------------------------------------
Name:           requestform_Action.cfm
Description:    Email request
----------------------------------------------------------------------//--->

<!--- set method to Add --->
<cfset method="add">

<!--- Do it --->
<cfinvoke component="components/trips"
          method="#method#"
          returnVariable="TripReferenceObj">
         
    <cfinvokeargument name  = "UserID"
                      value = "#Session.auth.UserID#"
                      >
    <cfinvokeargument name  = "CountryID"
                      value = "#Form.Country#"
                      >
    <cfinvokeargument name  = "TripCity"
                      value = "#Form.City#"
                      >
    <cfinvokeargument name  = "DepartureDate"
                      value = "#Trim(Form.DepartureDate)#"
                      >
    <cfinvokeargument name  = "ReturnDate"
                      value = "#Trim(Form.ReturnDate)#"
                      >
    <cfinvokeargument name  = "SponsorName"
                      value = "#Trim(Form.SponsorName)#"
                      >
    <cfinvokeargument name  = "SponsorDept"
                      value = "#Trim(Form.SponsorDept)#"
                      >
    <cfinvokeargument name  = "SponsorPhone"
                      value = "#Trim(Form.SponsorPhone)#"
                      >
    <cfinvokeargument name  = "LocationsVisiting"
                      value = "#Trim(Form.LocationsVisiting)#"
                      >
    <cfinvokeargument name  = "BusinessReason"
                      value = "#Trim(Form.BusinessReason)#"
                      >
    <cfinvokeargument name  = "FirstTimeTraveler"
                      value = "#Trim(Form.FirstTimeTraveler)#"
                      >
    <cfinvokeargument name  = "Protocols"
                      value = "#Trim(Form.Protocols)#"
                      >
</cfinvoke>

<cfinvoke component         = "components/trips"
          method            = "CountryApprovers"
          CountryID         = "#Form.Country#"
          returnvariable    = "sqlRetrieveApproversByCountry"
          />

<cfinvoke component         = "components/trips"
          method            = "getCountryDescription"
          CountryID         = "#Form.Country#"
          returnvariable    = "sqlRetrieveCountryDescription"
          />


<!--- Page Header --->
<cfinclude template="shared/header.cfm">


    <!--- Search form --->
    <div id="maincontent">
        <br/>
        <br/>

        <!--- Display confirmation page --->
        <p style="font-weight: bold">Thanks <CFOUTPUT>#Session.auth.FirstName#</CFOUTPUT>, </p>
        <p>Your request has been submitted.</p>
            <p>You can check the approval status under the <span style="font-weight: bold">"My Travel"</span> section.</p>
     
        <br/>
        Regards,<br/>
        Travel Security
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>

<!--- Send a copy of this submission by email to ourselves and approvers --->
        <CFMAIL FROM    = "#Session.auth.email#"
                TO      = "#Session.auth.email#"
                CC      = "#ValueList(sqlRetrieveApproversByCountry.email,";")#"
                SUBJECT = "Travel Approval Request - #Form.City# (Reference: #TripReferenceObj ["TripReferenceID"]#)"
                TYPE    = "HTML"
                >

            Your approval is requested for the Travel Itinerary detailed below.<br/>
            <br/>
            <a href="http://localhost:8500/TravelApprover/webroot/approverequest.cfm?TripReferenceID=#TripReferenceObj["TripReferenceID"]#">
                  Click here</a> to Approve or Deny Travel Request,<br/>
            <br/>
            or cut and paste this URL in your browser: http://localhost:8500/TravelApprover/webroot/approverequest.cfm?TripReferenceID=#TripReferenceObj["TripReferenceID"]#<br/>
            <br/>
            If you do not have access to estream, please reply to this email and indicate if travel is Approved/Denied.<br/>
                  
            <pre>
            ________________________________
           
            <!---Trip Id:               #TripReferenceObj["TripID"]# --->
            Trip Reference ID:          #TripReferenceObj["TripReferenceID"]#
            Traveler Name:              #SESSION.auth.firstName#, #SESSION.auth.lastName#
            Title:                      #SESSION.auth.Title#
            Department:                 #SESSION.auth.Department#
            Office Phone:               #SESSION.auth.OfficeNumber#
            Mobile Phone:               #SESSION.auth.MobileNumber#
            Employee Number:            #SESSION.auth.EmployeeNumber#
            Passport Number:            #SESSION.auth.PassportNumber#
            <!---Destination Country:        #Form.Country#  --->
            Destination City:           #Form.City#
            In-Country Arrival Date:    #DateFormat(Form.DepartureDate)#
            Departure Date:             #DateFormat(Form.ReturnDate)#
            Sponsor Name:               #Trim(Form.SponsorName)#
            Sponsor Department:         #Trim(Form.SponsorDept)#
            Sponsor Phone:              #Trim(Form.SponsorPhone)#
            Locations:                  #Trim(Form.LocationsVisiting)#
            Reason:                     #Trim(Form.BusinessReason)#
            Admin Name:                 #SESSION.auth.AdminContact#
            Admin Phone:                #SESSION.auth.AdminNumber#
            Emergency Name:             #SESSION.auth.EmergencyContact#
            Emergency Phone:            #SESSION.auth.EmergencyNumber#
            First Time to Location?     #YesNoFormat(Form.FirstTimeTraveler)#
            Protocols:                  #YesNoFormat(Form.Protocols)#
            ________________________________
           
            </pre>
           
        </CFMAIL>
            
            
<!--- Now Let's Send A confirmation Email To Person Submitting This Form--->
     <CFMAIL
             FROM="#Session.auth.email#"
             TO="#Session.auth.email#"
            SUBJECT="Your request has been submitted"
            TYPE="HTML">
            
       <br><br>
            Your request has been submitted. We're processing approval now.
<br>
            Visit My Travel to track approval status for your trip.<p></p>
                    
            A copy of the security briefing is included below for your safety and security.
          <p></p>

        Best regards,
            Travel Security

      
      <!--- Include the briefing inside the confirmation email to traveler --->
              <div>#sqlRetrieveCountryDescription.bigtext#</div>
      
         
    </CFMAIL>
    </div>

<cfinclude template="shared/footer.cfm">

0
selms
Asked:
selms
  • 2
1 Solution
 
_agx_Commented:
<cfform format="flash" METHOD="post">
      <cfinput name="myCheckbox" type="checkbox"
            label="I will obtain and maintain documented approval prior to my departure."
            enabled="true"
            required="yes"
            onclick="submitBtn.enabled=myCheckbox.selected;"/>
    <cfinput type="Submit" name="submitBtn" value="Submit" enabled="false">      
</cfform>
0
 
selmsAuthor Commented:
WOW!!!!

You Are a Guru!!!

It worked.    Thank you soooo much!!!
0
 
_agx_Commented:
Welcome :)
0
 
Lee R Liddick JrReporting AnalystCommented:
_agx_ - please read...I posted a question similar to this (http://www.experts-exchange.com/Software/Server_Software/Web_Servers/ColdFusion/Q_24075304.html) and wasn't receiving any responses so I went out and tried to search for answers again and found this which ultimately worked for my situation as well.  I want to award you with the points for the assistance but am told by the Admin's that you would need to do a post on my question in order for me to award you with any points.  Please go to the question above and post an answer similar to the one above so that I can award you with the well earned points.  Thanks!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now