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>

How can I target EVERY link and button on the page?

I have a shopping cart that contains a form field and a checkbox in each row. The form field controls the quantity, which can be edited, if the customer wants to modify the quantity of the product they order, and the checkbox selects the item, either to toss the item in a wish list, or to remove it. The Add To Wish list and Remove Functions are separated out of this particular question.
What, I am looking at doing, is detecting when the form has been changed, and then targeting EVERY anchor tag and button on the page, so if the items have been modified, the script stops the click through and pops up a bootstrap modal, alerting the user that something in their cart has been modified.
HTML (the shopping cart row, run through a JSTL forEach loop, but the markup is this):
<table>
<form id="shoppingCart" action="updateTheCart.action">
<c:forEach var="item" items="${shoppingCart.items}" varStatus="status">
<tr class="cart-row">
<td class="remove" data-label="Remove">
<label>
<input type="checkbox" name="removeFlag(<c:out value="${status.count}"/>)" value="true"/>
</label>
</td>
<td class="title" data-label="Title">
${item.value.sellableGood.name}
</td>
<td class="qty" data-label="Quantity">
<input type="num" class="form-control qty-input" name="quantity(<c:out value="${status.count}" />)" value="<c:out value="${item.value.quantity}" />"/>
</td>
<td class="subtotal" data-label="Line Total">
<fmt:formatNumber type="currency" pattern="$#,##0.00" value="${item.value.itemExtendedTotal}" />
</td>
</tr>
</c:foreach>
</table>
<p>Checkout</p>
<p><button type="submit" id="checkout">Update Cart</button></p>
<p><button id="addToWishlist" type="submit" id="wish-list">Add To Wish List</button></p>
<p>Chontinue Shopping</p>
</form>
JS:
$("#shoppingCart :input").change(function() {
$("#shoppingCart").data("changed",true);
});
I know I am missing a LOT, but I really don't know where to begin at this point.

You can try the onbeforeunload Event
$('input').change(function() {
if( $(this).val() != "" )
window.onbeforeunload = "Are you sure you want to leave?";
});

