I'm fairly new to JavaScript and I cant figure out why this won't work. My friend said to try use .click or .select to test for a click on the option but nether of them worked.
My html:
<body>
<form>General
<hr>Full Name:
<br>
<input Type="text" name="name">
<br>Gender:
<br>
<input type="radio" Name="gender" value="Male">Male
<input Type="radio" name="gender" value="female">Female
<br>Birthday:
<br>
<input type="text" name="bday" placeholder="mm/dd/yy">
<br>Email Adress:
<br>
<input type="text" name="email">
<br>PayPal address:
<br>
<input type="text" name="PayPal" placeholder="for when we start paying staff">
<br>Short Biography:
<br>
<textarea rows="4" cols="50"></textarea>
<br>
<br>Apply:
<hr>Username:
<br>
<input type="text" name="nick" placeholder="Your Ingame Name">
<br>What Rank Are You Applying For:
<br>
<select>
<option id="Dev" value="Developer">Developer</option>
<option id="Headadmin" value="HeadAdmin">Head Admin</option>
<option id="Headmod" value="HeadMod">Head Modetator</option>
<option id="Headbuilder" value="HeadBuilder">Head Builder</option>
<option id="admin" value="Admin">Admin</option>
<option id="mod" value="Moderator">Moderator</option>
<option id="builder" value="Builder">Builder</option>
</select>
<br>Why do WE want you (Rank you picked above):
<br>
<textarea rows="4" cols="50"></textarea>
<br>How Many Hours Can You Be On a day:
<br>
<input type="text" name="day">
<br>how many days can you be on a week:
<br>
<input type="text" name="week">
<br>have you been staff before?
<br>
<select>
<option value="yes">yes
<option value="no">no</select>
<br>Test:
<hr>
<div id="DevTest">Devtest</div>
<div id="admintest">admin test</div>
<div id="modtest">mod test</div>
<div id="HAtest">head admin test</div>
<div id="HMtest">head mod test</div>
<div id="HBtest">headbuilder test</div>
<div id="buildertest">buildertest</div>
<br>
<hr>
<textarea readonly rows="5" cols="30">Staff Contract: ---------------- 1. As a staff member, YOU, are represent the "Piggalot Gaming Network" both online and offline. this means; A. If WE, The "Piggalot Gaming Network" Community,</textarea>
<hr>
<input type="checkbox" value="test" required>by clicking this you agree to the staff contract
<br>
<input type="reset">
<input type="submit" value="Send Application">
</form>
My JavaScript:
$(document).ready(function(){
$("#Dev").Click(function(){
$("#DevTest").show();
$("#HAtest").hide();
$("#HMtest").hide();
$("#HBtest").hide();
$("#admintest").hide();
$("#modtest").hide();
$("#buildertest").hide();
});
$("#Headadmin").Click(function(){
$("#HAtest").show();
$("#DevTest").hide();
$("#HMtest").hide();
$("#HBtest").hide();
$("#admintest").hide();
$("#modtest").hide();
$("#buildertest").hide();
});
});
Here the link to a Fiddle of it: http://jsfiddle.net/a2nw2sus/1/
<option> does not work that way. Listen for a change in <select> instead:
$('#id_for_your_select').change(function () {
var selected_value = $(this).val();
switch (selected_value) {
case 'Developer': {
// do something
break;
}
case 'HeadAdmin': {
// do something else
break;
}
}
});
In http://jsfiddle.net/a2nw2sus/2/ I fixed the spelling error (click() vs Click()), and lo: it does not work in Chrome. In Firefox it works, but you must not take this for granted!
You don't select options like you have. You're meant to give your select menu a reference (ID/class/name) and select that instead.
<select id="mySelectMenu">
<option value="Developer">Developer</option>
<option value="HeadAdmin">Head Admin</option>
<option value="HeadMod">Head Modetator</option>
<option value="HeadBuilder">Head Builder</option>
<option value="Admin">Admin</option>
<option value="Moderator">Moderator</option>
<option value="Builder">Builder</option>
</select>
If you just want to detect a click on the select:
$('#mySelectMenu').click(function() {
var currentValue = $(this).find(":selected").val();
console.log("The current selected option is "+ currentValue +".");
});
or maybe you want to get value of the select after a change was detected:
$('#mySelectMenu').on('change', function() {
var selectedValue = $(this).val();
if (selectedValue === "Dev") {
$("#DevTest").show();
$("#HAtest, #HMtest, #HBtest, #adminTest, #modtest, #buildertest").hide();
} else if (selectedValue === "HeadAdmin") {
$("#HAtest").show();
$("#DevTest, #HMtest, #HBtest, #adminTest, #modtest, #buildertest").hide();
}
});
Related
I have a Javascript function that reads entries from an HTML form into an array. However, when I try to read the array into a display element back on the HTML page, it shows up blank. I debugged and know the elements are getting into the array fine, but they aren't displaying when I use innerhtml on my desired output elements. Any help? Below is my JS code (the changepage function isn't complete)
var attributes = new Array("Name", "Nickname", "Email", "Favorite Movie", "Favorite Book", "Favorite Music", "Paragraph", "Image", "Page Background", "Text Color", 0)
function populateAttributes(){
var userInput = document.getElementById("myForm");
var i;
for (i = 0; i < userInput.length; i++){
if (userInput.elements[i].value == null){
document.write("All fields must be entered. Please try again.");
break;
} else {
attributes[i] = userInput.elements[i].value;
}
}
changePage();
}
function changePage(){
document.getElementById("nameOutput").innerHTML = attributes[0];
document.getElementById("avatar").src = attributes[7];
document.body.style.backgroundColor = attributes[8];
document.body.style.color = attributes[9];
document.body.style.fontSize = attributes[10];
}
And here is the HTML code
<form id="myForm" action="#" method="post" onsubmit="return populateAttributes()">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br>
<label for="nickname">Nickname:</label><br>
<input type="text" id="nickname" name="nickname"><br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email"><br>
<label for="movie">Favorite Movie:</label><br>
<input type="text" id="movie" name="movie"><br>
<label for="book">Favorite Book:</label><br>
<input type="text" id="book" name="book"><br>
<label for="music">Favorite Type Of Music:</label><br>
<input type="text" id="music" name="music"><br>
<label for="name">About You:</label><br>
<textarea id="about" name="about" rows="4" cols="50"></textarea><br>
<label for="avatar">Link To Avatar Image:</label><br>
<input type="text" id="avatar" name="avatar"><br><br>
<label for="background">Select a background color:</label><br>
<select id="background" name="background">
<option value="white">White</option>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select><br>
<label for="txtcolor">Select a text color:</label><br>
<select id="txtcolor" name="txtcolor">
<option value="white">White</option>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select><br>
<label for="txtsize">Enter text size (in pixels):</label><br>
<input type="text" id="txtsize" name="txtsize"><br><br>
<input type="submit">
</form>
<p>Name: <span id="nameOutput" class="result"></span></p>
Edit: I may have found the issue. After debugging, it shows that the values are in fact reading into the array. However, as soon as the function ends, it reverts back to a normal page. I'm not sure how to keep the values after the page reloads
I'm trying to make a field mandatory if the option of a select is selected.
Here's the code to be clear :) :
<div class="value">
<h2>Are you happy ?</h2>
<select name="happiness" required>
<option value="1">Good</option>
<option value="0">To improve</option>
</select>
<br>
<textarea name="Comment4Happiness" placeholder="comment"></textarea>
</div>
So the textarea have to be mandatory if the option "To improve" is selected.
We can also fill the text area with a comment if we want. But that's not mandatory!
I already know that I have to use Javascript, but I do not know this domain...
You have to add id's to your form elements and then use them in your JavaScript to get their value and a submit button to call the function.
<div class="value">
<h2>Are you happy ?</h2>
<select id="mySelect" name="happiness" required>
<option value="1">Good</option>
<option value="0">To improve</option>
</select>
<br>
<textarea id="myTextArea" name="Comment4Happiness" placeholder="comment"></textarea>
<button type="button" onclick="myFunction()">Submit</button>
</div>
Now add a script tag to the bottom of your html
<script>
function myFunction() {
let selectValue = document.getElementById("mySelect").value;
let textAreaValue = document.getElementById("myTextArea").value;
if (selectValue === "0") {
if (textAreaValue === "") {
alert("Text Area should not be empty");
}
}
}
</script>
Press on submit button and you will see mandatory for select option To improve.
function checkHappiness(happiness) {
if(happiness.value === "0") {
document.getElementById("comment").required = true;
} else {
document.getElementById("comment").required = false;
}
}
<div class="value">
<form action="/action_page.php">
<h2>Are you happy now ?</h2>
<select name="happiness" onchange="checkHappiness(this)" required>
<option value="1">Good</option>
<option value="0" selected>To improve</option>
</select>
<br>
<textarea name="Comment4Happiness" value="value1" placeholder="comment" id="comment" ></textarea>
<input type="submit">
</div>
Try like this,
I added a id to the textarea. and added a function when the select box onChange.
function checkHappiness(happiness) {
if(happiness.value === "0") {
document.getElementById("comment").required = true;
} else {
document.getElementById("comment").required = false;
}
}
<div class="value">
<h2>Are you happy ?</h2>
<select name="happiness" onchange="checkHappiness(this)" required>
<option value="1">Good</option>
<option value="0">To improve</option>
</select>
<br>
<textarea name="Comment4Happiness" placeholder="comment" id="comment"></textarea>
</div>
<FORM METHOD="POST" ACTION="mailto:mariamcsorley#hotmail.com">
<p> Name: <INPUT TYPE="text" NAME= "name" SIZE="30"> </p>
<p> Email: <INPUT TYPE="text" NAME= "email" SIZE="30"> </p>
<p> Phone: <INPUT TYPE="text" NAME= "telephone" SIZE="30"> </p>
<p> Practice: <SELECT NAME= "practice" SIZE="1">
<OPTION SELECTED>*Select Practice*
<OPTION>Dungannon
<OPTION>Cookstown
<OPTION>Coalisland
<OPTION>Portnaglone
<OPTION>Aughnacloy
</SELECT> </p>
<p> Species: <SELECT NAME= "species" SIZE="1">
<OPTION SELECTED>*Select Species*
<OPTION>Small Animal
<OPTION>Equine
<OPTION>Farm
<OPTION>Pig
<OPTION>Poultry
</SELECT> </p>
<p> Preferred Date: <SELECT NAME= "day" SIZE="1">
<OPTION SELECTED>*Day* <OPTION>01 <OPTION>02 <OPTION>03 <OPTION>04 <OPTION>05 <OPTION>06 <OPTION>07 <OPTION>08 <OPTION>09 <OPTION>10 <OPTION>11 <OPTION>12 <OPTION>13 <OPTION>14 <OPTION>15 <OPTION>16 <OPTION>17 <OPTION>18 <OPTION>19 <OPTION>20 <OPTION>21 <OPTION>22 <OPTION>23 <OPTION>24 <OPTION>25 <OPTION>26 <OPTION>27 <OPTION>28 <OPTION>29 <OPTION>30 <OPTION>31 </SELECT>
<SELECT NAME="month" SIZE="1">
<OPTION SELECTED>*Month* <OPTION>Jan <OPTION>Feb <OPTION>Mar <OPTION>Apr <OPTION>May <OPTION>Jun <OPTION>Jul <OPTION>Aug <OPTION>Sep <OPTION>Oct <OPTION>Nov <OPTION>Dec </SELECT>
<SELECT NAME="year" SIZE="1">
<OPTION SELECTED>*Year* <OPTION>2016 <OPTION>2017 <OPTION>2018 <OPTION>2019 <OPTION>2020 <OPTION>2021 <OPTION>2022 <OPTION>2023 <OPTION>2024 <OPTION>2025 <OPTION>2026 <OPTION>2027 </SELECT> </p>
<p> Preferred Time: <SELECT NAME="hour" SIZE="1">
<OPTION SELECTED>*Hour* <OPTION>08 <OPTION>09 <OPTION>10 <OPTION>11 <OPTION>12 <OPTION>13 <OPTION>14 <OPTION>15 <OPTION>16 <OPTION>17 <OPTION>18 <OPTION>19 <OPTION>20 </SELECT>
<SELECT NAME="minute" SIZE="1">
<OPTION SELECTED>*Minute* <OPTION>00 <OPTION>15 <OPTION>30 <OPTION>45 </SELECT> </p>
<p> Details: <TEXTAREA NAME="details" ROWS=6 COLS=40>
</TEXTAREA> </p>
<INPUT TYPE="submit">
</form>
Hi there, Is there any way at all that I can use php or a function in order to change the email as the practice is changed. For example when Dungannon is selected from the practice drop down menu that dungannon#dungannon.com is emailed and when Coalisland is selected it emails the form to coalisland#coalisland.com?
I know nothing about this and so have been trying to figure it out and googling solutions but I cant seem to get anything to work - any help is appreciated greatly... thank you!
Change your html code
<INPUT TYPE="text" id="email" NAME= "email" SIZE="30"> <br>
and
Practice: <SELECT NAME= "practice" SIZE="1"onChange="getData(this);">
<OPTION SELECTED>*Select Practice*
<OPTION>Dungannon
<OPTION>Cookstown
<OPTION>Coalisland
<OPTION>Portnaglone
<OPTION>Aughnacloy
</SELECT>
Javascirpt code
function getData(title)
{
var selectedText = title.options[title.selectedIndex].text
var emailValue="";
if(selectedText=="Dungannon")
{
emailValue = "dungannon#dungannon.co.uk";
}
else if(selectedText=="Cookstown"){
emailValue= "cookstown#cookstown.co.uk";
}
document.getElementById("email").value = emailValue;
}
Here is working codepen
To set the email address in your form element, modify the html to include the onchange event handler as below and then add the javascript below.
<p> practice: <select name="practice" onchange='setemail(this.value)'>
<option selected hidden='true'>*select practice*
<option value='dungannon'>dungannon
<option value='cookstown'>cookstown
<option value='coalisland'>coalisland
<option value='portnaglone'>portnaglone
<option value='aughnacloy'>aughnacloy
</select> </p>
<script>
function setemail(value){
/* to change form action */
document.querySelectorAll('form[name="frmhot"]')[0].setAttribute('action','mailto:'+value+'#'+value+'.co.uk' );
/* to set value of text field called `email` */
document.querySelectorAll('form[name="frmhot"] input[type="text"][name="email"]')[0].value=value+'#'+value+'.com';
}
</script>
I notice that the form method has been changed to your email address - I'm not 100% sure that this will work as you expect but if you wish to change the form action instead of / or as well as changing the value of the email field in the form then a slight modification to the javascript function is required.
Setting the form action as a mailto will most likely invoke the mail client on the client computer ( not sure how it would work on a mobile ) - is that the intended method of operation or is it supposed to send the email directly?
From #OP:
It's for an app so I have one page of code to do this on so would have to put the tag in if I was to do a function. I am clueless but when you click submit I want it to be able to change to email the practice.. am i explaining this correctly?
I am very new to HTML and JavaScript...
I need your help to construct a website URL based on TextBox inputs in HTML/JavaScript?
I am looking for a HTML/JavaScript code to allow user to
1) Select an Option from Dropdown list
2) Enter a number
using which a URL should be generated
For example:
Drop down list has #Years to select and user select year 2014
and in text box user gives input a number as 1234
Below is the peace of code I have, but not able to get the desired result :(
<select name="SelectYear">
<option value="13" ID="13">2013</option>
<option value="12" ID="12">2012</option>
</select>
<select name="SelectMonth">
<option value="J" ID="J">June</option>
<option value="D" ID="D">December</option>
</select>
<input type="text" name="EnterRollNum" ID="EnterRollNum">
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
var iYear = $("select#SelectYear").val()
var iMonth = $("select#SelectMonth").val()
var iRollNum = $("select#EnterRollNum").val()
document.getElementById("demo").innerHTML = Link
}
</script>
Any help is much appreciated.
<form id="myForm" action="some.php" method="GET">
<select name="SelectYear">
<option value="13" ID="13">2013</option>
<option value="12" ID="12">2012</option>
</select>
<select name="SelectMonth">
<option value="J" ID="J">June</option>
<option value="D" ID="D">December</option>
</select>
<input type="text" name="EnterRollNum" ID="EnterRollNum" />
<input type="submit" value="submit" />
</form>
<p id="demo"></p>
<script>
$('#myForm').submit(function(e){
e.preventDefault();
var url = $(this).attr('action')+'?'+$('#myForm').serialize();
$('#demo').html(' Link ');
});
</script>
You can see the working fiddle - http://jsfiddle.net/grvngr/fak1s583/
Hope this helps!
Basically I have a select:
<select id="SelectExample">
<option value="no_selection"> </option>
<option value="accessoires">Accessoires pour poubelles</option>
<option value="chaises">Chaises</option>
<option value="collecte">Collecte de déchets</option>
<option value="poubelles">Poubelles</option>
</select>
Just below that is a div I want hidden if the value is no_selection
<div id="OtherDiv">
<p><label for="poids">Poids (kg)</label><input type="text" id="poids" class="medium" disabled="disabled"/></p>
<p><label for="prix">Prix (€)</label><input type="text" id="prix" class="medium" disabled="disabled"/></p>
<p><label for="volume">Volume (l)</label><input type="text" id="volume" class="medium" disabled="disabled"/></p>
<p>Modifier les attributs…</p>
</div>
I've tried the previous JQuery and CSS examples I've found, but none seem to work for me, can anyone give me a good example of what to do as I'm a bit stuck, thanks.
Here you go.
You need to bind a change event to your select box, and on change, use :selected to retrieve the value of the selected option, and show or hide depending on that. The jQuery toggle method is great for that.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<select id="SelectExample">
<option value="no_selection"> </option>
<option value="accessoires">Accessoires pour poubelles</option>
<option value="chaises">Chaises</option>
<option value="collecte">Collecte de déchets</option>
<option value="poubelles">Poubelles</option>
</select>
<div id="OtherDiv">
<p><label for="poids">Poids (kg)</label><input type="text" id="poids" class="medium" disabled="disabled"/></p>
<p><label for="prix">Prix (€)</label><input type="text" id="prix" class="medium" disabled="disabled"/></p>
<p><label for="volume">Volume (l)</label><input type="text" id="volume" class="medium" disabled="disabled"/></p>
<p>Modifier les attributs…</p>
</div>
<script>
var showHideDiv = function (evt) {
var selectedValue = jQuery(evt.target).val();
var isSelected = selectedValue !== 'no_selection';
jQuery("#OtherDiv").toggle(isSelected);
}
jQuery('#SelectExample').change(showHideDiv).trigger("change");
</script>
</body>
</html>
<select id="SelectExample" onChange="$('#OtherDiv').toggle($(this).val() != 'no_selection');">
Sounds like something of the following could work for you?
$("#SelectExample").change(
function()
{
var that = $(this);
if(that.val() == "no_selection"){
$("#OtherDiv").show();
}else{
$("#OtherDiv").hide();
}
}
);
Just a simple OnChange event, then checking the value of the field - saying that, you don't even really need JQ for this..
change display:
<select id="SelectExample" onchange="showOther(this.value)">
<option value="no_selection"> </option>
<option value="accessoires">Accessoires pour poubelles</option>
<option value="chaises">Chaises</option>
<option value="collecte">Collecte de déchets</option>
<option value="poubelles">Poubelles</option>
</select>
<div id="OtherDiv" style="display:none">
<p><label for="poids">Poids (kg)</label><input type="text" id="poids" class="medium" disabled="disabled"/></p>
<p><label for="prix">Prix (€)</label><input type="text" id="prix" class="medium" disabled="disabled"/></p>
<p><label for="volume">Volume (l)</label><input type="text" id="volume" class="medium" disabled="disabled"/></p>
<p>Modifier les attributs…</p>
</div>
and create a javascript function that handles your onchange:
<script type="text/javascript">
window.onload = function(){
showOther = function(val){
if(val && val !='no_selection'){
document.getElementById('OtherDiv').style.display = '';
} else {
document.getElementById('OtherDiv').style.display = 'none';
}
}
}
</script>
JSFiddle Example