I am working on an asp.net webforms page. I have three html checkboxes and if any of them are checked I have to append the corresponding values to a JavaScript string. When I execute the btnSave, the saveOrderTypes() is called and goes up to alert("D"); and then exits. I don't see any JavaScript error in the console. I am not sure why this is happening. I tried to get the values using jQuery and similar issue happens.
<asp:Content ID="scriptArea" runat="server" ContentPlaceHolderID="headerScript">
<script>
function saveOrderTypes() {
alert("In saveOrderTypes");
var orderTypes = '';
if (document.getElementById('chkDelivery').checked) {
orderTypes = 'D';
alert("D");
}
if (document.getElementById('chkUPS').checked) {
orderTypes = orderTypes + 'U';
alert("U");
}
if (document.getElementById('chkCustomer').checked) {
orderTypes = orderTypes + 'C';
alert("C");
}
alert("orderTypes: " + orderTypes);
//more code here
}
$(document)
.ready(function () {
});
</script>
</asp:Content>
<asp:Content ID="mainDivision" ContentPlaceHolderID="mainContent" runat="server">
<div class="row" style="width: 100%">
<div class="col-sm-4">
<input type="checkbox" id="chkDelivery">
<label >Delivery</label><br>
<input type="checkbox" id="chkUPS">
<label >UPS</label><br>
<input type="checkbox" id="chkCustomer">
<label >Customer</label><br>
</div>
</div>
<button type="button" id="btnSave" onclick="javascript:saveOrderTypes();return false;"
>Save</button>
</asp:Content>
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 am working on a project where I have to show and hide buttons based on drop down selection. Please find the attached fiddler link. My function is not getting called/nothing is happening when I select the drop down values. Any help?!
Page code:
<div class="span6 offset2">
<br />
<div class="row">
Location ID
<select id="iloc_Id" runat="server" class="form-control" style="width: 50%" visible="true" onchange="validate()">
<option disabled="">All Locations</option>
<option value ="1">1- Verona</option>
<option value ="2">2- Como</option>
</select>
</div>
</div>
<br/>
<div class="row">
<asp:LinkButton ID="LinkButton1" CssClass="btn btn-success" runat="server" Width="50%"> First Report </asp:LinkButton>
</div>
<br />
<div class="row">
<asp:LinkButton ID="LinkButton2" CssClass="btn btn-success" runat="server" Width="50%" OnClick="Report2"> Second Report
</asp:LinkButton>
</div>
Javascript:
function validate()
{
var selected_loc = $("#iloc_Id").val();
if (selected_loc == '1')
{
$('#LinkButton1').show();
$('#LinkButton2').hide();
}
else if (selected_loc == '2')
{
$('#LinkButton1').hide();
$('#LinkButton2').show();
}
else
{
$('#LinkButton1').show();
$('#LinkButton2').show();
}
link: https://jsfiddle.net/rickfiddle/5pvwznge/5/
Your code is working fine, just need to add a closing bracket at the end
function validate()
{
var selected_loc = $("#iloc_Id").val();
alert(selected_loc);
if (selected_loc == '1')
{
$('#LinkButton1').show();
$('#LinkButton2').hide();
}
else if (selected_loc == '2')
{
$('#LinkButton1').hide();
$('#LinkButton2').show();
}
else if (selected_loc == '3')
{
$('#LinkButton1').hide();
$('#LinkButton2').hide();
}
else
{
$('#LinkButton1').show();
$('#LinkButton2').show();
}
}
and change the jsfiddle configuration Load Type from
On Load
to
No wrap - bottom of <head>
In the javascript code, after closing validate() function add:
document.getElementById("iloc_Id").onchange = function() {validate()};
I have a User Control which i want to use Multiple times on a page. So i tried the approach of moving the Control's JS into a File and creating a Prototype for it, so that it works smoothly on the page. But when running the solution, it gives the following error:
Uncaught TypeError: CtrlNameCtrlName1 is not a constructor
I am not being able to find where am i making a mistake. Any help will be appreciated.
Thanks.
User Control with markup:
<%# Control Language="vb" AutoEventWireup="false" CodeBehind="CtrlName.ascx.vb" Inherits="MultiInstanceControl.CtrlName" %>
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<br />
<asp:Panel ID="pnlSearch" runat="server" Style="background-color: yellow;width: 30px;height: 30px;"></asp:Panel>
<br />
<input id="txtInput" type="text" />
<script type="text/javascript" src="CtrlNameJS.js"></script>
<script type="text/javascript">
function CtrlName<%=me.ClientID%>() {
this.pnlSearchClientID = <%=pnlSearch.ClientID%>;
this.txtSearchClientID = <%=txtSearch.ClientID%>;
this.txtInputControl = document.getElementById('txtInput');
this.Category = <%=Category%>;
}
CtrlName<%=me.ClientID%> = CtrlName.prototype;
</script>
Here is the JS File Content it uses:
function CtrlName() {
}
CtrlName.prototype = {
HidePanel: function () {
if (Category == '1') {
pnlSearchClientID.style.backGroundColor = 'Red';
}
else {
pnlSearchClientID.style.backGroundColor = 'Blue';
}
},
GetSearchedText: function () {
alert($find(txtSearchClientID).get_value());
},
GetInputText: function () {
alert(txtInputControl.value);
}
};
And Finally the Page which uses the Above Control with Multiple instances:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="default.aspx.vb" Inherits="MultiInstanceControl._default" %>
<%# Register Src="~/CtrlName.ascx" TagPrefix="uc1" TagName="CtrlName" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div> 1. First Instance <br /><br />
<uc1:CtrlName ID="CtrlName1" IsMultipleFile="false" Category="1" runat="server" />
<asp:Button runat="server" ID="btnTest1" Text="Get Value" OnClientClick="return btnTest_ClientClick('1');" />
<br /><br />
<br />
<br /><br /> <br /><br />
2. Second Instance <br /><br />
<uc1:CtrlName ID="CtrlName2" IsMultipleFile="false" Category="2" runat="server" />
<asp:Button runat="server" ID="Button2" Text="Get Value" OnClientClick="return btnTest_ClientClick('2');" />
</div>
<script type="text/javascript">
var inst1 = new CtrlName<%=CtrlName1.ClientID %>();
var inst2 = new CtrlName<%=CtrlName2.ClientID%>();
function btnTest_ClientClick(strVal) {
if (strVal == '1') {
inst1.HidePanel();
inst1.GetSearchedText();
inst1.GetInputText();
}
else {
inst2.HidePanel();
inst2.GetSearchedText();
inst2.GetInputText();
}
return false;
}
</script>
</form>
</body>
</html>
Make the variable initializations after all scripts loaded like this (with JQuery):
$(document).ready(function()){
var inst1 = new CtrlName<%=CtrlName1.ClientID %>();
var inst2 = new CtrlName<%=CtrlName2.ClientID%>();
function btnTest_ClientClick(strVal) {
if (strVal == '1') {
inst1.HidePanel();
inst1.GetSearchedText();
inst1.GetInputText();
}
else {
inst2.HidePanel();
inst2.GetSearchedText();
inst2.GetInputText();
}
return false;
}
};
I have a master page and in its head, i have :
<script src="Script/jquery.min.js"></script>
<link href="Stylesheet/Master.css" rel="stylesheet" />
and i have a webform (by name=Login.aspx) which was inherited from my master page, in Login.aspx i have :
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<input id="t1" type="password" placeholder="Passwords" class="login-input-class1" runat="server" ClientID="Static" />
<input id="t2" type="text" placeholder="ConfirmPasswords" class="login-input-class1" runat="server" ClientID="Static"/>
<label class="display" id="lblerror">Error</label>
<script>
$(document).ready(function () {
$("#t2").change(function () {
if ($("#t1").val() === $("#t2").val()) {
$("#lblerror").addClass("display");
}
else {
$("#lblerror").removeClass("display");
}
});
});
</script>
</asp:Content>
and in Master.css i have :
.display {
display:none;
}
But my script does not work, what is the problem?
Because the ID changes at run-time. You should use ClientId for your controls.
You can also use ClientIDMode="Static" to stop the id form changing to it's original.
More Detail about client id mode
$("#<%= Control.ClientID %>").addClass("display");
$("#<%=t2.ClientID %>").change(function () {
if ($("#<%=t1.ClientID %>").val() === $("#<%=t2.ClientID %>").val()) {
$("#lblerror%>").addClass("display");
}
else {
$("#lblerror").removeClass("display");
}
});
Edit 1
<input id="t1" type="password" placeholder="Password" class="login-input-class1"
runat="server" />
<input id="t2" type="text" placeholder="ConfirmPassword" class="login-input-class1"
runat="server" />
And jQuery
$(document).ready(function () {
$("#<%=t2.ClientID %>").change(function () {
if ($("#<%=t1.ClientID %>").val() === $("#<%=t2.ClientID %>").val()) {
$("#lblerror%>").addClass("display");
}
else {
$("#lblerror").removeClass("display");
}
});
});
Seem like you want:
if ($("#t2").val() === $("#t1").val()) {
or:
if ($(this).val() === $("#t1").val()) {
instead of:
if ($("#t1").val() === $("#t1").val()) {
I have a dropdown which i create dynamically through javascript.Out of the blue a blank option gets added at 0th position.Now i wanted to remove this blank option through javascript.The only road block i m facing is checking the blank option.Please help
<title>Dynamic DropDownList</title>
<script type="text/javascript" language="javascript">
function AddItemInList()
{
var list = document.getElementById('DropDownList1');
var box = document.getElementById('Text1');
var newListItem = document.createElement('OPTION');
newListItem.text = box.value;
newListItem.value = box.value;
list.add(newListItem);
box.value = "";
box.focus();
}
function RemoveItemInList()
{
var list = document.getElementById('DropDownList1');
if(list.options.length > 0)
{
for(var i = list.options.length - 1; i >= 0; i--)
{
if(list.options[i].selected)
{
list.remove(i);
return false;
}
}
}
else
{
alert('Unable to remove. List is Empty!');
}
}
</script>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<input id="Text1" type="text" />
<input id="Button1" type="button" value="Add New" onclick="AddItemInList();"/>
<input id="Button2" type="button" value="Remove Item" onclick="return RemoveItemInList();"/>
</div>
</form>