How Validate TextBox based on DropDownList selection - JavaScript

Question

I'm trying validate TextBox based on DropDownList selection , which means if user select E-mail or SMS or both from DropDownList it display TextBoxs based what user selected.lets say their select E-mail and it display a textbox to user enter their E-mail and lets say their forgot to Enter E-mail adresse (left it empty) and then click button , here i want display alert ("you forgot enter you email").

For this i did as below , but the problem is when user select E-mail from dropdown it display alert, which i dont wish for, i want when user selected E-mail from DDL , it display a textbox and if textbox is empty display alert(), so what did i wrong ! Can anyone please help me or point me in the right direction! :)
Thanks in advance.

HTML:

        <div class="col-md-6">
            <div class="form-group">
                <select class="form-control border-input" id="ddlsmsemailboth" name="ddlsmsemailboth">
                    <option value="">- Select -</option>
                    <option value="S">SMS</option>
                    <option value="M">E-mail</option>
                    <option value="B">SMS/Email</option>
                </select>
                <div id="dvkemail" style="display: none">
                    <label class="form-control-label">Enter E-mail</label>
                    <input name="EmailContact" id="EmailContact" type="text" class="form-control border-input">
                </div>
                <div id="dvksms" style="display: none">
                    <label class="form-control-label">Enter phone number </label>
                    <input name="Telefonnummer" id="Telefonnummer" type="tel" placeholder="4512345678" class="form-control border-input">
                </div>
                <div id="dvkboth" style="display: none">
                    <label class="form-control-label">Enter phone number </label>
                    <input name="Telefonnummer" id="Telefonnummer" type="tel" placeholder="4512345678" class="form-control border-input">
                    <label class="form-control-label">Enter E-mail</label>
                    <input name="EmailContact" id="EmailContact" type="text" class="form-control border-input">

         <button id="btnSubmitRMA" type="submit" class="btn">Submit</button>

                </div>
            </div>
        </div>

JavaScript:

 $("#btnSubmitRMA").click(function (e) {
                e.preventDefault();
                RMAfunction();
            });

function RMAfunction() {
      $("#ddlsmsemailboth").change(function () {
                    if ($(this).val() == "M") {   
                        if ($('input[name=EmailContact]').val() == "") {
                            alert("Empty");
                            return false;
                        }
                    } 
            });
      });

JavaScript (for hide/show texbox based on dropdown selected value):

 $(function () {

    $("#ddlsmsemailboth").change(function () {
        if ($(this).val() == "S") {
            $("#dvksms").show();
            $("#dvkemail").hide();
            $("#dvkboth").hide();
        }

        else if ($(this).val() == "M") {
            $("#dvkemail").show();        
            $("#dvksms").hide();
            $("#dvkboth").hide();
        }

       else if ($(this).val() == "B") {
            $("#dvkboth").show();
            $("#dvkemail").hide();
            $("#dvksms").hide();                
        }

        else {
            $("#dvkboth").hide();
            $("#dvkemail").hide();
            $("#dvksms").hide();
        }

    });
});

Let us know what exactly you want to do? This piece of code if ($(this).val() == "M") { if ($('input[name=EmailContact]').val() == "") { alert("Empty"); return false; } } checks if the selected value is "M" ie Email has value or not. Since no value is present, the Alert comes — M3ghana
– M3ghana, Commented Sep 4, 2018 at 8:31
@M3ghana Yes , when i selected E-mail from DDL , it display a textbox and if textbox is empty display alert(); — The First
– The First, Commented Sep 4, 2018 at 8:37

M3ghana · Accepted Answer · 2018-09-04 08:40:44Z

Try this -

Attach the button with click event -

HTML

<!DOCTYPE html>
<HTML>
    <HEAD>
    </HEAD>
    <BODY>
        <div class="col-md-6">
            <div class="form-group">
                <select class="form-control border-input" id="ddlsmsemailboth" name="ddlsmsemailboth">
                    <option value="">- Select -</option>
                    <option value="S">SMS</option>
                    <option value="M">E-mail</option>
                    <option value="B">SMS/Email</option>
                </select>
                <div id="dvkemail" style="display: none">
                    <label class="form-control-label">Enter E-mail</label>
                    <input name="EmailContact" id="EmailContact" type="text" class="form-control border-input">
                </div>
                <div id="dvksms" style="display: none">
                    <label class="form-control-label">Enter phone number </label>
                    <input name="Telefonnummer" id="Telefonnummer" type="tel" placeholder="4512345678" class="form-control border-input">
                </div>
                <div id="dvkboth" style="display: none">
                    <label class="form-control-label">Enter phone number </label>
                    <input name="Telefonnummer" id="Telefonnummer" type="tel" placeholder="4512345678" class="form-control border-input">
                    <label class="form-control-label">Enter E-mail</label>
                    <input name="EmailContact" id="EmailContact" type="text" class="form-control border-input">
                </div>
         <button id="btnSubmitRMA" type="submit" class="btn">Submit</button>

            </div>
        </div> 
    </BODY>
</HTML>

JS

Click function is triggered on click of the button

$(document).ready(function ()
{
       $("#btnSubmitRMA").click(function (e) {
                e.preventDefault();
            });

      $("#btnSubmitRMA").click(function () {
                    if ($("#ddlsmsemailboth").val() == "M") {   
                        if ($('input[name=EmailContact]').val() == "") {
                            alert("Empty");
                            return false;
                        }
                    } 
            });

$(function () {

    $("#ddlsmsemailboth").change(function () {
        if ($(this).val() == "S") {
            $("#dvksms").show();
            $("#dvkemail").hide();
            $("#dvkboth").hide();
        }

        else if ($(this).val() == "M") {
            $("#dvkemail").show();        
            $("#dvksms").hide();
            $("#dvkboth").hide();
        }

       else if ($(this).val() == "B") {
            $("#dvkboth").show();
            $("#dvkemail").hide();
            $("#dvksms").hide();                
        }

        else {
            $("#dvkboth").hide();
            $("#dvkemail").hide();
            $("#dvksms").hide();
        }

    });
});
});

Hi friend , the coming another guy before u and give right answer:) , but your answer was helpful and useful i want to mark as useful answer, but i dont have enough reputation as soon i get , i will mark it as useful answer , i hope its ok :) have great day :)

trí trần minh · Accepted Answer · 2018-09-04 08:36:55Z

0

you can change your function RMAfunction() to:

function RMAfunction() {
    if ($('#ddlsmsemailboth').val() == "M") {   
        if ($('input[name=EmailContact]').val() == "") {
            alert("Empty");
            return false;
        }
    } 
}

answered Sep 4, 2018 at 8:36

trí trần minh

414 bronze badges

Comments

Jomy Joseph · Accepted Answer · 2018-09-04 08:41:49Z

0

You can modify your RMAfunction() like, and ensure form tag should be there in your html

    $(document).ready(function () {

         $("#btnSubmitRMA").click(function (e) {
            e.preventDefault();
            RMAfunction();
           });
    });

    function RMAfunction() {

        if($("#ddlsmsemailboth option:selected").val() == "M" 
           && $('input[name=EmailContact]').val() == "" ){
            alert("you forgot enter you email");
            return false;
        }
      }

answered Sep 4, 2018 at 8:41

Jomy Joseph

3411 silver badge8 bronze badges

2 Comments

The First Over a year ago

i tried dat to , its also working fine, thanks for help :)

Jomy Joseph Over a year ago

please make $(document).ready function and put click function inside it.and you used $(function () { also, both r same for uniqueness you can use either one.

Collectives™ on Stack Overflow

How Validate TextBox based on DropDownList selection - JavaScript

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related