Jump to content

clicking form elements...


jimfog

Recommended Posts

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

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 by Deirdre's Dad
Link to comment
Share on other sites

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

Ι 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

....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 by jimfog
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...