Change text input values dynamically - php

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.

Answer 1

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

Answer 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.

Answer 3

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

Answer 4

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;
});
});