I am having a dropdown list and textbox. When I am selecting a dropdown value and entering value into the textbox and then by clicking submit button I am getting value in ajax function. If i click on submit button again value loading in same table but my requirement is to load the value by clearing the previously displayed value?
Jquery:
$(document).ready(function() { $("#btnSubmit").click(function(e) { e.preventDefault(); var search = jQuery('[id$=txtsearchType]').val(); var tittle = jQuery('[id$=txtName]').val(); if (search != ' ' && tittle != '') { if (search == "getgeneric" || search == "getbrand") { $.ajax({ type: "GET", contentType: "application/json; charset=utf-8", url: 'http://204.93.193.244:8080/apiems/' + search + '/' + tittle, //data: "{ } ", dataType: "json", success: function(data) { var items = ''; $.each(data, function(i, item) { $("#findValue").show(); var rows = "<tr>" + "<td>" + (i + 1) + "</td>" + "<td>" + item[1] + "</td>" + "<td>" + item[5] + "</td>" + "<td>" + item[2] + "</td>" + "<td>" + item[3] + "</td>" + "<td>" + item[4] + "</td>" + "<td>" + item[6] + "</td>" + "<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' + "</tr>"; $('#example tbody').append(rows); }); }, error: function(result) { alert("Error" + result); } }); } else if (search == "getcompany") { $.ajax({ type: "GET", contentType: "application/json; charset=utf-8", url: 'http://204.93.193.244:8080/apiems/' + search + '/' + tittle, //data: "{ } ", dataType: "json", success: function(data) { var items = ''; $.each(data, function(i, item) { $("#findcompany").show(); var rows = "<tr>" + "<td>" + (i + 1) + "</td>" + "<td>" + item[1] + "</td>" + "<td>" + item[2] + "</td>" + "<td>" + item[3] + "</td>" + "<td>" + item[4] + "</td>" + "<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' + "</tr>"; $('#example tbody').append(rows); }); }, error: function(result) { alert("Error" + result); } }); } else if (search == "getsubstitue") { $.ajax({ type: "GET", contentType: "application/json; charset=utf-8", url: 'http://204.93.193.244:8080/apiems/' + search + '/' + tittle, //data: "{ } ", dataType: "json", success: function(data) { var items = ''; $.each(data, function(i, item) { $("#findsubstitue").show(); var ids = data[i]; var rows = "<tr>" + "<td>" + (i + 1) + "</td>" + "<td>" + item[1] + "</td>" + "<td>" + item[2] + "</td>" + "<td>" + item[3] + "</td>" + "<td>" + item[4] + "</td>" + "<td>" + item[5] + "</td>" + "<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' + "</tr>"; $('#example tbody').append(rows); }); }, error: function(result) { alert("Error" + result); } }); } else if (search == "gettherapeutic") { $.ajax({ type: "GET", contentType: "application/json; charset=utf-8", url: 'http://204.93.193.244:8080/apiems/' + search + '/' + tittle, //data: "{ } ", dataType: "json", success: function(data) { var items = ''; $.each(data, function(i, item) { $("#findgettherapeutic").show(); var ids = data[i]; var rows = "<tr>" + "<td>" + (i + 1) + "</td>" + "<td>" + item + "</td>" + "</tr>"; $('#example tbody').append(rows); }); }, error: function(result) { alert("Error" + result); } }); } } else { alert('Cannot blank must be filled out') } }); }); HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="card"> <div class="card-block"> <div class="row"> <div class="col-lg-4"> <fieldset class="form-group"> @Html.LabelFor(model => Model.SearchType, new { @class = "form-label semibold control-label" }) <select class="select2-arrow" id="txtsearchType" name="searchType"> <option>-- Select Search Type --</option> <option value="getgeneric">Generic Search</option> <option value="getbrand">Brand Search</option> <option value="getcompany">Company Search</option> <option value="getsubstitue">Substitute Search</option> <option value="gettherapeutic">Therapeutic wise Search</option> </select> @Html.ValidationMessageFor(model => model.SearchType, "", new { @style = "color:red" }) </fieldset> </div> <div class="col-lg-4"> <fieldset class="form-group"> <label class="form-label semibold control-label">Tittle</label> @Html.TextBoxFor(model => model.ProductName, new { @class = "form-control", @id = "txtName", placeholder = "Search Name" }) @Html.ValidationMessageFor(model => model.ProductName, "", new { @style = "color:red" }) </fieldset> </div> </div> <input type="submit" name="Submit" value="Search" id="btnSubmit" class="btn btn-rounded btn-inline btn-success" /> <span style="color:green">@ViewBag.Message</span> <br /> <br /> @* getgeneric and getbrand *@ <div class="table-responsive" id="findValue" style="display:none;"> <table id="example" class="display table table-bordered" cellspacing="0" width="100%;"> <thead> <tr> <th>ID</th> <th>Generic Name</th> <th>Brand Name</th> <th>Strength</th> <th>Form</th> <th>Pack</th> <th>Price</th> <th>Actions</th> </thead> <tbody></tbody> </table> </div> @* getcompany *@ <div class="table-responsive" id="findcompany" style="display:none;"> <table id="example" class="display table table-bordered" cellspacing="0" width="100%;"> <thead> <tr> <th>ID</th> <th>Brand Name</th> <th>Form</th> <th>Strength</th> <th>Pack</th> <th>Actions</th> </thead> <tbody></tbody> </table> </div> @* getcompany *@ <div class="table-responsive" id="findsubstitue" style="display:none;"> <table id="example" class="display table table-bordered" cellspacing="0" width="100%;"> <thead> <tr> <th>ID</th> <th>Brand Name</th> <th>Manufacturer</th> <th>Strength</th> <th>Form</th> <th>price</th> <th>Actions</th> </thead> <tbody></tbody> </table> </div> @* getcompany *@ <div class="table-responsive" id="findgettherapeutic" style="display:none;"> <table id="example" class="display table table-bordered" cellspacing="0" width="100%;"> <thead> <tr> <th>ID</th> <th>Generic Name</th> </thead> <tbody></tbody> </table> </div> </div> </section> 
