Checkbox is checked once a field has been clicked - javascript

I have been trying to get a checkbox to be checked once a user clicks on another field however unable to get any further.
Here is the javascript I am using at the moment
document.getElementById("Freelance_Sig").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("Freelance_Sig").innerHTML = document.myform.Freelance_signed.checked = true;
}
As my form is not html i wonder if thats the issue.
Any help would be appreciated, thank you.

My original answer was for interacting with HTML. You'll need to use something a little different for use with PDF.
Something like this should work:
this.getField('Freelance_Sig').onclick = function() { myFunction(); }
function myFunction() {
this.getField('Freelance_signed').value = 'On';
}
There are some good resources on using javascript with PDFs here:
Basic PDF JavaScripting
Getting and setting checkbox values in a PDF
Hope that helps!

Related

Pure javascript code for show image loading(only image in center ) when submit form

I've searched everywhere both on stackoverflow and on the web. surely it will be so trivial as not to be reported however focusing on the backend I would really need it. Specifically, I would need a pure javascript function to show after form submission (therefore only if the required fields are inserted) and show as a single image in the center and with a white background while waiting for the backend to do the redirects. thank you very much and happy new year
this is the solution i created after reading some javascript basic book. In fact it was simple but like all things it must first be studied. I leave it as it will certainly be useful to someone
<script type="text/javascript">
const form = document.getElementById('generationLinkForm');
const loadingLottie = document.getElementById('loadingLottie');
form.addEventListener('submit', (e) => {
var value = document.getElementById('inputLink').value;
const preloader = document.querySelector('.link-loading');
if (value.length > 0) {
form.classList.toggle('fade-out');
loadingLottie.classList.toggle('show');
preloader.classList.remove('d-none');
}
else
e.preventDefault();
});
</script>

Input field disappears, input text stays

