We Keep Coding

Hiding a div container including php generated content with a script

I'm currently working on a website which has a search engine including advanced search options with filters. I want to hide the filters until a category has been chosen. I'm not sure if that script would even work within the php file, because I also tried the script with simple alerts but it didn't work. I positioned this script at the end of the php file of the advanced search options.
<script>
if (document.getElementById("main_cat").value == "-1")
{
document.getElementById("custom_fields").style.display = "none";
}
else
{
document.getElementById("custom_fields").style.display = "inline";
}
</script>
custom_fields is the id of a div container which displays all the filters with php generated content. main_cat is the id of the category, if the value is -1, no category is chosen.
I'm working on a website with wordpress if that is important to know.
Thanks for your help!

I think you have a minor semantic error that's causing your script to not function as expected. Also, to achieve the functional behaviour for the <select> you will need to do a few extra things, namely, to listen to the change event:
<script>
// Store variables to elements we want to work with
var mainCat = document.getElementById("main_cat")
var customFields = document.getElementById("custom_fields")
// When the website first loads, hide "custom_fields" by default
customFields.style.display = "none";
// When the user changes the main_cat select, check it's value. If
// value == "-1" then hide custom_fields. Otherwise display custom
// fields as inline
mainCat.addEventListener("change", function() {
if (mainCat.value == "-1")
{
customFields.style.display = "none";
}
else
{
customFields.style.display = "inline";
}
})
</script>
As a final note, I saw that the script was actually commented out on your website. Just below the <!--Script Custom Fields-->, the script was enclosed in /* ... */ - remove those to ensure that the script does run, rather than be ignored by the browser.
Hope this helps!

Ajax interfering with other page elements

I've made a little form, which is submit's to itself using ajax, got everything working form-wise. When I put my ajax post code in however, my other javascript functions have stopped working (error: ___ is not defined) and my radio buttons, which should be exclusive (selecting one deselects the other) has stopped working also (since the addition of the ajax code)
Here is my code:
https://jsfiddle.net/dmge51g8/
This code is working fine, when the ajax code is taken out, yet gives an error in my browser console with the ajax post.
function newOrExisting() {
if (document.getElementById('typeNew').checked) {
document.getElementById('newProviderInput').style.display = 'block';
document.getElementById('existingProviderInput').style.display = 'none';
} else if (document.getElementById('typeExisting').checked) {
document.getElementById('existingProviderInput').style.display = 'block';
document.getElementById('newProviderInput').style.display = 'none';
}
};
function clearForm() {
document.getElementById("createPanelForm").reset();
};
UPDATE: Removed the part about radio buttons (updated JSFiddle)

You could avoid defining the newOrExisting function as a variable and assign it directly to the click event on the radio buttons like this:
$(".radio input").click(function() {
if (document.getElementById('typeNew').checked) {
document.getElementById('newProviderInput').style.display = 'block';
document.getElementById('existingProviderInput').style.display = 'none';
} else if (document.getElementById('typeExisting').checked) {
document.getElementById('existingProviderInput').style.display = 'block';
document.getElementById('newProviderInput').style.display = 'none';
}
};
This would be more in line with the way you have attached the ajax functionality to the form.

In the HTML part of your code, name of your radio buttons are different.
name="typeExisting"
name="typeNew"
This is allowing two different radio buttons to be treated separately (and you are being able to select both)

Checkbox is checked once a field has been clicked

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!

How to show button in javascript

I am making a quiz game and I was wondering how I can make the proceed button appear. it goes from the user typing the right answer, displaying a nice good jobs sort of message, then at the same time a button pops up saying that the user can proceed. could someone help?
Image Of The Code Click Here

Use these methods -
function show_button(id){
document.getElementById(id).style.display = "block";
}
function hide_button (id){
document.getElementById(id).style.display = "none";
}
if the user enters the correct answer then call
hide_button(id of the html element);
you can display messages informing that user had entered the correct answer or not by making use of javascript and accessing the CSS stuff with javascript.
document.getElementById(id).style returns you a css object.
you can modify CSS (style, margin, padding, color) of the HTML elements using javascipt to create a dynamic webpage.

If you want to use jquery the code is:
$(document).ready(function(){
var input = ("#the.id.of.your.input").val();
var result = "The result";
if(input == result){
$("#id.of.your.button").fadeIn();
// or: ("#id.of.your.button").show();
}
});

Input image on click function open, on click again function closes

I've read through similar questions' answers but most are jQuery answers. I'm using JavaScript only to do this so if someone could help me fix my problem would be great.
So far in my js when my input image is clicked my function displays a box. I want to be able to click this input image again to close the box. At the moment I can't close it by clicking the image.
Here is my js:
var settings = document.getElementById('cog');
settings.onclick = Cog;
function Cog(){
document.getElementById('settings').style.display = "block";
document.getElementById('cogbox').style.display = "block";
}
'cog' is my image and clickable input. What code am I missing to make the box close by clicking the 'cog' image?

I believe you just need a variable to check if you should show or hide the box.
Check if this works:
var settings = document.getElementById('cog');
settings.onclick = Cog;
var cogShow = false;
function Cog(){
cogShow = !cogShow;
document.getElementById('settings').style.display = (cogShow ? "block" : "none");
document.getElementById('cogbox').style.display = (cogShow ? "block" : "none");
}
Or you could simplify it even more, by checking if cogbox is visible and them doing the opposite to the object when clicking again:
var settings = document.getElementById('cog');
settings.onclick = Cog;
function Cog(){
show = (document.getElementById('cogbox').style.display === "none");
document.getElementById('cogbox').style.display = (show ? "block" : "none");
document.getElementById('settings').style.display = (show ? "block" : "none");
}

is there any reason your not using library? if you're going to be doing a lot of JS, Mootools or JQuery will help you out a lot. Jquery is easier to learn though Mootools is way more flexible. For your problem, you're only really giving it the ability to show, though nothing else. try using a conditional statement like the one shown here: Toggle Html with JS
That should get you where you need to be.