alert for dropdown list

[s_avinash_s]

Hi

I can able to alert the user whenever the text box is empty.

But i also need user to select dropdown list,m if not selected i need to alert to select.

How can i do it.

Please find my code .

<div id="MassFlowRate" class="tabcontent2">
                <br><br>	

    
    <form action="/massflow.txt"  id="myForm" name="myForm" method="post"  autocomplete="off" onsubmit="return massflow(event)" >
    
    <label for="MassFlowUnitSelection">Mass Flow Unit Selection</label>
                                <br>
                            <select id='opts' name='Selectunit' onchange="showForm1()">
                                
                                <option value="-1">Select Option</option>
                                <option value="0">SI units</option>
                                <option value="20">US units</option>
                            </select>

                            <div id="f1" style="display:none">  
                                    <select id='opt1' name='SIunits' onchange="showForm1()">
                                                    <option >Select Option</option>
                                                    <option value="0">G/Sec</option>
                                                    <option value="1">G/min</option>
                                                    <option value="2">G/hr</option>
                                                    <option value="3">G/day</option>
                                                    
                                     </select>   
                            </div>

                            <div id="f2" style="display:none">    
                                    <select id='opt2' name='USUnits' onchange="showForm1()">
                                                    <option >Select Option</option>
                                                    <option value="0">Lbs/Sec</option>
                                                    <option value="1">Lbs/min</option>
                                   </select>       

                            </div>
  
    
  <div>
    <label for="MassFlowDamping">Mass Flow Damping</label>
    <input type="text" id="MassFlowDamping" name="jq">
  </div>
  <div>
    <label for="MassFlowCutoff">Mass Flow Cutoff</label>
    <input type="text" id="useracc" name="jjq">
  </div>
  
    <div>
    <label for="MassLinenumber">Mass Line number</label>
    <input type="text" id="MassLinenumber" name="jqq">
  </div>
  <div>
    <label for="MassDecimalPlaces">Mass Decimal Places</label>
    <input type="text" id="MassDecimalPlaces" name="ojq">
  </div>

<input type="submit"  value="Submit!">
</form>
  
    <script>
    function massflow(e) {
        var w = document.forms["myForm"]["jq"].value;
        var x = document.forms["myForm"]["jjq"].value;
        var y = document.forms["myForm"]["jqq"].value;
        var z = document.forms["myForm"]["ojq"].value;
    if (w == "") {
        alert("1Name must be filled out");
        return false;
    }
        if (x == "") {
        alert("2Name must be filled out");
        return false;
    }
        if (y == "") {
        alert("3Name must be filled out");
        return false;
    }
        if (z == "") {
        alert("4Name must be filled out");
        return false;
    }
    e.preventDefault();
    var myForm  = document.getElementById('myForm');
    formData = new FormData(myForm);
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("myForm").innerHTML = this.responseText;
        }
      };
      xhttp.open("POST", "ind",true);
    
      xhttp.send(formData);  
      return true;
    }

                                function showForm1() {
                                    var selopt = document.getElementById("opts").value;
                                    if (selopt == 0) {
                                        document.getElementById("f1").style.display = "block";
                                        document.getElementById("f2").style.display = "none";
                                        <!--document.getElementById("opt2").disabled = true;-->
                                    
                                        
                                    }
                                    if (selopt == 20) {
                                        document.getElementById("f2").style.display = "block";
                                        document.getElementById("f1").style.display = "none";
                                        <!--document.getElementById("opt1").disabled = true;-->
                                    }
                                    if (selopt == -1) {
                                        document.getElementById("f2").style.display = "none";
                                        document.getElementById("f1").style.display = "none";
                                    }
                                }
                                
                function myFunction() {
    document.getElementById("myForm").addEventListener("submit", function(submit){
    submit.preventDefault()
});
}

Please suggest how to proceed

[JMRKER]

Instead of using "alert"s everywhere, which will get verrrry frustrating,
why not make the background of the element a color of warning (perhaps red or pink)
until the elements has an acceptable response?  Or put within a bordered element until filled?

 

[Funce]

