I'm trying this for a while now, searched everywhere here and on other sites.
I found some sort of a solution here http://jsfiddle.net/zszqs/
but when I try it on my code, on my actual page, it just doesn't work. It does in the example website tho, if I change all the code to mine.
<input name="documenttype" type="radio" required id="dType1" value="Pro-Forma">Pro-Forma
<input name="documenttype" type="radio" required id="dType2" value="Invoice">Invoice
<select name="paymentmethod" required id="paymentmethod">
<option value="" default selected>Select...</option>
<option value="TT">Online Bank Transfer</option>
<option value="PP">PayPal</option>
<option value="CC">Credit Card</option>
</select>
basically I want to remove the Credit Card option when the radio Pro-Forma option is selected, or bring it back again if user changes radio to Invoice...
<script>
var option = '<option value="CC">Credit Card</option>';
$('input[name=documenttype]').change(function() {
var $select = $("#paymentmethod");
if (this.id == 'dType1') {
$select.find("option[value='CC']").remove()
} else if (!$select.find("option[value='CC']").length) {
$select.append(option)
}
})
</script>
I feel like I'm not charging the code on page load, or something like this.
I'm totally new to jquery so I may have missed like, I don't know, where to put the <script> (head or body?) or if I have to specify some onLoad option.
script code with jquery
$(document).ready(function ()
{
$(".documenttype").click(function ()
{
$("option[value='CC']").css("display", $('#dType1').is(":checked") ? "none" : "block");
});
});
HTML Code
<input class="documenttype" name="documenttype" type="radio" required id="dType1" value="Pro-Forma">Pro-Forma
<input class="documenttype" name="documenttype" type="radio" required id="dType2" value="Invoice">Invoice**
<select name="paymentmethod" required id="paymentmethod">
<option value="" default selected>Select...</option>
<option value="TT">Online Bank Transfer</option>
<option value="PP">PayPal</option>
<option value="CC">Credit Card</option>
</select>
Related
I am trying to read the state of a checkbox to see if it is checked. I will also be reading the options on a pull down menu in html and I also want to read the state of a toggle if it is clicked. I will be using a conditional to perform actions in javascript based upon these options.
Here is the code for the checkbox and pulldown menu:
checkbox html
<input type="checkbox" id="checkItem">Item 1
pulldown menu html
<form>
Select your favorite fruit:
<select id="mySelect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
</form>
(I am not sure how to do the toggle)
So if I check the box and select an option from the pulldown menu, I want to
execute commands in javascript using a conditional.
What is the code to create the conditional that reads if the box is checked and reads the option selected from the pulldown menu?
I think jquery is needed to do this. How do I do this?
This answered most of my question. I have not figured out and tested the toggle however.
<html>
<div class="container">
<input type="checkbox" class="checks" value ="Apple">Apple<br>
<input type="checkbox" class="checks" value ="BananaValue">Banana<br>
<input type="checkbox" class="checks" value ="Carrot">Carrot<br>
<form>
Select your favorite fruit:
<select id="mySelect" /*onchange="run();"*/>
<option value="apple">apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
</form>
<input type="submit" onclick="run()" />
<script>
function run(){
var checks = document.getElementsByClassName('checks');
var str = '';
for (i = 0;i < 3; i++){
if(checks[i].checked === true){
str += checks[i].value + " ";
}
}
alert(str);
}
</script>
</div>
</html>
I am trying to get the title attribute from a selected Option in a Select menu. I have spent over a day on this and I am seeking help. I found a couple of ways to use the value attribute but now I need to use the title attribute somewhere else on the page.
Here is my current attempt although I have been through many iterations. I have listed two possible scripts although only one will eventually be used. The first possible script might include Jquery and if it does and it can be used here, can you translate it into Javascript, as I am not good at either? Do I have the elements in the correct order?
<select id="amount_id" onclick="function()">
<option value="" disabled="disabled">Amount</option>
<option value="0" title="None">0</option>
<option value="1" title="One Quarter">1/4</option>
<option value="2" title="One Half">1/2</option>
<option value="3" title="Three Quarters">3/4</option>
<option value="4" title="All">100%</option>
</select>
<textarea id="displayTitle"></textarea>
<script>
$(document).ready(function(){
$(document).on('click','#amount_id',function(){
var result = $("option:selected",this).attr('title');
$("#displayTitle").text(result);
});
});
</script>
OR
<script>
function run(){
document.getElementById("displayTitle").value =
document.getElementById("amount_id").value;}
</script>
Thank you.
Here is a JavaScript alternative of the first code :
<select id="amount_id">
<!-- removed onclick -->
<option value="" disabled>Amount</option>
<option value="0" title="None">0</option>
<option value="1" title="One Quarter">1/4</option>
<option value="2" title="One Half">1/2</option>
<option value="3" title="Three Quarters">3/4</option>
<option value="4" title="All">100%</option>
</select>
<textarea id="displayTitle"></textarea>
<script>
document.getElementById("amount_id").addEventListener('change',function(){
var eTitle = this.options[this.selectedIndex].getAttribute('title');
document.getElementById("displayTitle").value = eTitle;
});
</script>
In my registration page, I'm gonna use two drop-down select that one of them should be hidden if its Negative and if its positive new drop-down will open to choose ...
In mysql table I've table as diabetes name with enom
enum('negative', 'insulin', 'drug', 'ndm', 'mody', '')
Here's my code:
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes">
<option value="negative">Negative</option>
<option value="">Positive</option>
</select>
</div>
<div><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
For example: If Diabetes is negative value is negative as default then Diabetes Type is hidden
and
If Diabetes is positive then Diabetes type will be appeared to choose items.
those values like insulin, drug, mdm, mody should be inserted into this:
value="positive"
How can I make it through java script?
I can't add class or div or span. Is it possible just through JavaScript using ??
Thank you so much
Use jquery, it is comparatively easier.
$(document).ready(function(){
$("#diabetestype").hide();
$("#diabetes").on("change", function(){
var v = $(this).val();
if(v=="positive"){
$("#diabetestype").show();
}else{
$("#diabetestype").hide();
}
});
});
To make this code workable, you need to add value of Positive option also. So instead value="" change it to value="positive".
You can even hide the label also:
$(document).ready(function(){
$("#diabetestype").closest("div").hide();
$("#diabetes").on("change", function(){
var v = $(this).val();
if(v=="positive"){
$("#diabetestype").closest("div").show();
}else{
$("#diabetestype").closest("div").hide();
}
});
});
<div><label for="diabetes">Diabetes:</label>
<select id="diabet" name="diabet" onchange="checkDiabet();">
<option value="negative">Negative</option>
<option value="positive" id="isDiabet">Positive</option>
</select>
</div>
<div id="type" style="display: hidden;">
<label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
<script>
function checkDiabet() {
var isDiabet = document.getElementById("isDiabet").selected;
if (isDiabet == true) { document.getElementById("type").removeAttribute("style"); }
else { document.getElementById("type").style.display = "none"; }
}
</script>
First, set the first select to fire the function checkDiabet() by the attribute onchange. Then give the option an id, which needs to be checked, so you can access it easily.
Then, set the second select to display: none This could be done in a CSS header or file, or like in this case inline. (div style=""), also add an id to access it easily. (div id="type")
Now comes the function checkDiabete(). It checks if the select is selected (can be true or false (bool)). Is selected => show (div id="type"), if not, hide this div (and all of it's contents)
(if is already hidden, it then overwrites the (style="display: none;") with (style="display: none;))
That's it! :)
Try this:
function SelectDiabetes() {
var d = document.getElementById("diabetes").value;
var dType = document.getElementById("diabetestypebox");
if(d == "negative")
dType.style.display = "none";
else
dType.style.display = "block";
}
SelectDiabetes();
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes" onchange="SelectDiabetes(this.value);">
<option value="negative">Negative</option>
<option value="positive">Positive</option>
</select>
</div>
<div id="diabetestypebox"><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
Call a js function onchange of select id diabetes
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes" onchange="toggleTypes()">
<option value="negative">Negative</option>
<option value="">Positive</option>
</select>
</div>
<div><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" style="display:none" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
Use the following javascript
function toggleTypes(){
var el=document.getElementById('diabetes');
var medElem=document.getElementById('diabetestype');
if(el.value=='positive') {
medElem.style.display='block';
} else {
medElem.style.display='none';
}
}
I am working on a Formstack form. I need to use Javascript to change the value of a dropdown box to whatever the value being typed into a text field is once a match is made.
<input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
<select id="field35497839" name="field35497839" size="1" class="fsField">
<option value=""> </option>
<option value="CIPSmember">CIPSmember</option>
<option value="TECHCONNEXmember">TECHCONNEXmember</option>
<option value="TCBCpreferred">TCBCpreferred</option>
<option value="TCBCcomp2015">TCBCcomp2015</option>
</select>
So as soon as someone types in CIPSmember into the text field, the dropdown should be selected with the same value. If there is no match, the dropdown has no selection.
I used the following jQuery on jsFiddle, but it is not working on Formstack:
$('#field35497729').keyup( function() {
$("#field35497839").val($('#field35497729').val());
}
);
Here is one Javascript method I am trying on jsFiddle that does not work:
document.getElementByID('field35497729').onkeyup = function() {
document.getElementById('field35497839').value = document.getElementByID('field35497729').value;
};
I checked here, here and maybe 10 other places but I can't get it to work. There are plenty of tutorials on how to get a text field to change when a dropdown selection change, but not nearly as many on the opposite.
misspelled ID in getElementById
missing end bracket on the jQuery version
simplified to use this and $(this)
I am however curious. Perhaps you want an autocomplete instead?
Here are your fixed versions
Plain JS version
window.onload=function() {
document.getElementById('field35497729').onkeyup = function() {
document.getElementById('field35497839').value = this.value;
}
}
<input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
<select id="field35497839" name="field35497839" size="1" class="fsField">
<option value=""> </option>
<option value="CIPSmember">CIPSmember</option>
<option value="TECHCONNEXmember">TECHCONNEXmember</option>
<option value="TCBCpreferred">TCBCpreferred</option>
<option value="TCBCcomp2015">TCBCcomp2015</option>
</select>
jQuery version
$(function() {
$('#field35497729').on("keyup",function() {
$("#field35497839").val($(this).val()); // or (this.value)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
<select id="field35497839" name="field35497839" size="1" class="fsField">
<option value=""> </option>
<option value="CIPSmember">CIPSmember</option>
<option value="TECHCONNEXmember">TECHCONNEXmember</option>
<option value="TCBCpreferred">TCBCpreferred</option>
<option value="TCBCcomp2015">TCBCcomp2015</option>
</select>
<label for="continent">Select Continent</label>
<select id="continent" onchange="countryChange(this );">
<option value="empty">Select a Continent</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value="Asia">Asia</option>
<option value="Europe">Europe</option>
<option value="Africa">Africa</option>
</select>
<br/>
<label for="country">Select a country</label>
<select id="country">
<option value="0">Select a country</option>
</select>
<div id="soc-pri">
<label for="company">Company</label>
<input name="customer" type="radio" value="company" />
<label for="private">Private</label>
<input name="customer" type="radio" value="private" />
</div>
<div id="lib-ass">
<label for="individual firm / freelancer">Individual Firm / Freelancer Professionista</label>
<input name="customer" type="radio" value="privato" />
<label for="association">Associazione</label>
<input name="customer" type="radio" value="association" />
</div>
$(document).ready(function () {
$("select").change(function () {
if ($("select option:selected").val() == "Europe") {
$('#lib-ass').show();
$('#soc-pri').show();
} else if ($("select option:selected").val() != "Europe") {
$('#lib-ass').hide();
}
}).change();
});
Hello everyone, I just started to study jquery.
I have two select fields that contain the continents and countries.
My needs nascodere show the two-DIV, "lib-ass" and "soc-first":
1) When you select the continent of Europe the DIV "lib-ass," appears. That is OK
2) When you do not select the continent Europe DIV "lib-ass", hides. That is OK
3 When you do not select the country DIV Britain the "lib-ass" must hide. This is not OK.
When you select the country DIV Britain the "lib-ass" you have to show. This is not OK
My problem is that I can not hide-show, when you select your country Britain the DIV tag with id "lib-ass."
Where am I wrong?
I hope averdato much information as possible.
thanks
http://jsfiddle.net/carmy/jg7Ls/6/
http://jsfiddle.net/J2XDk/1/ Is this what you're looking to do?
I made a few changes: select values can be retrieved by calling .val() directly on the select (no need for finding the selected option). I also look it up specifically using the select box ID since just doing $('select') is ambiguous. Save values to variables so you don't have to execute the jQuery multiple times. The alternate condition for the Europe check can just use else, no need to specifically check for != "Europe"
$(document).ready(function () {
$("select").change(function () {
var continent = $('#continent').val(),
country = $('#country').val(),
$libass = $('#lib-ass'),
$socpri = $('#soc-pri');
if (continent === "Europe") {
$libass.show();
$socpri.show();
} else {
$libass.hide();
}
if(country === 'Britain') {
$libass.hide();
} else {
$libass.show();
}
}).change();
});
You could add the following to your logic:
$("#country").change(function(){
if($("#country option:selected").val() == "Britain") {
$('#lib-ass').show();
$('#soc-pri').show();
}else{
$('#lib-ass').hide();
}
}).change();
Where country is the select box of your selected country. The hashtag (#) is used to call a specific ID in Jquery.
Here is a working example