0

I am trying to detect if an HTML FORM in a web page contains ComboBox or List. . I could detect all the rest and here are my efforts so far. As you can see, the ComboBox is not detected. I understand its not an input control. Is there any other way to do this?

MY SAMPLE CODE:

<html>
<head>
<script language="javascript" type="text/javascript">
function detectTypes() {
  var str = document.getElementById("Select1").value;
  var inputs = document.querySelectorAll('input');
    var inputtype = document.getElementsByTagName ("input");
      for(i =0; i < inputs.length; i++)
      {
    //Output result to console
    console.log("The " + i + ". input type = " + inputs[i].type);
    //Output result to multiline textbox
    var s = inputs[i].type;
        document.getElementById('output').value += s.substring(s.length - 10) + '\n';
      }
}
</script>
</head>
<body>
<form name="form1" id="form1" method="">
  <p>
  <label>TextBox </label>
    <input type="text" id="Name">
  </p>
  <p>
  <label>Password</label>
   <input type="password" id=phone>
  </p>
<p>
    <label>Dropdown Comobox</label>
    <select name="Options" id="Select1">
      <option value="Jack,12345">Jack</option>
      <option value="John,45678">John</option>
      <option value="Tom,98765">Tom</option>
    </select>
  </p>
  <P>
  <label>CheckBox</label>
<input type="checkbox" id="check1">

<p>
<label>Radio Button</label>
<input type="radio" id="Option1" name="Option1" value="">

<p>
<label>Color Box</label>
<input type="color" name="ColorCode" id="color-picker">

</form>
<a href="#" onClick="detectTypes();">Click to List types of controls</a>
<p>
<label>RESULT:</label>
 <textarea name="output" id="output" rows="7" cols="30"></textarea>
 </p>
</body>
</html>
JamesT
  • 93
  • 1
  • 13
  • It is because you are only querying for `input` tags. Comobox uses a `select` tag. – TechySharnav May 29 '21 at 10:49
  • 1
    use multi selector. `var inputs = document.querySelectorAll('input,select');` ?? – 4b0 May 29 '21 at 11:33
  • 1
    Does this answer your question? [querySelectorAll with multiple conditions](https://stackoverflow.com/questions/34001917/queryselectorall-with-multiple-conditions) – 4b0 May 29 '21 at 13:43

1 Answers1

0

I would praise your work becse it is very creative

I have solved your problem

<html>
<body>
<form name="form1" id="form1" method="">
  <p>
  <label>TextBox </label>
    <input type="text" id="Name">
  </p>
  <p>
  <label >Password</label>
   <input type="password" id="phone">
  </p>
<p>
    <label>Dropdown Comobox</label>
    <select name="Options" id="Select1">
      <option value="Jack,12345">Jack</option>
      <option value="John,45678">John</option>
      <option value="Tom,98765">Tom</option>
    </select>
    <input type="hidden">
  </p>
  <P>
  <label>CheckBox</label>
<input type="checkbox" id="check1">

<p>
<label>Radio Button</label>
<input type="radio" id="Option1" name="Option1" value="">

<p>
<label>Color Box</label>
<input type="color" name="ColorCode" id="color-picker">

</form>
<a href="#" onClick="detectTypes();">Click to List types of controls</a>
<p>
<label>RESULT:</label>
 <textarea name="output" id="output" rows="7" cols="30"></textarea>
 </p>
</body>
</html>

/*
//* user script
function detectTypes() {
  //var str = document.getElementById("Select1").value;
  var inputs = document.querySelectorAll('input');
      var inputtype = document.getElementsByTagName("input");
      for(i =0; i < inputs.length; i++)
      {
    //Output result to console
    //console.log("The " + i + ". input type = " + inputs[i].type);
    //Output result to multiline textbox
    var s = inputs[i].type;
    document.getElementById('output').value += s.substring(s.length - 10) + '\n'  ;
      }
} */
function detectTypes(){
    // const inputtype = { "'SELECT'" : 'Dropdown' , 'OPTION' : 'Combo Box'} // I wish, it would work as alert(inputtype.SELECT) will show deopdown
    var inputs = document.querySelectorAll("input, select");
    var s = "hi";
    for(i=0;i<=inputs.length;i++){
        var tagnames = inputs[i].tagName;
        if(tagnames == "INPUT"){
            document.getElementById('output').value += inputs[i].type + '\n';
        }else{
            document.getElementById('output').value += tagnames.toLowerCase() + '\n';
        }
    }
}
setTimeout(detectTypes, 1);

I would be glad if you contact. I have to discuss further about this problem. Contact me libertmahin@gmail.com

Liberty
  • 1
  • 3