Remove read only

JavaScript
1

Little confused why this isn’t working

   <input type="text" name="E-mail" id="usermail" class="editable" value="youremail@this.com" readonly/>
   <span id="mp-edit-mail" class="ma-edit" onClick="editMp()">CHANGE</span>

function editMp(){
$(this).find(".editable").removeAttr('readonly');
}

but if the function is specific to id it works… like

function editMp(){
$("#usermail").removeAttr('readonly');
}

Going to fight on with other methods for now, but if anyone can explain why this wont work, it’d be great

2

Just simplify it.
http://codepen.io/ryanreese09/pen/xGVKba

I think find() only looks though that elements children to find a match. That span is not a parent of the input. I think that’s why it doesn’t work.

3

Yeah the problem is…there’ll be lots of different editable inputs, so I only want to target the ones that are relevant - without too much code (if possible) . May be able to do data or check with assigned class on span, but then I think code is getting unnecessarily long

Yeah, this makes sense. Thanks. I’ll try come up with something

4

hmmm strange…
added class to span like

<span id="mp-edit-mail" class="ma-edit edmail" onClick="editMp()">CHANGE</span>

and with function like below…but it goes straight to false

function editMp(){
if ($(this).hasClass("edmail")){
	console.log('true');
   $("#usermail").removeAttr('readonly');
   }
if ($(this).hasClass("edpass")){
	console.log('true');
   $("#userpass").removeAttr('readonly');
   }
 else{
	 console.log('false');
	return; 
 }

}

5

There must be a much better way, but I’ve gone along the lines of…

<input type="text" name="E-mail" id="usermail" class="editable" value="youremail@this.com" readonly/>
   <div id="mp-edit-mail" class="ma-edit" onClick="editMp(this);">CHANGE</div>




function editMp(that){

var x = ($(that).attr('id'));

if (x === "mp-edit-mail"){
   $("#usermail").removeAttr('readonly');
   }
else if (x === "mp-edit-pass"){
   $("#userpass").removeAttr('readonly');
   }
 else{
	 console.log('false');
	return; 
 }

}

6

nope. children() does that.

Given a jQuery object that represents a set of DOM elements, the .find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.

7

ah I was trying to search up the tree, not down

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.