Change text input values dynamically

Question

My question might be quite easy for you guys, but it's hard for me...

I have a text field and I want to change its value between once <label id="some_id"> is clicked. Until what I've described now, I can do it myself with jQuery, but here comes the complex part (for me, obviously):

I have two values I want for that text field, and once that <label> is clicked, it switches to the value that isn't shown, but once we click it again, it goes back to the original text the text field contained.

I have to keep my jQuery/JS internal because I get the desired values from the database and I don't want to make my .js files .php.

This is what I got:

<label for="html" onclick="$('#html').val('<?php echo $image->convert('html_b', $image_data['image_link']); ?>')">HTML:</label>
<input type="text" id="html" value="<?php echo $image->convert('html_a', $image_data['image_link']); ?>" readonly />

It does the first part I need, changing the value of the field to the new value, but once that button gets clicked again, I want the original text.

Thank you.

before overwriting the value with the clicked label, save the original in a js variable and simply use the original value again when clicked the second time — shawndreck
– shawndreck, Commented Dec 29, 2012 at 13:45

Brigand · Accepted Answer · 2012-12-29 13:59:53Z

2

You can compare its current value to the available possibilities.

<label id="toggle" for="stuff">I'm a label</label>
<input type="text" val="" name="stuff" id="stuff">

var possibilities = ["foo", "bar"];

$('#toggle').click(function(){
    var old_val = $("#stuff").val(), new_val;
    if (old_val == possibilities[0])
        new_val = possibilities[1];
    else
        new_val = possibilities[0];

    $("#stuff").val(new_val);

});

demo

answered Dec 29, 2012 at 13:59

Brigand

86.4k20 gold badges168 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexander · Accepted Answer · 2012-12-29 14:20:28Z

2

First, don't use inline JavaScript.

You can use a combination of .toggle() and data-* attributes for this. For example, using a data-toggle attribute for the value you want to toggle with.

<label for="html" data-toggle="This is a placeholder">HTML:</label>
<input type="text" id="html" value="This is my real value" readonly>

$("label[for][data-toggle]").each(function() {
    var $this = $(this);
    var $for = $("#" + $this.attr("for"));
    var originalValue;
    $this.toggle(function() {
        originalValue = $for.val();
        $for.val($this.data("toggle"));
    }, function() {
        $for.val(originalValue);
    });
});

See it here.

UPDATE #1

I added usage of for attribute of <label>.

UPDATE #2

If you don't want to use .toggle() due to the deprecation notice.

$("label[for][data-toggle]").each(function() {
    /* cache */
    var $this = $(this);
    var $for = $("#" + $this.attr("for"));
    var originalValue = $for.val();
    /* state variable */
    var which = 0;
    $this.click(function() {
        $for.val(which ? originalValue : $this.data("toggle"));
        which = 1 - which;
    });
});

See the non-.toggle() alternative here.

edited Dec 29, 2012 at 14:20

answered Dec 29, 2012 at 13:53

Alexander

23.5k11 gold badges65 silver badges74 bronze badges

3 Comments

Ram Over a year ago

toggle method is deprecated.

Alexander Over a year ago

@undefined, I can't see the deprecation note anywhere. Reference?

Alexander Over a year ago

@undefined, I will bring an alternative

Ankush · Accepted Answer · 2012-12-29 14:30:08Z

2

For doing this, on the first button click you need to store the current value of input in some variable and then on 2nd click you can assign that variable to input value. If you donot want to have js file, you can simply use <script></script> tags to write the jquery.

    `<label id="label" onclick="replaceText('newvalue')">Click Mee</label>
<input id="html" type="text" value="some value">

    <script>
        var currentValue="";
   function replaceText(newval){
       currentValue= $("#html").val();
        if(currentValue!=newval)
        $("#html").val(newval);
   $("#label").attr("onclick","replaceText('"+currentValue+"')");// Here we assigned the other value to label onclick function so that it will keep on toggling the content.
   }
    </script>`

DEMO HERE

edited Dec 29, 2012 at 14:30

answered Dec 29, 2012 at 13:45

Ankush

3302 gold badges5 silver badges14 bronze badges

1 Comment

Ankush Over a year ago

I have made a very simple function, this is supposed to toggle the values everytime it is clicked :) cheers!!

Ram · Accepted Answer · 2012-12-29 13:56:16Z

1

You can store the values into JavaScript variables and use jQuery click method instead of onclick attribute.

var def = "<?php echo $image->convert('html_a', $image_data['image_link']); ?>",
    up = "<?php echo $image->convert('html_b', $image_data['image_link']); ?>";

$('label[for=html]').click(function() {
    $('#html').val(function(i, currentValue) {
        return currentValue === def ? up : def;
    });
});

edited Dec 29, 2012 at 13:56

answered Dec 29, 2012 at 13:47

Ram

145k16 gold badges174 silver badges201 bronze badges

Collectives™ on Stack Overflow

Change text input values dynamically

4 Answers 4

demo

Comments

UPDATE #1

UPDATE #2

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

UPDATE #1

UPDATE #2

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related