Example of what I want
Excuse my noobness.
I want an input field that disappears when there's been input. (Like the '3' in the example.)
I want the input field to return if I want to edit the input.
I've looked up online on how to do this and how to go around it, but I don't get anything useful out of it.
I have tried something like this (old, irrelevant code, it's just an example of what I tried to do):
function addButtonActions() {
questionsButton.addEventListener("click", function () {
var page = document.getElementById('page-questions');
hideAllPages();
page.style.display = 'block';
});
function hideAllPages() {
var startPage = document.getElementById('page-start');
var questionsPage = document.getElementById('page-questions');
var scorePage = document.getElementById('page-score');
startPage.style.display = 'none';
questionsPage.style.display = 'none';
scorePage.style.display = 'none';
}
But it didn't seem to work for the input field.
I don't use <form></form>, because that always seems to give me bugs. Something like <form></form> doesn't help my layout for the page anyway, I don't think.
First of all: Example of using FORM
Your problem is in the JavaScript. Your calling hide, then behind it calling BLOCK which unhides it.
hideAllPages();
page.style.display = 'block';
Also, what is questionsButton? That needs to be an object variable.

Tampermonkey: Trigger event does not work for element

I'm trying to add some functionality using Tampermonkey on top of a providers angular application but I'm stuck at this simple thing. I can't replicate the issue using CodePen so we're going to have to go for theories and suggestions. I'll try to be as specific as I can.
Adding this interval when the page loads to check when an input with the id serialNumberInput is available. Then I'm adding a dropdown to the form, and attach an onChange event to it to update the serial input field with the value of the selected option. However, the trigger parts just never happens. It does work when I enter them manually, but not with the script.
var populateSerialNumbersTimer = setInterval(function(){
var serial = $("input#serialNumberInput");
if($(serial).length >= 1){
$(serial).css("display", "inline").css("width", "50%");
$(serial).after(deviceToSerialSelectionHTML);
$("select#deviceToSerial").on("change", function(){
$(serial).val($("select#deviceToSerial").val());
$(serial).trigger("change");
$(serial).trigger("blur");
});
clearInterval(populateSerialNumbersTimer);
}
}, 200);
I've thought about it and considering how the serial number ends up in the text field the field must be accessible. Maybe it's that the events that I'm trying to trigger has not been declared at the time of the function declaration?
Suggestions much appreciated.
It looks like jQuery tries to cache the event somehow. This is how I solved it with native javascript in case someone else is interested:
function triggerEvent(e, s){
"use strict";
var event = document.createEvent('HTMLEvents');
event.initEvent(e, true, true);
document.querySelector(s).dispatchEvent(event);
}
$("select#deviceToSerial").on("change", function(){
serialNumberInput.val($("select#deviceToSerial").val());
triggerEvent("change", "input#serialNumberInput");
triggerEvent("blur", "input#serialNumberInput");
}

JavaScript and WordPress: button click not found by addEventListener

To prevent answers like: 'is the JavaScript file loaded?' -> Yes, it is loaded, at the footer part of the page! I have checked that with a simple message to the console, which is displayed!
But:
I've got a page with a button:
<button id="portfolio-posts-btn">Load portfolio related blog posts</button>
And a file main.js:
var portfolioPostsBtn = document.getElementById('portfolio-posts-btn');
var portfolioPostsContainer = document.getElementById("portfolio-posts-container");
if (portfolioPostsBtn) {
portfolioPostsBtn.addEventListener("click", function () {
console.log("the button was clicked!");
});
}
The text the button was clicked! should be displayed in the console, but it stays empty!
Apparently, the button click is not recognized, and thus, the var portfolioPostsBtn is false, or NULL... -> the method addEventListener() is not fired ?
I don't see the cause for this; I checked the spelling, should I use single or double quotes? Please help?
Thank you!
I've had this happen to me before, since theres two ways to do this I just used the other.
The first is onclick="function()", this is used as an attribute inside the element. Ex:
function clicked(){
alert("button clicked");
}
<button onclick="clicked();">Press me</button>
exaplaination: When you add this attribute to this element and I do believe some others when the button is clicked the specified code inside the quotes of the attibute will run. It doesn't have to be a number, e.g. onclick="alert(12+4/2);". But this is more of HTML than JavaScript using this version
The other way is using what you've got which (to me) is a lot more difficult then it needs to be. Heres my example
var b = document.getElementById("btn");
b.addEventListener("click", blogged);
function blogged(){
alert("this post has been blogged");
}
<button id="btn">Blog it</button>
This side of things has more to do with JavaScript and Event listeners. But the problem with you're code is that you're putting the event listener after you call the if statement. Here's my solution
var portfolioPostsBtn = document.getElementById('portfolio-posts-btn');
portfolioPostsBtn.addEventListener("click", function(){
check();
});
function check(){
if(portfolioPostsBtn){
console.log("posted");
}
}
<button id="portfolio-posts-btn">press this to post<button>
Presumably you have made a decision not to use jQuery. You'll need to wrap your code in an event listener so that the code is executed when the DOM is ready.
document.addEventListener("DOMContentLoaded", function(event) {
var portfolioPostsBtn = document.getElementById("portfolio-posts-btn");
var portfolioPostsContainer = document.getElementById("portfolio-posts-container");
if (portfolioPostsBtn) {
portfolioPostsBtn.addEventListener("click", function () {
console.log("the button was clicked!");
});
}
});
The answer is found in the uploading of the file page-portfolio.php!
I found out that the id="portfolio-posts-btn", added later, was not updated - could be my mistake, or the SFTP upload extension in Brackets - I did not see an error message!
Anyway, the issue is solved!
One more question: "are there methods to check if an id exists?". That could make live easier!
All contributors, thank you for your answers!

using onmouseover to change text hyperlink into an image hyperlink?

Please bear with me I am brand new to learning javascript (self taught)! I am usually one to find answers on my own from just web browsing but so far I haven't found any resources explaining how to accomplish the following:
So, basically all I want to do is change this (HTML):
SPEAKERS
to an image by using javascript.
The image is kept in the same folder as the html and the js.
Here is as far as I know to go with the javascript:
function showImage()
{
picture = new Image(100,100);
picture.src = "icon2.png";
document.getElementById("speakers").innerHTML = picture.src;
}
function goBack()
{
document.getElementById("speakers").innerHTML="SPEAKERS";
}
For clarity, all I would like to do is change the text ("SPEAKERS") to an image using 'onmouseover' while using the same hyperlink in the process.
It seems like a very simple problem but I don't know enough to determine if what I want to do is even possible. If it's not possible that's fine, I would just like to know either way ;P. Thanks ahead of time!
If you're ok with using jquery, you could use .html() and .hover()
http://jsfiddle.net/u8fsU/
Try something like this to get you started (not a complete nor tested solution):
var showImage = function(){
var picture = document.createElement("img");
picture.src = "icon2.png";
picture.href = "link.html";
var speakers = document.getElementById("speakers");
speakers.parentNode.replaceChild(speakers, picture);
}
Please see https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference for a good reference to some of the available DOM properties and methods.

Categories