We Keep Coding

JQUERY AJAX LOAD-TEXTBOX FOCUS

I am trying to get the text in a div to show when the textbox beside the div is focused on. I am not seeing that text
Below is the jquery script
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script src="../Scripts/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//$jquery selector
//find textbox and place it in a variable
var txtbox = $('input[type="text"]');
//when textbox recives focus
txtbox.focus(function () {
$('#newroleHelpDiv').load('help.html');
});
//when textbox loses focus
txtbox.blur(function () {
$('#newroleHelpDiv').html('');
});
});
</script>
Below is the ASP code
<fieldset style="width:350px">
<legend> New Role</legend>
<table>
<tr>
<td>Insert New Role:</td>
<td> <input type="text" id="newrole" /> </td>
<td> <div id="newroleHelpDiv" runat="server"></div></td>
</tr>
</table>
</fieldset>
</asp:Content>
Below is the help.html file where the help text is coming from
<div id="newroleHelpDiv">
You may add an employee to this role
</div>

id should be unique so if you have id="newroleHelpDiv" main html, you should use another id for your help.html
not sure if you could load the html file, but if loaded it only once, then you can show and hide like this:
$(document).ready(function() {
$('#newroleHelpDiv').load('help.html');
$('#newroleHelpDiv').hide();
//$jquery selector
//find textbox and place it in a variable
var txtbox = $('input[type="text"]');
//when textbox recives focus
txtbox.focus(function() {
$('#newroleHelpDiv').show();
});
//when textbox loses focus
txtbox.blur(function() {
$('#newroleHelpDiv').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<fieldset style="width:350px">
<legend> New Role</legend>
<table>
<tr>
<td>Insert New Role:</td>
<td>
<input type="text" id="newrole" /> </td>
<td>
<div id="newroleHelpDiv" runat="server">You may add an employee to this role</div>
</td>
</tr>
</table>
</fieldset>

TypeError: $(...). is not a function

I'm trying to track down an error
TypeError: $(...).clientSideCaptcha is not a function at RegisterCapcha (http://localhost:4382/xxx/index.html:98:31)
, am working in angularJS project. simple issue but i can't got out from it.
i have implemented a captcha using j query and successfully working in a view when on on-click but thing is i have try to load that same captcha in other view in on-load but captcha function is not loading.
in view1 captcha working fine code below
view1.html
<a onclick="RegisterCapcha(); ReverseContentDisplay('job-apply'); return true;"
href="javascript:ReverseContentDisplay('job-apply')">
<form id="careersForm" >
<table class="apply-form">
<tr>
<td>First Name </td>
<td><input type="text" name="First_Name" class="applytext" required id="First_Name"></td>
</tr>
<tr>
<td colspan="2" class="applytable" >
<div class="editor-field">
<p>
<label>
Enter the text shown below:
<input type="text" id="captchaText" onkeyup="javascript:EnableApply();" /></label></p>
<p id="captcha">
</p>
</div>
</td>
</tr>
<tr>
<input type="submit" id="careerbtn" name="button" disabled="disabled" class="send-resume" value="SEND" style="margin-left:24%;">
script declared in index.html
<script src="js/captcha/jquery.clientsidecaptcha.js" type="text/javascript"></script>
<script type="text/javascript">
function EnableApply() {
var OriginalCaptcha = $('#careersForm').data('captchaText');
var userCapcha = $('#captchaText').val();
if (OriginalCaptcha == userCapcha) {
$('#careerbtn').removeAttr('disabled');
}
else {
$('#careerbtn').attr('disabled', 'disabled');
}
}
function RegisterCapcha() {
$("#captcha").html(''); //reset the generated captcha first
$("#captchaText").val('');
$("#careersForm").clientSideCaptcha({
input: "#captchaText",
display: "#captcha",
});
}
</script>
view2:
same form with same RegisterCapcha(); script in onload but calling in view2
<script type="text/javascript">
$(document).ready(function () { RegisterCapcha(); });
</script>
<form id="careersForm" >
<table class="apply-form">
<tr>
<td>First Name </td>
<td><input type="text" name="First_Name" class="applytext" required id="First_Name"></td>
</tr>
<tr>
<td colspan="2" class="applytable" >
<div class="editor-field">
<p>
<label>
Enter the text shown below:
<input type="text" id="captchaText" onkeyup="javascript:EnableApply();" /></label></p>
<p id="captcha">
</p>
</div>
</td>
</tr>
<tr>
<input type="submit" id="careerbtn" name="button" disabled="disabled" class="send-resume" value="SEND" style="margin-left:24%;">
please help me to solve it thanks in advance :)

Include jQuery before all your scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/captcha/jquery.clientsidecaptcha.js" type="text/javascript"></script>
After that define $ variable for jQuery function like this:
<script type="text/javascript">
(function($){
function EnableApply() {
var OriginalCaptcha = $('#careersForm').data('captchaText');
var userCapcha = $('#captchaText').val();
if (OriginalCaptcha == userCapcha) {
$('#careerbtn').removeAttr('disabled');
}
else {
$('#careerbtn').attr('disabled', 'disabled');
}
}
function RegisterCapcha() {
$("#captcha").html(''); //reset the generated captcha first
$("#captchaText").val('');
$("#careersForm").clientSideCaptcha({
input: "#captchaText",
display: "#captcha",
});
}
}(jQuery || window.jQuery));
</script>

After loading jQuery
<script src='jquery.js'></script>
if (typeof $ == 'undefined') {
var $ = jQuery;
}
Reference：
https://v123.tw/fix-jquery-typeerror-not-function/

please include latest jquery before all the script tags.
find latest jquery at https://code.jquery.com/ or
use cdn
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

For use Jquery plug-in (library) you need to import Jquery first.
The better way is import all scripts at the end of your HTML.
Take care of the order (Jquery first).
Example of Jquery import (online version).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
For some reason you don't want import script at the end, don't forget :
$(document).ready(function(){//code});
Some plug-in need HTML to be loaded before use them. So the script begins to end.

document.getElementById("test").style.display="hidden" not working

I want to hide my form when I click on the submit button. My code is as follows:
<script type="text/javascript">
function hide() {
document.getElementById("test").style.display = "hidden";
}
</script>
<form method="post" id="test">
<table width="60%" border="0" cellspacing="2" cellpadding="2">
<tr style="background:url(../images/nav.png) repeat-x; color:#fff; font-weight:bold"
align="center">
<td>Ample Id</td>
<td>Find</td>
</tr>
<tr align="center" bgcolor="#E8F8FF" style="color:#006">
<td>
<input type="text" name="ampid" id="ampid" value="<?php echo $_POST['ampid'];?>"
/>
</td>
<td>
<input type="image" src="../images/btnFind.png" id="find" name="find"
onclick="javascript:hide();" />
</td>
</tr>
</table>
</form>
But when I click on the "Find" button, that particular form is not being hidden.

It should be either
document.getElementById("test").style.display = "none";
or
document.getElementById("test").style.visibility = "hidden";
Second option will display some blank space where the form was initially present , where as the first option doesn't

Set CSS display property to none.
document.getElementById("test").style.display = "none";
Also, you do not need javascript: for the onclick attribute.
<input type="image" src="../images/btnFind.png" id="find" name="find"
onclick="hide();" />
Finally, make sure you do not have multiple elements with the same ID.
If your form goes nowhere, Phil suggested that you should prevent submission of the form. Simply return false in the onsubmit handler.
<form method="post" id="test" onsubmit="return false;">
If you want the form to post, but hide the div on subsequent page load, you will have to use server-side code to hide the element:
<script type="text/javascript">
function hide() {
document.getElementById("test").style.display = "none";
}
window.onload = function() {
// if form was submitted, PHP will print the below,
// which runs function hide() on page load
<?= ($_POST['ampid'] != '') ? 'hide();' : '' ?>
}
</script>

Using jQuery:
$('#test').hide();
Using Javascript:
document.getElementById("test").style.display="none";
Threw an error "Cannot set property 'display' of undefined"
So, fix for this would be:
document.getElementById("test").style="display:none";
where your html code will look like this:
<div style="display:inline-block" id="test"></div>

Replace hidden with none. See MDN reference.

There are two ways of doing this.
Most of the answers have correctly pointed out that style.display has no value called "hidden". It should be none.
If you want to use "hidden" the syntax should be as follows.
object.style.visibility="hidden"
The difference between the two is the visibility="hidden" property will only hide the contents of you element but retain it position on the page. Whereas the display ="none" will hide your complete element and the rest of the elements on the page will fill that void created by it.
Check this illustration

its a block element, and you need to use none
document.getElementById("test").style.display="none"
hidden is used for visibility

Maybe you can add a class like 'hide'.
Follow the example here : https://developer.mozilla.org/fr/docs/Web/API/Element/classList.
document.getElementById("test").classList.add("anotherclass");

you need to use display = none
value hidden is connected with attributet called visibility
so your code should look like this
<script type="text/javascript">
function hide(){
document.getElementById("test").style.display="none";
}
</script>

you can use something like this....div container
<script type="text/javascript">
function hide(){
document.getElementById("test").innerHTML.style.display="none";
}
</script>
<div id="test">
<form method="post" >
<table width="60%" border="0" cellspacing="2" cellpadding="2" >
<tr style="background:url(../images/nav.png) repeat-x; color:#fff; font-weight:bold" align="center">
<td>Ample Id</td>
<td>Find</td>
</tr>
<tr align="center" bgcolor="#E8F8FF" style="color:#006" >
<td><input type="text" name="ampid" id="ampid" value="<?php echo $_POST['ampid'];?>" /></td>
<td><input type="image" src="../images/btnFind.png" id="find" name="find" onclick="javascript:hide();"/></td>
</tr>
</table>
</form>
</div>

Through JavaScript
document.getElementById("test").style.display="none";
Through Jquery
$('#test').hide();

this should be it try it.
document.getElementById("test").style.display="none";

With Javascript convert disabled input fields into readonly input fields

I have a problem with a form in IE. I have disabled fields in form i,e. field having property disabled="disabled". These fields show the input text in grey color and that looks very dull/blurred and if i try apply css changes to such fields, it will not work for IE, but works for other browsers like chrome, firefox.
Is there any way to make the text to better font color here?
I thought one way of doing this is removing property disabled="disabled" and add property readonly="readonly" with javascript. If this is possible then how can i do this with Javascript. I am new to Javascript, so please help me
Below HTML to explain the behaviour. Run this in both IE and other browser to see the difference.
<html>
<head>
<style type="text/css">
.col {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>Editable field: </td>
<td>
<input type="text" id="editable-field-id" value="Editable field" class="col"/>
</td>
</tr>
<tr>
<td>Disabled field: </td>
<td>
<input type="text" disabled="disabled" id="disabled-field-id" value="Disabled field" class="col" />
</td>
</tr>
<tr>
<td>Readonly field: </td>
<td>
<input type="text" readonly="readonly" id="readonly-field-id" value="Readonly field" class="col"/>
</td>
</tr>
</table>
</body>
</html>
I am testing this in IE9.

You can change disabled input fields into readonly ones by using the .prop() method available in jQuery. I typically discourage the use of .attr(), and this is why.
$(function (){
$('input').prop({
'disabled': false,
'readonly': true
});
});
Although the method .removeProp() is available, documentation encourages refrain when using it, because, to quote, it "will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead."
View demo here: http://jsfiddle.net/teddyrised/tE98z/

document.getElementById("your_field").readOnly=true;
or, with jQuery:
$('#your_field').attr('readonly', true);

<html>
<head>
<style type="text/css">
.col {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>Editable field: </td>
<td>
<input type="text" id="editable-field-id" value="Editable field" class="col"/>
</td>
</tr>
<tr>
<td>Disabled field: </td>
<td>
<input type="text" disabled="disabled" id="disabled-field-id" value="Disabled field" class="col" />
</td>
</tr>
<tr>
<td>Readonly field: </td>
<td>
<input type="text" readonly="readonly" id="readonly-field-id" value="Readonly field" class="col"/>
</td>
</tr>
</table>
<script type = "text/javascript">
document.getElementById("disabled-field-id").disabled = false;
document.getElementById("disabled-field-id").readOnly = true;
</script>
</body>
</html>

Use the setAttribute property. Note in example that if select 1 apply the readonly attribute on textbox, otherwise remove the attribute readonly.
http://jsfiddle.net/baqxz7ym/2/
document.getElementById("box1").onchange = function(){
if(document.getElementById("box1").value == 1) {
document.getElementById("codigo").setAttribute("readonly", true);
} else {
document.getElementById("codigo").removeAttribute("readonly");
}
};
<input type="text" name="codigo" id="codigo"/>
<select id="box1">
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
</select>

if you disable the inputs programmatically can set style as you want
try it:
//bloqueo todos los radiobuttons y checkboxs
//block all radiobuttons and checkbox
jQuery(document).on("change", 'input:checkbox.yourClass,input:radio.yourClass', function () {
jQuery(this).prop("checked", false);
});
//bloqueo campos de texto
//block all text fields
jQuery(document).on("focusin", 'input.yourClass, textarea.yourClass', function () {
jQuery(this).blur();
});
//bloqueo selects
//block all selects
jQuery(document).on("focusin", 'select.yourClass', function (event) {
var $selectDiabled = jQuery(this).attr('disabled', 'disabled');
setTimeout(function(){ $selectDiabled.removeAttr("disabled"); }, 30);
});
if you want set style they aren't technically disabled
here can see the original code: https://jsfiddle.net/9kjqjLyq/

You need to depend on a pure javascript(preferrably jQuery) solution.
Add a custom attribute to all your controls:
<input type="text" disabled="true" />
Now you can check if they are disabled and you can proceed to block them using javascript:
var value = yourTextBox.value; //the last value that the control holds,
//before it was disabled?
$('yourTextBox').click(function() {
value = $(this).value;
});
$('yourTextBox').blur(function() {
if($(this).attr('disabled') == 'true')
$(this).value = value;
});
To add more strictness, add another function:
$('yourTextBox').keypress(function() {
if($(this).attr('disabled') == 'true')
$(this).value = value;
});
If you want something simple, I would recommend this:
$('yourTextBox').keypress(function() {
if($(this).attr('disabled') == 'true')
return false;
});

Hide/Show Div on Radio Selection

I would like to hide/show a div based on radio selction.
-On page load the div is hidden and radio "yes" is selected.
-If user selects radio "no" the div would appear.
-If the user then rechecks "yes" the div would hide again.
Could anyone show me how this would work?
The html:
<table width="450px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200px" style="padding-top:3px; padding-left:3px;"><strong>Deliver Immediately?</strong>
<input type="radio" name="imm" id="delivernow" checked="true" />Yes
<input type="radio" name="imm" id="deliverlater" />No
</td>
<td width="140px">
<div name="datediv">
<label for="date">Select date:</label>
<input type="Text" id="date" maxlength="25" size="25"/>
<img src="images/cal.gif" onclick="javascript:NewCssCal('date','ddMMyyyy','arrow',true,'12','','future')" style="cursor:pointer"/>
</div>
</td>
</tr>
</table

Something like this? You will need to have jQuery loaded.
$(function(){
$("div[name='datediv']").hide();
$("#delivernow").add("#deliverlater").change(function(){
$("div[name='datediv']").fadeToggle();
});
});

jQuery makes this fairly simple. You could add a click function to the radio group (in this case select using the name "imm") and check the id of the radio button that's been clicked like this:
$("input[name='imm']").click(function(){
if($(this).attr("id") == "deliverlater"){
$("#datediv").show();
}else{
$("#datediv").hide();
}
});
Here's a live example on jsfiddle http://jsfiddle.net/h9H29/
EDIT: Here's jQuery include code for you
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// We place your page code here
$("input[name='imm']").click(function(){
if($(this).attr("id") == "deliverlater"){
$("#datediv").show();
}else{
$("#datediv").hide();
}
});
});
</script>