jimfog Posted April 12, 2013 Share Posted April 12, 2013 I have made a form where upon clicking the edit button input element appear so that the user can change his data. Very common, like facebook's edit page example. The problem is how am I going to do it. certainly it is a click event targeting the specific edit element. This form has 6 such parts. It is impractical I think writing more or less that same thing 6 times. Such a form which is separated in fieldssets you can also find in the settings page of the new MySpace-this is exactly how I want to do it. Link to comment Share on other sites More sharing options...
jeffman Posted April 12, 2013 Share Posted April 12, 2013 (edited) This is about as simple as I can make it to show you the kind of things that must be done. Obviously you will adapt the technique to your application. <!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Hello</title><style type="text/css"> fieldset { display: none; }</style><script type="text/javascript"> function displayFieldset () { this.parentNode.getElementsByTagName("fieldset")[0].style.display = "block" } window.onload = function () { document.getElementById("edit0").onclick = displayFieldset; document.getElementById("edit1").onclick = displayFieldset; }</script></head><body><div> <input type="button" value="Edit" id="edit0"> <fieldset> <input type="text"> <input type="text"> <input type="text"> <input type="text"> </fieldset></div><div> <input type="button" value="Edit" id="edit1"> <fieldset> <input type="text"> <input type="text"> <input type="text"> <input type="text"> </fieldset></div></body></html> Edited April 12, 2013 by Deirdre's Dad Link to comment Share on other sites More sharing options...
jimfog Posted April 16, 2013 Author Share Posted April 16, 2013 I have to tell you that I am using jquery.Can the above code be written using jquery syntax? Link to comment Share on other sites More sharing options...
justsomeguy Posted April 16, 2013 Share Posted April 16, 2013 jQuery can get groups of elements, change CSS styles, and set click handlers. Link to comment Share on other sites More sharing options...
jimfog Posted April 16, 2013 Author Share Posted April 16, 2013 Ι tried this code but it did not work: $(".edit1").click = displayFieldset; Here is the html: <div class="edit1"> <a href="http://localhost/Appointments/Administrator/profile.php?editpersonal"> <img src="Images/editpen.png"></a> </div> Link to comment Share on other sites More sharing options...
justsomeguy Posted April 16, 2013 Share Posted April 16, 2013 That looks like it should work, you may need to cancel the event to stop the link from getting the click event. Otherwise, check your error console. Link to comment Share on other sites More sharing options...
jimfog Posted April 17, 2013 Author Share Posted April 17, 2013 (edited) ....you may need to cancel the event to stop the link from getting the click event.What do you mean here. can you explain it a little? Furthermore I changed the code to this to see what will happen:$(".edit1").click(function() {// alert('hi'); this.parentNode.getElementsByTagName("fieldset")[0].addclass("appear"); }); And I get a typeError. Specifically:I get the message(on the developers error console) "Cannot call method "addclass" of undefined. Edited April 17, 2013 by jimfog Link to comment Share on other sites More sharing options...
jeffman Posted April 17, 2013 Share Posted April 17, 2013 When you change the structure of the HTML, the meaning of references like 'parentNode' also changes. Link to comment Share on other sites More sharing options...
justsomeguy Posted April 17, 2013 Share Posted April 17, 2013 Look into Javascript event objects, you can use those to stop the event from bubbling to other elements. Otherwise the event will go all the way up and down the DOM tree firing on each element that applies. Link to comment Share on other sites More sharing options...
jimfog Posted April 19, 2013 Author Share Posted April 19, 2013 well...it seems the code is correct but something else is wrong.For testing I tried this: $(".edit1").click(function() { $(this).parent().css("background-color", "yellow") }); And it works the fieldset element DOES get a yellow background.So there os nothing wrong targeting the element I want. So far in order to make the element expand and show the input fields for editing I use PHP conditinalsmeaning, if edit icon clicked(GET variable) expand the fieldset element. Do you think that this INTERFERES somehow with the js code...and that I should do it solely on js:Place a hidden attribute in the fieldset element and just use js show to expand it. Link to comment Share on other sites More sharing options...
justsomeguy Posted April 19, 2013 Share Posted April 19, 2013 PHP just outputs HTML code, it doesn't matter to the browser if that is a static page versus a PHP page, the browser just sees HTML code. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now