Javascript:
;[].forEach.call(document.querySelectorAll('a, button'), function(element) {
//do something with buttons and links, for example:
element.setAttribute('data-changed', true')
});
The jquery equivalent is:
$('a, button').each(function(element) {})
To watch the form for changes, I would use the blur event, it's the reverse of focus:
;[].forEach.call(document.querySelectorAll('#myForm input'), function(element) {
element.addEventListener('blur', function(event) {
//something has changed
})
});
Jquery:
$('#myForm input').on('blur', function(event) {})

Why does my radio button event trigger when a different radio button is pressed?

I am using the following code to show "pers" and hide "bus" and vice versa
JQuery:
$('input[name="perorbus"]').click(function() {
if ($(this).attr('id') == 'bus') {
$('#showbus').show();
$('#showper').hide();
}
if ($(this).attr('id') == 'pers') {
$('#showper').show();
$('#showbus').hide();
}
});
HTML:
<fieldset id="perorbus">
<label style="font-size: large;">Personal Or Business?</label>
<br/>
<input type="radio" class="PerOrBus" value="pers" id="pers" name="perorbus"/>
<label style="font-size: medium;">Personal Customer</label>
<input type="radio" class="PerOrBus" id="bus" value="bus" name="perorbus"/>
<label style="font-size: medium;">Business Customer?</label>
<br/>
</fieldset>
<table id="showper">
<tr>
<td>Show Personal</td>
</table>
<table id="showbus">
<tr>
<td>Show Business</td>
</table>
Any other Radio button that I put on the page triggers this. They are all given a name attribute like the following:
<fieldset id="CACCc">
<input type="radio" id="1b" class="2b" value="4b" name="1b"/> Yes
<br/>
<input type="radio" id="id12" class="4class" value="4c" name="id12"/> No ​
<br/></fieldset>
However, I have to assign the name on doc ready with jquery like the following:
document.getElementById("1b").setAttribute('name', '1b');
document.getElementById("id12").setAttribute('name', 'id12');
This is due to me being limited to not using name attributes in the HTML (long story)
Any help would be great, thanks

Try going by the radio button and then the name of the radio button. Also use the change trigger. By the way, your fieldset has the same name. That could be an issue.
$(document).ready(function() {
// Update names
$('input[type=radio][name=perorbus]').change(function() {
if (this.id == 'bus') {
$('#showbus').show();
$('#showper').hide();
}
if (this.id == 'pers') {
$('#showper').show();
$('#showbus').hide();
}
});
});

The answer to my issue specifically is that is was a Sharepoint caching issue. Because I do not have access to remove cache, I simply renamed and re-id'd everything and got it working.
This will not solve other peoples issues, probably but the other answers should.

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";

Conditionally Show/Hide Table Row based on yes/no radio button

I have a simple html form with a series of questions in a table. If a user answers yes to a yes/no radio button question I then want to show a hidden row that allows them to enter details into a textarea field. If they click No the textarea input should be cleared and hidden again.
Here's my html form with one yes/no question and one hidden row for more details if they click yes:
<form class="form-horizontal" action="#" method="post" id="questionForm">
<input type="hidden" name="recid" value="1">
<table class="table table-condensed table-hover table-bordered">
<tr>
<td><strong>Question 1</strong></td>
<td>please answer yes or no to this question</td>
<td>
<div class="controls">
<label class="radio inline">
<input type="radio" name="question1" id="question1" value="Yes" required>Yes </label>
<label class="radio inline">
<input type="radio" name="question1" id="question1" value="No" required>No </label>
<label for="question1" class="error"></label>
</div>
</td>
</tr>
<tr class="question1yes">
<td></td>
<td>Please describe this and when it started</td>
<td>
<div class="controls">
<textarea name="question1Details" rows="3"></textarea>
<label for="question1Details" class="error"></label>
</div>
</td>
</tr>
</table>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary">Continue</button>
<button type="reset" class="btn">Reset</button>
</div>
</div>
</form>
Here's my current script that isn't working:
$().ready(function() {
// validate the form when it is submitted
$("#questionForm").validate();
if($("#question1:checked").length != 0){
// yes is checked... show the dependent fields
$(".question1yes").show();
}else{
// hide it and blank the fields, just in case they have something in them
$(".question1yes").hide();
$("#question1Details").val("");
}
$("#question1").click(function(){
// show the dependent fields
if(this.value == "Yes"){
$("#question1yes").show();
}else{
// hide the dependent fields and blank them
$(".question1yes").hide();
$("#question1Details").val("");
}
});
});
I've setup a jsFiddle here that demonstrates my form as it currently stands. My optional row is starting as hidden but is not becoming visible when you click the yes radio button.

You can't have 2 elements with the same ID, to select them you can use $('.controls input[type="radio"]') or a class selector exemple $('.radio').

Your radio inputs have identical IDs, and that is not valid HTML. Also, it is breaking your code, because you can't manipulate them independently.
My advice:
Append _y and _n (or whatever you prefer) to the IDs, respectively. (Or use any other unique ID)
Bind the click events to the new IDs.
Code:
$("#question1_y").click(function () {
$(".question1yes").show();
});
$("#question1_n").click(function () {
$(".question1yes").hide();
$(".question1yes textarea").val("");
});

Try this
$().ready(function() {
// validate the form when it is submitted
$("#questionForm").validate();
if($("#question1:checked").length > 0){
// yes is checked... show the dependent fields
$(".question1yes").show();
}else{
// hide it and blank the fields, just in case they have something in them
$(".question1yes").hide();
$("#question1Details").val("");
}
$("#question1").click(function(){
// show the dependent fields
if($(this).val() == "Yes"){
$("#question1yes").show();
}else{
// hide the dependent fields and blank them
$(".question1yes").hide();
$("#question1Details").val("");
}
});
});
Demo

try this following it working as it should be
$("input:radio[name=question1]").click(function(){
// show the dependent fields
if(this.value == "Yes"){
$(".question1yes").show();
}else{
// hide the dependent fields and blank them
$(".question1yes").hide();
$("#question1Details").val("");
}
});
the problem is you are calling $("#question1yes").show(); instead of $(".question1yes").show(). question1yes is class implemented on tr not id.
Hope it will help you