I am new to asp.net, I am trying to add a field "Experience", when user adds company name, from date and to date. for that I am using a , now for that I am using jQuery. to add new columns dynamically i have written the jQuery function, but i am not getting where to add those function, when i run only single column is coming.Please help out how to add jQuery code into ASP.NET below is my function
var $lastChar =1, $newRow;
$get_lastID = function(){
var $id = $('#experience_table tr:last-child td:first-child input').attr("name");
$lastChar = parseInt($id.substr($id.length - 2), 10);
$lastChar = $lastChar + 1;
$newRow = "<tr> \
<td><input type='text' name='company_name_0"+$lastChar+"' maxlength='255' /></td> \
<td><input type='text' name='from_0"+$lastChar+"' /></td> \
<td><input type='text' name='to_0"+$lastChar+"' /></td> \
<td><input type='number' name='Total_exp_0"+$lastChar+"' maxlength='11' /></td> \
<td><input type='text' name='edit_0"+$lastChar+"' maxlength='255' /></td> \
<td><input type='button' value='Delete' class='del_ExperienceRow' /></td> \
</tr>"
return $newRow;
}
}
$('#add_ExperienceRow').live("click", function(){
if($('#experience_table tr').size() <= 9){
$get_lastID();
$('#experience_table tbody').append($newRow);
} else {
alert("Reached Maximum Rows!");
};
});
$(".del_ExperienceRow").live("click", function(){
$(this).closest('tr').remove();
$lastChar = $lastChar-2;
});
Wrap your code into this function and script tag
<script src="Script/jquery-version.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//Your code goes here
});
</script>
You should also change that .live event handler to .on if you are using recent jQuery version.
Related
html Post Method
<script type="text/javascript">
function submitdata() {
document.tp_form.submit();
}
</script>
<form name="tp_form" action="someurl" method="post" id="form_id">
<table>
<tr>
//// In td i send all the same parameter as which send from C#
<td>User ID : <input type="text" name="user_id" value="test"><br></td>
<td>Order No : <input type="text" name="order_no" value=""></td>
</tr>
<tr>
<td><input type="button" name="hash" value="hash" onClick="submitdata();" > </td>
</tr>
</table>
</form>
C# Post Method
NameValueCollection collections = new NameValueCollection();
collections.Add("user_id", api3.user_id);
collections.Add("order_no", api3.order_no);
collections.Add("pay_type", api3.pay_type);
collections.Add("good_name", api3.good_name);
collections.Add("trade_mony", api3.trade_mony);
collections.Add("order_first_name", api3.order_first_name);
collections.Add("order_email", api3.order_email);
collections.Add("currency", api3.currency);
collections.Add("site_cd", api3.site_cd);
collections.Add("hash_data", api3.hash_data);
string html = "<html><head>";
html += "</head><body onload='document.forms[0].submit()'>";
html += string.Format("<form name='PostForm' method='POST' action='{0}'>", apiurl);
foreach (string key in collections.Keys)
{
html += string.Format("<input name='{0}' type='hidden' value='{1}'>", key, collections[key]);
}
html += "</form></body></html>";
Response.Clear();
Response.Write(html);
When I do Post From HTML it is redirected to Payment Page But when I am doing from C# it is not redirecting it is giving me error.In Both case parameters are same.
What is the difference in both way i.e HTML and C#
So I have a simple ASP.NET/ C# generated html form where I have a list of textboxes that I want to be able to add and/or delete on the fly. There are pre-existing textboxes that are generated from a SP that look like this, with an 'add another textbox' button below:
<tr>
<td id="lblRole" style="vertical-align:top;" ><strong>The Role *</strong><br />(2000 characters maximum each)</td>
<td id="rolesColumn">
<div id="roles-1" class="div_row">
<textarea name="ctl00$mainContent$uxRolesList$ctl01" rows="5" cols="100"
id="ctl00_mainContent_uxRolesList_ctl01">yuyuy</textarea>
<input type="button" style="vertical-align:top;" value="X" class="remove-roles-btn" /><br /><br />
</div>
<input type="hidden" name="ctl00$mainContent$uxTxtBoxRolesCount"
id="ctl00_mainContent_uxTxtBoxRolesCount" value="1" />
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" name="ctl00$mainContent$uxAddRoleBtn"
value="Add a new role requirement"
id="ctl00_mainContent_uxAddRoleBtn" class="btn" />
</td>
</tr>
My jQuery is this:
$("#ctl00_mainContent_uxAddRoleBtn").live("click", (function (e) {
var rolesCounter = $('#ctl00_mainContent_uxTxtBoxRolesCount').val();
rolesCounter++;
if (rolesCounter < 10) {
var rolesCounterText = "0" + rolesCounter;
} else {
var rolesCounterText = rolesCounter;
}
$('#rolesColumn').append("<div id='roles-" + rolesCounter + "' class='div_row'><textarea name='ctl00$mainContent$uxRolesList$ctl" + rolesCounterText + "' rows='5' cols='100' id='ctl00_mainContent_uxRolesList_ctl" + rolesCounterText + "'></textarea><input class='remove-roles-btn' type='button' value='X' style='vertical-align:top;' /><br /><br /></div>");
e.preventDefault();
$('#ctl00_mainContent_uxTxtBoxRolesCount').val(rolesCounter);
}));
$(".remove-roles-btn").on("click", (function (e) {
$(this).parents('.div_row').remove();
e.preventDefault();
var rolesCounter = $('#ctl00_mainContent_uxTxtBoxRolesCount').val();
rolesCounter--;
$('#ctl00_mainContent_uxTxtBoxRolesCount').val(rolesCounter);
}));
But when I click to add a new textbox, all the textboxes are deleted.
And when I click to delete a textbox, nothing happens.
Thank you.
You have a typo in your code:
$("#ctl00_mainContent_uxAddRoleBtn").live("click", (function (e) {
//-------------------------------------------^----here you can see a "("
and here:
$(".remove-roles-btn").on("click", (function (e) {
//------------------^-----------------here
but i suggest you to use .on() method:
$(document).on("click", "#ctl00_mainContent_uxAddRoleBtn", function (e) {
and this:
$(document).on("click", ".remove-roles-btn", function (e) {
NOTE, be sure to be using jQuery 1.8.3 or lower, otherwise it will NOT work. All you have to do is change 'on' to 'live'
$(".remove-roles-btn").live("click", (function (e) {
Here is a simple example with your code that shows it working.
For remove button you need to use event delegation
$(document).on("click", "#rolesColumn .remove-roles-btn", function (e) {
e.preventDefault();
$(this).closest('.div_row').remove();
var rolesCounter = $('#ctl00_mainContent_uxTxtBoxRolesCount').val();
$('#ctl00_mainContent_uxTxtBoxRolesCount').val(rolesCounter - 1);
});
$(document).on("click", "#ctl00_mainContent_uxAddRoleBtn", function (e) {
var rolesCounter = $('#ctl00_mainContent_uxTxtBoxRolesCount').val();
rolesCounter++;
if (rolesCounter < 10) {
var rolesCounterText = "0" + rolesCounter;
} else {
var rolesCounterText = rolesCounter;
}
$('#rolesColumn').append("<div id='roles-" + rolesCounter + "' class='div_row'><textarea name='ctl00$mainContent$uxRolesList$ctl" + rolesCounterText + "' rows='5' cols='100' id='ctl00_mainContent_uxRolesList_ctl" + rolesCounterText + "'></textarea><input class='remove-roles-btn' type='button' value='X' style='vertical-align:top;' /><br /><br /></div>");
e.preventDefault();
$('#ctl00_mainContent_uxTxtBoxRolesCount').val(rolesCounter);
});
Demo: Fiddle
I have to get the checkbox form collection as bool value array to insert into bit datatype column in SQL Server. I tried the below thing with partial luck.
If all the checkboxes are checked, It is working fine. But If some left as unchecked only the checked items are in array. So the index varies and could not identify which belongs to which record?
Please help me.
string[] names = Students["name"].Split(char.Parse(","));
string[] dnos = Students["dno"].Split(char.Parse(","));
string[] adds = Students["address"].Split(char.Parse(","));
string[] actives = Students["active"].Split(char.Parse(","));
for (var i = 0; i < names.Length; i++)
{
student stds = new student();
stds.name = names[i];
stds.dno = dnos[i];
stds.address = adds[i];
if (actives[i] == "on")
stds.active = true;
else
stds.active = false;
db.students.AddObject(stds);
}
db.SaveChanges();
HTML:
#model DynamicAddition.DAL.student
#{
ViewBag.Title = "Create";
}
<h3>Create</h3>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<form id="formstudent" method="post">
<table id="formTable">
<thead>
<tr><th>Name</th><th>D. No</th><th>Address</th><th>Active</th><th>Add New</th></tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="name" /></td>
<td><input type="text" name="dno" /></td>
<td><input type="text" name="address" /></td>
<td><input type="checkbox" name="active" /></td>
<td><b>Add new</b></td>
</tr>
</tbody>
</table>
<p><input type="submit" value="Create" /></p>
</form>
<div>
#Html.ActionLink("Back to List", "Index")
</div>
<script src="../../Scripts/jquery-1.5.1.js"></script>
<script language="javascript" type="text/javascript">
function addRow() {
$('#formstudent tbody tr:first').clone().find("input").each(
function () {
$(this).val = '';
}).end().appendTo("#formTable");
}
</script>
i stumbled to the same problem while creating a dynamic form.
going by the html standards there are some controls that are posted back and some that are not. So a checkbox that is not checked or an input that is disabled isnt posted back to the server on a form postback.
The normal practive to handle these situations is to make a hidden input with the default value in you case since the default value is false make a input
#Html.Hidden("name1",..)
and set the value as false
then using the same name as of this input make a checkbox
#Html.Checkbox("name1", ..)
by doing this even if the checkbox isnt checked the value of the hidden input will be posted back to the server and you will get a valid false value.
**Note :- Asp.net MVC uses same trick whenever is needs a value postback.
**Note:- there is already an answer depicting this nicely how to POST/Submit an Input Checkbox that is disabled?
so I’m trying to build a win 8 app, which includes a WebView. The WebView contains the HTML code (+JavaScript) below.
<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<?xml version='1.0' encoding='UTF-8' standalone='yes'?>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' >
<script type='text/javascript'>
function get_radio_value()
{
for (var i=0; i < document.myForm.frage1.length; i++)
{
if (document.orderform.frage1[i].checked)
{
var rad_val = document.myForm.frage1[i].value;
return rad_val;
}
}
}
</script>
<title>Kundenfragebogen</title>
</head>
<body>
<h1>Kundenfragebogen</h1>
<div id='myDiv'>Hello</div>
<form name='myForm' action=''>
<table border='2'>
<tr>
<td></td>
<td>sehr gut</td>
<td>gut</td>
<td>schlecht</td>
</tr>
<tr>
<td>Wie geht es Ihnen?</td>
<td><input type='radio' name="frage1" value='1'/>Mir ging es noch nie besser!</td>
<td><input type='radio' name="frage1" value='2'/>Es geht mir so wie immer.</td>
<td><input type='radio' name="frage1" value='3'/>Heute geht einfach gar nichts…</td>
</tr>
<tr>
<td>Können Sie Auto fahren?</td>
<td><input type='radio' name="frage2" value='1'/>Ja</td>
<td></td>
<td><input type='radio' name="frage2" value='3'/>Nein</td>
</tr>
<tr>
<td>Möchten Sie unseren Newsletter abonnieren?</td>
<td><input type='radio' name="frage3" value='1'/>Ja</td>
<td></td>
<td></td>
</tr>
</table>
<input type='button' value='Formular absenden' onclick="return get_radio_value()"/>
</form>
</body>
</html>
So the html contains some radio buttons and a button. I’ve used JavaScript ~2 years ago (just a little), so I don’t really know how to write the exact code. I’ve found something on the internet, but it doesn’t do what I want. I want to have the following:
The user can check the RadioButtons. When the user clicks the Button, the JavaScript function should return all the checked radio buttons (I only need to know which RadioButton is checked).
Since I know the name of the RadioButtons in my Windows 8 App, I can do the following:
var object = WebView.InvokeScript("JavaScriptFunctionNAME", NameOfRadiobutton);
So the WebView invokes the script and should get as a return the VALUE of the RadioButton, which is checked.
“JavaScriptFunctionNAME” = name of the function in Javascript
NameOfRadiobutton = the name of the RadioButton as a parameter (for example “frage1”).
Currently I’m returning the value of the radiobutton, which is checked in the RadioGroup “frage1”. How can I check every RadioButton by it’s parameter? By this I mean I have a parameter “frage1” and return the value of the checked RadioButton. After this, I call the function again with the parameter “frage2” and return the checked RadioButtons value. Could anyone help me out with the JavaScript-function?
Radiobuttons are grouped by their name property. You can get a collection of radiobuttons using document.getElementsByName and look at the checked status of each, for example: -
function FindChecked() {
var elements = document.getElementsByName("frage1")
for (var i = 0; i < elements.length; i++) {
if (elements[i].checked) {
return elements[i].value;
}
}
}
Will return the value of the checked radiobutton within its group.
jsfiddle example
Edit: To pass the group name from your C# code to this function you could do: -
public class YourClass
{
public string GroupName { get { return "frage1"; } }
}
And then the javascript function would become:
function FindChecked() {
var elements = document.getElementsByName('<%= this.GroupName %>')
for (var i = 0; i < elements.length; i++) {
if (elements[i].checked) {
return elements[i].value;
}
}
}
try this , This will return the checked name of radio buttons
<script type='text/javascript'>
function get_radio_value()
{
var nameArry = [];
var allInputs = document.myForm.getElementsByTagName('input');
for (i = 0; i < allInputs.length; i++) {
if (allInputs[i].type == 'radio' && allInputs[i].checked ) {
nameArry.push(allInputs[i].name);
}
}
alert(nameArry)
}
</script>
I am trying to validate a form in .NET 2.0 using the JQuery Validate() plug-in and it’s not working. I know my Jquery code is working as I set up functions to clear the default text of a text field on focus() and that works as expected.
The form.validate() method never seems to get called as I have alert() calls in a custom validation method that work in a separate HTML test page but never fire when integrated into the .NET page.
Could this be because the whole page is treated like a form in .NET? If I want to override the default submit action and add some client side validation, how can I do this or can I only validate the form in the code behind? Thanks.
my script:
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/additional-methods.js" type="text/javascript"></script>
<script src="js/jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery.validator.addMethod("checkfields", function(value, element) {
if ($("#from_date").val() == "" && $("#to_date").val() == "" && $("#last_name").val() == "") {
return false;
}
}, "Please enter either a last name, from date or to date.");
$("input.from_date").mask("99/99/9999");
$("input.to_date").mask("99/99/9999");
$("#searchForm").validate({
errorElement: "span",
errorContainer: $("#error"),
errorPlacement: function(error, element) {
error.appendTo(document.getElementById("error"));
},
success: function(label) {
$("#searchForm").submit();
},
rules: {
last_name: "checkfields"
}
});
$("#from_date").focus(function() {
if ($("#from_date").val() == "mm/dd/yyyy") {
$("#from_date").val("");
}
});
$("#from_date").blur(function() {
if ($("#from_date").val() == "") {
$("#from_date").val("mm/dd/yyyy");
}
});
$("#to_date").focus(function() {
if ($("#to_date").val() == "mm/dd/yyyy") {
$("#to_date").val("");
}
});
$("#to_date").blur(function() {
if ($("#to_date").val() == "") {
$("#to_date").val("mm/dd/yyyy");
}
});
});
</script>
And the form:
<form action="search.spax" id="searchForm" name="searchForm" method="post">
<div id="error" style="display:none;">
<span></span>.<br clear="all"/>
</div>
<table width="520" border="0" cellspacing="0" cellpadding="0" class="obit_form">
<tr align="left">
<th><label for="last_name">Last Name</label></th>
<th></th>
<th><label for="from_date">From</label></th>
<th><label for="to_date">To</label></th>
<th></th>
</tr>
<tr align="left">
<td><input type="text" id="last_name" class="required date" name="last_name" value="" style="width:135px;" /></td>
<td>and/or</td>
<td><input type="text" id="from_date" class="required date" name="from_date" value="mm/dd/yyyy" style="width:75px;" /></td>
<td><input type="text" id="to_date" class="required date" name="to_date" value="mm/dd/yyyy" style="width:75px;" /></td>
<td><input type="submit alt="Search" title="Search" value="Search" name="submitButton" id="Submit2" /></td>
</tr>
</table>
</form>
You're doing something like this?
$(document).ready(function() {
$('#aspnetForm').validate({
rules: {
ctl00$chMain$tbLoginEmail: {
required: true,
email: true
},
...
I know hard-coding the id isn't ideal, but you get the picture.