I searched for jquery change the labels although there were a lot of answers they didn't pertain to my question. I want to change the label to something else that includes links. I can't seem to get it to work!! I've put the JS in the head position of the code but had no luck and even used JSFiddle please see below. What am I doing wrong?
JSFiddle
https://jsfiddle.net/14tx86j5/
HTML
<input name="input_147.1" value="I agree to Veryappt’s Terms of Service" id="choice_3_147_1" type="checkbox">
<label for="choice_3_147_1" id="label_3_147_1">I agree to Companies Terms of Service</label>
Jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
$("#label_3_147_1 label").html('You also agree to our Privacy Policy, which describes how we process your information. Learn More about why we ask for this information.');
});
</script>
You have wrong Selector to target label element. The selector you have used looks for label element inside element with id label_3_147_1. You need to use:
$("#label_3_147_1")
Works for me .
You need to include JS Libraries
$('#label_3_147_1').html('You also agree to our Privacy Policy, which describes how we process your information. Learn More about why we ask for this information.');
});
Fiddle
You can use only id of label something like that:
$("#label_3_147_1").html('Put Your html here');
Related
Is there a way to add unbound label (for guidance purposes) to quick-create form? Only way I have found is to create a web resource like:
<html>
<body>
<label>some text</label>
</body>
</html>
And include it on a form. This seems to work for main forms; as for localization - it can be done like:
<html>
<body>
<label id="label"></label>
<script>// fetch and setup label content</script>
</body>
</html>
The issue is - there is no such option for quick create forms. Also it seems overly complex. Is there a simpler way how to include simple label/text for guidance purposes?
Easy way I could think of is using setFormNotification and it works in Quick Create form also. You can fetch & setup whatever you want for localization.
if (Xrm.Page.ui.getFormType() === 1) {
Xrm.Page.ui.setFormNotification("Note: Please do so and so", "INFO", "someUniqueName");
}
Also, when you fill the attribute description in Entity customizations that text will show as a tooltip on mouseover on form control label (Thought of mentioning, ignore if it's not useful for you).
Another option is like using Multiline textbox or Textarea control as a placeholder to show guidance text. Make it read-only & don't display the label in the form.
Is there a way to reveald a secon input in a form after the first input has been filled? For example if I have a text input asking how many kids are going on the trip, person responds and a second input appears asking age range...
A simple example:
jsFiddle Demo
HTML:
<input id="in1" type="text" /><br>
<input id="in2" type="text" /><br>
javascript/jQuery:
$('#in1').change(function(){
if ( this.value != '' ) $('#in2').show().focus();
});
Update:
Note that you must wrap the jQuery code in a document.ready wrapper:
$(document).ready({
$('#in1').change(function(){
if ( this.value != '' ) $('#in2').show().focus();
});
}); //END document.ready
This prevents the javascript from attempting to bind an event (the change event) to a DOM element (the #in1 element) before that element exists in the DOM. $(document).ready() ensures the DOM has been fully rendered before attempting to create the event bindings.
Usually, all (or almost all) of your javascript/jQuery code is written within the $(document).ready() wrapper.
Notes:
The above code example uses jQuery, so you should reference the jQuery library in the <head> tags, comme ca:
<head>
<!-- other stuff in head -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
Note that if you use a CDN to load the jQuery library, as above, it is likely that jQuery is already pre-loaded from other websites visited previously.
If you want some fast lessons on jQuery, find free video tuts here:
https://www.thenewboston.com/videos.php?cat=32
or at
http://phpacademy.org
Yes, it is possible.
You should look at either JavaScripts onchange() or jQuery's .change() event to control this action. And then of course hiding and showing certain elements.
I have this snippet of HTML:
<div class="clearfix" id="menu-file-div">
<label id="menu-file-label" for="id_menu_file">From File</label>
<div class="input">
<div id="file-upload">
<input type="hidden" name="menu_file" id="id_menu_file" />
<script type="text/javascript">var field_id = "id_menu_file";</script>
<script type="text/javascript">var append_to_element_id = "menu-upload";</script>
<script type="text/javascript">var loader_element_id = "newmenu-modal";</script>
<noscript>
<p>Please enable JavaScipt to upload a file.</p>
</noscript>
</div>
</div>
</div>
In my console, when I try to use the jquery id selector, it fails to return the input element:
> $("#id_menu_file")
[]
Any thoughts on why this is so? I feel like I'm missing something simple. Thank you!
EDIT - some other javascript was removing the element, that is why it's not showing up. Thanks all for your help.
To repeat my first answer (which may be applicable to others reading this post later, and which was deleted despite the fact that it "fundamentally answer[ed] the question"):
Is this HTML inside of a frame (iframe or regular)? That could make it difficult for jQuery to find your element, unless you give it the right context.
To add a context to a jQuery selector you just provide that context as an extra argument, for example: $('TD', aFrameElement);
If the element in question is not inside a frame (which is the case for zallarak), the problem is almost certainly a timing issue: the jQuery selection is happening before the element has gotten loaded on the page. You can test this theory by adding the following code (anywhere):
$(function(){
console.log($("#id_menu_file"))
});
If that is the problem, simply wrap your code in $(function(){ to fix matters.
try :
$("#id_menu_file").get(0)
$(selector) return arrays
I found this article that looked like exactly what I wanted, but I can't seem to get it to work at all. Since it is well over a year old, I thought perhaps something may have changed, or that there might be a simpler way to do it by now.
That is to say, I cannot get the method I linked above to work. I copied and pasted exactly, and used <body onLoad="javascript_needed()"> because I wasn't sure where $(document).ready(function ()... was supposed to go. I am, sadly, quite unfamiliar with Javascript.
Use something like this;
<script>
$(document).ready(function(){
//Code goes in here.
});
</script>
Don't forget to load the jQuery library at the same time from http://jquery.com/
Also, you are going to want to read up on selectors.
Using $("#myElement") will select elements that have an id of "myElement".
Using $(".myElement") will select elements that have a class of "myElement".
So;
<div class="hideMe">Content</div>
<div class="hideMe">Content</div>
<div class="hideMe">Content</div>
<div class="doNotHideMe">Content</div>
<input type="button" class="ClickMe" value="click me"/>
<script>
$(function(){
$(".ClickMe").click(function(){
$(".hideMe").hide(250);
});
});
</script>
edit
If you want to link to the jquery library online then use;
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
If you download the library and insert the js file into your project then use;
<script src="/yourPathToTheLibrary/jquery-1.6.1.min.js" type="text/javascript"></script>
The $ syntax is all part of jQuery. If you wish to use jQuery then somewhere in your code, use a script tag as in your post:
<script>
$(function() {
$('.selector').hide(250);
});
</script>
If you want pure JavaScript, then there is a little more overhead. Not including the document ready stuff (which can be a lot of extra code to do it right...See example: here).
<script>
elements = document.querySelectorAll('.selector');
for(int i=0,len=elements.length;i<len;++i) {
elements[i].style.display = 'none';
}
</script>
You can put that in a function if you would like. To show the elements set the display attribute to ''.
I have a problem setting value of an hidden input element. I've tried using jQuery and $("#SomeHiddenElement").val(sSomeValue) function, and plain JS document.getElementById("SomeHiddenElement").value = sSomeValue; but nothing works...
When I set the element to text type it works just fine...
The problem persists both in FF and IE.
Any ideas?
Code:
<input type="hidden" id="SomeHiddenElement" name="SomeHiddenElement" value="" />
document.getElementById("SomeHiddenElement").value = "Testing";
Since I don't believe firebug has a problem updating it's DOM representation, and your code works fine in isolation, and you don't have an issue with text inputs, and I've never had a problem updating hidden inputs myself, I would suggest that something else is acting on hidden inputs to block what you're doing.
I suggest you create a test page stripped of all content except what you've given us here and then incrementally add features to progress towards the state of your real page. At some point it will break and you'll at least know where the problem lies.
Guys I'm so sorry... The problem was in combination of Firebug and my post handling code... I've fixed it...
Moral of the story: double check code and don't blindly believe Firebug.
Thanks for your trouble!
Your code is fine.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Setting the value of a hidden field</title>
</head>
<body>
<input type="hidden" id="SomeHiddenElement" value="">
<script>
document.getElementById('SomeHiddenElement').value = 'Hello World';
</script>
<script>
// Will alert 'Hello World'
alert(document.getElementById('SomeHiddenElement').value);
</script>
</body>
</html>
How are you testing that the value of the hidden field is not being set? Since hidden fields are invisible, you can see what's inside when with JavaScript, or when you post the form.
Can you try:
$('#SomeHiddenElement').attr("value", "some text");
this is just a simple jQuery solution to set the attribute "value" with test text.
Edit:
Well, try this:
alert($("input[type='hidden']").length);
This is to see how many hidden input elements on your page.
These both work:
$('#SomeHiddenElement').attr("value", "some text");
$('#SomeHiddenElement').val("some text");
Verified using Chrome Developer Tools and Firebug
I know it's been a long time, but I had the same issue, and it took me some time to find out that I had more than one element ( to be exact) on page with the same id="" and it seemed that my JS function did not work (which I guess it was modifying value of just the first element). Anyway, this may help someone save some time investigating :)