Jump to content

Macchiato

Members
  • Posts

    38
  • Joined

  • Last visited

Everything posted by Macchiato

  1. Yes, it is necessary to allow wrong guesses. Thank you for your version John
  2. Your answer is quiete thorough, thanks Hadien
  3. I'd like to achieve the following with javascript:When you type any of the following words into the inputbox and click the submit button you'll be redirected to the corresponding page:tree => tree.phpchocolate => chocolate.phpbird => bird.phpcandle => candle.phpapple => apple.phpHowever if you type a different word than the above, you'll get a warning message. <div id="main"> <form action=""> <ul> <li><input class="inputbox" type="text" name="TypeWord" value="" placeholder="Type a word here"/></li> <li><input class="button" type="submit" name="Submit" value="Submit word"/></li> </ul> </form></div><div id="warning"> <p style="visibility:hidden;">Oops, wrong word, please try again.</p></div>   Does anyone know of a javascript that can do this?
  4. Instead of using the "disabled" property, I want to use an other method to make Select unclickable. The problem with the "disabled" property is that the form field result will not be send to the server. I found a solution to this problem, by turning "disabled" off when you click the submit button: <script type="text/javascript">function observeFlavor(flavor, requires) { document.getElementById(flavor).onchange = function(){ if(document.getElementById(flavor).options[1].selected == true) { document.getElementById(requires).options[1].selected = true; document.getElementById(requires).disabled = true; } else{ document.getElementById(requires).disabled = false; } }}document.getElementById("your-submit-button").onclick = function () { document.getElementById("icecreamcone").disabled = false;}observeFlavor("chocolate","icecreamcone");observeFlavor("vanilla","icecreamcone");</script>
  5. With some help I managed to get the following script: <script type="text/javascript">function observeFlavor(flavor, requires) { document.getElementById(flavor).onchange = function(){ if(document.getElementById(flavor).options[1].selected == true) { document.getElementById(requires).options[1].selected = true } }} observeFlavor("chocolate","icecreamcone");observeFlavor("vanilla","icecreamcone");</script> However, the above script doesn't disable the field. Maybe instead of disabling the field you make it unclickable when vanilla or chocolate, or both are selected. But when they are both deselected, the cone will be clickable again. Anyone know how to do this with the script above? Please show me an example if you do.
  6. The following script seems to work, but has two problems: - It uses jQuery- It ignores note 2. $( "select" ).change(function() { if ( $( "#vanilla" ).val() == "yes" || $( "#chocolate" ).val() == "yes" ) $( "#icecreamcone" ).val( "yes" ); else $( "#icecreamcone" ).val( "addicecreamcone" );});
  7. For example, if you select the option with id="chocolate-yes" or id="vanilla-yes", the the option with id="icecreamcone-yes" will also be selected.As you can see on the image below, when you select the option with id="chocolate-yes", <select id="icecreamcone"> will be disabled. When both id="chocolate-yes" and id="vanilla-yes" are not selected the the option with id="icecreamcone-no" will not be disabled. To put it in simpler words: you always need to have an ice cream cone if you want to add vanilla or chocolate ice cream, with the exception of sprinkles Anyone know of a Javascript that can do this? Note 1: the option with id="sprinkles-yes" will not effect id="icecreamcone-yes".Note 2: id="icecreamcone-yes" need still be selectable prior to selecting id="vanilla-yes" or id="chocolate-yes".Note 3: id names cannot be changed, nor can you add more properties to the elements.Note 4: cannot use jQuery. <ul id="icecream" style="list-style:none;line-height:30px;"> <li> <select id="icecreamcone"> <option value="addicecreamcone">Would you like an ice cream cone?</option> <option id="icecreamcone-yes" value="yes">Yes</option> <option id="icecreamcone-no" value="no">No thanks</option> </select> </li> <li> <select id="vanilla"> <option value="addvanilla">Would you like to add vanilla ice cream?</option> <option id="vanilla-yes" value="yes">Yes</option> <option id="vanilla-no" value="no">No thanks</option> </select> </li> <li> <select id="chocolate"> <option value="addchocolate">Would you like to add chocolate ice cream?</option> <option id="chocolate-yes" value="yes">Yes</option> <option id="chocolate-no" value="no">No thanks</option> </select> </li> <li> <select id="sprinkles"> <option value="addsprinkles">Would you like to add sprinkles on top?</option> <option id="sprinkles-yes" value="yes">Yes</option> <option id="sprinkles-no" value="no">No thanks</option> </select> </li></ul>
  8. Woah! Take it easy man... eat a pie I always try before I post. Already found a solution: <script type="text/javascript"> var els = ["first_field", "fourth_field", "sixth_field"] for (var i = 0; i < els.length; i++) document.getElementById(els[i]).disabled = true; </script>
  9. I'd like to disable certain input boxes, but without changing the HTML code manually. For example:I'd like to disable the input boxes with the following id's:id="first_field"id="fourth_field"id="sixth_field" <div> <form action=""> <fieldset> <input type="text" id="first_field"/> <input type="text" id="second_field"/> <input type="text" id="third_field"/> <input type="text" id="fourth_field"/> <input type="text" id="fifth_field"/> <input type="text" id="sixth_field"/> </fieldset> </form> </div> Anyone know a Javascript that can do this?
  10. Works like a charm, thanks Justsomeguy!
  11. In this example you cannot change the properties of the input element with type="text". I've changed the html code to make the intention more clear: <div> <form action=""> <fieldset> <input type="text" name="boat" id="boat" disabled="disabled" value="n/a"> <input type="text" name="car" id="car" disabled="disabled" value="2"> <input type="text" name="dog" id="dog" disabled="disabled" value=""> </fieldset> </form></div> <div> <div id="button_boat"><input type="button" value="Boat"/></div> <div id="button_car"><input type="button" value="Car"/></div> <div id="button_dog"><input type="button" value="Dog"/></div></div> Without script the output will look like this: With script the output will look like this: Could you show me a javascript that works with this example?
  12. The script must be run when the page is loaded. The content of the fields cannot be changed, so instead use this html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Hide Button When Input Value Is Empty</title></head><body> <div> <form action=""> <fieldset> <input type="text" disabled="disabled" id="first_field" value="1"/> <input type="text" disabled="disabled" id="second_field" value=""/> <input type="text" disabled="disabled" id="third_field" value="3"/> <input type="text" disabled="disabled" id="fourth_field" value="4"/> <input type="text" disabled="disabled" id="fifth_field" value="n/a"/> <input type="text" disabled="disabled" id="sixth_field" value="5"/> </fieldset> </form> </div> <div> <form action=""> <fieldset> <div id="first_button"><input type="button" value="First Button"/></div> <div id="second_button"><input type="button" value="Second Button"/></div> <div id="third_button"><input type="button" value="Third Button"/></div> <div id="fourth_button"><input type="button" value="Fourth Button"/></div> <div id="fifth_button"><input type="button" value="Fifth Button"/></div> <div id="sixth_button"><input type="button" value="Sixth Button"/></div> </fieldset> </form> </div></body></html> The output will look something like this: Can you show me an example of a javascript that can do this?
  13. I'd like to hide the corresponding button when an input value is empty or has a value="n/a". In the following example, the input box "first_field" is corresponding with the button "first_button", and the input box "second_field" with the button "second_button", and so on... In this case the second and fifth button will be hidden: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Hide Button When Input Value Is Empty</title></head><body> <div> <form action=""> <fieldset> <input type="text" id="first_field" value="1"/> <input type="text" id="second_field" value=""/> <input type="text" id="third_field" value="3"/> <input type="text" id="fourth_field" value="4"/> <input type="text" id="fifth_field" value="n/a"/> <input type="text" id="sixth_field" value="5"/> </fieldset> </form> </div> <div> <form action=""> <fieldset> <div id="first_button"><input type="button" value="First Button"/></div> <div id="second_button"><input type="button" value="Second Button"/></div> <div id="third_button"><input type="button" value="Third Button"/></div> <div id="fourth_button"><input type="button" value="Fourth Button"/></div> <div id="fifth_button"><input type="button" value="Fifth Button"/></div> <div id="sixth_button"><input type="button" value="Sixth Button"/></div> </fieldset> </form> </div></body></html> Anyone know a Javascript that can do this?
×
×
  • Create New...