|
JavaScript - It Is Allowing Me To Select More Buttons Than I Should Do
Please follow these steps in the jsfiddle
1. Click on open grid link and select option "3", buttons A,B and C would appear 2. Enter in number 2 in the number of Answers textbox. Then select buttons A and C 3. Now click on the open grid again and select option 6. 4. Now the number of Answers textbox is empty so type in 2 again in the text-box. So only 2 answers should be selected which is A and C. So if you click on another button the alert message should appear stating you are beyond limit, deselect another button. But this does not happen. Instead the user can select another 2 buttons and then the alert message would appear if another button is selected. This means that 4 buttons are selected which is incorrect, it should still be 2. So does anyone have an idea why it is doing this? Thanks Code is in jsfiddle, click [here][1] [1]: http://jsfiddle.net/C7vcQ/2/ Similar TutorialsI have a dropdown menu and some buttons below in my HTML: Code: <p>
<select name="numberDrop" id="numberDropId" onClick="getButtons()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</p>
<p>
<input class="answerBtns" name="answerA" type="button" value="A" />
<input class="answerBtns" name="answerB" type="button" value="B" />
<input class="answerBtns" name="answerC" type="button" value="C" />
<input class="answerBtns" name="answerD" type="button" value="D" />
<input class="answerBtns" name="answerE" type="button" value="E" />
</p>
What I want to know is that how is it suppose to be coded so that the user can only select the same amount of buttons as the number from the drop down menu? For example if the user selects the number 3 from the dropdown menu, then if the user clicks on a button, it will highlight the button in a color (lets say green) but the user can only have three buttons selected. If an additional button is clicked then that button would not be selected. The additional button can only be selected if the user unselects a selected button and then selects the button he wishes. This means that only 3 buttons can be selected at maximum. Also only 3 buttons minimum can be selected, if more or less buttons are selected than the number 3 then it should come up with an alert. Is this suppose to be done in Javascript or Jquery and how can I use css to change the color of the ubttons to green if selected or back to grey if unselected? Thank You Hi, I'm a retired social worker with beginner skills in scripting a web page and need some suggestions. I create eLearning materials which are given away as a communty service to help people improve their health. A typical eLearning project has a few educational screens (using a Learner Management System-LMS-template) and an interactive exercise (on an external web page-htm or html-usually accessed by button which navigates to the exercise's URL). The interactive exercise should only be accessed from inside the eLearning lesson using the button, because it requires understanding of the way it works plus important cautions to assure proper use. I need to prevent the use of the URL outside of taking the lesson (for example, someone taking the lesson acquires the exercise's URL from their browser history and then may give this to others who access the exercise directly-without necessary knowledge and cautions). I tried document.referrer, using JavaScript. Using the referrer URL from inside the lesson and adding the JavaScript to the exercise's htm code worked OK in FF, but not in IE 8. In FF, if the referrer was not the correct single URL from inside the lesson, then it redirected; if the correct URL, the exercise appears. The JS code follows: Code: <script language="JavaScript" type="text/javascript">
<!--
var oksite = "http://www.mysite.com/xyz/courseidxxxxx/yyyy/zzz.html";
var redirect = "http://mysite.com/error.html";
if (document.referrer != oksite)
{
location.replace(redirect);
}
//-->
</script>
In IE 8, I was not able to get it to work. Using an alert, I noticed that the referrer in IE 8 was blank. My web hosting (GoDaddy) is a shared Windows hosting. I would have to upgrade from IIS6 to IIS7 to use PHP. Bigger challenge: I've never used PHP. If possible, I would prefer to use JS. But, I am open to any suggestion that will help. I am also wondering if part of the IE 8 issue is that I am using IE 8 X 64? I'm stuck and hope someone can suggest a way to solve this access issue. Thanks for your help. Kind Regards, saratogacoach I'm trying to create a modulus function that will redirect users who input certain values to a secondary page. I've searched google and found a way to validate when users input a multiple of x, but I need to take it one step further and only allow values within a certain range. In full, I need to validate multiples of 7 starting at 7007 and ending on 15673 (so validate on 7007, 7014, 7021, etc.). Right now I'm looking at this code: Code: $(document).ready(function(){
$(".sub").click(function(){
if (!(($(".txt").val() % 7 == 0) || ($(".txt").val()==1)))
{
alert("Not interval of 7 or value of 1");
}
else {
alert("Interval of 7 or value of 1!");
}
});
});
Which I found here. I also need to remove the "value of 1". I'm new to JS, so when I tried, I broke the code. Any help would be much appreciated. Thank you! I have an onfocus event that makes a textarea large and then an onblur event that sets it back to a smaller textarea. If I click the textarea the onfocus event is triggered but if I go straight to submit the form the onblur event is triggered and the form is not submitted unless i hit submit twice. How can i get the form to submit? Can i put an "if" statement in the onblur event to see if the form is being submitted then just submit the form otherwise run the onblur event? Code: <style type="text/css">
.textarea {
background-color: #ffffff;
color: black;
font-family: Arial, sans-serif;
font-size: 8pt;
font-weight: normal;
border-style: solid;
border-width: 1px;
border-color: aaaaaa;
height: 18px;
width: 50%;
overflow: hidden;
}
.textarea2 {
background-color: #ffffff;
color: black;
font-family: Arial, sans-serif;
font-size: 8pt;
font-weight: normal;
border-style: solid;
border-width: 1px;
border-color: aaaaaa;
height: 100px;
width: 50%;
overflow: auto;
}
</style>
</head>
<body>
<script>
function enlargeBox(v,n,c){
document.theForm.elements[n].className='textarea2';
}
</script>
<form method="POST" name="theForm" action="newProcess.php">
site<br>
<textarea
class = "textarea"
name = "site"
onblur = "this.className='textarea'"
onfocus = 'enlargeBox(this.value,this.name,this.className)' rows="1" cols="20"> this is a test for this new texfield to textareathis is a test for this new texfield to textareathis is a test for this new texfield to textareathis is a test for this new texfield to textareathis is a test for this new texfield to textareathis is a test for this new texfield to textareathis is a test for this new texfield to textarea</textarea>
<br>
Contact:<br>
<input type="text" onclick="this.select();" name="contact" value="" class="textfieldlp" size="50">
<p> </p>
<p><input type="submit" value="submit" name="B1"></p>
</form>
Hello All, How can I prevent a browser from letting an image drag. I've tried this snippet: Code: document.onmousemove = function() {return false};
Thanks in advance! Hi, i feel kinda stupid asking this, but im kinda lost. I want to add up multiple values of groups of checkboxes. I managed to add up the values, but making it so that only one checkbox per group can be enabled at any time gives me a headache. Here is what i got so far, any hints to how to make it work would be really cool. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>
<script type="text/javascript">
function Summe()
{
sum = 0;
if(document.Formular.m1.checked)
{
sum = sum + (1 * document.Formular.m1.value);
}
if(document.Formular.m2.checked)
{
sum = sum + (1 * document.Formular.m2.value);
}
if(document.Formular.m3.checked)
{
sum = sum + (1 * document.Formular.m3.value);
}
if(document.Formular.m4.checked)
{
sum = sum + (1 * document.Formular.m4.value);
}
if(document.Formular.m5.checked)
{
sum = sum + (1 * document.Formular.m5.value);
}
if(document.Formular.m6.checked)
{
sum = sum + (1 * document.Formular.m6.value);
}
if(document.Formular.m7.checked)
{
sum = sum + (1 * document.Formular.m7.value);
}
if(document.Formular.m8.checked)
{
sum = sum + (1 * document.Formular.m8.value);
}
document.Formular.black.value = sum;
}
</script>
<form name="Formular">
<INPUT TYPE="TEXTBOX" NAME="black" VALUE="" SIZE="3"> <br>
grp1<br>
<input type="checkbox" Name="m1" Value="411" id="411" onClick="javascript:Summe()"> <br>
<input type="checkbox" Name="m2" Value="412" id="412" onClick="javascript:Summe()"> <br><br>
grp2<br>
<input type="checkbox" Name="m3" Value="421" id="421"onClick="javascript:Summe()"> <br>
<input type="checkbox" Name="m4" Value="422" id="422"onClick="javascript:Summe()"> <br>
<input type="checkbox" Name="m5" Value="423" id="423" onClick="javascript:Summe()"> <br> <br>
grp3 <br>
<input type="checkbox" Name="m6" Value="431" id="431" onClick="javascript:Summe()"> <br>
<input type="checkbox" Name="m7" Value="432" id="432" onClick="javascript:Summe()"> <br>
<input type="checkbox" Name="m8" Value="433" id="433" onClick="javascript:Summe()"> <br> <br>
</form>
</body>
</html>
Hi guys, I am trying to re-work some pre-written Javascript code at which I am a novice at (I'm more CSS, HTML, PHP...). I am trying to validate a form field for a Purchaser's last name while accounting for an apostrophe if they have one in their last name. I bet it's something simple, but I still haven't been able to figure it out, or write it correctly: Code: function checkPurchaserName()
{
var err = false;
var f = $(getApogeeElement('purchaser_name_first'));
var l = $(getApogeeElement('purchaser_name_last'));
if ( f && l &&
( f.value.toLowerCase() != first.toLowerCase() ||
l.value.toLowerCase() != last.toLowerCase() ) )
{
error_list[error_list.length] = 'The name of the purchaser must match the applicant.';
errorHighlight(f);
err = true;
}
return err;
}
As an example. I started the purchasing process with the name "Patrick O'Malley". At the end page where this validation occurs, they have (2) text boxes, one for "first name" and one for "last name". They must type the same exact name for purchaser that they did for applicant, so "Patrick", then "O'Malley" Can someone please put me on the right track? Thanks. I've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost. When I select the first option nothing appears in the second option. here's the javascript code: Code:
function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}
function valChange(){
var firstList = document.getElementById("emailaddress");
var secondList = document.getElementById("subject");
while(secondList.hasChildNodes())
secondList.removeChild(secondList.childNodes[0]);
switch(firstList.value){
case "1":{
secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
secondList.appendChild(createOption("Other", Other));
break;
}
case "2":{
secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
secondList.appendChild(createOption("Report Spam", Report Spam));
secondList.appendChild(createOption("Report Harassment", Report Harassment));
secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
break;
}
// ....
default:{
secondList.appendChild(createOption("Please select from the first list", ""));
break;
}
}
}
window.onload = valChange;
this is the form code Code: <div class="mailto_form"> <form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php"> <div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();"> <option value=""></option> <option value="1">Webmaster</option> <option value="2">Admin</option> </select> </div> <div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject"> </div> <div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value=""> </div> <div style="padding-bottom: 1em;">Enter the text contained in the image into the text box: <br /><img src="../includes/captcha.php" /> <br /><input type="text" name="userpass" value=""> </div> <div style="padding-bottom: 1em;">Message: <br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?> </div> <div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit"> </div> </form> </div> Link to the page http://www.netgamegurus.com/contact/ Hey chaps, hope someone can help with this: I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables: // tbl_main_colour: Code: ID, NAME 1, Red 2, Blue 3, Green // tbl_shade_colour: Code: ID, NAME, FK_MAIN_COLOUR_ID 1, Light Red, 1 2, Dark Red, 1 3, Light Blue, 2 4, Dark Blue, 2 5, Light Green, 3 6, Dark Green, 3 What I'm after is something to filter the second select option, after the first select option has been chosen // Select 1: Code: Red // Select 2: Code: Light Red Dark Red I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated. Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear). I need some advice on how to do this Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <form name = "form1"> <fieldset> <legend>Fruit or Veggie</legend> <select name = "S1"> <option name = "fruit">Fruit </option> <option name = "veggie">Veggie</option> </select> <select name = "S2" </select> </fieldset> </form> <script language="JavaScript" type="text/javascript"> ??? </script> </body> </html> Hi JS Experts, I am working on a class registration system that requires students to register for a main class (101, 102 or 103). The student is supposed to select one main course as well as provide a second choice in case the first is not available. I have two dropdown select fields to capture data 1) Choice -1: 101 / 102 / 103 ( Student needs to select one - Reading the classID from classes table) 2) Choice -2: 101 / 102 / 103 ( If student selects 101 in Choice-1 then the only classes available under Choice-2 should be 102 or 103). How can I accomplish the above? Further to this there are two fields on the form where I would like to auto populate based on what they have selected in Choice-1 and Choice-2. For Example: If a parent selects choice1: 101 the child Choice1 field should autopopulate with 100. If a parent selects Choice2: 201 the child Choice2 field should autopopulate with 200 Any help would be really appreciated. Thanks Vinny Hey Guys When a user changes the select list called "reason_code_master" I need the uodatecodes() function to update all the other select list with the id of "reason_codes" with the same . How can I do this. <select size='1' onchange="updatecodes()" name='reason_code_master'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> I've got some directory list boxes on the site I'm working on. I made them big and fixed rather than drop-down so they're easier to use in this context. But I had to enable the "multiple" attribute to make that work. The site has no provision for multiple selections so it's a tad annoying when the search function selects more than one name in the list. It doesn't really affect the site's operation but it could be confusing to some people. Is there a way to make the listbox show multiple selections without allowing multiple selections? Thanks for any help. <select onchange="display.apply(this, this.value.split(','))" multiple="multiple" id="People" name="People" style="border-style: none; height:244px; width:220px; margin-bottom: 15px;"> <option>Loading</option> </select> I have a select box that has ~7000 options, that based on a different dropdown select & input field, gets filtered to 0 - 300 entries. I have another select dropdown that has 13000+ options in total for all the ~7000 entries, but each entry may have 1 to 5 options of these 13000. Is there a way to change the options of the last select dropdown based on what the user chooses in the filtered select box? Currently the idea I'm having is to have the browser load all 13000+ items and filter out the ones that don't apply to the currently selected item, but I'm not sure what kind of lag the user would experience while the browser loads & filters through all these items. Any help would be appreciated. Thanks. Ok so I'm making this form which when a selection is made in one box it will run through the javascript(function getMgmtHours), and update the div(mgmthours). Then another box shows up allowing another selection to be made which runs through the javascript(function getDays) and updates another div(mgmtdate). My problem is that when I use the second box to run through javascript, it overwrites what shows up in the first div (mgmthours) when it should be updating a different div (mgmtdate). Any ideas what I can do to get it update the relevant div and not overwrite the other one? Here is part of the javascript I have in my page head: Code: function getMgmtHours(str)
{
if (str=="")
{
document.getElementById("mgmthours").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("mgmthours").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getmgmthours.php?dist="+str,true);
xmlhttp.send();
}
function getDays(str)
{
if (str=="")
{
document.getElementById("mgmtdate").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("mgmtdate").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getdates.php?sunday="+str,true);
xmlhttp.send();
}
Here is the HTML/PHP portion being used: PHP Code: echo "<p>"; echo "Submit hours:"; echo "<form>"; echo "<select name='district' onchange='getMgmtHours(this.value)'>"; echo "<option value=''>Select a district:</option> <option value='1'>1</option> <option value='3'>3</option> <option value='4'>4</option>"; echo "</select>"; echo "</form>"; echo "</p>" echo "<p>"; echo "<form action='./hours.php' method='post' onSubmit='return checkMgmtHours'>"; echo "Weekending Day: "; echo "<select name='weekending' onchange='getDays(this.value)'>"; echo "<option value=''>Choose a Date:</option>"; while ($week < 32) { $nextsunday = strtotime("next Sunday"); if ($week > 0) { $timestamp = strtotime("-" . $week . " week", $nextsunday); } else { $timestamp = $nextsunday;} $weekending = date('M. d, Y', $timestamp); echo "<option value='" . $weekending . "'>" . $weekending . "</option>"; $week = $week + 1; } echo "</select>"; echo "<div id='mgmtdate' />"; echo "<div id='mgmthours' />"; echo "</p>"; Edit: Also, after getMgmtHours() runs, I can still use both getDays and getMgmtHours, howeer once I used getDays, I am no longer able to use getMgmtHours w/o refreshing the page. Hi all, I'm having trouble getting the following right: Code: <IMG border="0" onMouseOver=this.src="home2.gif" onMouseOut=this.src="home.gif" onClick=this.src="home2.gif" SRC="home.gif"> The idea is that after somebody clicks it, the button will remain home2.gif, but ofcourse if u mouseout after the click it will return to home.gif. Can somebody please help me with this problem?! I'm not really good at js, so I've been struggling with this for quite a few days ! Thnx alot! Sjaroow hello, I created this program to hold 5 cd's and some information relating to them. I keep getting an error that says: cannot find symbol symbol : class ButtonListener location: class inventoryprogram.InventoryProgram ActionListener btnListen = new ButtonListener(); // create listener here is the part of code with the actionlistener in it [CODE] private JPanel createButtonPanel() { // begin method createButtonpanel method ActionListener btnListen = new ButtonListener(); // create listener // create button objects JButton nextButton = new JButton("Display Cd"); // create and label button nextButton.setActionCommand("Next"); // action command for click nextButton.addActionListener(btnListen); nextButton.addActionListener(this); JPanel panel = new JPanel(); panel.add(nextButton); // add next button to panel return panel; // return panel } // end method createButtonPanel [ICODE] I've been looking around and all the validation stuff I've seen doesn't work for what I have. Here is what I am trying to do: The user selects the Heads or Tails radio button for the first flip and then selects heads or tails radio button for the 2nd flip. The script then randomly flips two coins and compares it to what the user selected and if they are the same the user wins and if not then they lose. So there would be 4 buttons total, two Heads and two Tails. The first set of Heads and Tails needs to be assigned to "guess1" and the 2nd set is "guess2". So if the user clicks Tails for Flip1 and Heads for Flip2 then Tails is assigned to guess1 and Heads is assigned to guess2. Right now the script just assumes the user is selecting heads for both flips. Code: <html>
<head>
<title>Guess Two Coin Tosses</title>
<script>
function flip5(){
//Input
var guess1 = document.getElementById('guess1').value
var guess2 = document.getElementById('guess2').value
var flip1 = Math.floor(Math.random() * 2)
var flip2 = Math.floor(Math.random() * 2)
var outcomes
if (flip1 == 0) flip1 = 'Heads';
else flip1 = 'Tails';
if (flip2 == 0) flip2 = 'Heads';
else flip2 = 'Tails';
//Processing
if (flip1.toUpperCase() == guess1.toUpperCase()) {
if (flip2.toUpperCase() == guess2.toUpperCase())
outcomes = 'win win';
else
outcomes = 'win lose';
}
else { // here we lost the first
if (flip2.toUpperCase() == guess2.toUpperCase())
outcomes = 'lose win';
else
outcomes = 'lose lose';
}
//Output
document.getElementById('flip1').value = flip1
document.getElementById('flip2').value = flip2
document.getElementById('outcomes').value = outcomes
}
</script>
</head>
<body>
<h3>Predict the Futu Guess Two Coin Flips</h3>
Enter Heads for Heads, Tails for Tails! Case does not matter!
<p/>Your Guess for Flip-1:
<input type=radio id="guess1" size="5" value="Heads" />Heads
<input type=radio id="guess1" size="5" value="Tails" />Tails
<p/>Your Guess for Flip-2:
<input type=radio id="guess2" size="5" value="Heads" />Heads
<input type=radio id="guess2" size="5" value="Tails" />Tails
<p/>Flip-1:
<input type="text" id="flip1" size="5" value="???" />
<p/>Flip-2:
<input type="text" id="flip2" size="5" value="???" />
<p/><input type="button" value="Flip Two!"
onclick="flip5()" />
<p/>Outcomes:
<input type="text" id="outcomes" size="20" value="" />
<hr>
</body>
</html>
how can i make a button that takes the user to the top of the page without the url#top being displayed in addy bar? i just dont like the way it looks thanks peeps |
|||||||