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>
Related
I have this multilookuplist where user double click to movevalues to the right side. I need to make a method to check if the multilookuplist is empty.
I need to call it by the name as it is a sharepoint site.
The code looks like the following:
<span dir="none">
<input id="ctl00_MultiLookupPicker"
name="ctl04$ctl00$ctl00$MultiLookupPicker"
type="hidden"></input>
<input id="ctl04_ctl00_ctl00_MultiLookupPicker_data"
name="$ctl00$MultiLookupPicker$data"
type="hidden"
value="272|tAS (blaba)|t |t |t235|tAP (blalbla)|t |t |t224|tAR (blalbla)|t |t "></input>
<input id="ctl00_MultiLookupPicker_initial"
name="ctl04$ctl00$ctl00$MultiLookupPicker$initial"
type="hidden" value=""></input>
<table class="ms-long" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="ms-input">
<select name="ctl00$m$g_ctl00$SelectCandidate"
id="ctl00_ctl00_SelectCandidate"
multiple="multiple" title="Employees possible values"
onchange="GipSelectCandidateItems(ctl00_ctl00_MultiLookupPicker_m);"
ondblclick="GipAddSelectedItems(ctl00_ctl00_MultiLookupPicker_m); return false"
style="width:143px;height:125px;overflow:scroll;">
</select>
</td>
<td style="padding-left:10px">
<td align="center" valign="middle" class="ms-input"><button
id="ctl04_ctl00_ctl00_AddButton"
class="ms-ButtonHeightWidth"
onclick="GipAddSelectedItems(ctl00_ctl00_MultiLookupPicker_m); return false"> Add > </button><br />
<br /><button id="cctl04_ctl00_ctl00_RemoveButton"
class="ms-ButtonHeightWidth"
onclick="GipRemoveSelectedItems(ctl04_ctl00_ctl00_MultiLookupPicker_m); return false"> < Remove </button>
</td>
<td style="padding-left:10px">
<td class="ms-input">
<select name="ctl04$ctl00$ctl00$SelectResult"
id="ctl00_ctl04_ctl00_ctl00_SelectResult"
multiple="multiple"
title="Employees selected values"
onchange="GipSelectResultItems(ctl00_MultiLookupPicker_m);"
ondblclick="GipRemoveSelectedItems(_ctl00_ctl00_MultiLookupPicker_m); return false"
style="width:143px;height:125px;overflow:scroll;">
</select>
</td>
</tr>
</table>
</span>
The following is the method that I try to make it validate that some lines are selected and moved from "Employees possible values" to "Employees selected values"
<script type="text/javascript" src="../../Script/jquery-1.10.2.min.js">
</script>
<script type="text/javascript"
src="/sites/Competence_Man/Style%20Library/jquery.SPServices-2014.02.js">
</script>
<script type="text/javascript"
src="/sites/Competence_Man/Style%20Library/jquery.SPServices-2014.02.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello from Me");
//ValidateFields();
});
function ValidateFields()
{
if (("[title='Employees selected values'].val()==null)
{
// checked, so do something
alert("Test 2")
}
}
_spBodyOnLoadFunctionNames.push("ValidateFields()");
</script>
The code below for your reference.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
ValidateFields();
});
function ValidateFields(){
if ($("select[title='Employees selected values'] option").length==0){
// checked, so do something
alert("Test 2");
}
}
</script>
If you want to do the validation when save item form, we need override the PreSaveAction() method.
References: SharePoint 2010 Validation using Javascript
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) {})
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.
I am using echo nest API and can't find the problem with my button, why doesn't trigger my function at all! I check my button in chrome debug and shows no activity.
If I enter it trigger the function, but when I click on the button it doesn't trigger my function ?!!!
I need another pair of eyes to check my codes , pleaseeee :)
Thank you!
//Search artists.
function search(){
inputField = document.getElementById("inputField");
callApiSearch ( urlRoot + inputField , parseData);
}
//register click event handler for searchButton
function start(){
var searchButton = document.getElementById( "searchButton" );
searchButton.addEventListener("click", search, false);
} // end function start
window.addEventListener( "load", start, false );
</script>
</head>
<body>
<form id="searchForm" action="#">
<center>
<table>
<thead style="align-text:center" ><img src="images/Logo.png" style="align:center"><br/></thead>
<tr>
<td>Search Artist:</td>
<td> <input id="inputField" type="search"> </td>
<td> <input id="searchButton" type="button" value="Search"></td>
</tr>
</table>
<div id="results"></div>
</center>
</form>
</body>
</html>
in chrome --- > F12 --- > Network
should display all the activities; however mine is empty ... please correct me if I'm wrong?
try this one
html
<form action="#" id="searchForm" name="searchForm">
<img src="images/Logo.png" style="align:center" /><br />
<table>
<tr>
<td>Search Artist:</td>
<td><input id="inputField" type="search" /></td>
<td><input id="searchButton" type="button" value=
"Search" /></td>
</tr>
</table>
<div id="results"></div><br />
</form>
javascript
$("#searchButton").click(function() {
inputField = document.getElementById("inputField");
callApiSearch(urlRoot + inputField, parseData);
});
Put your 'script' block at the end of your html code. Browsers parses html document in top-down fashion and when your following method parsed by your browser
//register click event handler for searchButton
function start(){
var searchButton = document.getElementById( "searchButton" );
searchButton.addEventListener("click", search, false);
} // end function start
, it doesnt know what 'searchButton' is, since 'searchButton' hasn't been parsed yet. Thus it is unable to add event listener to your button and it doesn't work on click
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>