CODEWITHSUNDEEP
javascripthtmlonchange
Paige O
Paige O

Reputation: 53

HTML/Javascript addEventListener Onchange event Within an Onchange?

So I have been working on this for about a day now ... I have a form where I have a select menu whose choice triggers another dependent select menu.

What I am trying to do at this point is fill in a default value based on the selection in the 2nd select menu. Basically, if the user selects the "operator" option in the Labor menu, the rate value should pre-populate with the daily rate of that position -- let's say $100ish.

So far I have been successful in adding an event listener for the first part of the function and the form adjusts fine on that selection, but I can't figure out how to get the rate to fill in. I haven't had any luck with searching for a similar situation and I have tried a ton of different ways I thought would work, i.e., but so far I have come up with nuthin but errors.

This is what I currently have, which obviously doesn't work:

    <script>
    document.getElementById('MAIN').addEventListener('change', function () {
        var style = this.value == 0 ? 'inline' : 'none';
    		document.getElementById('Labor').style.display = style;
    		blurlaborblur();
    		//document.getElementById('sup').style.display = style;
    	
    		
    	var style = this.value == 1 ? 'inline' : 'none';
        document.getElementById('mateq').style.display = style;
    	
    	var style = this.value == 2 ? 'inline' : 'none';
        document.getElementById('equip').style.display = style;
    	
    	var style = this.value == 3 ? 'inline' : 'none';
        document.getElementById('subq').style.display = style;
    });


    function blurlaborblur(){
    document.getElementById('laborchoices').addEventListener('onblur', function(){
    	var rate = this.value == laborchoices0 ? 'inline' : 'none'; 
    		document.getElementById('value') = '165';

     var rate = this.value == laborchoices1 ? 'inline' : 'none'; 
    		document.getElementById('value') = '95';

    var rate = this.value == laborchoices2 ? 'inline' : 'none'; 
    		document.getElementById('value') = '85';
      }
    </script>
<body>
<div id="T&M" style="display: block;">
	
	<select id="MAIN" name="category">
	   <option value="0">Labor</option>
	   <option value ="1">Materials & Equipment</option>
	   <option value ="2">Equipment</option>
	   <option value ="3">Subcontractor</option>
	</select>

		<div id="Labor" style="display: inline;">
			<select id="laborchoices" name="labor">
				<option value="laborchoices0">Supervisor</option>
				<option value ="laborchoices1">Operator</option>
				<option value ="laborchoices2">Rigger</option>
			</select>
    		
			<div id="sup" style="display: inline;">
				<br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
				MH/Unit: <input type='number' step='0.25' value='2'></input>
				Total MH: <input type='number' step='0.05' value='1'></input><br /><br />
				Rate: $<input id='rate' type='number' step='0.25' placeholder=$rate ></input>				
				Total: $<br /><br />
				Comments: <textarea cols='30' rows='3'></textarea></input>
			</div>
		
			<div id="opr" style="display: none;">
				<br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
				MH/Unit: <input type='number' step='0.25' value='2'></input>
				Total MH: <input type='number' step='0.05' value='1'></input><br /><br />
				Rate: $<input id='rate' type='number' step='0.25' placeholder=$rate ></input>
				Total: $<br /><br />
				Comments: <textarea cols='30' rows='3'></textarea></input>

			</div>
		
			<div id="rig" style="display: none;">
				<br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
				MH/Unit: <input type='number' step='0.25' value='2'></input>
				Total MH: <input type='number' step='0.05' value='1'></input><br /><br />
				Rate: $<input id='rate' type='number' step='0.25' placeholder=$rate ></input>
				Total: $<br /><br />
				Comments: <textarea cols='40' rows='3'></textarea></input>

			</div>
		</div>
				
		<div id="mateq" style="display: none;">
			<select id="choices" name="form_select">
			   <option value="mateqchoices0">Stands</option>
			   <option value ="mateqchoices1">Beams</option>
			   <option value ="mateqchoices2">Mats</option>
			   <option value ="mateqchoices3">Other</option>
			</select>
		
			<div id="stands" style="display: inline;">
				<br /><br />DAYS: <input type='number' step='1' value='0'></input>
				Qty: <input type='number' step='1' value='0'></input><br /><br />
				$/Unit: <input type='number' step='0.05' value='10.00'></input>
				Total: $ <br /><br />
				Description: <textarea cols='40' rows='3'></textarea></input>
			</div>
			
			<div id="beams" style="display: none;">
				<br /><br />DAYS: <input type='number' step='1' value='0'></input>
				Qty: <input type='number' step='1' value='0'></input><br /><br />
				$/Unit: <input type='number' step='0.05' value='10.00'></input>
				Total: $ <br /><br />
				Description: <textarea cols='40' rows='3'></textarea></input>
			</div>
			
			<div id="Mats" style="display: none;">
				<br /><br />DAYS: <input type='number' step='1' value='0'></input>
				Qty: <input type='number' step='1' value='0'></input><br /><br />
				$/Unit: <input type='number' step='0.05' value='10.00'></input>
				Total: $ <br /><br />
				Description: <textarea cols='40' rows='3'></textarea></input>
			</div>			

			<div id="othermateq" style="display: none;">
				<br /><br />DAYS: <input type='number' step='1' value='0'></input>
				Qty: <input type='number' step='1' value='0'></input><br /><br />
				$/Unit: <input type='number' step='0.05' value='10.00'></input>
				Total: $ <br /><br />
				Description: <textarea cols='40' rows='3'></textarea></input>
			</div>	
		</div>

		<div id="equip" style="display: none;">
			<select id="choices" name="form_select">
			   <option value="equipchoices0">Trailer</option>
			   <option value ="equipchoices1">Other</option>
			</select>
		
			<div id="trailer" style="display: inline;">
				<br /><br />DAYS: <input type='number' step='1' value='0'></input>
				Qty: <input type='number' step='1' value='0'></input><br /><br />
				$/Unit: <input type='number' step='0.05' value='10.00'></input>
				Total: $ <br /><br />
				Description: <textarea cols='40' rows='3'></textarea></input>
			</div>			

			<div id="otherequip" style="display: none;">
				<br /><br />DAYS: <input type='number' step='1' value='0'></input>
				Qty: <input type='number' step='1' value='0'></input><br /><br />
				$/Unit: <input type='number' step='0.05' value='10.00'></input>
				Total: $ <br /><br />
				Description: <textarea cols='40' rows='3'></textarea></input>
			</div>	
		</div>
		
		<div id="subq" style="display: none;">
			<select id="choices" name="form_select">
			   <option value="subq0">Per diem</option>
			   <option value ="subq1">Other</option>
			</select>
		
			<div id="perdiem" style="display: inline;">
				<br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
				Rate: <input type='number' step='0.05' value='160.00'></input>
				Total: $ <br /><br />
				Description: <textarea cols='40' rows='3'></textarea></input>
			</div>			

			<div id="othersubq" style="display: none;">
				<br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
				Rate: <input type='number' step='0.05' value='160.00'></input>
				Total: $ <br /><br />
				Description: <textarea cols='40' rows='3'></textarea></input>
			</div>	
		</div>
</div>
</body>


<!-- begin snippet: js hide: false console: true babel: false -->

Upvotes: 4

Views: 3574

Answers (2)

Shoyeb Sheikh
Shoyeb Sheikh

Reputation: 2866

Try this,

if (document.getElementById('MAIN').value == 0)
        document.getElementById('rate1').value = '165'; // set the value if no option is selected, this is the default value. 

    document.getElementById('MAIN').addEventListener('change', function () {
        var style = this.value == 0 ? 'inline' : 'none';
        document.getElementById('Labor').style.display = style;


        var style = this.value == 1 ? 'inline' : 'none';
        document.getElementById('mateq').style.display = style;

        var style = this.value == 2 ? 'inline' : 'none';
        document.getElementById('equip').style.display = style;

        var style = this.value == 3 ? 'inline' : 'none';
        document.getElementById('subq').style.display = style;
    });


    // second dropdown change event rather than onblur, and dont wrap events in a function

    document.getElementById('laborchoices').addEventListener('change', function () {

        // use switch statement if you have to choose one out of multiple options;
        switch (this.value) {
            case 'laborchoices0':
                document.getElementById('rate1').value = '165';
                document.getElementById('sup').style.display = 'block';
                document.getElementById('opr').style.display = 'none';
                document.getElementById('rig').style.display = 'none';
                break;
            case 'laborchoices1':
                document.getElementById('rate2').value = '95';
                document.getElementById('sup').style.display = 'none';
                document.getElementById('opr').style.display = 'block';
                document.getElementById('rig').style.display = 'none';
                break;
            case 'laborchoices2':
                document.getElementById('rate3').value = '85';
                document.getElementById('sup').style.display = 'none';
                document.getElementById('opr').style.display = 'none';
                document.getElementById('rig').style.display = 'block';
        }
    });
<body>
    <div id="T&M" style="display: block;">

        <select id="MAIN" name="category">
            <option value="0">Labor</option>
            <option value ="1">Materials & Equipment</option>
            <option value ="2">Equipment</option>
            <option value ="3">Subcontractor</option>
        </select>

        <div id="Labor" style="display: inline;">
            <select id="laborchoices" name="labor">
                <option value="laborchoices0">Supervisor</option>
                <option value ="laborchoices1">Operator</option>
                <option value ="laborchoices2">Rigger</option>
            </select>

            <div id="sup" style="display: inline;">
                <br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
                MH/Unit: <input type='number' step='0.25' value='2'></input>
                Total MH: <input type='number' step='0.05' value='1'></input><br /><br />
                Rate: $<input id='rate1' type='number' step='0.25' placeholder=$rate ></input>				
                Total: $<br /><br />
                Comments: <textarea cols='30' rows='3'></textarea></input>
            </div>

            <div id="opr" style="display: none;">
                <br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
                MH/Unit: <input type='number' step='0.25' value='2'></input>
                Total MH: <input type='number' step='0.05' value='1'></input><br /><br />
                Rate: $<input id='rate2' type='number' step='0.25' placeholder=$rate ></input>
                Total: $<br /><br />
                Comments: <textarea cols='30' rows='3'></textarea></input>

            </div>

            <div id="rig" style="display: none;">
                <br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
                MH/Unit: <input type='number' step='0.25' value='2'></input>
                Total MH: <input type='number' step='0.05' value='1'></input><br /><br />
                Rate: $<input id='rate3' type='number' step='0.25' placeholder=$rate ></input>
                Total: $<br /><br />
                Comments: <textarea cols='40' rows='3'></textarea></input>

            </div>
        </div>

        <div id="mateq" style="display: none;">
            <select id="choices1" name="form_select">
                <option value="mateqchoices0">Stands</option>
                <option value ="mateqchoices1">Beams</option>
                <option value ="mateqchoices2">Mats</option>
                <option value ="mateqchoices3">Other</option>
            </select>

            <div id="stands" style="display: inline;">
                <br /><br />DAYS: <input type='number' step='1' value='0'></input>
                Qty: <input type='number' step='1' value='0'></input><br /><br />
                $/Unit: <input type='number' step='0.05' value='10.00'></input>
                Total: $ <br /><br />
                Description: <textarea cols='40' rows='3'></textarea></input>
            </div>

            <div id="beams" style="display: none;">
                <br /><br />DAYS: <input type='number' step='1' value='0'></input>
                Qty: <input type='number' step='1' value='0'></input><br /><br />
                $/Unit: <input type='number' step='0.05' value='10.00'></input>
                Total: $ <br /><br />
                Description: <textarea cols='40' rows='3'></textarea></input>
            </div>

            <div id="Mats" style="display: none;">
                <br /><br />DAYS: <input type='number' step='1' value='0'></input>
                Qty: <input type='number' step='1' value='0'></input><br /><br />
                $/Unit: <input type='number' step='0.05' value='10.00'></input>
                Total: $ <br /><br />
                Description: <textarea cols='40' rows='3'></textarea></input>
            </div>			

            <div id="othermateq" style="display: none;">
                <br /><br />DAYS: <input type='number' step='1' value='0'></input>
                Qty: <input type='number' step='1' value='0'></input><br /><br />
                $/Unit: <input type='number' step='0.05' value='10.00'></input>
                Total: $ <br /><br />
                Description: <textarea cols='40' rows='3'></textarea></input>
            </div>	
        </div>

        <div id="equip" style="display: none;">
            <select id="choices2" name="form_select">
                <option value="equipchoices0">Trailer</option>
                <option value ="equipchoices1">Other</option>
            </select>

            <div id="trailer" style="display: inline;">
                <br /><br />DAYS: <input type='number' step='1' value='0'></input>
                Qty: <input type='number' step='1' value='0'></input><br /><br />
                $/Unit: <input type='number' step='0.05' value='10.00'></input>
                Total: $ <br /><br />
                Description: <textarea cols='40' rows='3'></textarea></input>
            </div>			

            <div id="otherequip" style="display: none;">
                <br /><br />DAYS: <input type='number' step='1' value='0'></input>
                Qty: <input type='number' step='1' value='0'></input><br /><br />
                $/Unit: <input type='number' step='0.05' value='10.00'></input>
                Total: $ <br /><br />
                Description: <textarea cols='40' rows='3'></textarea></input>
            </div>	
        </div>

        <div id="subq" style="display: none;">
            <select id="choices3" name="form_select">
                <option value="subq0">Per diem</option>
                <option value ="subq1">Other</option>
            </select>

            <div id="perdiem" style="display: inline;">
                <br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
                Rate: <input type='number' step='0.05' value='160.00'></input>
                Total: $ <br /><br />
                Description: <textarea cols='40' rows='3'></textarea></input>
            </div>			

            <div id="othersubq" style="display: none;">
                <br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
                Rate: <input type='number' step='0.05' value='160.00'></input>
                Total: $ <br /><br />
                Description: <textarea cols='40' rows='3'></textarea></input>
            </div>	
        </div>
    </div>
</body>

I have commented out some changes in js.

Note:- You had few input elements that had same id names i.e "rate" and "choices", I changed the ids of those html inputs because it violates the html standards. Changed a bit of js as well.

Upvotes: 2

Mister Jojo
Mister Jojo

Reputation: 22320

so, I propose to use array structure SelStruct

id="T&M" is invalid => changed to id="T-M" and elsewhere some Id are not unique, so i changed them

const
  MainSelect = document.getElementById('MAIN'),
  SelStruct = [
    { ref : "Labor", subs : [ 'sup', 'opr', 'rig' ] },
    { ref : "mateq", subs : [ 'stands', 'beams', 'Mats', 'othermateq' ] },
    { ref : "equip", subs : [ 'trailer', 'otherequip' ] },
    { ref : "subq",  subs : [ 'perdiem', 'othersubq' ] }
    ]
  ;

function SetSelectMain()
{
  let ref_Select = MainSelect.selectedIndex;
  for (let i=0; i<SelStruct.length; i++ )
  {
    document.getElementById(SelStruct[i].ref).style.display = (ref_Select===i) ? 'inline' : 'none';
  }
}


SetSelectMain();  // first attempt

MainSelect.onchange = SetSelectMain;

// init all Sub Select event Listerner

for (let i=0; i<SelStruct.length; i++ )
{
  let  id_subSelect = 'choices-' + SelStruct[i].ref;

  for( let sx=0;sx<SelStruct[i].subs.length; sx++)
  {
    document.getElementById(SelStruct[i].subs[sx]).style.display = (sx===0) ? 'inline' : 'none';
  }

  document.getElementById(id_subSelect).addEventListener('change', function()
  {
    let
      ref_subSelect = this.id.substr(8),  // ignore string 'choice-'
      s_elem = SelStruct.find( function(elem){ return (elem.ref===ref_subSelect)})
    ;
    for( sb = 0; sb < s_elem.subs.length; sb++)
    {
      document.getElementById(s_elem.subs[sb]).style.display = (this.selectedIndex===sb) ? 'inline' : 'none';
    }
  })

}




/*
I don't know what to do with this ..

document.getElementById('value') = '165';

document.getElementById('value') = '95';

document.getElementById('value') = '85';

*/
#T-M { display: block; }
    #T-M > div,
    #T-M > div > div { display: none; }
<div id="T-M" >

  <select id="MAIN" name="category">
    <option>Labor</option>
    <option>Materials & Equipment</option>
    <option>Equipment</option>
    <option>Subcontractor</option>
  </select>

  <div id="Labor" >
    <select id="choices-Labor">
      <option>Supervisor</option>
      <option>Operator</option>
      <option>Rigger</option>
    </select>

    <div id="sup">
      <br /><br />
      Qty:      <input type='number' step='0.25' value='1'> EA <br /><br />
      MH/Unit:  <input type='number' step='0.25' value='2'>
      Total MH: <input type='number' step='0.05' value='1'><br /><br />
      Rate: $   <input type='number' step='0.25' >
      Total: $  <br /><br />
      Comments: <textarea cols='30' rows='3'></textarea>
    </div>

    <div id="opr">
      <br /><br />
      Qty:      <input type='number' step='0.25' value='1'> EA <br /><br />
      MH/Unit:  <input type='number' step='0.25' value='2'>
      Total MH: <input type='number' step='0.05' value='1'><br /><br />
      Rate: $   <input type='number' step='0.25' >
      Total: $  <br /><br />
      Comments: <textarea cols='30' rows='3'></textarea>

    </div>

    <div id="rig">
      <br /><br />
      Qty:      <input type='number' step='0.25' value='1'> EA <br /><br />
      MH/Unit:  <input type='number' step='0.25' value='2'>
      Total MH: <input type='number' step='0.05' value='1'><br /><br />
      Rate: $   <input type='number' step='0.25' >
      Total: $   <br /><br />
      Comments: <textarea cols='40' rows='3'></textarea>

    </div>
  </div>

  <div id="mateq" >
    <select id="choices-mateq">
      <option>Stands</option>
      <option>Beams</option>
      <option>Mats</option>
      <option>Other</option>
    </select>

    <div id="stands">
      <br /><br />
      DAYS:    <input type='number' step='1' value='0'>
      Qty:     <input type='number' step='1' value='0'><br /><br />
      $/Unit:  <input type='number' step='0.05' value='10.00'>
      Total: $ <br /><br />
      Description: <textarea cols='40' rows='3'></textarea>
    </div>

    <div id="beams">
      <br /><br />
      DAYS:    <input type='number' step='1' value='0'>
      Qty:     <input type='number' step='1' value='0'><br /><br />
      $/Unit:  <input type='number' step='0.05' value='10.00'>
      Total: $ <br /><br />
      Description: <textarea cols='40' rows='3'></textarea>
    </div>

    <div id="Mats">
      <br /><br />
      DAYS:   <input type='number' step='1' value='0'>
      Qty:    <input type='number' step='1' value='0'><br /><br />
      $/Unit: <input type='number' step='0.05' value='10.00'>
      Total: $ <br /><br />
      Description: <textarea cols='40' rows='3'></textarea>
    </div>

    <div id="othermateq">
      <br /><br />
      DAYS:    <input type='number' step='1' value='0'>
      Qty:     <input type='number' step='1' value='0'><br /><br />
      $/Unit:  <input type='number' step='0.05' value='10.00'>
      Total: $ <br /><br />
      Description: <textarea cols='40' rows='3'></textarea>
    </div>
  </div>

  <div id="equip" >
    <select id="choices-equip" >
      <option>Trailer</option>
      <option>Other</option>
    </select>

    <div id="trailer">
      <br /><br />
      DAYS:    <input type='number' step='1' value='0'>
      Qty:     <input type='number' step='1' value='0'><br /><br />
      $/Unit:  <input type='number' step='0.05' value='10.00'>
      Total: $ <br /><br />
      Description: <textarea cols='40' rows='3'></textarea>
    </div>

    <div id="otherequip">
      <br /><br />
      DAYS:    <input type='number' step='1' value='0'>
      Qty:     <input type='number' step='1' value='0'><br /><br />
      $/Unit:  <input type='number' step='0.05' value='10.00'>
      Total: $ <br /><br />
      Description: <textarea cols='40' rows='3'></textarea>
    </div>
  </div>

  <div id="subq" >
    <select id="choices-subq">
      <option>Per diem</option>
      <option>Other</option>
    </select>

    <div id="perdiem">
      <br /><br />
      Qty:    <input type='number' step='0.25' value='1'> EA <br /><br />
      Rate:   <input type='number' step='0.05' value='160.00'>
      Total: $ <br /><br />
      Description: <textarea cols='40' rows='3'></textarea>
    </div>

    <div id="othersubq">
      <br /><br />
      Qty:    <input type='number' step='0.25' value='1'> EA <br /><br />
      Rate:   <input type='number' step='0.05' value='160.00'>
      Total: $ <br /><br />
      Description: <textarea cols='40' rows='3'></textarea>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions