I'm trying to set a fixed value in a input box, which will be the variable "name-val". This is my code:

<script src=".8.3/jquery.min.js"></script>
<tr>
    <td>
        <input style="width:300px" type="text" class="fixed-value"  value="name-val">
    </td>
</tr>

And my script:

$('input.fixed-value').keyup(function(){
     if (($(this).val().length > 0) && ($(this).val() == 'name-val')){
            $(this).val('name-val');    
        }
 });

How can I work the javascript so that the name-value will always be shown in the text field, and will be un-editable?

**UPDATE: I need the user to be able to type in the text box beside the name-val, so I can't have it disabled or read only. and placeholder won't work because I need that value to stay put, and also be able to change, but remain in the input text box.

I'm trying to set a fixed value in a input box, which will be the variable "name-val". This is my code:

<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<tr>
    <td>
        <input style="width:300px" type="text" class="fixed-value"  value="name-val">
    </td>
</tr>

And my script:

$('input.fixed-value').keyup(function(){
     if (($(this).val().length > 0) && ($(this).val() == 'name-val')){
            $(this).val('name-val');    
        }
 });

How can I work the javascript so that the name-value will always be shown in the text field, and will be un-editable?

**UPDATE: I need the user to be able to type in the text box beside the name-val, so I can't have it disabled or read only. and placeholder won't work because I need that value to stay put, and also be able to change, but remain in the input text box.

• javascript
• jquery
• forms
• input

• 2 Add a readonly attribute to the input element? – Teemu Commented Nov 21, 2017 at 8:38
• also you can use data-attribute or placeholder – guradio Commented Nov 21, 2017 at 8:39
• Can't you simply disable it or mark it as readonly? – Antho Christen Commented Nov 21, 2017 at 8:40
• So user can type anything other than name-val, but if the input is left blank than the value should be name-val, right? – Milan Chheda Commented Nov 21, 2017 at 8:48
• 1 You want to preserve the text "name-val" at the beginning of the value, but still be able to enter more text to the input ..? I.e. name-val would be like a prefix for any value? – Teemu Commented Nov 21, 2017 at 8:49

5 Answers 5

Try to make your input readonly

<tr>
    <td>
        <input style="width:300px" type="text" class="fixed-value"  value="name-val" readonly>
    </td>
</tr>

$('input.fixed-value').keyup(function() {

  if ($('#txtfld').val().indexOf("name-val") == -1) {

    $('#txtfld').val("name-val" + $(this).val())


  }



});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<tr>
  <td>
    <input style="width:300px" type="text" id="txtfld" class="fixed-value">

  </td>
</tr>

<input id="name-val" style="width:300px" type="text" class="fixed-value" value="something">

jQuery:

 $(document).ready(function() {
        $("#name-val").val('name-val');
        $("#name-val").on('change', function() {
            var tval = $(this).val();
            $(this).val('name-val' + tval.substring(24));
        });
    });

This should update anything the user types in the box and but it behind name-val

Are you expecting something like this:

$(document).ready(function () {
  $("#inp").val('name-val')
  .on('change blur focus input', function () {
    var val = $(this).val();
    if (val.indexOf("name-val") !== 0)
      $(this).val('name-val' + val);
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inp" />

A simple way could be bine 2 inputs manually and make it looks like 1, and with jQuery get values or concatenate them as you need:

$('input.fixed-value').keyup(function(){
    var val = $("input.input1").val()
    var current = $(this).val();    
    var result = val + current
    $("span").html(result)
});

.input1{
    border-right: none;
}
.input2{
    border-left: none;
    margin-left: -4px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input style="width:60px" type="text" class="fixed-value input1"  value="name-val " readonly>
 <input style="width:300px" type="text" class="fixed-value input2"  placeholder="Write something">
 
<br><br>
<span></span>

Other solutions will probably work but here's another go based on these facts:

• name-val has to be constant
• the user can enter text of his/her own

Manipulating it in a way to keep a constant value plus some user inserted value is bad design and practice in my opinion.

What I suggest is you create something like the Bootstrap add-on.

<label for="myInput">Type a value:</label>
<div class="input-group">
    <span class="input-group-addon">name-val</span>
    <input type="text" id="myInput" class="form-control">
</div>

And when you want to use the "final" value, you can add the user input to name-val:

$const = "name-val";
$("#myInput").keyup(function() {
  $userValue = $(this).val();
  $resultValue = $const + $userValue;
  $("#result").val($resultValue);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<label for="myInput">Type a value:</label>
<div class="input-group">
  <span class="input-group-addon">name-val</span>
  <input type="text" id="myInput" class="form-control">
</div>
<input type="text" class="form-control" id="result" />