Styjun

Should my manager be aware of private LinkedIn approaches I receive? How to politely have this happen?

How to create a Tetrix/Sierpinski Tetrahedron fractal radiating from 0,0,0 ? Python or nodes

3D Crossword, Cryptic, Statue View & Maze

Can Ogre clerics use Purify Food and Drink on humanoid characters?

Employer wants to use my work email account after I quit

Find the diameter of a word graph

I am completely new to Tales from the Floating Vagabond, how do I get started?

Inverse-quotes-quine

Why did pressing the joystick button spit out keypresses?

What are the penalties for overstaying in USA?

Is it damaging to turn off a small fridge for two days every week?

How much will studying magic in an academy cost?

Cascading Repair Costs following Blown Head Gasket on a 2004 Subaru Outback

Are all instances of trolls turning to stone ultimately references back to Tolkien?

Swapping rooks in a 4x4 board

C-152 carb heat on before landing in hot weather?

Is using weak login credentials always bad?

Should developer taking test phones home or put in office?

A STL-like vector implementation in C++

How are the Zhentarim and Black Fist related?

Long term BTC investing

How is hair tissue mineral analysis performed?

Is there a maximum distance from a planet that a moon can orbit?

Find the probability that the 8th woman to appear is in 17th position.

Auto-fill in textbox based on select option

Auto fill field depending on the option selectedHow do you remove all the options of a select box and then add one option and select it with jQuery?What is the best way to add options to a select from as a JS object with jQuery?jQuery get specific option tag textHow do you select a particular option in a SELECT element in jQuery?How can I know which radio button is selected via jQuery?Adding options to a <select> using jQuery?How can I select an element with multiple classes in jQuery?Get selected text from a drop-down list (select box) using jQueryjQuery Get Selected Option From DropdownSet select option 'selected', by value

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

I am creating a table which when "Item" is selected, the description will be filled automatically based on select option.

I have referred to some other links like:

Auto fill field depending on the option selected

https://www.reddit.com/r/laravel/comments/adg9s5/make_a_text_box_automatically_fill_depending_on/

but none of them answer my question.

Here's my script

$('#item').change(function(e)
 var element = $(this).find('option:selected'); 
 var desc = element.attr("Description");
 $('#Description').text(desc);
 console.log(desc)

);

This is for the item

<select class="form-control select2" id="item" name="item">
<option value="" disabled selected>None</option>
@foreach ($deliveryitems as $items)
<option value="$items->Id">$items->Item_Code</option>
@endforeach
</select>

This is for the description

<input type="text" class="Description form-control" name="Description" id="Description" readonly>

This is my controller

$deliveryitems = DB::table('inventories')
 ->leftJoin('deliveryitem','inventories.Id','=','deliveryitem.inventoryId')
 ->select('inventories.Id','deliveryitem.formId','inventories.Item_Code','inventories.Description','inventories.Unit','deliveryitem.Qty_request')
 ->get();

How to auto fill in the item description based on the item selected from the select options?

jquery laravel-5.1

share|improve this question

asked Mar 25 at 9:43

BeginnerBeginner

844 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  there is no Description attribute for option element
  
  – Pranav C Balan
  Mar 25 at 9:51
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @PranavCBalan Thanks for your attention sir, I have tried both .data("Description") and .attr() but both shows "undefined" in the console. In fact, I have "Description" in my database.The error comes from here but I dont know how to solve it. I have tired .val() and .text() too, both do not retrieve the output desired.
  
  – Beginner
  Mar 25 at 9:54
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You have to add the attribute to the option element ... In the same way u added value attribute
  
  – Pranav C Balan
  Mar 25 at 9:57
  

  
  
  
  

add a comment | 

1

I am creating a table which when "Item" is selected, the description will be filled automatically based on select option.

I have referred to some other links like:

Auto fill field depending on the option selected

https://www.reddit.com/r/laravel/comments/adg9s5/make_a_text_box_automatically_fill_depending_on/

but none of them answer my question.

Here's my script

$('#item').change(function(e)
 var element = $(this).find('option:selected'); 
 var desc = element.attr("Description");
 $('#Description').text(desc);
 console.log(desc)

);

This is for the item

<select class="form-control select2" id="item" name="item">
<option value="" disabled selected>None</option>
@foreach ($deliveryitems as $items)
<option value="$items->Id">$items->Item_Code</option>
@endforeach
</select>

This is for the description

<input type="text" class="Description form-control" name="Description" id="Description" readonly>

This is my controller

