CODEWITHSUNDEEP
javascriptjqueryinputselection-api
Maxenem
Maxenem

Reputation: 3

How to concatenate the values of two input fields where only second value is editable

Please help me cause i'll like to have the value of the second input field, id='bold' to concatenate with the value of the id='field' on load like this CAN'T TOUCH THIS!gaggle.

CAN'T TOUCH THIS! is currently not editable using selectionStart but i'll like gaggle to be editable.

HTML

<input id="field" type="text" value="CAN'T TOUCH THIS!" size="50"/>
<input id="bold"  type="hidden" value="gaggle" size="50"/>

<div id="output">
</div>

Javascript

$('document').ready(function(){

var readOnlyLength = $('#field').val().length;
$('#output').text(readOnlyLength);

$('#field').on('keypress, keydown', function(event) {
    $('#output').text(this.selectionStart);

    if ((event.which != 37 && (event.which != 39)) && ((this.selectionStart < readOnlyLength) || ((this.selectionStart == readOnlyLength) && (event.which == 8)))) {
        return false;
         }
        });    

})

See http://jsfiddle.net/Yt72H/999/.

Let me know if clarification is needed. Thanks.

Upvotes: 0

Views: 975

Answers (1)

Mirko Acimovic
Mirko Acimovic

Reputation: 506

On the load event of your page you can get initial value of 'giggle' input and 'don't touch this' input (those actual strings), concatenate them together into new variable (concat) and overwrite the value in 'don't touch this' with concatenated value that holds joined strings (concat variable). You will see that 'don't touch this' will stay readonly and 'giggle' part you can actually edit.

$('document').ready(function(){
     var concat = $('#field').val() + $('#bold').val();
     $('#field').val(concat);
     // rest of your code
});

Upvotes: 0

Related Questions