Imoddedu Posted July 29, 2009 Share Posted July 29, 2009 Is there a way using HTML where if like a certain part of a form is selected, another part gets taken away from the screen or another part of the form gets added? Link to comment Share on other sites More sharing options...
jeffman Posted July 29, 2009 Share Posted July 29, 2009 HTML creates a static presentation. For the kind of dynamic behavior you're describing, you'll need to use Javascript. Generally, the trick is to modify one or more elements' CSS display property, but you can get more drastic if you need to and literally remove elements from the DOM, or add them to the DOM. None of this is hard if you know Javascript. If not . . . Link to comment Share on other sites More sharing options...
Imoddedu Posted July 29, 2009 Author Share Posted July 29, 2009 I'm do not know hardly any JavaScript, can you point me in the right direction? Link to comment Share on other sites More sharing options...
jeffman Posted July 30, 2009 Share Posted July 30, 2009 The important DOM methods for this sort of thing are cloneNode(), createElement(), removeChild(), appendChild(), and insertBefore(). I used all of these below so you could see them in action. The difference between appendChild() and insertBefore() is one of position only; the add functions could have used either one for the sake of demonstration. (Note that specialized DOM methods exist for things like table rows, table cells, and select options.)It is also possible (and often more convenient) to modify an element's innerHTML property to get the same effects. I did not use that technique here because some browsers break when you try to modify innerHTML in certain situations.If you are seriously new to javascript or programming in general, some of my choices may not make sense at first. Just ask. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title></title> <script type="text/javascript"> my_clone = null; function remove (my_form) { var el = document.getElementById("test_el"); my_clone = el.cloneNode(false); my_form.removeChild(el); } function add_clone (my_form) { if (my_clone) { my_form.insertBefore(my_clone, my_form.firstChild); my_clone = null; } else { alert ("You must remove the test element first"); } } function add_new(my_form) { if (!document.getElementById("test_el")) { var new_el = document.createElement("input"); new_el.type = "text"; new_el.value = "test element"; new_el.id = "test_el"; new_el.name = "test"; my_form.appendChild(new_el, my_form.firstChild); } else { alert ("You must remove the test element first"); } } </script> </head> <body> <form method="get"> <input type="text" value="test element" id="test_el" name="test"> <input type="submit" value="submit"> <input type="button" value="remove" onclick="remove(this.form)"> <input type="button" value="add clone" onclick="add_clone(this.form)"> <input type="button" value="add new" onclick="add_new(this.form)"> </form> </body> </html> Link to comment Share on other sites More sharing options...
Imoddedu Posted July 30, 2009 Author Share Posted July 30, 2009 Ok I'm understanding half the code. I mean, from my C++ experience, I know what functions are and all the operators but I do not understand the rest of the code. What does it mean by "remove(this.form)"? On a click it goes to the remove function but I do not understand what this.form means.-ImodThanks man! Link to comment Share on other sites More sharing options...
jeffman Posted July 30, 2009 Share Posted July 30, 2009 "this" is a keyword used in Javascript to refer to an object itself. So when a button refers to "this", "this" means the button. Also, every form element has a property callled "form". This refers to the form that contains the element. So the whole statement means this: "pass (a reference to my form) to the function called 'remove()' ".I could have hard-coded a reference to the form into each function instead. Nothing wrong with that. Using this technique makes the function more flexible. The add_clone() function is especially flexible. It will add anything stored in my_clone to any page element that gets passed to it, whether it's a form or not.I should point out that the "this" keyword gets a little tricky when you change the context. If you get weird results with things like anonymous functions or functions called by reference, it could be that "this" refers to the function it's in or even the entire window. This comes up a lot in AJAX bugs. Link to comment Share on other sites More sharing options...
Imoddedu Posted July 30, 2009 Author Share Posted July 30, 2009 I see, so how would I let it start out with 1 item like this- <html><body><form><select name="option"><option>Yes</option><option>No</option><option>Maybe</option></select></form></body></html> And then like, if they select "Yes" then a new form appears with a bunch of stuff. Link to comment Share on other sites More sharing options...
jeffman Posted July 30, 2009 Share Posted July 30, 2009 Part of my answer depends on the fact that you're using forms. The normal way to make things appear and disappear is to toggle their display property, like this: var el = document.getElementById("my_el");el.style.display = "none"; And if you did that with a div, then everything inside the div would simply vanish. Setting the display property to "block" would bring it back again. And this is much easier than creating and deleting nodes, as I showed before.But since this is a form, you really need to explain your intention very clearly. The reason is this: if you have an element in your form, even if the element's display property is set to "none", the element itself is still logically present. So if it has a value, it will get posted.If this doesn't present a problem, then toggling your display property might be the way to go.Otherwise, I'd hard-code the entire form, or a div full of form elements that you want to hide/show, and then use the clone/remove/replace technique I showed above. Because it's a lot easier to write a bunch of HTML and then clone it than it is to create it all from scratch, as the add_new() function does. What I mean is, hard-code the HTML, then clone it and remove it immediately on page-load. Then when your user selects "yes", simply insert/append the cloned node, as the add_clone() function does.The first thing you need to do is choose which technique makes the most sense for your application. Link to comment Share on other sites More sharing options...
Imoddedu Posted July 31, 2009 Author Share Posted July 31, 2009 Well basically, it will be a search form, and the person will select what they want to search, and then different things will appear for each of the selections to slim down the search. Link to comment Share on other sites More sharing options...
jeffman Posted July 31, 2009 Share Posted July 31, 2009 This works in FF, SF, and OP. I didn't check IE because my PC is in my daughter's room, and she's still asleep. But I don't anticipate any problems with IE. If you find any, write back.Remember, the whole reason we're creating and destroying elements is to keep spurious data from being sent to your server. If your user does not have Javascript enabled, the entire form will be visible. That way your form is useful to everyone in all circumstances. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title></title> <style type="text/css"> #submit { display: block; } </style> <script type="text/javascript"> function clone_and_remove (the_node) { var parent = the_node.parentNode; var the_clone = the_node.cloneNode(true); parent.removeChild(the_node); return the_clone; } function insert_node (the_node, index_node) { var parent = index_node.parentNode; var result = parent.insertBefore(the_node, index_node); return result; } my_clone = null; function init () { my_clone = clone_and_remove (document.getElementById("browser_field")); document.getElementById("browser").onchange = function () { var the_node; if (this.checked == true) { the_node = insert_node (my_clone, document.getElementById("submit")); } else { my_clone = clone_and_remove (document.getElementById("browser_field")); } } } window.onload = init; </script> </head> <body> <form method="get" action="" id="my_form"> <div> <label>Check here if you use a web browser: </label> <input type="checkbox" id="browser"> <div id="browser_field"> <label>Please specify your browser: </label> <select id="browser_type" name="b_type"> <option>None</option> <option value="Explorer">Explorer</option> <option value="Firefox">Firefox</option> <option value="Safari">Safari</option> <option value="Opera">Opera</option> <option value="Other">Other</option> </select> </div> <input type="submit" value="Submit" id="submit"> </div> </form> </body></html> Link to comment Share on other sites More sharing options...
chibineku Posted July 31, 2009 Share Posted July 31, 2009 This works in FF, SF, and OP. I didn't check IE because my PC is in my daughter's room, and she's still asleep.When debugging code on this cutting edge thing we call the internet smashes into the warm cozy world of reality, comedy ensues. Link to comment Share on other sites More sharing options...
jeffman Posted July 31, 2009 Share Posted July 31, 2009 On the Internet, no one knows that you just spilled coffee on your Scooby-Doo underwear. Link to comment Share on other sites More sharing options...
Imoddedu Posted August 1, 2009 Author Share Posted August 1, 2009 My question lies in this area-- function init () { my_clone = clone_and_remove (document.getElementById("browser_field")); document.getElementById("browser").onchange = function () { var the_node; var value = this.checked; if (this.checked == true) { the_node = insert_node (my_clone, document.getElementById("submit")); } else { my_clone = clone_and_remove (document.getElementById("browser_field")); } } } window.onload = init; I'm understanding everything except this part - document.getElementById("browser").onchange = function () { var the_node; var value = this.checked; if (this.checked == true) { and window.onload = init; -Imoddedu Link to comment Share on other sites More sharing options...
jeffman Posted August 1, 2009 Share Posted August 1, 2009 window.onload = init;The script will run the init() function when the document has finished loading. I do this because (1) I want to keep the script and the markup completely separate (best practice in the current age of web design) and (2) to assign an event handler (in this case, onchange) to a page element, the text that creates the element must be loaded; so we must wait until the onload event has been received. Almost all of my scripts have an init function that assigns functions to event handlers in this way. In Post #4, I did it the old-fashioned way. document.getElementById("browser").onchange = function () {This is where we assign a function to the onchange event of the checkbox. I could have created a stand-alone function and assigned it by name, as we did with the init function. But there seemed no need to do that, since the function is only being used by one page element and one event. This sort of function is called an anonymous function, sometimes a lambda function. One advantage is that we can use the "this" keyword, and in this context it still refers to the checkbox.But now I see that my programming was sloppy. We don't actually use the variable called value, so this linevar value = this.checked;can be safely deleted (and I have made that correction to my original post). Link to comment Share on other sites More sharing options...
Imoddedu Posted August 1, 2009 Author Share Posted August 1, 2009 Ah I see how this works, but, how would this work with a select? Link to comment Share on other sites More sharing options...
Imoddedu Posted August 9, 2009 Author Share Posted August 9, 2009 So would these be correct code - <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title></title> <style type="text/css"> #submit { display: block; } </style> <script type="text/javascript"> function init () { document.getElementById("browser_type").onchange = function () { var x = document.getElementById("browser_type").value; if (x == Opera) { window.location = 'http://youtube.com'; } else { window.location = 'http://google.com'; } } } window.onload = init; </script> </head> <body> <form method="get" action="" id="my_form"> <div> <label>Please specify your browser: </label> <select id="browser_type" name="b_type"> <option>None</option> <option value="Explorer">Explorer</option> <option value="Firefox">Firefox</option> <option value="Safari">Safari</option> <option value="Opera">Opera</option> <option value="Other">Other</option> </select> <input type="submit" value="Submit" id="submit"> </div> </form> </body></html> Link to comment Share on other sites More sharing options...
jeffman Posted August 9, 2009 Share Posted August 9, 2009 This line needs to be changed from this:if (x == Opera) {to this:if (x == "Opera") {Everything else looks like it will work. Of course, it has nothing to do with your original question about making things disappear and reappear. Link to comment Share on other sites More sharing options...
Imoddedu Posted August 10, 2009 Author Share Posted August 10, 2009 Yes I know, just changing the format of my website. Link to comment Share on other sites More sharing options...
Imoddedu Posted August 10, 2009 Author Share Posted August 10, 2009 I just wanted to see how the .value thing worked. Link to comment Share on other sites More sharing options...
jeffman Posted August 10, 2009 Share Posted August 10, 2009 So is it working? Do you still have a question?Since you mentioned the value property, you should be aware that some older versions of browsers will not like this statement:var x = document.getElementById("browser_type").value;IE adopted the select.value property independently, but it was adopted slowly by other browsers. All current versions of the major browsers support it, but older versions may prefer this:var sel = document.getElementById("browser_type");var x = sel.options[sel.selectedIndex].value;Most browser upgrade themselves when they can, but only if the OS version supports the changes. This is mostly an issue for Macintosh users, I think. Link to comment Share on other sites More sharing options...
Imoddedu Posted August 10, 2009 Author Share Posted August 10, 2009 I do know that at least 95% of the traffic on this website should be coming from up to date browsers (FF, IE8 [or whatever the newest is] and Opera). Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.