Get pattern from string in jQuery

Javascript & Ajax
#1

I want to create the function, If we input the correct GSTIN format, it will auto find the pattern from GSTIN and set it in PAN textbox as its value automatically.
basically, PAN ID is always in GSTIN ID, below the image which represents where the PAN number show in GSTIN.
As I keyup in jQuery the code will automatically fetch the PAN from GSTIN and show in input#pan
Please help me, I am new in jQuery and Js.

PAN PATTERN IS: /^[A-Za-z]{3}[JjLlBbTtAaFfHhPpGg]{1}[A-Za-z]{1}[0-9]{4}[A-Za-z]{1}$/;
GSTIN PATTREN IS: /^([0-9]{2}[a-zA-Z]{4}([a-zA-Z]{1}|[0-9]{1})[0-9]{4}[a-zA-Z]{1}([a-zA-Z]|[0-9]){3}){0,15}$/

My PAN is: AAAAA0000A
My GSTIN is: 22AAAAA0000A1Z5


<div class="form-group">
  <label>gstin</label>
  <div class="input-group">
  <input required="" type="text" class="form-control" name="gstin" id="gstin"  placeholder="gstin" value=""/>
  </div>
</div>

<div class="form-group">
	<label>PAN</label>
	<div class="input-group">
  <input maxlength="10" required="" type="text" class="form-control" name="pan" id="pan"  placeholder="PAN ID" value="" title="PAN Number must be 10 character" readonly/>
	</div>
</div>
#2

Just use SLICE… .slice(start, end)

If you have a value create something like this.slice(0,1) to get the state code or this.slice(2,10) to get pan…

#3

could you please show me this in script. I really never use the function you are saying… even also I new in jQuery. Please help , If possible.

#4

Well, I just got back as saw your post. Basically to do this in Jquery, you would need a few steps.
First, you would need to have JQuery monitor the input field. Then, you would need to use slice function
to get the parts needed. Lastly, you would need it to store them in the other fields. But, I did some research for you and you can not use slice functions. You need to use substr functions. Something like this might work. ( Full test page. Load it to the server and test and then study the code. )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
    var $gstin = $('#gstin');
    var $static = $('#static');
	var $pan = $('#pan');
    function onChange() {
        $static.val($gstin.val().substr(0,2));
		$pan.val($gstin.val().substr(12,3));
    };
    $('#gstin')
        .change(onChange)
        .keyup(onChange);
});
</script>
<input type="text" name="gstin" id="gstin" ><br><br>
<input type="text" name="static" id="static"><br><br>
<input type="text" name="pan" id="pan">

</body>
</html>
Sponsor our Newsletter | Privacy Policy | Terms of Service