html() issue


see this:
<script>
$(document).ready(function() {
      $(".closegroup").live("click", function() {                        
            $('#x2').html($('#x1').html());
      return false;
      });
});
</script>
<a href="" class="closegroup" onclick="return false;">Close</a>
<span id="x1">
<select name="tester" id="tester">
<option value="0">Not Set
<option value="4">4
<option value="5">5
<option value="6">6
</select>
</span><br><br>
<span id="x2" style="border:solid 1px red;">
</span>

select a value from select box then click close
the select box that appears in x2 is reset to not set.
is there a way to retain the value of elements when one does something like this?

keep in mind that this is a real simple ex only and that in real life there would be many form elements.
LVL 25
dgrafxAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David S.Commented:
Copying the HTML contents like that recreates the elements each time, so the values of form controls that were modified by the user will be lost.

Do you really need to move the elements? I suggest you consider giving the container "display:none" or absolutely positioning it off the left side of the page.
0
dgrafxAuthor Commented:
I am aware of WHY - I asked if someone knew of some new fangled function ...

What I actually am doing is removing the specified elements from the form scope.
So my second question is how do I remove from form scope - I can then simply hide().
Then show() and how does one put them  back again.

thanks
0
sunu340Commented:
Copying the HTML with html() will copy the whole html without the selection.Its is just like creating the element for 1st time.
If u want to capture the selection then 1st u have to find the selected value from the first dropdown.This can be done by :
$("#x1 option:selected").html() - it will return the selected value

Then u can create the 2nd dropdown.So the final code should be :

$(".closegroup").live("click", function() {                      
            $('#x2').html($('#x1').html());
            $('#x2').find("option").each(function(){
                        if($(this).html() == $("#x1 option:selected").html()) {
                              $(this).attr("selected","selected");
                        }
            });
      return false;
      });

Also instead of checking html(), u can check for attr("value") as well.
Hope this helps :)
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

Kiran SonawaneProject LeadCommented:
You can do this with single line

$('#x2 select').val($('#x1 select').val());

Test page : http://jsfiddle.net/KwJnh/
0
David S.Commented:
> What I actually am doing is removing the specified elements from the form scope.

Would you please explain why you are doing that?  A much simpler solution would be to set them as disabled so that their name/values would not be included when the form is submitted and hide them instead of moving them.

Alternatively, if you use the append(), prepend(), before(), or after() methods to move the elements to a different parent, you should not lose the current values.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dgrafxAuthor Commented:
i've discovered that values are retained with i.e. 8 (didn't try 7 or ff) but with i.e. 9 values are not retained and i had been testing with 9
i will try disabled - i had assumed that disabled elements were still in the form scope
i'll report back in a few hours
thanks
0
dgrafxAuthor Commented:
ok - you are right is saying that disabled fields are not in the form scope.

so how would one code jquery to disable all form fields within a specific id (<span id="x1">misc form fields</span>)?

thanks
0
Kiran SonawaneProject LeadCommented:
You can disabled it like

$("#x1 input select").attr('disabled',true);
0
dgrafxAuthor Commented:
thanks for all the input
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.