I'm hoping this is a snippet, I couldn't get this to run originally, but you said you could so no matter.

 

Try adding a value to the Select Option, and then check if that is the option currently selected.

<select id='opt2' name='USUnits' onchange="showForm1()">
  <option value="">Select Option</option>
  <option value="0">Lbs/Sec</option>
  <option value="1">Lbs/min</option>
</select>

Then it would be as simple as

var v = document.forms["myForm"]["USUnits"].value;
if (v == "") {
  alert("SMass flow unit selection must be selected");
  return false;
}

 

I highly recommend you use more descriptive variable and field names. It was a little hard impossible to follow the jq, jjq, jqq, ojq, and what they meant without checking the definitions of them.

Edited September 19, 2018 by Funce

[dsonesuk]

Gosh! you and rizwansyed must be working with identical school exercise book,  both working with a circuit board, communicating with server and file on sd card, and now same identical form inputs requiring the SAME effect on selection, must be biggest coincidence in the whole milky way galaxy. hmmm 

Also you could use  required attribute that will give a warning that selection is required if first option has empty value.

Edited September 19, 2018 by dsonesuk

[s_avinash_s]

Hi 

I used as suggested by Funce

var v = document.forms["myForm"]["USUnits"].value;
if (v == "") {
  alert("SMass flow unit selection must be selected");
  return false;
}

In this case when i select SI units or US units, They are not showing other drop down list.

I can only see first drop down list not second one.

Attached are the images.

"Actual" image is what i needed.i .e first image

"not working case" image  is not expanding(second image)

Edited September 20, 2018 by s_avinash_s

[dsonesuk]

You say you used it! but! don't show us where? if it not placed correctly it could throw an error preventing anything from working, image on its own is useless.

[Funce]

14 hours ago, s_avinash_s said:

I used as suggested by Funce

var v = document.forms["myForm"]["USUnits"].value;
if (v == "") {
  alert("SMass flow unit selection must be selected");
  return false;
}

In this case when i select SI units or US units, They are not showing other drop down list.

I can only see first drop down list not second one.

Is this a new requirement?

If not, I apologise for misunderstanding.

What you'll need to do is bind an `onchange` event to a function which:

• Checks the value of `v` (used in my example)
• If its not "(empty)" then show the other dropdown list.

Edited September 20, 2018 by Funce

[dsonesuk]

I don't know why you have onchange="showForm1()" on all the select dropdown, the top select element determines what shows and never changes, even when the function is run from the onchange event on the others. 

The reason the disabled is used, is when someone selects value from either of the other two dropdowns, and then changes their mind to show the other and select a value from that! The previous selected value is live to send when the form is submitted, by disabling  it the value will never be sent.

You also need to identify which dropdown is required for validation, as how i see it, only one should used at a given time, if you validate both! one will always fail because its default value equals "", you either have to identify if its parent div is 'display: block' to validate its child select dropdown, or if the disable on select was still used, if disabled == false.

[s_avinash_s]

Hi

Now I keptonchange="showForm1()"  only to Selkect Unit case and removed to other cases.

12 hours ago, Funce said:

If its not "(empty)" then show the other dropdown list.

This am not getting how to do it.

 

11 hours ago, dsonesuk said:

you either have to identify if its parent div is 'display: block' to validate its child select dropdown, or if the disable on select was still used, if disabled == false.

I am not understanding it.

Please share any example

[dsonesuk]

Both dropdown default values are "".

You choose a specific dropdown from the two that are available from main (top 'opts').

When the form is submitted, you validate the value is not equal to "", from both? the chosen dropdown could not equal to "", BUT! the non-chosen/hidden dropdown will always be the default value of "", which will cause a return of false; which means submission won't take place.

You require a validation of the chosen/visible dropdown ONLY! The way to identity the chosen dropdown is to identify if parentNode div that wraps round the dropdown is visible (using display: block) , if true validate the input within it only, and bypass the hidden input whose value will equal "";

Alternatively you can use the disable dropdown code that you commented out, that disables the non-chosen/hidden dropdown, to check if dropdown is NOT disabled, then only validate that dropdown only!