1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
|
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dynamic.aspx.cs" Inherits="Dynamic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head runat="server">
<title>jQuery add / remove textbox example</title>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var counter = 2;
$("#addButton").click(function () {
if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<input type="text" style="width: 550px" name="textbox' + counter +
'" id="textbox' + counter + '" value="" > <input type="text" name="txt' + counter +
'" id="txt' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if (counter == 1) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for (i = 1; i < counter; i++) {
msg += ("(" + "'" + $('#textbox' + i).val() + "'" + "," + $('#txt' + i).val() + "),");
}
msg = msg.substring(0, msg.length - 1);
var sql = "insert into article (art,qte) values " + msg;
alert(sql);
var hiddenControl = '<%= hide.ClientID %>';
document.getElementById(hiddenControl).value = msg;
// alert(msg.length);
}
);
});
</script>
</head>
<body>
<form runat="server">
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<input type="text" style="width: 550px" id="textbox1" />
<input type="text" id='txt1' />
</div>
</div>
<asp:Button ID="getButtonValue_" runat="server" Text="Show" OnClick="Button1_Click" />
<input type="hidden" id="hide" runat="server" />
<input type="button" value="Add Row" id="addButton" />
<input type="button" value="Remove Row" id="removeButton" />
<input type="button" value="Show" id="getButtonValue" />
</form>
</body>
</html> |
Partager