javascript - Delete Result input if both values from other inputs are not in it -

please edit title if have better. couldn't think of way this. in short, have 2 form field values going resultcell element.

this works, need delete result text if doesn't have both values of cellinput , cellselection in it.

any appreciated.

html

<input type='text' id='cellinput'/> <select id='cellselection'>  <option value='@tmomail.next'>tmobile</option>  <option value='@vzwireless.com'>verizon</option> </select> <input type='text' id='resultcell'> 

javascript

 var cellin = document.getelementbyid('cellinput');  var dropdown = document.getelementbyid('cellselection');  var textbook = document.getelementbyid('resultcell');  dropdown.addeventlistener('change', function(){                            textbook.value = cellin.value + dropdown.value;                           }); 

you need check length of input , ensure isn't 0 before produce result. since dropdown has statically set values, don't need worry it.

also, if intend math 2 inputted values, you'll have parse numbers inputs (with parseint() and/or parsefloat()) because data strings in html. if don't this, you'll concatenation, instead of addition.

lastly, result cell input element, that's not necessary if want display result. in fact, it's better not input because disallows user changing it.

var cellin = document.getelementbyid('cellinput');  var dropdown = document.getelementbyid('cellselection');  var textbook = document.getelementbyid('resultcell');     dropdown.addeventlistener('change', function(){          // reset result area     textbook.textcontent = "";       // call trim on text fields remove accidentally added     // leading or trailing spaces. once trimmed, can check     // length of result , if greater 0, there input.     var val1 = cellin.value.trim();       if(val1.length > 0){       textbook.textcontent = val1 + dropdown.value;     }   });

#resultcell {    border:1px solid grey;    background-color:#e0e0e0;    display:inline-block;    width:250px;    height:1em;    vertical-align:bottom;    padding:2px;  }

<input type='text' id='cellinput'/>  <select id='cellselection'>   <option value='@tmomail.next'>tmobile</option>   <option value='@vzwireless.com'>verizon</option>  </select>  <span id='resultcell'></span>

but, better user experience enable drop down when first input field contains data. it's better prevent user doing wrong thing, rather fixing ui respond when user wrong thing.

var cellin = document.getelementbyid('cellinput');  var dropdown = document.getelementbyid('cellselection');  var textbook = document.getelementbyid('resultcell');     dropdown.addeventlistener('change', function(){          // reset result area     textbook.textcontent = "";       // call trim on text fields remove accidentally added     // leading or trailing spaces. once trimmed, can check     // length of result , if greater 0, there input.     var val1 = cellin.value.trim();       if(val1.length > 0){       textbook.textcontent = val1 + dropdown.value;     }   });    // enable/disable dropdown based on whether input has data  cellin.addeventlistener("input", function(){     // reset result area     textbook.textcontent = "";      dropdown.disabled = this.value ? false : true;  });

#resultcell {    border:1px solid grey;    background-color:#e0e0e0;    display:inline-block;    width:250px;    height:1em;    vertical-align:bottom;    padding:2px;  }

<input type='text' id='cellinput'>  <select id='cellselection' disabled="disabled">   <option value='@tmomail.next'>tmobile</option>   <option value='@vzwireless.com'>verizon</option>  </select>  <span id='resultcell'></span>