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)
Related
I am trying to write a simple script which follows the logic below but I am having difficulties.
If "Name" field = blank
Then Hide "Comment" field
Else Show "Comment" field
$(document).ready(function() {
if ($('#ContactForm-name').value() == "") {
$('#ContactForm-body').hide();
} else {
$('#ContactForm-body').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Can someone please help me? I provided a screen shot of the form and its HTML.
The shopify store is https://permaink.myshopify.com/pages/contact with the store PW = "help".
Taking a look at the example link you provided w/ 'help' password, it doesn't look like jQuery is actually loaded on the site, after running the following in console: console.log(typeof window.jQuery) returns undefined.
You may need to use vanilla JS to achieve what you're trying to do (or side load jQuery, if you have permissions to do so and really need to use it).
Using JS without jQuery, you can try doing something like:
window.addEventListener('load', function() {
if (document.getElementById('ContactForm-name').value === '') {
document.getElementById('ContactForm-body').style.display = 'none';
} else {
document.getElementById('ContactForm-body').style.display = 'block';
}
});
Note, that just hiding the ContactForm-body textarea will still leave a border outline and the label Comment showing, so you may need to do more than just hiding the textarea (find the parent <div> in JS and hide whole block).
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.
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!
I have made a small javascript to hide dividers when the value of a dropdown menu has changed.
But for some reason the script doesn't work on my own site.
document.getElementById("type").onchange = function () {
var v = this.options[this.selectedIndex].value;
if (v == 1) {
document.getElementById("CostDiv").style.display = "block";
} else {
document.getElementById("CostDiv").style.display = "none";
}
}
Here's a link: http://jsfiddle.net/WeHv3/
is there more than one element in the html document called CostDiv ?
Please give us the source of the html document as that is only difference at the moment I can see.
I think problem is your listener are unable to attach with your element.
Just add your JavaScript at the bottom of page and your problem is solved.
I'm systematically building jQuery functions such that the css classes of various inputs in a web form have dependencies on other inputs (i.e. when a given input has a given value, the "hide" class is removed from the appropriate subsequent input etc.)
A specific (working) example of the jQuery I am using is:
$(document).ready(function(){
$("input[name$='q_4']").change(function(){
if(this.value == 'Yes') {
$('#qu_5').removeClass('hide');
} else {
$('#qu_5').addClass('hide');
}
});
});
In this example, the dependent question div (#qu_5) depends on the value entered via radio button for (name=q_4) to be "Yes".
Because I am building these functions dynamically (users can edit properties of questions such that they have these kinds of display dependencies) via a database, I end up with multiple chunks of this code on a page with several interdependent inputs. Each chunk of code has the name of the master question, the id of the slave question and the value that the slave relies on to be revealed. This also works as intended.
Sometimes however, one input should reveal multiple other questions so I end up with code something like:
$(document).ready(function(){
$("input[name$='q_87']").change(function(){
if(this.value == 'yes') {
$('#qu_88').removeClass('hide');
} else {
$('#qu_88').addClass('hide');
}
});
$("input[name$='q_87']").change(function(){
if(this.value == 'yes') {
$('#qu_89').removeClass('hide');
} else {
$('#qu_89').addClass('hide');
}
});
});
This does not work. (and indeed stops all the reveal / hide functions working on that page)
I presume it is because jQuery/javascript isn't happy with the same event input[name$='q_87']").change firing two different functions? This is the only thing I can think of.
Does anyone have any advice as to how I could achieve what I want in a way that works? Thanks! :)
If you need a var and an array you can write it like this
var questions = {
"q_87":["qu_88","qu_89"],
"q_96":["qu_95","qu_99"]
}
$.each(questions,function(q,arr) {
$("input[name$='"+q+"']").change(function(){
$("'#"+arr.join(",#")+"'").toggleClass('hide',this.value == 'yes');
});
});