[Last Call] Learn how to a build a cloud-first strategyRegister Now

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

add more functionally to existing code

On this page http://roofgenius.com/test1.asp
In the function clearFields add changing the combo box text to "Select pitch"  
and change to <h3 id="Result">Select Pitch</h3>
.
when a selection is made in the combo
add the combobox text replacing the text in result <h3 id="Result">Select Pitch</h3>
Example:
user selects 6/12 pitch from the combo  this label would read <h3 id="Result">6/12 Pitch</h3>
0
isnoend2001
Asked:
isnoend2001
  • 6
  • 5
2 Solutions
 
Scott Fell, EE MVEDeveloperCommented:
Probably should simply add below to the section where we detect the drop down change.

$('#Result').text(roofAreaTxt);  // 7-12-2014 Q_28474675

We have already calculated the value of the text in the dropdown with the variable roofAreaTxt.  All we need to do is update the h3 id.  I have not tested this but it should work.

I have placed it inside the code you already have below

 // CHECK FOR A CHANGE IN THE DROP DOWN MENU
     $('#selectPitch').change(function () {
	  $('#selectPitchLabel').addClass('Require'); // RESET LABEL
         var roofAreaVal = $(this).val();  // GET VALUE OF DROPDOWN xnew 07-12-14         
         var roofAreaTxt = $('#selectPitch option:selected').text();  //GET VALUE OF THE TEXT OF THE DROP DOWN
         var rat = roofAreaTxt.split(' ');  // CONVERT THE TEXT OF THE DROP DOWN TO AN ARRAY. REQUIRED TO REVERSE USAGE IN HE MESSAGE
         var newAreaTxt = rat[1] + ' ' + rat[0];  // REVERSE THE ORDER OF THE TEXT
         if (roofAreaVal != 0) {  // CHECK TO MAKE SURE THERE IS A VALUE IN THE DROP DOWNxnew 07-12-14
		  $('#selectPitchLabel').removeClass('Require');//xnew 07-12-14
                   $('#Result').text(roofAreaTxt);   // 7-12-2014 Q_28474675
             calc(roofAreaVal);  // RUN THE FUNCTION TO MAKE THE CALCULATIONS 
             $('#roofMesg').val('Roof ' + newAreaTxt + ' added ' + roofAreaVal);
         }

     });

Open in new window

0
 
isnoend2001Author Commented:
thanks that works
http://roofgenius.com/test2.asp
now for the code for the reset button as per question.

i hope my next question does not involve redoing any of the code written
it involves this:
with no submit button the code will not run if the user selects  the pitch before entering the numbers.
I gotta tell yea Java Script is more difficult to read than the vb6 i use
The reset button will change the text in to<h3 id="Result">Select Pitch</h3>
and put the combobox text to Select Pitch
0
 
Scott Fell, EE MVEDeveloperCommented:
Let's move that line before the IF statement.

 // CHECK FOR A CHANGE IN THE DROP DOWN MENU
     $('#selectPitch').change(function () {
	  $('#selectPitchLabel').addClass('Require'); // RESET LABEL
         var roofAreaVal = $(this).val();  // GET VALUE OF DROPDOWN xnew 07-12-14         
         var roofAreaTxt = $('#selectPitch option:selected').text();  //GET VALUE OF THE TEXT OF THE DROP DOWN
         var rat = roofAreaTxt.split(' ');  // CONVERT THE TEXT OF THE DROP DOWN TO AN ARRAY. REQUIRED TO REVERSE USAGE IN HE MESSAGE
         var newAreaTxt = rat[1] + ' ' + rat[0];  // REVERSE THE ORDER OF THE TEXT
             $('#Result').text(roofAreaTxt);   // 7-12-2014 Q_28474675
         if (roofAreaVal != 0) {  // CHECK TO MAKE SURE THERE IS A VALUE IN THE DROP DOWNxnew 07-12-14
		  $('#selectPitchLabel').removeClass('Require');//xnew 07-12-14
              
             calc(roofAreaVal);  // RUN THE FUNCTION TO MAKE THE CALCULATIONS 
             $('#roofMesg').val('Roof ' + newAreaTxt + ' added ' + roofAreaVal);
         }

     });

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Scott Fell, EE MVEDeveloperCommented:
Update to clearFields.    Last line updates drop down and that should automatically update the h3

