I have a web page which consist of a <span> element and <input> element.
My requirement is to dynamically enabling/disabling the <input> element based on <span> innerHTML.
I have written following javascript:
var vale=document.getElementById("SPAN_ID").innerHTML;
But value is coming as undefined,since I guess at page loading span element is yet to be constructed.I have to perform this operation on page loading time only.Can anyone provide any suitable javascript code for this??
You can use the DOMContentLoaded event to wait for the HTML to be fully loaded and parsed before running your code:
<script>
document.addEventListener('DOMContentLoaded', function () {
var value = document.getElementById("the-span").innerHTML;
if (value) {
document.getElementById('the-input').disabled = false;
}
}, false);
</script>
<span id="the-span">Hi, I'm the span</span>
<input id="the-input" value="I'm the input" disabled>
If you delete the text inside of the span element, and re-run the snippet, you'll see that the input box remains disabled.
If page load is indeed your problem
If you are using jquery, paste the code inside
$(document).ready(function() {
});
If you are using plain js then
window.onload = yourfunctioncomeshere
Try this if your are using jquery:
$(document).ready(function() {
var spanText = $('#SPAN_ID').text();
//based on var spanText value you can disable/enable input
//To disable input
$('#INPUT_ID').attr({
'disabled': 'disabled'
});
// To enable input
if ($('#INPUT_ID').attr('disabled')) {
$('#INPUT_ID').removeAttr('disabled');
}
});
Related
I wonder if you could help me with an issue.
I am building a content template for an events page, that pulls data through using Advanced Custom Fields.
I have a field in the admin side which will be filled out when adding a new event. The field is called show_info with the ID #acf-editor-46.
On some events however this will be left blank, but the DIV that wraps around the content on the frontend will still show on the template, the DIV has the class .show-info-wrapper.
I would like it so when the show_info field is blank, the DIV .show-info-wrapper does not display on the front end.
I have made some progress from browsing around, you can see the code I have so far here:
HTML (Just a quick testing set up):
<textarea id="acf-editor-46" class="wp-editor-area" aria-hidden="true">1111</textarea>
<div class="show-info-wrapper">CONTENT</div>
JavaScript + jQuery:
$(document).ready(function() {
if($('#acf-editor-46').val() == '' ){$('.show-info-wrapper').hide();}
$('#acf-editor-46').on('change' , function() {
if( this.value != ''){
$('.show-info-wrapper').show();
}
else{
$('.show-info-wrapper').hide();
}
});
});
It works on JSFiddle (http://jsfiddle.net/ha2nedfb/), however, it seems that on my WordPress site as the input and the DIV are not on the same DOM, it does not work.
Could anyone help me with this?
Thank you!
Just change the event of #acf-editor-46 to input.
$(document).ready(function() {
if($('#acf-editor-46').val() == '' ){$('.show-info-wrapper').hide();}
$('#acf-editor-46').on('input' , function() { // Just change event to input
if( this.value != ''){
$('.show-info-wrapper').show();
}
else{
$('.show-info-wrapper').hide();
}
});
});
if (!$("#acf-editor-46").val()) {
// textarea is empty
}
try this to check textarea is empty or not
You can delegate event if textarea is rendered later.
$(document).on('change', '#acf-editor-46', callback);
Links:
https://api.jquery.com/on/
https://learn.jquery.com/events/event-delegation/
Assuming the <textarea> and <div> are really siblings in this very order (your text contradicts the example) & if you're OK with adding a placeholder to the textarea & you only need new-ish browsers, there is a pure CSS solution:
<textarea ... placeholder=" "> </textarea>
.show-info-wrapper {
display: block;
}
.wp-editor-area:placeholder-shown + .show-info-wrapper {
display: none;
}
Here's a pen.
Say I visit a website which has the following code:
<input type="text" name="enter">
<input type="submit" name="button">
<a id="confirm">Confirm</a>
I need a script which I can run in the Chrome console to press the <a> element then type the text 'hello' into the input field and then click submit. I need this process to repeat every minute.
I have tried using this code.. but it doesn't do anything.
window.setInterval(function() {
document.querySelector("#confirm").click();
document.querySelector(".enter").value = "Hello";
document.querySelector(".button").click();
}, 1000);
If the inputs are placed in a form try this, in this case if you need to access by the name and not the class:
window.setInterval(function() {
var form = document.forms[0];
document.querySelector("#confirm").click();
form.querySelector('input[name=enter]').value ="Hello";
form.querySelector('input[name=button]').click();
}, 1000);
Otherwise your script above will work if the inputs have these correct class names
Instead try using trigger as:
$(document).ready(function() {
var event = JQuery.Event("click");
$('#confirm').click(function() {
$('.enter').value("Hello");
$('.button').trigger(event);
});
$('#confirm').trigger(event);
});
Now just put the code inside your window.setInterval() function.
I am creating a basic calculator using css, html and js. I have a function as follows:
document.getElementById('user_radius').onkeyup = function ()
{
document.getElementById('live_update').innerHTML = this.value;
}
Basically, whatever is typed into the user text box is supposed to live update the text that lies within the span tag with the id of "live_update". I have a text box with an id of user_radius. I save changes and can't get the text to live update. Am I missing a basic principle here?
there are multiple ways to do it
1.mix javascript and DOM. This makes it a little difficult to debug your stuff in the future.
<input id='user_radius' onkeypress='doSomething()' />
function doSomething() {
document.getElementById('live_update').innerHTML = this.value;
}
2.standard jquery method:
<script type="text/javascript">
$(document).ready(function(){
$('#live_update').on('keyup', function(){
$('#user_radius').val($('#live_update').val());
});
});
</script>
3.find a front-end framework that does 2-way data binding for you such as Angular
demo: http://www.angularjshub.com/examples/basics/twowaydatabinding/
this should do the job:
<input id="user_radius" onkeypress="doSomething()" />
function doSomething() {
document.getElementById('live_update').innerHTML = this.value;
}
i have a div which is hidden initially and will be visible later depending on some click events results.
I have wrote this
$(document).ready(function () {
$('#<%=disable.ClientID %>').hide();
});
<div id="disable" runat="server">The following question is disabled</div>
But when i disable CSS it appears, when i don't disable css it gets invisible. how do i make this invisible even when css is disabled and visible later again
There is no way to make something invisible without CSS. But you can remove it:
$(document).ready(function () {
$('#<%=disable.ClientID %>').remove();
});
You would then need to readd all the mark up again should you wish to show it again.
Edit
You could do something like this:
$(document).ready(function () {
var item = $('#<%=disable.ClientID %>');
$(document).data('myElement', item.clone());
item.remove();
});
then you could re-add it
$(document).append($(document).data('myElement'));
If you are willing to write server code for this, then you could do this in the code-behind.
// c#
if(some condition...)
{
disable.Visible = false;
}
This will remove the div from the HTML output of the page.
I do not get you when talking about enabling and disabling css, but you can always manage the DOM elements via DOM manipulation. As you tagged jQuery:
$(document).ready(function () {
/* please try top avoid mix server side variables and javascript code */
$('#myTargetDiv').hide();
$('#myToggleButton').on('click',function(){
/* select the elements you want to hide / show with the click on this element */
var $elements = $('#myTargetDiv');
$elements.toggle();
});
});
I have a simple piece of PHP which generates n copies of the following code:
<p class="ShowSDB_L2" class="center" onClick="FSD_L2('<?php print dbG;?>','<?php print $sLID;?>')">Click Here to See Data</p>
<div class="divSDB_L2">
</div>
It is generated using PHP, so the number of copies is unknown up front.
On another page I have the following Javascript (using jQuery)
function FSD_L2(dbG,SlID)
{
$(".divSDB_L2").load("test15.php?dbG="+dbG+"&SlID="+SlID).css('display','block');
}
When the text above (Click Here to See Data) is clicked, it should add the contents of test15.php between the the two DIV tags.
#Test15.php
<?php
$dbG = $_GET['dbG'];
$SlID = $_GET['SlID'];
print $dbG . " & " . $SlID;
?>
The problem I have is how to determine which of the links was clicked? At present, if I have three copies, and click one, all three copies are activated.
I hope I have made this clear enough. I'm sure there must be a simple way, but I'm quite new to Javascript/jQuery.
Like Brian said, you could just put the same class on all of your links and use the $(this) keyword in jQuery inside of a click function to find out which link was clicked.
Here's a basic example of changing link colors on a nav using this technique: http://jsfiddle.net/9E7WW/
HTML:
<a class="nav">Test</a>
<a class="nav">Test2</a>
<a class="nav">Test3</a>
<a class="nav">Test4</a>
Javascript:
$(document).ready(function(){
$('.nav').click(function(){
// change all to black, then change the one I clicked to red
$('.nav').css('color', 'black');
$(this).css('color', 'red');
});
});
Am not sure I fully understand what it is you are having difficulty with, but the following is how I would do it.
<p class="ShowSDB_L2" class="center" data-dbg="<?php print dbG;?>" data-slid="<?php print $sLID;?>">Click Here to See Data</p>
<div class="divSDB_L2"></div>
$(document).ready(function() {
$(document).on('click', 'p.ShowSDB_L2', function(evt) {
var $p = $(evt.currentTarget),
dbG = $p.data('dbg'),
slid = $p.data('slid'),
$div = $p.next();
FSD_L2(dbG, slid, $div);
});
});
function FSD_L2(dbG, SlID, $div)
{
$div.load("test15.php?dbG="+dbG+"&SlID="+SlID).css('display','block');
}
The click handler is not hardcoded to each p tag. Instead with each p tag we store the required data, ie dbg & slid.
The click handler is then attached once at document ready. jQuery abstracts over the various browsers and passes to its handlers the event object as its first parameter. This object can then be used to find the element on which the event occurred. Refer: http://api.jquery.com/on/
Finally, we fetch the required data from the clicked element, find the div that needs to be updated and then call your custom function.
Here is a cross-browser way to find the element (target) that triggered the event (e):
function getTarget(e){
// non-ie or ie?
e=e||window.event;
return (e.target||e.srcElement);
};
Add the complete URL to your link (or p in this case) using a data attribute:
<p class="ShowSDB_L2" class="center" data-loadurl="test15.php?dbG=<?php echo $dbG; ?>&SlID=<?php echo $SlID; ?>">Click Here to See Data</p>
<div class="divSDB_L2"></div>
Then do all the binding directly in your jQuery so you have direct access to the link that was clicked:
$(document).ready(function() {
$('.ShowSDB_L2').on('click', function(e) {
e.preventDefault();
$('.divSDB_L2').empty().load($(this).data('loadurl')).show();
});
});