Generate text depends on another textbox value

Question

I want to generate target textbox value depends on another textbox value with following conditions -

Assumed First TextBox value - "myfile name"

If first textbox value not start with "Copy of " then target value will "Copy of [1] myfile name".
If first textbox value "Copy of [1] myfile name" then target value will "Copy of [2] myfile name".
If first textbox value "Copy of [2] myfile name" then target value will "Copy of [3] myfile name".

i.e increment of the no.

How do I do this using jquery?

HTML:

<div class="panel">
  <input type="text" id="filename" value="filename">
</div>
<div class="panel">
  <input type="text" id="newfilename" value="">
</div>
<div class="panel">
  <button type="button" id="btnGenerate">
    Get File Name
  </button>
</div>

JS:

$('#btnGenerate').click(function(){
  var newname;
    var oldname = $('#filename').val();
  if(typeof oldname !== undefined || oldname != ''){
    if(oldname.indexOf('Copy of')){
            var nCount = parseInt(oldname.match(/\([.*]\)/),10) + 1;
            newname = "Copy of [" + nCount[1] + "] " + oldname;
            $('#newfilename').val(newname); 
    }else{
        newname = "Copy of [1] " + oldname'
    }
    $('#newfilename').val(newname);

  }
});

score 0 · Answer 1 · edited May 23 '17 at 12:01

I've made the following adjustments to your code:

  if(oldname.substr(0, 7) == "Copy of"){
    var nCount = parseInt(oldname.match(/\[(\d+?)\]/)[1],10) + 1;
    var newname = oldname.replace(/\[\d+?\]/, "["+nCount+"]");
    $('#newfilename').val(newname);
  }
  else
  {
    $('#newfilename').val("Copy of [1] " + oldname); //prepend Copy of [1]
  }

Look at oldname.substr(0, 7) == "Copy of" the former indexOf skipped the if, not executing the code.

now [(\d+?)\] does the magic. It takes out all numbers between [ and ] and groups them in (). \d+? means get all numbers that occur 1 or n times. ? makes it lazy so it stops at ].

var newname = oldname.replace(/\[\d+?\]/, "["+nCount+"]") simply do a replace on the [] block and replace it with nCount.

You can even optimize it using just a replace:

    var newname = oldname.replace(/\[(\d+?)\]/, function(whole, group1){
        return "[" + (parseInt(group1, 10)+1) + "]";
    });

$('#btnGenerate').click(function(){
 var oldname = $('#filename').val();
    if(typeof oldname !== undefined || oldname != ''){
      if(oldname.substr(0, 7) == "Copy of"){
        var newname = oldname.replace(/\[(\d+?)\]/, function(whole, group1){
         return "[" + (parseInt(group1, 10)+1) + "]";
        });
        $('#newfilename').val(newname); 
      }
      else
      {
       $('#newfilename').val("Copy of [1] " + oldname); //prepend Copy of [1]
      }     
  }
});

.panel{
  display:block;
  padding: 5px 10px;
}
.panel input{
  width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">
  <input type="text" id="filename" value="Copy of [1] filename">
</div>
<div class="panel">
  <input type="text" id="newfilename" value="">
</div>
<div class="panel">
  <button type="button" id="btnGenerate">
    Get File Name
  </button>
</div>

On a whole different subject. You are building a filesystem kind of control. Wouldn't it be better that the copy amount is being determined by the amount of occurrences of that file name (and copies)?

score 0 · Answer 2 · answered Nov 29 '16 at 18:26

names =  new Array()
$('#btnGenerate').click(function(){
 var oldname = $('#filename').val();
  names.push(oldname);
  if(oldname != ''){
    
var nCount  = $.grep(names, function (elem) {
    return elem === oldname;
}).length;
      var newname = "Copy of [" +nCount + "] " + oldname;
   $('#newfilename').val(newname);  
  }
 
});

.panel{
  display:block;
  padding: 5px 10px;
}
.panel input{
  width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">
  <input type="text" id="filename" value="Name">
</div>
<div class="panel">
  <input type="text" id="newfilename" value="">
</div>
<div class="panel">
  <button type="button" id="btnGenerate">
    Get File Name
  </button>
</div>

I hope this is what you are looking for.

if the first name is "Copy of [1] Name" then target name will "Copy of [2] Name" — Daniel Smith, Nov 29 '16 at 18:34

score 0 · Accepted Answer · answered Nov 29 '16 at 18:41

Updated fiddle.

You're so close, you've just to adjust the regex a little bitand add else statement :

$('#btnGenerate').click(function(){
  var oldname = $('#filename').val();
  if(typeof oldname !== undefined || oldname != ''){

    //Adding '>-1' in this condition
    if(oldname.indexOf('Copy of')>-1) 
    { 
      var nCount = parseInt(oldname.match(/\[(.*)\]/)[1],10) + 1;
      var file_name = oldname.split('] ')[1];

      var newname = "Copy of [" + nCount + "] " + file_name;
    }else{
      var newname = 'Copy of [1] '+oldname;
    }

    $('#newfilename').val(newname); 
  }
});

Hope this helps.

$('#btnGenerate').click(function(){
  var oldname = $('#filename').val();
  if(typeof oldname !== undefined || oldname != ''){
    if(oldname.indexOf('Copy of')>-1){
      var nCount = parseInt(oldname.match(/\[(.*)\]/)[1],10) + 1;
      var file_name = oldname.split('] ')[1];

      var newname = "Copy of [" + nCount + "] " + file_name;
    }else{
      var newname = 'Copy of [1] '+oldname;
    }

    $('#newfilename').val(newname); 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">
  <input type="text" id="filename" value="Copy of [1] filename">
</div>
<div class="panel">
  <input type="text" id="newfilename" value="">
</div>
<div class="panel">
  <button type="button" id="btnGenerate">
    Get File Name
  </button>
</div>

Is that what you looking for ? – Zakaria Acharki Nov 29 '16 at 18:43 — Zakaria Acharki, Nov 29 '16 at 18:43

score 0 · Answer 4 · answered Nov 29 '16 at 18:43

0

Your code is working, but you have to change the regex from

 /\([.*]\)/ to /\d+/

answered Nov 29 '16 at 18:43

maheshiv

1,778
2
17
21

Generate text depends on another textbox value

4 Answers4