// THIS FUNCTION WILL CLEAR OUT ALL OF THE FIELDS.  WE RUN THIS WHEN THERE IS AN ERROR
     function clearFields() {  
         $('#in').val('');
         $('#Multiplier').text('Na');
         $('#FeetAdded').text('Na');
         $('#Total').text('Na');
         $('#TotalSqs').text('Na');
         $('#selectPitch').text(0);
        
     }

Open in new window

0
 
isnoend2001Author Commented:
Ok I just copied the whole function.
I noticed a issue we had before when the textbox looses focus a .0 is added to the end of numbers entered.
Also
The reset button should change the .Require label back to red
0
 
isnoend2001Author Commented:
0
 
isnoend2001Author Commented:
This
 function clearFields() {  
         $('#in').val('');
         $('#Multiplier').text('Na');
         $('#FeetAdded').text('Na');
         $('#Total').text('Na');
         $('#TotalSqs').text('Na');
         $('#selectPitch').text(0);
Clicking the reset makes the combo small
http://roofgenius.com/test2.asp
0
 
Scott Fell, EE MVEDeveloperCommented:
The code below probably does not need a form.   Change from
<div class="RightColumn">
	
	 <form name="PitchCombo">
<select id="selectPitch" name="selectPitch">
  <!-- ADD BELOW DEFAULT -->
<option value="0">Select Pitch</option>
<option value=".03">3/12 Pitch</option>
<option value=".05">4/12 Pitch</option>
<option value=".08">5/12 Pitch</option>
<option value=".12">6/12 Pitch</option>
<option value=".16">7/12 Pitch</option>
<option value=".20">8/12 Pitch</option>
<option value=".25">9/12 Pitch</option>
<option value=".30">10/12 Pitch</option>
<option value=".41">12/12 Pitch</option>
<option value=".54">14/12 Pitch</option>
<option value=".67">16/12 Pitch</option>
<option value=".80">18/12 Pitch</option>
<option value=".94">20/12 Pitch</option>
<option value="1.09">22/12 Pitch</option>
<option value="1.24">24/12 Pitch</option>
</select>
</form>

<div id="selectPitchLabel" class="Require">* Required</div><!--xnew 07-12-14 -->
<!--<div class="Require">* Required</div>-->

	</div>

Open in new window

to
<div class="RightColumn">
	

<select id="selectPitch" name="selectPitch">
  <!-- ADD BELOW DEFAULT -->
<option value="0">Select Pitch</option>
<option value=".03">3/12 Pitch</option>
<option value=".05">4/12 Pitch</option>
<option value=".08">5/12 Pitch</option>
<option value=".12">6/12 Pitch</option>
<option value=".16">7/12 Pitch</option>
<option value=".20">8/12 Pitch</option>
<option value=".25">9/12 Pitch</option>
<option value=".30">10/12 Pitch</option>
<option value=".41">12/12 Pitch</option>
<option value=".54">14/12 Pitch</option>
<option value=".67">16/12 Pitch</option>
<option value=".80">18/12 Pitch</option>
<option value=".94">20/12 Pitch</option>
<option value="1.09">22/12 Pitch</option>
<option value="1.24">24/12 Pitch</option>
</select>


<div id="selectPitchLabel" class="Require">* Required</div><!--xnew 07-12-14 -->
<!--<div class="Require">* Required</div>-->

	</div>

Open in new window

If you want to prevent using the drop down until a number is added, wrap this in a new div.

<div class="RightColumn">
	
<div id="selectPitchArea">
<select id="selectPitch" name="selectPitch">
  <!-- ADD BELOW DEFAULT -->
<option value="0">Select Pitch</option>
<option value=".03">3/12 Pitch</option>
<option value=".05">4/12 Pitch</option>
<option value=".08">5/12 Pitch</option>
<option value=".12">6/12 Pitch</option>
<option value=".16">7/12 Pitch</option>
<option value=".20">8/12 Pitch</option>
<option value=".25">9/12 Pitch</option>
<option value=".30">10/12 Pitch</option>
<option value=".41">12/12 Pitch</option>
<option value=".54">14/12 Pitch</option>
<option value=".67">16/12 Pitch</option>
<option value=".80">18/12 Pitch</option>
<option value=".94">20/12 Pitch</option>
<option value="1.09">22/12 Pitch</option>
<option value="1.24">24/12 Pitch</option>
</select>


<div id="selectPitchLabel" class="Require">* Required</div><!--xnew 07-12-14 -->
<!--<div class="Require">* Required</div>-->
</div>
<div id="selectPitchDefault">Please Input a Roof Measurement</div>
	</div>

Open in new window


If you want to hide the drop down until there is a number add below
$('#in').change(function () {  // DETECT CHANGE IN THE TEXT FIELD
            $('#selectPitchDefault').show(); //Q_28474675 - 2
            $('#selectPitchArea').hide(); //Q_28474675 - 2
        $('#measureLabel').addClass('Require'); //   RESET LABEL xnew 07-12-14
         roofAreaVal = $('#selectPitch option:selected').val(); // GET THE VALUE OF THE SELECT MENU
         var inVal = parseFloat($('#in').val());   // CONVERT THE VALUE OF THE TEXT BOX TO A FLOAT NUMBER
         inVal = inVal.toFixed(1); // USE ONLY ONE DECIMAL PLACE FOR THE  VALUE
         //inVal=inVal==Int(inVal)?Int(inVal):inVal;
         $('#in').val(inVal); // SEND THE NEW NUMBER BACK TO THE FIELD TO VISUALLY SHOW THE CONVERSION
         if (!$.isNumeric(inVal)) { // DETECT IF OUR NUMBER IS NUMERIC

             clearFields(); // IF NOT NUMERIC, RUN THE CLEAR FIELDS FUNCTION (SET EVERYTHING TO BLANK)
             alert('Please enter a valid number'); //ALSO SEND AN ALERT
         } else {
             if (inVal <= 0) {  //IF IT IS NUMERIC, CHECK THAT THE NUMBER IS GREATER THAN 0                
                 clearFields();  // IF NOT, CLEAR THE FIELDS 
                 alert('Please enter a positive number greater than zero');  // AND SEND THE ALERT
             } else {
                 $('#selectPitchDefault').hide(); //Q_28474675 - 2
                 $('#selectPitchArea').show(); //Q_28474675 - 2
                 $('#measureLabel').removeClass('Require'); // CHANGE LABEL FROM RED TO BLACK xnew 07-12-14
                 calc(roofAreaVal);  // WE HAVE A GOOD VALUE, RUN THE FUNCTION TO MAKE THE CALCULATIONS 
             }
         }
     });

Open in new window


 
 //RESET LABEL
    $('#measureLabel').addClass('Require');//xnew 07-12-14 
    $('#selectPitchLabel').addClass('Require');//xnew 07-12-14
    $('#selectPitchDefault').show() //Q_28474675 - 2
    $('#selectPitchArea').hide(); //Q_28474675 - 2
 

Open in new window

0
 
Scott Fell, EE MVEDeveloperCommented:
This
 function clearFields() {  
         $('#in').val('');
         $('#Multiplier').text('Na');
         $('#FeetAdded').text('Na');
         $('#Total').text('Na');
         $('#TotalSqs').text('Na');
         $('#selectPitch').text(0);
Clicking the reset makes the combo small
http://roofgenius.com/test2.asp


Change

  $('#selectPitch').text(0);

to

  $('#selectPitch').val(0);
0
 
isnoend2001Author Commented:
thanks padas that fixed the combo
just need to update the red labels and the <h3> label on the reset.
also the .0 that is added to the textbox (Ithink its a formating thing
Don't want to do anything to the combo(disable etc)
I was thinking how i did in my vb program:
using the textbox keypress event
If val(textbox) >= 100 and combo.text <> "Select Pitch" then(val treats a label as a number)
do calculations
End if
I will ask this question tomorrow( getting past my bedtime
Would like to get this part done tonight
I really do appreciate your help
0
 
isnoend2001Author Commented:
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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