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>
isnoend2001Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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 MVEDeveloper & EE ModeratorCommented:
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
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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 MVEDeveloper & EE ModeratorCommented:
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 MVEDeveloper & EE ModeratorCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.