CODEWITHSUNDEEP
jqueryhtml
Rene
Rene

Reputation: 642

Making a value/ordinary text, clickable and changeable

This .js code below gives out the view that is visible on the picture attached. As you can probably make out of the code, depending on the value of the array (1 or 0 ) The shown value is "yes" or "no".

I'm having trouble figuring out how to make this "yes" or "no" value clickable in a sense that it changes from Yes to No. 

if(y.email.contact_email == 1){
    contact = "<td class='value'><span style='color: green'>Yes</span></td>";
}

else
{
    contact = "<td class='value'><span style='color: red'>No</span></td>";
}

content += "<tr class='odd'><td class='key'>Contact </br> e-mail</td><td class='value'>"+contact+"</td></tr>";

if(y.email.login_email == 1){
    login = "<td class='value'><span style='color: green'>Yes</span></td>";
}

else
{
    login = "<td class='value'><span style='color: red'>No</span></td>";
}

content += "<tr class='even'><td class='key'>Users login </br> e-mail</td><td class='value'>"+login+"</td></tr>";

image of output

Upvotes: 1

Views: 222

Answers (2)

techfoobar
techfoobar

Reputation: 66693

Try this:

$('td.value span').click(function() {
    $(this).text( $(this).text() == 'Yes' ? 'No' : 'Yes' );
});

Upvotes: 3

detheridge02
detheridge02

Reputation: 650

Using divs you could try :

<script type="text/javascript">
    function toggle(linkid) {
        var toggleLink = document.getElementById(linkid);
        if (toggleLink.innerHTML == 'No') {
            toggleLink.innerHTML = 'Yes';
        }
        else {
            toggleLink.innerHTML = 'No';
        }
    }
</script>

<a id="yesNo" onclick="toggle(this.id);" href="#">Yes</a>

If you need to store these values back to another script or db then simply create a hidden form field and update the value of the hidden field within the toggle function above (e.g. document.getElementById( 'hiddenField' ).value = "0" )

Dave

Upvotes: 1

Related Questions