One issue I'm facing involves a dropdown list and a textbox. After selecting a value from the dropdown and entering text into the textbox, clicking the submit button triggers an ajax function that fetches relevant data. The problem arises when clicking the submit button again - the new value loads in the same table without clearing the previously displayed value. How can I ensure that each submission clears the old data before loading the new one?
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 request and response handling for getgeneric or getbrand
} else if (search == "getcompany") {
// AJAX request and response handling for getcompany
} else if (search == "getsubstitue") {
// AJAX request and response handling for getsubstitue
} else if (search == "gettherapeutic") {
// AJAX request and response handling for gettherapeutic
}
} else {
alert('Cannot be 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">Title</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 />
<!-- Tables to display results based on different search types -->
</div>
</section>