$deliveryitems = DB::table('inventories')
 ->leftJoin('deliveryitem','inventories.Id','=','deliveryitem.inventoryId')
 ->select('inventories.Id','deliveryitem.formId','inventories.Item_Code','inventories.Description','inventories.Unit','deliveryitem.Qty_request')
 ->get();

How to auto fill in the item description based on the item selected from the select options?

jquery laravel-5.1

share|improve this question

asked Mar 25 at 9:43

BeginnerBeginner

844 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  there is no Description attribute for option element
  
  – Pranav C Balan
  Mar 25 at 9:51
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @PranavCBalan Thanks for your attention sir, I have tried both .data("Description") and .attr() but both shows "undefined" in the console. In fact, I have "Description" in my database.The error comes from here but I dont know how to solve it. I have tired .val() and .text() too, both do not retrieve the output desired.
  
  – Beginner
  Mar 25 at 9:54
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You have to add the attribute to the option element ... In the same way u added value attribute
  
  – Pranav C Balan
  Mar 25 at 9:57
  

  
  
  
  

add a comment | 

I am creating a table which when "Item" is selected, the description will be filled automatically based on select option.

I have referred to some other links like:

Auto fill field depending on the option selected

https://www.reddit.com/r/laravel/comments/adg9s5/make_a_text_box_automatically_fill_depending_on/

but none of them answer my question.

Here's my script

$('#item').change(function(e)
 var element = $(this).find('option:selected'); 
 var desc = element.attr("Description");
 $('#Description').text(desc);
 console.log(desc)

);

This is for the item

<select class="form-control select2" id="item" name="item">
<option value="" disabled selected>None</option>
@foreach ($deliveryitems as $items)
<option value="$items->Id">$items->Item_Code</option>
@endforeach
</select>

This is for the description

<input type="text" class="Description form-control" name="Description" id="Description" readonly>

This is my controller

$deliveryitems = DB::table('inventories')
 ->leftJoin('deliveryitem','inventories.Id','=','deliveryitem.inventoryId')
 ->select('inventories.Id','deliveryitem.formId','inventories.Item_Code','inventories.Description','inventories.Unit','deliveryitem.Qty_request')
 ->get();

How to auto fill in the item description based on the item selected from the select options?

jquery laravel-5.1

share|improve this question

asked Mar 25 at 9:43

BeginnerBeginner

844 bronze badges

$('#item').change(function(e)
 var element = $(this).find('option:selected'); 
 var desc = element.attr("Description");
 $('#Description').text(desc);
 console.log(desc)

);

<select class="form-control select2" id="item" name="item">
<option value="" disabled selected>None</option>
@foreach ($deliveryitems as $items)
<option value="$items->Id">$items->Item_Code</option>
@endforeach
</select>

<input type="text" class="Description form-control" name="Description" id="Description" readonly>

$deliveryitems = DB::table('inventories')
 ->leftJoin('deliveryitem','inventories.Id','=','deliveryitem.inventoryId')
 ->select('inventories.Id','deliveryitem.formId','inventories.Item_Code','inventories.Description','inventories.Unit','deliveryitem.Qty_request')
 ->get();

share|improve this question

asked Mar 25 at 9:43

BeginnerBeginner

844 bronze badges

share|improve this question

asked Mar 25 at 9:43

BeginnerBeginner

844 bronze badges

asked Mar 25 at 9:43

BeginnerBeginner

844 bronze badges

asked Mar 25 at 9:43

BeginnerBeginner

844 bronze badges

1 Answer
1

active

oldest

votes

0

The text() method is using to update the text content of the element, for the input element, there is no text content. To update its value you can use val() method.

$('#Description').val(desc);

In addition to that, there is no Description attribute for the option element so you have to add the attribute in the same way value property added.

<option value="$items->Id" Description="$items->Description">$items->Item_Code</option>

