I have the following in my ASP.net page:
<input type="text" placeholder="Search..." size="30" id="pageLink" />
<br />
<span id="imgGo" class="imgGo floatRight"></span>
JQuery:
$('.imgGo').click(function () {
var strString = $("#pageLink").val()
var strSearch = "http://www.google.com/search=";
var url = strSearch + strString;
window.open(url, '_blank');
return false;
});
$("#pageLink").keyup(function (event) {
if (event.keyCode == 13 || event.which == 13) {
$(".imgGo").click();
}
});
When I enter something in the textbox and click the imgGo span it works fine but if instead I hit enter, my search button which is in another panels gets triggered.
How can I either modify my JQuery code to ensure that doesn't happen or add code-behind to ensure imgGo is triggered only if enter button is pressed while the pageLink textbox has the focus?
I tried the following but didn't work because imgGo is not a button:
<asp:Panel ID="pnlMedSearch" runat="server" DefaultButton="GoImg">
<!--<input type="text" placeholder="Search..." size="30" id="p2" />-->
<asp:TextBox Width="30" ID="pageLink" runat="server" />
<br />
<!--<span id="imgGo" class="imgGo floatRight"></span>-->
<asp:Label ID="imgGo" CssClass="imgGo floatRight" runat="server" />
</asp:Panel>
I get the following error:
The DefaultButton of 'pnlMedSearch' must be the ID of a control of type IButtonControl.
I would like to use the textbox which is not a ASP.net control because the placeholder attribute is important in my case.
I kept the same HTML content and modified my Jquery to the following:
$("#medlineSearch").keypress(function (event) {
if (event.which == 13) {
$("#imgGo").click();
return false;
}
});
Adding the return false; ensure it didn't invoke anything else on the page.
Alternate version for the same.
Register as an event on any tags:
onkeydown="pressButtonOnEnter('IdOfMyButton', event);"
Into your .js file:
function pressButtonOnEnter(buttonId, event) {
var key = (evt.which) ? evt.which : evt.keyCode;
if (key == 13) {
$("#" + buttonId).click();
}
}
It works in asp.net as well.You can simply add it to an asp:textbox for instance.
Related
In a WebForm I have an input checkbox to which I wanna apply server side action.
For example, when the checkbox is checked, I want to change some label's text.
I have tried to use on client side:
<input id="auto" name="auto" type="checkbox" data-toggle="toggle" data-on="AUTOMAT" data-off="MANUAL" <%= string.IsNullOrEmpty(Request["auto"]) ? string.Empty : "checked" %> />
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
<asp:HiddenField ID="customSwitch1Change" runat="server" Value="0" />
<script>
$('#auto').click(function () {
$('#<%=customSwitch1Change.ClientID%>').val("1");
$('#form1').submit();
});
</script>
I have used this and this for the input checkbox.
On the server-side I have tried:
protected void CustomSwitch1Change(string auto)
{
if (string.IsNullOrEmpty(auto))
{
Label3.Text = $"customSwitch1 was not checked.";
}
else
{
Label3.Text = $"customSwitch1 was checked and the check value is {auto}.";
}
}
But what I've tried is not working.
What I'm doing wrong? Or is there another way to do this?
You don't need the HiddenField. If you change the jQuery to the code below it will do a form post on CheckBox change.
<script>
$('#auto').change(function () {
$('#form1').submit();
});
</script>
Then you can simply get the value in code behind with
string auto = Request.Form["auto"];
if (string.IsNullOrWhiteSpace(TextBox1.Text))
{
Button1.Enabled = false;
}
else
{
Button1.Enabled = true;
}
Hi,
I have a form with 3 TextBoxes and I want the submit button doesn't send any data if any of them are empty,
I already use RequiredFieldValidator but how I can prevent user from submit until they filled all boxes
I tried the code above ^
you need some client side javascript..
at its simplest...
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" OnClientClick="return checkRequireds()" runat="server" Text="Button" />
<script>
function checkRequireds() {
var textBox = document.getElementById('<%=TextBox1.ClientID%>');
return !(textBox.value == 'undefined' || textBox.value == '')
}
</script>
PS: If you use the required field validator, you have already blocked the page from posting
I have login form
Login form
I want to show password when check box is checked. I write below code
<asp:TableRow runat="server">
<asp:TableCell runat="server">
<asp:TextBox runat="server" ID="txtPassword" Width="100%" TextMode="Password"></asp:TextBox>
</asp:TableCell>
<asp:TableCell runat="server">
<asp:CheckBoxList runat="server" ID="showHidePassword">
<asp:ListItem Value="1" Text="Show Password"></asp:ListItem>
</asp:CheckBoxList>
</asp:TableCell>
</asp:TableRow>
And try some JQuery code
$(function(){
$("#showHidePassword").bind("click",function(){
if($(this).is(":checked")){
// then I try to remove the "TextMode=Password"
// and think may be it works but there is no method that change textmode
}
});
});
Please help.
You can try changing the type attribute on change event, you can do something like this as an example:
$(function() {
$("#showHidePassword").on("change", function() {
var checked = this.checked;
$(this).siblings('input').attr('type', function() {
return checked ? "text" : "password";
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="showHidePassword">show password
<br>
<input type="password">
Actually I use CheckBoxList and use the ID of this control. But need control of checked item. So first of all use CheckBox instead of CheckBoxList.
And write below code in head section.
$(function () {
$("#showHidePassword").bind("click", function () {
var txtPassword = $("#txtPassword");
if ($(this).is(":checked")) {
txtPassword.after('<input onchange = "PasswordChanged(this);" id = "txt_' + txtPassword.attr("id") + '" type = "text" value = "' + txtPassword.val() + '" />');
txtPassword.hide();
} else {
txtPassword.val(txtPassword.next().val());
txtPassword.next().remove();
txtPassword.show();
}
});
});
function PasswordChanged(txt) {
$(txt).prev().val($(txt).val());
}
That's it.
You can try this
HTML
<input class="pwd" type="password">
<input class="chk" type="checkbox">Show Password
JQUERY
$(document).ready(function() {
$('.chk').on('click', function() {
if ($('.chk').prop("checked")) {
$('.pwd').prop('type', 'text');
} else {
$('.pwd').prop('type', 'password');
}
});
});
kindly check
https://jsfiddle.net/vzuLn88j/
so I am using javascript to validate an address field simply to pull the zip code off the end.
I have two asp:Labels that I show and hide to inform the user. It works great, the labels show when needed and the validation works how I want it, the problem comse when I try to hide them. One of the labels shows and hides just fine, but whenever I try to hide the other the script breaks
<script>
function isvalid()
{
var zip = MainContent_tbx_Appt_Address.value.slice(-5);
if (zip == "") {
MainContent_lbl_Add_validate2.hidden = true;
MainContent_lbl_Add_Validate.hidden = false;
}
else if (!zip.match('[0-9]{5}')) {
//MainContent_lbl_Add_validate.hidden = true;
MainContent_lbl_Add_validate2.hidden = false;
}
else
{
//MainContent_lbl_Add_validate.hidden = true;
MainContent_lbl_Add_validate2.hidden = true;
}
}
</script>
<asp:Label ID="lbl_Add_Validate" style="z-index:100;" Name="lbl_Add_Validate" DataPoint="dp_Add_Validate" runat="server" hidden="true" Text="Address is required"></asp:Label>
<asp:Label ID="lbl_Add_validate2" style="z-index:100;" Name="lbl_Add_Validate2" DataPoint="dp_Add_Validate2" runat="server" hidden="true" Text="Invalid address format"></asp:Label>
<br />
<asp:TextBox ID="tbx_Appt_Address" onblur="isvalid()" style="z-index:100;" Name="tbx_Appt_Address" DataPoint="dp_Appt_Address" runat="server" Rows="4" TextMode="MultiLine" Height="65px" Width="200px" value="Address" onFocus="if (this.value == this.defaultValue) { this.value = ''; }" placeholder="Address">Address</asp:TextBox>
this is my code in my asp file and when it hits the client side it spits out this
<span id="MainContent_lbl_Add_Validate" name="lbl_Add_Validate" datapoint="dp_Add_Validate" hidden="true" style="z-index:100;">Address is required</span>
<span id="MainContent_lbl_Add_validate2" name="lbl_Add_Validate2" datapoint="dp_Add_Validate2" hidden="true" style="z-index:100;">Invalid address format</span>
<br/>
<textarea name="ctl00$MainContent$tbx_Appt_Address" rows="4" cols="20" id="MainContent_tbx_Appt_Address" datapoint="dp_Appt_Address" value="Address" onfocus="if (this.value == this.defaultValue) { this.value = ''; }" placeholder="Address" onblur="return isvalid()" style="height:65px;width:200px;z-index:100;">Address</textarea>
everything else works as long as I have MainContent_lbl_Add_validate.hidden = true; commented out, but if I have ether of them run it breaks
In aspx pages if you are not using jQuery, try to get elements using document.getElementById('MainContent_tbx_Appt_Address'), and if you are using microsoft ajax frameworks you can use $get('MainContent_lbl_Add_validate'), these are the right ways to refer elements on DOM.
Editing: ok, looking your code with more accuracy I saw that you made a mistake on span ids, specifically at 'V' char. Check the case on ids and your script will run.
If you hide an element that has "runat=server", you might think that ASP will render the control styled so that it is invisible-- meaning you can later unhide it using Javascript. That's not how it work. If you set hidden=true, the element isn't rendered at all. Your Javascript is gagging on the reference to the missing element and halting execution, so your valiator code doesn't ever get a chance to run.
To render a hidden element, mark it up like this:
<asp:Label ID="lbl_Add_Validate" style="z-index:100;" Name="lbl_Add_Validate" DataPoint="dp_Add_Validate" runat="server" style="visibility: hidden" Text="Address is required"></asp:Label>
Personally I would let JQuery handle this, which you can do in .aspx:
$(function () {
$('#tbx_Appt_Address').blur(function(){
var text_input = $('tbx_Appt_Address').val();
//additional logic with conditions
if (text_input=='')
{
$('lbl_Add_Validate').show();
}
//etc etc
});
});
I have a bunch of buttons on my page and beside a textbox I have a Search button.
Now when I hit the return key on the keyboard it actually activates the Add user button which is right above.
How to link the textbox with the search button?
You can set the default button for your form:
<form id="form1" runat="server" defaultbutton="btn1">
You can use asp:panel for setting default button.
<form runat="server">
<asp:Panel runat="server" DefaultButton="bt1">
<asp:TextBox runat="server" />
<asp:Button id="bt1" Text="Default" runat="server" />
</asp:Panel>
</form>
Following javascript method will do it for you:
function clickButton(e, buttonid){
var evt = e ? e : window.event;
var bt = document.getElementById(buttonid);
if (bt){
if (evt.keyCode == 13){
bt.click();
return false;
}
}
}
In code behind, attach this event with your textbox like:
TextBox1.Attributes.Add("onkeypress", "return clickButton(event,'" + Button1.ClientID + "')");