I'm trying to create a dynamic textbox that I can use to allow the entry of multiple values. I employed javascript for this purpose, thinking that this would allow me to grab the text value and place it in a list, before passing it to my web app. However, the code document.getElementById('<%=sidemgr.ClientID%>').value only picks up the initial value of sidemgr.txt from it's creation.
How do I get the updated value of this textbox? Do I have to use a javascript textbox?
Here is the javascript I have
<script type="text/javascript">
$(document).ready(function () {
$("#btnAdd").click(function () {
var value = document.getElementById('<%=sidemgr.ClientID%>').value;
var field = $("#field").val();
var input = "<div id='listDiv' />";
var newRow = "<tr><td>" + field + "</td><td>" + value + "</td></tr>";
$('#controls').append(newRow);
});
});
</script>
and the html
<div>
<asp:TextBox ID="sidemgr" runat="server"></asp:TextBox>
<br />
<input id="btnAdd" type="url" value="Add" />
<asp:Button ID="btnProcess" runat="server" Text="Process" OnClick="Process" />
<table id="controls" cellpadding="10" cellspacing="10">
</table>
</div>
C# code behind
protected void Process(object sender, EventArgs e)
{
var parameters = Request.Form["parameters"];
if (parameters != null && parameters.Count() > 0)
{
parameters.Split(',').ToList().
ForEach(p =>
{
Response.Write(p + "<br />");
});
}
}
Note that some of this is from a solution I found on SO a while ago.
Create a hiddenfield to hold the values you want in the server, the way you are doing server doesnt the value of Request.Form["parameters"]
$(document).ready(function () {
$("#btnAdd").click(function () {
var value = document.getElementById('<%=sidemgr.ClientID%>').value;
var field = $("#field").val();
var input = "<div id='listDiv' />";
var newRow = "<tr><td>" + field + "</td><td>" + value + "</td></tr>";
$("#parameters").val($("#parameters").val()+value+",")
$('#controls').append(newRow);
});
});
<div>
<asp:TextBox ID="sidemgr" runat="server"></asp:TextBox>
<input type="hidden" id="parameters" name="parameters"/>
<br />
<input id="btnAdd" type="url" value="Add" />
<asp:Button ID="btnProcess" runat="server" Text="Process" OnClick="Process" />
<table id="controls" cellpadding="10" cellspacing="10">
</table>
</div>
With this hiddenfield the server will receive the Request.Form["parameters"] with something like "value1,value2,"
Or you coud use multiple hiddenfields with name like "parameters[]", insert in the table, and work with Request.Form["parameters"] as a list
Related
The goal is that as a user I can enter a string into a text box. That string is passed to the codebehind as a parameter to a stored procedure call and returns an alert in the window.
The following code is not executing the stored procedure or returning an alert.
Markup:
<script type="text/javascript">
$(function PageLoad() {
document.getElementById('<%= ValueHiddenField.ClientID%>.value' = '<%= RemoveTote_TextBox.ClientID%>')
});
</script>
<div id="RemoveToteForm" runat="server" class="col text-center">
<div class="row">
<div class="col text-center">
<h2><%: Title %></h2>
</div>
</div>
<asp:TextBox ID="RemoveTote_TextBox" runat="server" />
<br/>
<input type="submit" name="SubmitButton" value="Submit" onclick="PageLoad()" />
<asp:hiddenfield id="ValueHiddenField"
onvaluechanged="ValueHiddenField_ValueChanged"
value=""
runat="server"/>
</div>
</asp:Content>
Code Behind:
protected void ValueHiddenField_ValueChanged(object sender, EventArgs e)
{
string ntsh = ValueHiddenField.Value;
using (OdbcConnection con = new OdbcConnection(ConfigurationManager.ConnectionStrings["ConnectToClient"].ConnectionString))
{
OdbcCommand cmd = new OdbcCommand("{call usp_Remove_Tote (?)}", con);
OdbcParameter Tote_number = cmd.Parameters.Add("#Tote_number", OdbcType.Char);
Tote_number.Value = ntsh;
con.Open();
String result = cmd.ExecuteScalar().ToString();
con.Close();
if (result != "Success+")
{
Response.Write("<script>alert('" + result + "'); </script>");
}
else
{
Response.Write("<script>alert('" + result + "'); </script>");
}
}
}
I have a problem with the TextBox. When I was entering duplicate data, it is not allowing. That is what exactly I need but after saving data again it is allowing the duplicate data. How can I handle the scenario?
Here is my code.
var Controls = {
saveObjectives: function (actionurl) {
var frm = $('form[name=frmObjectives]')
frm.attr('action', actionurl);
frm.submit();
},
addObjectiveCheckbox: function () {
var text = $('#txtObjective').val();
$('#txtObjective').val('');
if ($.trim(text) == '')
return;
if ($('input[type=checkbox][value="' + text + '"]').length == 0)
$('#dvObjectives').prepend('<input type="checkbox" name="chkNewobjectives" value="' + text + '" Checked /> ' + text + '<br />');
},
And my HTML code is:
<input id="btnAddObj" class="btn" type="button" onclick="Controls.addObjectiveCheckbox();" value="Add Objective"/>
</div>
<div id="dvObjectives" name="ObjectivesList">
#foreach (Andromeda.Core.Entities.Objectives objective in Model)
{
<label class="checkbox">
<input type="checkbox" name="chkobjectives" Checked value="#objective.ObjectiveID" />#objective.ObjectiveText
</label>
}
</div>
You are using value='whatever text` in the jQuery, but value='ObjectiveID' in the view. This should fix it:
<input type="checkbox" name="chkobjectives" Checked value="#objective.ObjectiveText" />#objective.ObjectiveText
I have the following code and i want the value entered by the ser in the prompt box to the textbox which is a asp.net control how do i do that? Please help.
protected void btnPreview_Click(object sender, EventArgs e)
{
divTemplateDesigner.Visible = true;
divQueryBuilder.Visible = false;
int count = 0;
string[] splitMessage = txtTemplate.Text.Split(' ');
List<string> parameterList = new List<string>();
List<string> valueList = new List<string>();
string newMessageString = txtTemplate.Text;
for (int i = 0; i < splitMessage.Length; i++)
{
if (splitMessage[i].StartsWith("["))
{
parameterList.Add(splitMessage[i]);
count++;
}
}
for (int j = 0; j < count; j++)
{
string message ="Enter "+parameterList[j];
Label lblmsge = new Label();
lblmsge.Text =
"<script language='javascript'>" + Environment.NewLine + "window.prompt('" + message + "')</script>";
Page.Controls.Add(lblmsge);
}
}
The prompt box is coming properly. But am not able to capture the value entered by the user.
And the HTML goes like this
<div class="page" runat="server" id="divTemplateDesigner">
<table bgcolor="#0CB1C0" style="width:100%;">
<tr>
<td bgcolor="White" class="style5" rowspan="2">
<asp:TreeView ID="treeviewDataset" runat="server"
onselectednodechanged="treeviewDataset_SelectedNodeChanged">
</asp:TreeView>
</td>
<td>
<asp:TextBox ID="txtTemplate" runat="server" Height="200px"
TextMode="MultiLine" Width="370px"></asp:TextBox>
</td>
<td colspan="2">
<br />
<br />
<asp:Button ID="btnPreview" runat="server" BackColor="White" Height="30px"
Text="Preview" Width="120px" onclick="btnPreview_Click" />
</td>
<td>
<asp:TextBox ID="txtPreview" runat="server" Height="200px" TextMode="MultiLine"
Width="370px"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left" colspan="2">
<asp:Button ID="btnBack" runat="server" BackColor="White" Height="30px"
Text="Back" Width="120px" onclick="btnBack_Click" />
you see in this image that box has three placeholders [patient_ID] [Doctor_ID] and [Appointment_Date]
Am opening prompt boxes depending on the number of placeholders in the first box.
Count = number of placeholders
Just use Javascript to accomplish what you are after, instead of a postback to the server.
<script type="text/javascript">
function PromptAndFillPreview() {
var templateStr = document.getElementById('<%= txtTemplate.ClientID %>').innerText;
var previewStr = '';
var phIndexStart = templateStr.indexOf('[');
var phIndexEnd = 0;
while (phIndexStart >= 0) {
previewStr = previewStr + templateStr.substring(phIndexEnd, phIndexStart);
phIndexEnd = templateStr.indexOf(']', phIndexStart) + 1;
var placeholder = templateStr.substring(phIndexStart, phIndexEnd);
previewStr = previewStr + prompt("Please input value for " + placeholder, '');
phIndexStart = templateStr.indexOf('[', phIndexEnd);
}
previewStr = previewStr + templateStr.substring(phIndexEnd, templateStr.length);
document.getElementById('<%= txtPreview.ClientID %>').innerText = previewStr;
}
</script>
And since you don't need the postback, you can replace:
<asp:Button ID="btnPreview" runat="server" BackColor="White" Height="30px"
Text="Preview" Width="120px" onclick="btnPreview_Click" />
with:
<input type="button" style="background-color:White; height:30px; width:120px;"
value="Preview" onclick="PromptAndFillPreview()" />
I have a problem retrieving all the data inside the rows added by the user. I tried using my variable reclist to retrieve the records but it give me blanks.
The source code is as follows:
<script type="text/javascript">
$(document).ready(function(){
$('#btnAdd').live('click',function(){
var name = $('#txtName').val();
var name2 = $('#txtName2').val();
$("#tbNames tr:last").after("<tr><td>" + name + "</td><td>" + name2 + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
});
$('#tbNames td img.delete').live('click',function(){
$(this).parent().parent().remove();
});
});
</script>
<input id="txtName" type="text" />
<input id="txtName2" type="text" />
<input id="btnAdd" type="button" value="Add" />
<table id="tbNames" >
<tr>
<td><b>Name</b></td>
<td><b>Name2</b></td>
<td><b>Delete</b></td>
</tr>
<tr>
<td>Bingo</td>
<td>Tingo</td>
<td><img src="Delete.gif" height="15" class="delete" /></td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function() {
$("#submit_app").button();
$("#submit_app").click(function() {
var reclist = $("#txtName").val();
console.log(reclist);
});
});
</script>
<input id="submit_app" type="button" style="height: 35px; width: 225px" value="Add New User" />
Please advise if I have miss any coding.
Try following code. Check this demo on jsFiddle.net. This will give you all the values inside td of your table.
$(document).ready(function() {
$('#btnAdd').live('click', function() {
var name = $('#txtName').val();
var name2 = $('#txtName2').val();
$("#tbNames tr:last").after("<tr><td>" + name + "</td><td>" + name2 + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
});
$('#tbNames td img.delete').live('click', function() {
$(this).parent().parent().remove();
});
//$("#submit_app").button(); //Commented this line
$("#submit_app").click(function() {
var skipFirstRow = 0; //Skip first row
$("#tbNames tr").each(function() {
if (skipFirstRow++ == 0) return;
var skipLastColumn = 0;
$(this).children("td").each(function() {
if (skipLastColumn++ == 2) return;
alert($(this).html());
});
});
var reclist = $("#txtName").val();
console.log(reclist);
});
});
EDIT
Check this fiddle. In this you will get the values in two arrays.
$("#txtName") refers to the text box you declared in
<input id="txtName" type="text" />
Since you want to retrieve all the data that you have inserted into the table, you should be using $("td", "#tbNames") and retrieving their .text()
$("td", "#tbNames").each(function() {
console.log($(this).text());
});
You need to bind click event as live. Since normal bind will only bind events to element found on page rendering first time
Here is corrected part:
<script type="text/javascript">
$(document).ready(function() {
$("#submit_app").button();
$("#submit_app").live('click', function() {
var reclist = $("#txtName").val();
console.log(reclist);
});
});
</script>
You're submit button was't getting triggered
http://jsfiddle.net/gBHh2/
i am working on a project in which i have to render rows dynamically . but user could also delete that row have a look at my current working
JQuery
var counter = 1;
function addrow() {
var textbox = "<div id='rows" + counter + "'> </br><label> Option : </label><input type='text' name='Answers[" + counter + "]' class='ahsan required' />Remove</div>";
var form = $("#form").valid();
if (form) {
$("#TextBoxesGroup").append(textbox);
counter++;
}
else {
return false;
}
}
html
<div id="TextBoxesGroup" style="margin-left: 100px;">
<div id="rows0">
</br><label>
Option :
</label>
<input type='text' name='Answers[0]' class='ahsan required' />Remove
</div>
</div>
<div>
<input type="button" value="Add another row" onclick="addrow();" class="qa-adbtn" id='addButton' /></div>
Now , if i have 10 rows there names will be Answers[0,1,2,3,4,5] . I want to remove input when i click on remove anchor and also reoder all textbox's name
For Example if i remove input at 4th index then all textbox automatically get re arranged . Can i Do it Please Help me and Thanks in Advance
You can make it without counter. This way your answers will be always ordered in the array starting by zero.
Here's a plausible solution:
$(function(){
$("#form").validate();
this.addrow = function() {
if ($("#form").valid()) {
var textbox = "<div> </br><label> Option : </label><input type='text' name='Answers["+$("#TextBoxesGroup div").length+"]' class='ahsan required' /><a class='remove-me' href='#'>Remove</a></div>";
$("#TextBoxesGroup").append(textbox);
$('.remove-me').click(function(){
$(this).parent().remove();
return false;
});
}
else {
return false;
}
}
this.addrow();
});
and the html is simple like this:
<form id="form">
<div id="TextBoxesGroup" style="margin-left: 100px;"></div>
<div>
<input type="button" value="Add another row" onclick="addrow();" class="qa-adbtn" id='addButton' />
</div>
</form>