0

I have input in one field:

<td>
    Main Category   
    <select  id="category" name="category" class="form-control">
        <option value=""></option>
        <option value="Non-Current Asset">Non-Current Asset 11</option>
        <option value="Current Asset">Current Asset 12</option>
        <option value="Non-Current Liability">Non-Current Liability 21</option>
        <option value="Current Liability">Current Liability 22</option>
        <option value="Cost of Sales">Cost of Sales 23</option>
        <option value="Operating Expenses">Operating Expenses 31</option>
        <option value="Selling Expenses">Selling Expenses 32</option>
        <option value="Operating Income">Operating Income 41</option>
        <option value="Other Income">Other Income 42</option>
        <option value="Equity">Equity 51</option>
    </select>
</td>

So if I select "Non-Current Asset 11" from drop down, I want the right 2 characters "11" entered in another input field automatically. Other input field is as follows:

<td>
    Main Code
    <input id="main_code" type="text" name="main_code" readonly />
</td>
Drag and Drop
  • 2,672
  • 3
  • 25
  • 37
Abdul
  • 45
  • 6
  • 1
    You should not. Much better to use value or some data attribute for this, like `data-id="11"`. – vp_arth Jan 18 '17 at 08:07
  • 1
    So many duplicate I dont know witch one to tag. – Drag and Drop Jan 18 '17 at 08:10
  • Possible duplicate of [Retrieving the text of the selected – Drag and Drop Jan 18 '17 at 08:16
  • "Can you kindly provide the simplest solution to this issue using HTML5? If not then in CSS3, Javascript or jQuery. – Abdul " I don't know man. What are you doing here ? Do not try to run before you learn how to walk! Read book there is a lot of tutorial about html/css/js . Beginner step by step. Do some of them. Read as mutch as you can with only course. Because you obviously don't know what you are talking about. We will be glad to help when you will come up with real question. – Drag and Drop Jan 18 '17 at 08:20
  • Pierre, I know your concern is CSS3 in my requirements. I put it as somewhere I read that now CSS is more than just styling. Thanks – Abdul Jan 18 '17 at 09:08

3 Answers3

0

It seems that you have same text in value attribute of option and in text you have numbers.

What you can do

  1. Write javascript function which will remove the text from text value of option based on the selected value. Then only number will remain which you can user\pass to other input.
Rahul Neekhra
  • 780
  • 1
  • 9
  • 39
  • Thanks Rahul, I am new to web development and still am unable to extract / cut the string. Can you kindly provide the simplest solution to this issue using HTML5? If not then in CSS3, Javascript or jQuery. – Abdul Jan 18 '17 at 08:09
  • Slice(-2) for 2 last char! – Drag and Drop Jan 18 '17 at 08:11
0

I solved it myself as follows with HTML5

changed the selection as follows;

 <td>Main Category   <select  id="category" name="category" class="form-control" required oninput="main_code.value = parseInt(category.value)">
                  <option value=""></option>
                  <option value="11">Non-Current Asset 11</option>
                  <option value="12">Current Asset 12</option>
                  <option value="21">Non-Current Liability 21</option>
                  <option value="22">Current Liability 22</option>
                  <option value="23">Cost of Sales 23</option>
                  <option value="31">Operating Expenses 31</option>
                  <option value="32">Selling Expenses 32</option>
                  <option value="41">Operating Income 41</option>
                  <option value="42">Other Income 42</option>
                  <option value="51">Equity 51</option>
                  </select></td>

Done

Abdul
  • 45
  • 6
0

Use javascript to get the text of selected option and replace all other characters from string.

<script>
    function jsfunction(element)
    {
        var text = element.options[element.selectedIndex].text;
        text = text.replace(/[^0-9]/g, '');
        document.getElementById("main_code").value=text;
    }
</script>

Main Category
Non-Current Asset 11 Current Asset 12 Non-Current Liability 21 Current Liability 22 Cost of Sales 23 Operating Expenses 31 Selling Expenses 32 Operating Income 41 Other Income 42 Equity 51

Main Code       
<input id="main_code" type="text" name="main_code" readonly />

Below is the working fiddle: https://jsfiddle.net/dexupumb/

erdeepak
  • 385
  • 1
  • 5
  • 14