Causing Form To Submit OnChange

 <select name="MySelectBox" onchange="this.form.submit()">

Call function when selection changed

<select id="MySelectBox" onchange="MySelectBoxChanged()">
  <option value="0">ABC</option>
  <option value="1">DEF</option>
  <option value="3">HIJ</option>
</select>


<script>
  function MySelectBoxChanged() {
    console.log(document.getElementById('MySelectBox').value);
  }

  //Call it also when page loads
  window.onload = function() {
    MySelectBoxChanged();
  };
</script>

Which item is selected?

if (document.getElementById('MySelectBoxId').selectedIndex > 0)
{
}

Show / Hide page elements depending on Select box item chosen

PHP
  $MySelectBoxDisplayFormatArray_Html = "const MySelectBoxDisplayFormatArray = []; ";
  
  $Index = 0;
  foreach ($MyReadReadAllThings as $Result)
  {
    $MySelectBoxDisplayFormatArray_Html .= "MySelectBoxDisplayFormatArray[$Index]= \"my_dislay_state2\"; ";
    $Index++;
  }
Javascript
<script>
  function PopulateCategoryType() {
    var ListCategoryId = parseInt(document.getElementById('SelectCategory').value)
    $MySelectBoxDisplayFormatArray_Html


    //Default to display all fields
    var DisplayState_Name = "block";
    var DisplayState_Text = "block";
    var DisplayState_Image = "block";

    //If we know the display type for this category hide fields not used
    if(typeof MySelectBoxDisplayFormatArray[ListCategoryId] !== 'undefined')
    {
      switch (MySelectBoxDisplayFormatArray[ListCategoryId])
      {
        case 'my_dislay_state0':
          DisplayState_Name = "none";
          DisplayState_Text = "none";
          DisplayState_Image = "none";
          break;

        case 'my_dislay_state1':
          //DisplayState_Name = "none";
          DisplayState_Text = "none";
          //DisplayState_Image = "none";
          break;

        case 'my_dislay_state2':
          DisplayState_Name = "none";
          //DisplayState_Text = "none";
          //DisplayState_Image = "none";
          break;

        default:
          //DisplayState_Name = "none";
          //DisplayState_Text = "none";
          //DisplayState_Image = "none";
          break;
      }
    }

    //Show/hide the fields
    document.getElementById("MyPageDivId_Name").style.display = DisplayState_Name;
    document.getElementById("MyPageDivId_Text").style.display = DisplayState_Text;
    document.getElementById("MyPageDivId_Image").style.display = DisplayState_Image;

  }
  //Call it also when page loads
  window.onload = function() {
    PopulateCategoryType();
  };
</script>
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.

Comments

Your email address will not be published. Required fields are marked *