We Keep Coding

OnClick add a row with data from database laravel/js

I have an invoice and I want to add many items. I have a row with a select and two input fields. Select takes data from DB(it takes all items that are on the database) and input fields are for price and quantity.
I have a button Add Item that I want to add another row with specific inputs. My problem is with select because I do not know how to get data from the database to appear in options.
I am displaying the first line with Laravel while at the click of a button I am trying to implement it with JS. I also want to show the price of the selected item depending on the quantity.
<table id="items_table">...</table>
<button id="add_item">Add Item</button>
<script>
let counter = 1;
const items = {!! json_encode($items->toArray()) !!}
$('#add_item').click(function(event){
event.preventDefault();
counter++;
const select = document.createElement('select')
for(let i = 0; i< items.length; i++){
const opt = items[i]
const el = document.createElement('option');
el.textContent = opt.name;
el.value = opt.id;
select.appendChild(el);
}
const newRow = jQuery(
select +
counter + '"/></td><td><input type="text" name="last_name' +
counter + '"/></td></tr>');
$('#items_table').append(newRow);
});
</script>

It looks like you are getting your data types mixed up. You are creating the select element with document.createElement('select') - that returns a HTMLSelectElement and then you are trying to use that as if it was a String. Here is what your issue really is:
const select = document.createElement('select')
console.log(select + "<br>");
// This prints out "[object HTMLSelectElement]<br>"
To solve the issue, you must convert the select to a string of HTML, try something like this
const select = document.createElement('select')
select.innerText = "Test";
const selectAsHTML = select.outerHTML;
console.log(selectAsHTML + "<br>");

how can I find selected DropDownList from List Of DropDownList?

I show a list in View. Every item in the list has a DropDownList that specify the status of each record. Now I want to get the selected "value in DropDownList" that is in the DropDownList.
I tried this to set DropDownList :
<div>
#Html.DropDownList("DeclineReasons", ViewBag.DeclineReasons as SelectList, new { #id=item.ProfessorSubmittedRequestFlowId+"Dec"})
</div>
And by click on the button, I tried to find DropDownList in record by:
var SelectedDeclineReason = ProfessorSubmittedRequestFlowId + "Dec"
var e = document.getElementById("SelectedDeclineReason");
var SDeclineReasons = e.options[e.selectedIndex].value;
I tried this way too, but doesn't work neither:
var SelectedDeclineReason = ProfessorSubmittedRequestFlowId + "Dec"
var j=$('*[data-id=SelectedDeclineReason ]');
SelectedDeclineReason shows Id properly, but the element is undefined in both ways.

I Found The Answer,
var SelectedDeclineReason = ProfessorSubmittedRequestFlowId + "Dec"
var e = document.getElementById(SelectedDeclineReason);
var SDeclineReasons = e.options[e.selectedIndex].value;
I accidentally Use string, I Set Value of SelectedDeclineReason ,and Problem Solved.

Values are not appending to currenthttp parameter

While changing the text from select box values are updating to hidden fields but these values are not coming current http paramater .
eg:
$(document).on('change','.cart .quantitycolumn .quantityinput' ,function(){
var qty = $(this).closest('.tablerow').find('.quantityinput option:selected').val();
var uuid = $(this).closest('.tablerow').find('.quantityinput').data('uuid');
var newUUID = $(this).closest('.tablerow').find('.quantityinput').data('newuuid');
$('[name=quantityValue]').val(qty);
$('[name=ParentUUID]').val(uuid);
$('[name=newUUID]').val(newUUID);
});
Please give me hint how do we resolve this issue.
Thanks a lot!:)

Adding more than one value to text box

I'm trying to allow users to add a list of 'favourites' to a text box but when adding more than one value it replaces the value already there. Can anybody help? Thanks this is my code:
var name
function getFavourite() {
name = "Student 1, ";
$('#output').val(name)
saveFavourites();
}
function getFavourite2() {
name = "Student 2, ";
$('#output').val(name)
saveFavourites();
}
function saveFavourites() {
var fav = $("#output").val();
if (fav !== "") {
localStorage[name] = $("#output").val();
$("#output").val(name);
}
}
function loadFavourites() {
var fav = $("#name").val();
if (name !== "") {
$("#output").val(localStorage[name]);
$("#name").val("");
}
}

using val will replace the existing value as you already noticed so i would do something like this if you want to add to that value.
$("#output").val($("#output").val() + ', ' + name);
At least if i understand you correctly. This would get the excising value and then add the new value to it (in this case with a comma but is not necessary)
Of course if you need the same element twice or more is better to assign it to a var instead of calling the selector twice.

I think you are looking into multiple select dropdown, something like this:
http://codepen.io/martynasb/pen/kawxq

You don't an text input, you want a select where you can select multiple values. In html, it's <select multiple>.
The plugin I know that provides the best experience for this is is Select2: http://ivaynberg.github.io/select2/#basics
And you don't have to load all the options right away, they can be fetched via ajax easily.

How to get id from generated list in jquery

$ctr = 0;
foreach($authspons as $authspons_list){
$ctr++;
echo "<input type='checkbox' id='id_list'".$ctr."'"." name='authspons[]'"." class='list_check' value='".$authspons_list->authspons_position." ".$authspons_list->authspons_lname.",".$authspons_list->authspons_fname." ".$authspons_list->authspons_mname." ".$authspons_list->authspons_cmpny.'; '."'".">" .$authspons_list->authspons_position." ".$authspons_list->authspons_lname.",".$authspons_list->authspons_fname." ".$authspons_list->authspons_mname." ".$authspons_list->authspons_cmpny."</input> <br />";
echo "<input type='text' class='text_list' id='tbox".$ctr."'"."name='authsponsid[]' value='".$authspons_list->authspons_id."; "."'"." >";
}
I have a generated list coming from database, the checkboxes contains the personal details, while the textboxes contains the "ID" of each items in the checkboxes.
This is my jquery code:
$('#list').click(function(){
var final = '';
var final2='';
$('.list_check:checked').each(function(){
var values = $(this).val();
final += values;
var val_id = $('.text_list').val();
final2 +=val_id;
});
$("#coauth").val(final);
$("#coauthid").val(final2);
$("#coauthspons").modal("hide");
});
Getting value from checkboxes is okay. My problem is: the output from the textbox is always the last value of the number of checkboxes that is checked.
Like this:
1st checkbox = 1st textbox(value="1");
2nd checkbox = 2nd textbox(value="2");
when i check the two options, the textbox only results to:
1st checkbox = 1st textbox(value="2");
2nd checkbox = 2nd textbox(value="2");
How do I get the result of each of the expected checkbox and its textbox value?

here var val_id = $('.text_list').val();
you are giving the same value for all the elements irrespective of their index
try like this
var val_id = $(this).next().val(); //this gives value of next i.e .text_list element

$('#list').click(function(){
var final = '';
var final2='';
$('.list_check:checked').each(function(){
var raw_value = $(this).val();
var id_value = raw_value.split("||");
var values = id_value[1];
final += values;
var val_id = id_value[0];
final2 +=val_id;
});
$("#coauth").val(final);
$("#coauthid").val(final2);
//alert(final2);
$("#coauthspons").modal("hide");
});
Thanks #Bhadra for your answer. it gives me an idea but I found a better solution to my own problem. I put all the values in the checkbox then I use split function to separate the "ID" from the original checkbox values(fname,mname,lname).