All geek questions in one place

Failed to access textbox and dropdown menu on jquery

I am trying to add values ​​to a table when a button is clicked with jquery.! The code works fine with the HTML text box, but does not work when I replaced the HTML controls with asp controls.

Design:

<div class="panel panel-default">
    <div class="panel-body">
        <div id="Div1" class="panel-collapse collapse in">
            <!--   content start  -->
            <div class="panel-body">

                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-body nopadding">
                            <div class="form-horizontal form-bordered">

                                <div class="form-group">
                                    <label class="col-sm-4 control-label">Name</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" placeholder="Default Input" id="val1" />
                                        <%--<asp:TextBox ID="Name1" class="form-control" placeholder="Default Input" runat="server"></asp:TextBox>--%>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">Second Nmae</label>
                                    <div class="col-sm-8">
                                        <input type="text" id="val2" class="form-control" placeholder="Default Input" />
                                        <%--<asp:TextBox ID="Name2" class="form-control" placeholder="Default Input" runat="server"></asp:TextBox>--%>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!-- panel-body -->
                    </div>
                    <!-- panel -->
                </div>
                <!-- col-md-6 -->
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-body nopadding">
                            <div class="form-horizontal form-bordered">

                                <div class="form-group">
                                    <label class="col-sm-4 control-label">Short Name</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" placeholder="Default Input" id="val3" />
                                        <%--<asp:TextBox ID="Name3" class="form-control" placeholder="Default Input" runat="server"></asp:TextBox>--%>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-4 control-label">Short Name</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" placeholder="Default Input" id="val4" />
                                        <%--<asp:TextBox ID="Name4" class="form-control" placeholder="Default Input" runat="server"></asp:TextBox>--%>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <input type="button" id="add" value="add" class="btn btn-default" />
                                </div>

                            </div>
                        </div>
                        <!-- panel-body -->
                    </div>
                    <!-- panel -->
                </div>
                <!-- col-md-6 -->
                <!-- Table Start -->
                <div id="OrderItems" class="table-responsive">
                </div>
                <!--  table responsive end-->
            </div>
            <!-- content1 end  -->
        </div>
    </div>
</div>

JQuery

$(document).ready(function () {
        var itm = [];
        // Add Button Click Function   itemName
        $('#add').click(function () {

            var i = 0;
            if ($('#val1').val() == '') {
                $('#val1').siblings('span.error').css('visibility', 'visible');
            } else {
                $('#val1').siblings('span.error').css('visibility', 'hidden');
                i++;
            }

            if ($('#val2').val() == '') {
                $('#val2').siblings('span.error').css('visibility', 'visible');

            } else {
                $('#val2').siblings('span.error').css('visibility', 'hidden');
                i++;
            }

            if ($('#val3').val() == '') {
                $('#val3').siblings('span.error').css('visibility', 'visible');
            } else {
                $('#val3').siblings('span.error').css('visibility', 'hidden');
                i++;
            }
            if ($('#val4').val() == '') {
                $('#val4').siblings('span.error').css('visibility', 'visible');
            } else {
                $('#val4').siblings('span.error').css('visibility', 'hidden');
                i++;
            }
            if (i == 4) {
                itm.push({
                    val1: $('#val1').val(),
                    val2: $('#val2').val(),
                    val3: $('#val3').val(),
                    val4: $('#val4').val(),

                });
                $('#val1').val('').focus();
                $('#val2').val('');
                $('#val3').val('');
                $('#val4').val('');

            }
            GenratedItemTable(itm);
        });
        $('input[value="save"]').click(function () {
            $.ajax({

                url: ' /Home/SaveOrder/',
                type: "POST",
                data: JSON.stringify(itm),
                datatype: "JSON",
                ContentType: "application/json",
                success: function (d) {
                    //check is successfully save to database 
                    if (d.status == true) {
                        alert('SuccessFully Done');
                        // Clear Form
                        orderItems = [];
                        $('# val1').val('');
                        $('# val2').val('');
                        $('# val3').val('');
                        $('# val4').val('');

                    }
                    else {
                        alert('Failed to Save Data');
                    }

                },
                error: function () {
                    alert('Error. Please Try Again');
                }
            });
        });
        // Function For Show Added Items in Table
        function GenratedItemTable(itm) {
            if (itm.length > 0) {
                var $table = $('<table/>');
                $table.addClass("table mb30");
                $table.append('<thead><tr><th>Name1</th><th>Name2</th><th>Name3</th><th>Name4</th></tr></thead>');
                var $tbody = $('<tbody/>');
                $.each(itm, function (i, val) {
                    var $row = $('<tr/>');
                    $row.append($('<td/>').html(val.val1));
                    $row.append($('<td/>').html(val.val2));
                    $row.append($('<td/>').html(val.val3));
                    $row.append($('<td/>').html(val.val4));
                    $tbody.append($row);

                });
                $table.append($tbody);
                $('#OrderItems').html($table);
            }
        }

    });

I tried to get the value by replacing '#val1'with '<%=Name1.ClientID %>', it says that "Name1" does not exist in the current context. Jquery is on the main page, and the design is on the content page. How can I use asp controlls in this? How to use DropDownList set in textbox?

I am not familiar with jquery, so please help me ..

+4
2

"[id*=val1]"! ,

if ($("[id*=val1]").val() == '') {
    $("[id*=val1]").siblings('span.error').css('visibility', 'visible');
    } else {
    $("[id*=val1]").siblings('span.error').css('visibility', 'hidden');
     i++;
   }
+4

asp. , , .

"'<%=Name1.ClientID %>'" '#val1'.

+1

Source: https://habr.com/ru/post/1678541/

More articles:


All Articles