$('#item').change(function(e) 
 var element = $(this).find('option:selected');
 var desc = element.attr("Description");
 $('#Description').val(desc);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control select2" id="item" name="item">
 <option value="" disabled selected>None</option>
 <option value="1" Description="a">1</option>
 <option value="2" Description="b">2</option>
 <option value="3" Description="c">3</option>
</select>

<input type="text" class="Description form-control" name="Description" id="Description" readonly>

---

It's always better to use data-* attribute for the custom attribute.

PHP :

<option value="$items->Id" data-description="$items->Description">$items->Item_Code</option>

JQuery :

$('#item').change(function(e)
 var element = $(this).find('option:selected'); 
 var desc = element.data("description");
 $('#Description').val(desc);
 console.log(desc)
);

$('#item').change(function(e) 
 var element = $(this).find('option:selected');
 var desc = element.data("description");
 $('#Description').val(desc);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control select2" id="item" name="item">
 <option value="" disabled selected>None</option>
 <option value="1" data-description="a">1</option>
 <option value="2" data-description="b">2</option>
 <option value="3" data-description="c">3</option>
</select>

<input type="text" class="Description form-control" name="Description" id="Description" readonly>

share|improve this answer

edited Mar 25 at 10:03

answered Mar 25 at 9:47

Pranav C BalanPranav C Balan

92.9k1515 gold badges9898 silver badges120120 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55334968%2fauto-fill-in-textbox-based-on-select-option%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

The text() method is using to update the text content of the element, for the input element, there is no text content. To update its value you can use val() method.

$('#Description').val(desc);

In addition to that, there is no Description attribute for the option element so you have to add the attribute in the same way value property added.

<option value="$items->Id" Description="$items->Description">$items->Item_Code</option>

$('#item').change(function(e) 
 var element = $(this).find('option:selected');
 var desc = element.attr("Description");
 $('#Description').val(desc);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control select2" id="item" name="item">
 <option value="" disabled selected>None</option>
 <option value="1" Description="a">1</option>
 <option value="2" Description="b">2</option>
 <option value="3" Description="c">3</option>
</select>

<input type="text" class="Description form-control" name="Description" id="Description" readonly>

---

It's always better to use data-* attribute for the custom attribute.

PHP :

<option value="$items->Id" data-description="$items->Description">$items->Item_Code</option>

JQuery :

$('#item').change(function(e)
 var element = $(this).find('option:selected'); 
 var desc = element.data("description");
 $('#Description').val(desc);
 console.log(desc)
);

$('#item').change(function(e) 
 var element = $(this).find('option:selected');
 var desc = element.data("description");
 $('#Description').val(desc);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control select2" id="item" name="item">
 <option value="" disabled selected>None</option>
 <option value="1" data-description="a">1</option>
 <option value="2" data-description="b">2</option>
 <option value="3" data-description="c">3</option>
</select>

<input type="text" class="Description form-control" name="Description" id="Description" readonly>

share|improve this answer

edited Mar 25 at 10:03

answered Mar 25 at 9:47

Pranav C BalanPranav C Balan

92.9k1515 gold badges9898 silver badges120120 bronze badges

add a comment | 

0

The text() method is using to update the text content of the element, for the input element, there is no text content. To update its value you can use val() method.

$('#Description').val(desc);

In addition to that, there is no Description attribute for the option element so you have to add the attribute in the same way value property added.

<option value="$items->Id" Description="$items->Description">$items->Item_Code</option>

$('#item').change(function(e) 
 var element = $(this).find('option:selected');
 var desc = element.attr("Description");
 $('#Description').val(desc);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control select2" id="item" name="item">
 <option value="" disabled selected>None</option>
 <option value="1" Description="a">1</option>
 <option value="2" Description="b">2</option>
 <option value="3" Description="c">3</option>
</select>

<input type="text" class="Description form-control" name="Description" id="Description" readonly>

---

It's always better to use data-* attribute for the custom attribute.

PHP :

<option value="$items->Id" data-description="$items->Description">$items->Item_Code</option>

JQuery :

$('#item').change(function(e)
 var element = $(this).find('option:selected'); 
 var desc = element.data("description");
 $('#Description').val(desc);
 console.log(desc)
);

$('#item').change(function(e) 
 var element = $(this).find('option:selected');
 var desc = element.data("description");
 $('#Description').val(desc);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control select2" id="item" name="item">
 <option value="" disabled selected>None</option>
 <option value="1" data-description="a">1</option>
 <option value="2" data-description="b">2</option>
 <option value="3" data-description="c">3</option>
</select>

<input type="text" class="Description form-control" name="Description" id="Description" readonly>

share|improve this answer

edited Mar 25 at 10:03

answered Mar 25 at 9:47

Pranav C BalanPranav C Balan

92.9k1515 gold badges9898 silver badges120120 bronze badges

add a comment | 

The text() method is using to update the text content of the element, for the input element, there is no text content. To update its value you can use val() method.

$('#Description').val(desc);

In addition to that, there is no Description attribute for the option element so you have to add the attribute in the same way value property added.

<option value="$items->Id" Description="$items->Description">$items->Item_Code</option>

$('#item').change(function(e) 
 var element = $(this).find('option:selected');
 var desc = element.attr("Description");
 $('#Description').val(desc);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control select2" id="item" name="item">
 <option value="" disabled selected>None</option>
 <option value="1" Description="a">1</option>
 <option value="2" Description="b">2</option>
 <option value="3" Description="c">3</option>
</select>

<input type="text" class="Description form-control" name="Description" id="Description" readonly>

---

It's always better to use data-* attribute for the custom attribute.

PHP :

<option value="$items->Id" data-description="$items->Description">$items->Item_Code</option>

JQuery :

$('#item').change(function(e)
 var element = $(this).find('option:selected'); 
 var desc = element.data("description");
 $('#Description').val(desc);
 console.log(desc)
);

$('#item').change(function(e) 
 var element = $(this).find('option:selected');
 var desc = element.data("description");
 $('#Description').val(desc);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control select2" id="item" name="item">
 <option value="" disabled selected>None</option>
 <option value="1" data-description="a">1</option>
 <option value="2" data-description="b">2</option>
 <option value="3" data-description="c">3</option>
</select>

<input type="text" class="Description form-control" name="Description" id="Description" readonly>

share|improve this answer

edited Mar 25 at 10:03

answered Mar 25 at 9:47

Pranav C BalanPranav C Balan

92.9k1515 gold badges9898 silver badges120120 bronze badges

$('#Description').val(desc);

<option value="$items->Id" Description="$items->Description">$items->Item_Code</option>

$('#item').change(function(e) 
 var element = $(this).find('option:selected');
 var desc = element.attr("Description");
 $('#Description').val(desc);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control select2" id="item" name="item">
 <option value="" disabled selected>None</option>
 <option value="1" Description="a">1</option>
 <option value="2" Description="b">2</option>
 <option value="3" Description="c">3</option>
</select>

<input type="text" class="Description form-control" name="Description" id="Description" readonly>

<option value="$items->Id" data-description="$items->Description">$items->Item_Code</option>

$('#item').change(function(e)
 var element = $(this).find('option:selected'); 
 var desc = element.data("description");
 $('#Description').val(desc);
 console.log(desc)
);

$('#item').change(function(e) 
 var element = $(this).find('option:selected');
 var desc = element.data("description");
 $('#Description').val(desc);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control select2" id="item" name="item">
 <option value="" disabled selected>None</option>
 <option value="1" data-description="a">1</option>
 <option value="2" data-description="b">2</option>
 <option value="3" data-description="c">3</option>
</select>

<input type="text" class="Description form-control" name="Description" id="Description" readonly>

$('#item').change(function(e) 
 var element = $(this).find('option:selected');
 var desc = element.attr("Description");
 $('#Description').val(desc);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control select2" id="item" name="item">
 <option value="" disabled selected>None</option>
 <option value="1" Description="a">1</option>
 <option value="2" Description="b">2</option>
 <option value="3" Description="c">3</option>
</select>

<input type="text" class="Description form-control" name="Description" id="Description" readonly>

$('#item').change(function(e) 
 var element = $(this).find('option:selected');
 var desc = element.attr("Description");
 $('#Description').val(desc);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control select2" id="item" name="item">
 <option value="" disabled selected>None</option>
 <option value="1" Description="a">1</option>
 <option value="2" Description="b">2</option>
 <option value="3" Description="c">3</option>
</select>

<input type="text" class="Description form-control" name="Description" id="Description" readonly>

$('#item').change(function(e) 
 var element = $(this).find('option:selected');
 var desc = element.data("description");
 $('#Description').val(desc);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control select2" id="item" name="item">
 <option value="" disabled selected>None</option>
 <option value="1" data-description="a">1</option>
 <option value="2" data-description="b">2</option>
 <option value="3" data-description="c">3</option>
</select>

<input type="text" class="Description form-control" name="Description" id="Description" readonly>

$('#item').change(function(e) 
 var element = $(this).find('option:selected');
 var desc = element.data("description");
 $('#Description').val(desc);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control select2" id="item" name="item">
 <option value="" disabled selected>None</option>
 <option value="1" data-description="a">1</option>
 <option value="2" data-description="b">2</option>
 <option value="3" data-description="c">3</option>
</select>

<input type="text" class="Description form-control" name="Description" id="Description" readonly>

share|improve this answer

edited Mar 25 at 10:03

answered Mar 25 at 9:47

Pranav C BalanPranav C Balan

92.9k1515 gold badges9898 silver badges120120 bronze badges

answered Mar 25 at 9:47

Pranav C BalanPranav C Balan

92.9k1515 gold badges9898 silver badges120120 bronze badges

answered Mar 25 at 9:47

Pranav C BalanPranav C Balan

92.9k1515 gold badges9898 silver badges120120 bronze badges