JSFiddle - React, Tailwind, and code Playground

by adam smth

HTML

<form name='mform' >
    <select id="ops" onChange="myfunction(this.value);">
    <option>PIck item </option>
    <option value="pepsi">pepsi</option>
    <option value="coke">coke</option>
    <option value="fanta">Fanta</option>
    </select><br><br>
    <label id="lb" style="display:none" >Qty</label>
    <input type="text" name='qtytext' id="text" style="display:none" onFocus="myfun2()" onkeypress="return isNumber(event)"/ >

    <label id="lb1" style="display:none" >.....Before proceeding, Make sure that form is properly filled.....</label>
    <input type="submit" onClick="return validate()" name='btn' id='btn1' value="Submit" style='display:none' /> <br>

    </form>

<script>
    function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
    }
    function validate(){
    var text1 = document.getElementById('text').value;
    
    if (text1.length > 0){
        alert("working");
        return true;
    }

    alert("please enter something");
    return false;
    }
           function myfunction(val)
        {
                var x=document.getElementById('ops');
                var y=document.getElementById('text');
                var z=document.getElementById('lb');
                //if(val='pepsi')
                {   
                    z.style.display = "block";
                    y.style.display = "Inline";
                }
                }
                function myfun2()
                {
                var c=document.getElementById("lb1");
                var b=document.getElementById("btn1");
                b.style.display="block";
                c.style.display="block"
                }
</script>