CODEWITHSUNDEEP
javascriptjqueryformsinput
KatherineMichelle
KatherineMichelle

Reputation: 453

How to fix a value in a 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.com/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.

Upvotes: 1

Views: 3858

Answers (5)

Abbas
Abbas

Reputation: 14432

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/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" />

Upvotes: 1

SilverSurfer
SilverSurfer

Reputation: 4366

A simple way could be combine 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.com/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>

Upvotes: 1

Nisal Edu
Nisal Edu

Reputation: 7591

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.com/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>

Upvotes: 2

Soolie
Soolie

Reputation: 1797

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inp" />

Upvotes: 1

chris
chris

Reputation: 191

<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

Upvotes: 1

Related Questions