We Keep Coding

Hide/Show button + not valid HTML

First Question: On W3 HTML Validator I get the following error:
Attribute value not allowed on element input at this point.
But, in my code, I am using the 'value' to change images so how could I fix this?
Second question: I need the image to remain the same even when I refresh. I am new to Javascript, but I know I need to utilise cookies or local storage in some way. Can someone help with this?
$(document).ready(function() {
$("#button").on("click", function() {
$("#collapse").slideToggle("slow");
if ($(this).val() == "Hide") {
$(this).val("Show");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d35f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
} else {
$(this).val("Hide");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="image" value="Hide" id="button" src="https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1"></button>
<div id="collapse">
Hello
</div>

If you just want to make the HTML valid, the simplest tweak would be to use a class or data attribute instead.
$(document).ready(function() {
$("#button").on("click", function() {
$("#collapse").slideToggle("slow");
if ($(this).data('status') == "Hide") {
$(this).data('status', "Show");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d35f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
} else {
$(this).data('status', "Hide");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="image" data-status="Hide" id="button" src="https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1"></button>
<div id="collapse">
Hello
</div>
To persist the value, retrieve the status on pageload and run the handler
const initialStatus = localStorage.imageStatus || 'Hide';
$('#button').data('status', initialStatus);
$('#button').click();
and set it after a change
localStorage.imageStatus = $('#button').data('status');

Client side validation for Textbox inside Gridview control Using Javascript Or Jquery

I am developing asp.net application, in that i have a page contains gridview with text boxes,
in that i need to validate to fill atleast one text box in that gridview.
I googled many pages, but i have found only check box validation like this,
when save button click, i need to validate to fill atleast one text box in deposit amount in that gridview..
please any answers would be appreciated..

Use RequiredFieldValidator
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtAmount" ErrorMessage="Fill This"></asp:RequiredFieldValidator>

<script type="text/javascript">
function validateTextBox() {
//get target base & child control.
var TargetBaseControl = document.getElementById('<%=this.Gridview1.ClientID%>');
var TargetChildControl1 = "txtDepositAmount";
//get all the control of the type INPUT in the base control.
var Inputs = TargetBaseControl.getElementsByTagName("input");
for (var n = 0; n < Inputs.length; ++n)
if (Inputs[n].type == 'text' && Inputs[n].id.indexOf(TargetChildControl1, 0) >= 0)
if (Inputs[n].value != "") return true;
alert('Enter Atleast One Deposit Amount!');
return false;
}
</script>
<asp:ImageButton ID="btnSave" runat="server" ValidationGroup="valInsert" ImageUrl="~/images/save6.png"
Width="40px" Height="40px" OnClientClick="javascript:return validateTextBox();" OnClick="btnSave_Click" ToolTip="Save" />

You can use a CustomValidator and jQuery to check if at least one TextBox has text in it.
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="At least one TextBox is required" ClientValidationFunction="validateMyTextBoxes"></asp:CustomValidator>
<script type="text/javascript">
function validateMyTextBoxes(oSrc, args) {
var isValid = false;
$("#<%= GridView1.ClientID %> input[type=text]").each(function () {
if ($(this).val() != "") {
isValid = true;
}
})
args.IsValid = isValid;
}
</script>

Reset FreeTextBox editor using javascript

I am using third party open source FreeTextbox (FTB) editor and i want to reset the textbox or make the textbox empty using javascript.
//HTML
<FTB:FreeTextBox ID="FreeTextBox1" BreakMode="LineBreak" DesignModeCss="~/FreeTextBox/DesignMode.css" Width="780px" Height="210px" AutoParseStyles="False" FormatHtmlTagsToXhtml="False" HtmlModeDefaultsToMonoSpaceFont="True" ClientIDMode="Static"></FTB:FreeTextBox>
<input type="button" value="Reset" id="buttonReset" runat="server" clientidmode="Static" />
<script language="javascript">
$("#buttonReset").bind('click', function () {
// Need the code here
});
</script>

First u have to find the control and then reset it.
//Code
$("#buttonReset").bind('click', function () {
if (FTB_API != null) {
objFTBControl = FTB_API['FreeTextBox1'];
if (objFTBControl) {
objFTBControl.SetHtml("");
}
}
});

try this it ll be work...
$("#buttonReset").bind('click', function () {
if (FTB_API != null) {
objFTBControl = FTB_API['FreeTextBox1'];
if (objFTBControl) {
objFTBControl.SetHtml("");
}
}
});

replacing Enter key code with TAB key code in jQuery

I have a script in javascript that replace Enter with TAB key:
function ReplaceEnterWithTab() { if (event.keyCode == 13) event.keyCode = 9; return false; }
and I use it this way:
txt.Attributes.Add("OnKeyDown", "ReplaceEnterWithTab();");
this code work nice.Now I want to develop a script with jQuery that will not need to add OnKeyDown attribute.please consider this sample page:
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" CssClass="EntTab"></asp:TextBox>
<br />
<br />
<asp:TextBox ID="TextBox2" runat="server" CssClass="EntTab"></asp:TextBox>
<br />
<br />
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="EntTab">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
</form>
I write this code :
$(document).ready(function () {
$('.EntTab').on('keydown', function (e) {
if (e.keyCode == 13) e.keyCode = 9;
});
});
the problem is when I press Enter key on TextBox1, Button1 cause page post back. How I can solve this issue?
thanks

Try:
$(document).ready(function () {
$(".EntTab").bind("keypress", function(e) {
if (e.keyCode == 13) {
var inps = $("input, select"); //add select too
for (var x = 0; x < inps.length; x++) {
if (inps[x] == this) {
while ((inps[x]).name == (inps[x + 1]).name) {
x++;
}
if ((x + 1) < inps.length) $(inps[x + 1]).focus();
}
} e.preventDefault();
}
});
});
Did you mean something like that.

You forgot to cancel the event propagation, add return false to the keydown callback:
$(document).ready(function () {
$('.EntTab').on('keydown', function (e) {
if (e.keyCode == 13) e.keyCode = 9;
return false;
});
});
Also, Button tag in ASP.NET has UseSubmitBehavior flag set to true by default, which causes the button to be rendered as input type="submit" tag. Try setting it to false, to get the behavior like described in the following answer: Use Javascript to change which submit is activated on enter key press

check box enable in Jquery

<tr id="tr99"><td>......</td></tr>
<input type="checkbox" onclick="toggletr(this);" value="val" id="cbox" />
The javascript:
$(document).ready(function() {
function toggletr(obj)
{
if(obj.checked)
$(#tr99).hide();
else
$(#tr99).show();
}
hi.this is my code that runs in add page of staff.
if user is in edit mode the value that value is checked in the code
i mean to say in .cs .
checkbox.checked ="true" means . that time i need to make that tr value "tr99" is visiable true
if checkbox is not checked then make the tr as hide.

Take the toggletr method out of the "$(document).ready(function() {"
<script type="text/javascript">
function toggletr(obj){
if(obj.checked)
$('#tr99').hide();
else
$('#tr99').show();}
</script>
<tr id="tr99"><td>......</td></tr>
<input type="checkbox" onclick="toggletr(this);" value="val" id="cbox" />

I think that you want this to happen
$(document).ready(function() {
function toggletr(obj){
if(obj.checked){
$("#tr99").show();
$("#cbox").attr("value", "tr99");
}else {
$("#tr99").hide();
}
}
});
Is that it? You can also add the function directly
function toggletr(obj){
if(obj.checked){
$("#tr99").show();
$("#cbox").attr("value", "tr99");
}else {
$("#tr99").hide();
}
}

If I were you I'd set the onclick method to be an event handler:
$(function(){
$('#cbox').click(function(){
if(this.checked){
$("#tr99").show();
$("#cbox").attr("value", "tr99");
}else {
$("#tr99").hide();
}
});
});

If you wanted to do pure jQuery and not mix in normal Javascript (obj.checked)....
$(function(){
$("#cbox").click(function(){
if($(this).is(":checked")){
$("#tr99").show();
}else{
$("#tr99").hide();
}
});
});