Here I have a popup window with table having 3 columns of Text Area and Dropdown1 and Dropdown2. Here user will enter the input data into text area and user will select the dropdown index values. And here One "SAVE" button is in popup window. After entering data and selecting dropdown options user needs to save this data in server.
Java script is for saving the data.
<script type="text/javascript">
$(document).ready(function () {
function savaasfile() {
//$("#savefile").click(function () {
var customer = document.getElementById("modaltable");
customer.name = $("[id*=textdata]").val();
customer.scramble = $("[id*=DropDownList2]").val();
customer.confirm = $("[id*=DropDownList1]").val();
$.ajax({
type: "POST",
url: "server path.txt",
data: JSON.stringify(customer),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$('#myModal').dialog("close");
}
});
//function openSaveModal() {
// $('#myModal').modal('show');
//}
// customer.preventDefault();
}
});
</script>
**Button code**
<button runat="server" id="savefile" class="btn btn-primary" onclick="savaasfile()" >Save </button>
After entering the data and while trying to save the data it is not performing anything. And it is closing automatically. While debugging the code it is saying like "no element found". What's wrong in the above code. What changes I have to make.
This is HTML code for Table and pop up window
<div id="myModal" class="modal fade" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-header" style="background-color: orangered; border-top-left-radius:4px; border-top-right-radius:4px;">
<div class="modal-body">
<table class="table .table-responsive" id="modaltable">
<thead>
<tr>
<th style="background-color: #333333; color: #FFFFFF;" colspan="1">Index Position</th>
<th style="background-color: #333333; color: #FFFFFF;">Type of Scrambler</th>
<th style="background-color: #333333; color: #FFFFFF;">Scrambling Required</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<textarea class="form-control" id="textdata"></textarea></td>// input area
<td>
<div class="dropdown">
<asp:DropDownList ID="DropDownList2" runat="server" CssClass="selectpicker"> //dropdown index
<asp:ListItem Text="Alpha-Numeric Scramble" />
<asp:ListItem Text="Packed-Decimal Scramble" />
<asp:ListItem Text="Date-Time Scrambler" />
</asp:DropDownList>
</div>
</td>
<td>
<div class="dropdown"> //dropdown index
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="selectpicker">
<asp:ListItem Text="Yes" />
<asp:ListItem Text="No" />
</asp:DropDownList>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button runat="server" id="savefile" class="btn btn-primary" onclick="savaasfile()" >Save </button>
</div>
</div>
</div>
</div>
Here is the full code of Modal popup window with having table with text area and 2 dropdown indexes. And it is having "Save" button. Here user will enter the data. That data need to store in the given path.
