Hi im not currently that great at JavaScript and i have ran into a problem. im making a website to show off what i can do and in the section where i will show layouts i want to have options so they can change the colours of the page to see what it looks like. Now i have done this using radio buttons and it works great but i want to put it into a a drop down to make it look better.
The code with radio buttons:
<form action="">
<input onclick="change_color_body_blue()" type="radio" name="Content_body_color"/>Blue
<input onclick="change_color_body_green()" type="radio" name="Content_body_color"/>Green
<input onclick="change_color_body_red()" type="radio" name="Content_body_color"/>Red
<input onclick="change_color_body_yellow()" type="radio" name="Content_body_color"/>Yellow
<input onclick="change_color_body_orange()" type="radio" name="Content_body_color"/>Orange
<input onclick="change_color_body_purple()" type="radio" name="Content_body_color"/>Purple
<input onclick="change_color_body_brown()" type="radio" name="Content_body_color"/>Brown
<input onclick="change_color_body_cream()" type="radio" name="Content_body_color"/>Cream
<input onclick="change_color_body_pink()" type="radio" name="Content_body_color"/>Pink
<input onclick="change_color_body_hotpink ()" type="radio" name="Content_body_color"/>HotPink
<input onclick="change_color_body_black()" type="radio" name="Content_body_color"/>Black
<input onclick="change_color_body_white()" type="radio" name="Content_body_color"/>White
</form>
Now for the code with the dropdown
<form action="">
<select>
<option onchange="change_color_body_blue()" name="Content_body_color">Blue</option>
<option onchange="change_color_body_green()" name="Content_body_color">Green</option>
<option onchange="change_color_body_red()" name="Content_body_color">Red</option>
<option onchange="change_color_body_yellow()" name="Content_body_color">Yellow</option>
<option onchange="change_color_body_orange()" name="Content_body_color">Orange</option>
<option onchange="change_color_body_purple()" name="Content_body_color">Purple</option>
<option onchange="change_color_body_brown()" name="Content_body_color">Brown</option>
<option onchange="change_color_body_cream()" name="Content_body_color">Cream</option>
<option onchange="change_color_body_pink()" name="Content_body_color">Pink</option>
<option onchange="change_color_body_hotpink ()" name="Content_body_color">HotPink</option>
<option onchange="change_color_body_black()" name="Content_body_color">Black</option>
<option onchange="change_color_body_white()" name="Content_body_color">White</option>
</select>
</form>
I have tried onchange onclick and onselect but none work i have also added one of the events to the select tag this works but it will only change to 1 colour as only 1 of my functions can be entered can anyone see a way around this?
This should work.
<html>
<head>
</head>
<body>
<select onchange="javascript:changeColor(this);">
<option>Blue</option>
<option>Green</option>
<option>Red</option>
<option>Yellow</option>
<option>Orange</option>
<option>Purple</option>
<option>Brown</option>
<option>Cream</option>
<option>Pink</option>
<option>HotPink</option>
<option>Black</option>
<option>White</option>
</select>
<script>
function changeColor(el) {
var color = el.value;
document.body.style.background = color;
}
</script>
</body>
</html>
Related
I have some HTML code that has a few drop down menus and some check boxes and I was wondering how I would go about writing Javascript that would link to a page that specifies their selection. the code is:
<div class="dropdown">
<font color="black">
<div>
<select name="Days">
<option value="Saturday">Saturday</option>
<option value="Sunday">Sunday</option>
<option value="Friday & Saturday">Friday & Saturday</option>
<option value="Saturday & Sunday">Saturday & Sunday</option>
<option value="Friday, Saturday, & Sunday">Friday, Saturday, & Sunday</option>
</select>
</form>
</div>
</div>
<p></p>
<div2>Number of Tickets:</div2>
<div class="dropdown">
<select name="ticketNumber">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<h4>Total: </h4>
<form action="http://paypal.com">
<input type="submit" value="Submit" />
</form>
</div>
<div class="main">
<h3>Choose Passes</h3>
<form action="">
<input type="checkbox" name="gender" value="male"> VIP<br>
<input type="checkbox" name="gender" value="female"> Meet & Greet<br>
<input type="checkbox" name="gender" value="other"> Shuttle
</form>
</div>
For example: if a user were to select the saturday option, for 2 tickets, with VIP, i'm not sure how i would do either if statements or case statements to link to another page. Hopefully I've been clear enough, Thanks!
This depends on the meaning of 'link to' – whether you're trying to "auto-navigate" the user as soon as they've selected the options, or change where the form submits to once it's submitted, that is.
Either way, the beginning concept is the same: you'll need to listen to change events on the inputs, extract the input's value, followed by some kind of logic that maps input values to desired URLs and does with the URL whatever your desired outcome is.
For instance, if each ticketNumber maps to some kind of "ticket ID" in, say, a URL query string, you could dynamically change where the form will submit to by changing its action property like so:
function getUrl(id) {
return 'https://super-tickets.com/order?id=' + id;
}
var form = document.querySelector('form');
document.querySelector('select[name=ticketNumber]').onchange = function changeEventHandler(event) {
form.action = getUrl(event.target.value);
}
what I have working is 2 radio buttons and one listbox. When the first radio button is clicked, the listbox is disabled but when the second radiobutton is clicked, the listbox is available. I now have to modify the app to have two listboxes and 3 radiobuttons. If the first radio-button is clicked, I need both listboxes disabled. If the second radiobutton is clicked, I need only the first listbox to be disabled. If the third radio-button is selected, I need only the second listbox to be disabled. I have no idea how to begin to do this in Javascript or JQuery! Any help would be very appreciated!! (I'm working in ColdFusion if that is relevant).
This is the code I have working right now. I have to add one more radiobutton and another listbox to it.
<script type="text/javascript">
function check_radio()
{
if(document.MedicaidResidents.choice[1].checked){
document.getElementById("T1").disabled=true;
}else {
document.getElementById("T1").disabled=false;
}
}
</script>
<form name="MedicaidResidents" action="Medicaid_Residents.cfm" method="post" id='f1'>
<input type="radio" name="choice" value='1' onClick="check_radio()";>States<br><br>
<input type="radio" name="choice" value='2' onClick="check_radio()";>Houses
<select name="stateprompt1" multiple="multiple" size="10" id="T1">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>`
if your code is working can you just copy and paste the radio buttons and listbox you already have? if so this could work.
<form name="MedicaidResidents" action="Medicaid_Residents.cfm" method="post" id='f1'>
<input type="radio" name="choice" value='1' onClick="check_radio()";>States<br><br>
<input type="radio" name="choice" value='2' onClick="check_radio()";>Houses
<input type="radio" name="choice" value='3' onClick="check_radio()";>Foo
<select name="stateprompt1" multiple="multiple" size="10" id="T1">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>
<select name="stateprompt2" multiple="multiple" size="10" id="T2">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>
<script type="text/javascript">
function check_radio()
{
if(document.MedicaidResidents.choice[1].checked)
{
document.getElementById("T1").disabled=true;
document.getElementById("T2").disabled=true;
}
else if (document.MedicaidResidents.choice[2].checked)
{
document.getElementById("T1").disabled=true;
document.getElementById("T2").disabled=false;
}
else if (document.MedicaidResidents.choice[3].checked)
{
document.getElementById("T1").disabled=false;
document.getElementById("T2").disabled=true;
}
}
</script>
Please find the below jsfiddle as well as the code.
http://jsfiddle.net/Manoj85/3jy0crdx/
There are many solutions for this.
My solution is using JQuery to disable based on radio button selection. And highlight with red background when the list box is disabled.
HTML Code:
<form name="myForm" action="Medicaid_Residents.cfm" method="post" id='f1'>
<div>
<input type="radio" name="choice" value="1" checked> States
<input type="radio" name="choice" value="2"> Houses
<input type="radio" name="choice" value="3"> Other
</div>
<div>
<p> List Box 1 </p>
<select name="stateprompt1" multiple="multiple" size="10" id="T1">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>
</div>
<div>
<p> List Box 2 </p>
<select name="stateprompt2" multiple="multiple" size="10" id="T2">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>
</div>
</form>
JS:
$(document).ready(function() {
var all_radio_buttons = document.myForm.choice;
var prev = null;
var selected_radio_value = "1";
doRefresh(selected_radio_value);
for (var i = 0; i < all_radio_buttons.length; i++) {
all_radio_buttons[i].onclick = function() {
console.log(this.value);
selected_radio_value = this.value;
doRefresh(selected_radio_value);
};
CSS Code:
form#f1 > div {
border: solid 1px red;
margin-bottom: 10px;
}
form#f1 > div > select {
width: 200px;
height: 100px;
}
form#f1 > div > select[disabled] {
background: red;
}
Hope this helps.
I have a drop-down form on a landing page that needs to change the Submit button URL upon form submission. See screen shot below:
Drop Down Screeshot
Here is the code for the form:
<form action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&variant=a" method="POST">
<input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">
<input type="hidden" name="pageVariant" value="a">
<fieldset class="clearfix" style="width: 483px; height: -21px;">
<div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">
<select id="which_best_describes_your_company" name="which_best_describes_your_company" class="text form_elem_which_best_describes_your_company">
<option value="">Select One</option>
<option value="Tire Dealer">Tire Dealer</option>
<option value="Auto Service Dealer">Auto Service Dealer</option>
<option value="Tire Wholesaler">Tire Wholesaler</option>
<option value="Auto Parts Shop">Auto Parts Shop</option>
<option value="Warehouse Distributor">Warehouse Distributor</option>
<option value="Jobber">Jobber</option>
<option value="Other">Other</option>
</select>
</div>
</fieldset>
</form>
I've found a few codes that seem like they could work, but I'm not experienced enough to a) alter the code for a dropdown menu and b) add more than one or two URLs (there are six or so options). Can anyone help?
Many thanks in advance :)
ETA: I'm not actually able to edit the form code, as it's drag-and-drop in my editor.
As I understand your code, the pageId is the important information. So I would put this as the value of your dropdown (below is just dummy data, needs to be replaced with actual pageIds) and set the value in the onchange method.
<form action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&variant=a" method="POST">
<input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">
<input type="hidden" name="pageVariant" value="a">
<fieldset class="clearfix" style="width: 483px; height: -21px;">
<div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">
<select id="which_best_describes_your_company" name="which_best_describes_your_company"
class="text form_elem_which_best_describes_your_company" onchange="selectionChanged(this.value)">
<option value="">Select One</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">Tire Dealer</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef33">Auto Service Dealer</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef34">Tire Wholesaler</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef35>Auto Parts Shop</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef36">Warehouse Distributor</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef37">Jobber</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef38">Other</option>
</select>
</div>
</fieldset>
</form>
<script>
function(selectedPageId){
document.getElementById('pageId).value = selectedPageId
}
</script>
Use a listener on the select element to capture the selected value and append or use it to modify the form action. The following example appends the selected value to the form action:
HTML:
<form id="form" action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&variant=a" method="POST">
<input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32"><input type="hidden" name="pageVariant" value="a">
<fieldset class="clearfix" style="width: 483px; height: -21px;">
<div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">
<select onchange="updateFormAction()" id="which_best_describes_your_company" name="which_best_describes_your_company" class="text form_elem_which_best_describes_your_company"><option value="">Select One</option><option value="Tire Dealer">Tire Dealer</option><option value="Auto Service Dealer">Auto Service Dealer</option><option value="Tire Wholesaler">Tire Wholesaler</option><option value="Auto Parts Shop">Auto Parts Shop</option><option value="Warehouse Distributor">Warehouse Distributor</option><option value="Jobber">Jobber</option><option value="Other">Other</option></select>
</div>
</fieldset>
</form>
Javascript:
function updateFormAction() {
var selectedVal = document.getElementById('which_best_describes_your_company').value
var form = document.getElementById('form')
form.setAttribute('action', form.action + '&company='+selectedVal)
}
Here is the fiddle to test it : https://jsfiddle.net/h23g6o3x/
I recently working on a survey and I am fairly new and simply use jQuery to show and hide based on my survey logic. Now I am facing an issue that I need a way to reset the block(content) back to its original status (unchecked, unselected..etc). What i am currently doing is manually go into the child element and uncheck/unselect/empty all the user answers. But I dont really like my approach since I have to HARD CODE all div-id in advance. I am looking(or write a function) for a jQuery function to implement dynamically reset instead of the hard code way.
Can any one provide me a direction to go? You can try my code (and JS) here on Fiddle.
jQuery:
$("#q2Back_btn").click(function(){
//put Q2 logic here..
$('#select_2a').prop('selectedIndex',0);
$('#div_2b').find("input[type='checkbox'],input[type='radio']").prop('checked',false);
$("#secdiv").hide(500);
$("#firstdiv").show(500);
});
HTML:
<div id="firstdiv">
<div name = "div_1a">
1a. Q1a ( choose 1 and go to Q2)
<select id="select_1a" name="select_1a" >
<option checked ></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<br>
<div name= "div_1b">
<p>1b. Q1b?</p>
<input type="radio" name="1bradiogroup" value="1"> 1 <br>
<input type="radio" name="1bradiogroup" value="2"> 2 <br>
<input type="radio" name="1bradiogroup" value="3"> 3 <br>
</div>
<input type='button' id = "q1Next_btn" value='Save and Continue' />
</div>
<div id="secdiv" style="display:none">
<h1>2. Q2a</h1>
<br>
<div id="div_2a" name = "div_2a">
2a. just hit back btn to go back to Q1
<select id="select_2a" name="select_2a">
<option ></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div id="div_2b" name= "div_2b">
<p>2b. Q2b?</p>
<input type="radio" name="2bradiogroup" value="1"> No <br>
<input type="radio" name="2bradiogroup" value="2"> Yes <br>
</div>
<input type='button' id="q2Back_btn" value='Back' />
<input type='button' id="q2Next_btn" value='Save and Continue'/>
</div>
You can use jQuery's function trigger! in your form:
$('#form').trigger('reset');
Also check this: Resetting a multi-stage form with jQuery!
This is my HTML form structure:
EDIT: Each section is generated by PHP script, and the section id will change depending on user input. I am not able to use the whole selector because of this
<section id="JaneDoe">
<div class="gcolumn1">Jane Doe</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JaneDoe-chk_food[]" id="chk_food[]" value="Y">Yes
<input type="radio" name="JaneDoe-chk_food[]" id="chk_food[]" value="N">No</div>
<div class="gcolumn3">
<select id="Meal[]" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
<section id="JohnSmith">
<div class="gcolumn1">JohnSmith</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JohnSmith-chk_food[]" id="chk_food[]" value="Y">Yes
<input type="radio" name="JohnSmith-chk_food[]" id="chk_food[]" value="N">No</div>
<div class="gcolumn3">
<select id="Meal[]" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
</section>
I'd like for the dropdown Meal[] to be enabled only after the chk_food[] is selected as yes. However, I am having some trouble figuring out how to tell jQuery to enable only the dropdown box within the same section.
I currently have this as the jQuery: (I added the alert boxes to see which part of the code is not working)
var update_meal = function () {
alert ("Hi");
var sec_id = $(this).closest("section").attr("id");
alert (text(sec_id));
if ($(sec_id + "> #chk_food[]").is(":checked")) {
$(sec_id + "> #Meal[]").prop('disabled', false);
} else {
$(sec_id + "> #Meal[]").prop('disabled', 'disabled');
}
};
$(update_meal);
$("#chk_food[]").change(update_meal);
When I tried to run this on JSFiddle, no bugs show up, but the coding doesn't work at all.
I see the alert box popping up with "Hi" as soon as the document loads
Thank you for your help
You can't have multiple elements on the same page with the same ID. It is invalid HTML and it will confuse your code terribly. To get this to work, you first need to use classes to find things:
<section>
<div class="gcolumn1">JohnSmith</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JohnSmith-chk_food[]" class="chk_food yes" value="Y">Yes
<input type="radio" name="JohnSmith-chk_food[]" class="chk_food no" value="N">No
</div>
<div class="gcolumn3">
<select name="Meal[]" class="meal" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
</section>
Then you can start to target things correctly. Something like this:
$(".chk_food").on("change", function() {
$(this)
.closest("SECTION")
.find("SELECT.meal")
.prop("disabled", $(this).is(".no"));
});
In this case, we bind the change handler on both the Yes and No food radios. The handler will be called for the one the user clicks on, so they are inherently turning that one "on". So we find the parent section, and then the meal select within it, and set its disabled property to true if this is the .yes radio and false if this is the .no radio.
I think that should do it.