reyjoel reyjoel - 4 months ago 13
Javascript Question

remain the value of input after hide

I have an edit function where their is a function that has hide/show if i click edit. My problem is how can i remain the value of row if im going to hide it?

for example i have this dialog

enter image description here

and decided to edit sample 1(first row)

enter image description here

and then i decided i realize that i dont want to edit sample 1 then close it (by clicking edit again) then i want to edit sample 5 but i got this error

enter image description here

here is my script

//show and hide update button checker
function update_contain(){
var row = jQuery(".beneficiaries_rows input[type='text']:visible").length;
if(row > 0){
jQuery('.ui-dialog-buttonpane button:contains("Update")').button().show();
}else{
jQuery('.ui-dialog-buttonpane button:contains("Update")').button().hide();
}
}


//beneficiaries edit
jQuery(".edit_beneficiaries").click(function(){
var row = jQuery(this).closest(".beneficiaries_rows");
var show = row.find(".hide");
var hide = row.find(".show");
if(jQuery(show).is(":visible")){
jQuery(show).css({"display":"none"});
jQuery(hide).css({"display":"inline-block"});
}else{
jQuery(hide).css({"display":"none"});
jQuery(show).css({"display":"inline-block"});
}
update_contain();
});


HTML

<table style="border: 2px solid black;margin:auto;">
<tr>
<th style="width:145px;"><center>Name<center></th>
<th><center>Action</center></th>
</tr>
<?php
while($row1 = mysql_fetch_array($result1)){
echo "<tr class='beneficiaries_rows' id='".$row1['id']."' data-id='".$row1['ben_id']."'>";
echo "<td><input class='hide' type='text' name='bename_update' value='".$row1['name']."'></div>";
echo "<div class='show'>".$row1['name']."</td>";
echo "<td>";
echo "<center><button class='del_beneficiaries'>X</button><button class='edit_beneficiaries'>Edit</button></center>";
echo "</td>";
echo "</tr>";
}
?>
</table>



P.S im not good in english thats why im posting a picture to elaborate
my question

Answer

You'll want to set the text inside your label with something like this

jQuery("[selector for your label]").html(jQuery("[selector for input]").val());

I suggest doing this on click, just before you hide the input.

edit; since you're not really following:

jQuery(".edit_beneficiaries").click(function(){
    var row_display = jQuery(this).parents("tr").find(".show");
    var row_edit = jQuery(this).parents("tr").find(".hide");
    jQuery(row_display).html(jQuery(row_edit).val());
});
Comments