We Keep Coding

ASP.net razor pages and multi-select, posting all items in select

I have a form which has two selects, one on the left, one on the right. One on the left to list the items to add, two buttons, one to add and one to remove items to another select using a bit of jQuery. Both selects have the multiple="multiple" attributes set.
The problem is, when I submit the form, only items selected in the right hand select are posted in the form data, which is expected. I have added the following bit of jQuery to select all of the items in the select list on submit, but it still only sends the data of the single selected item before the submit button is pressed:
$("#pageForm").submit(function (e) {
$("#controlGradesList option").prop("selected", "selected");
});
This is my form markup:
<form method="post" id="pageForm">
#Html.HiddenFor(x => x.Data.Ref)
<div class="row">
<div class="col-sm-5">
<h3>All grades</h3>
<div class="form-group">
<input type="text" id="filterBox" class="form-control" placeholder="Filter grades" />
</div>
<div class="form-group">
<select class="form-control" size="20" multiple="multiple" id="gradesList" asp-items="#(new SelectList(Model.Data.AvailableGrades, "Ref", "Display"))">
</select>
</div>
</div>
<div class="col-sm-2">
<div class="push-down-arrows">
<div class="form-group">
<input type="button" class="btn btn-primary btn-block" id="addButton" value=">>" title="Add grade to control group" />
</div>
<div class="form-group">
<input type="button" class="btn btn-primary btn-block" id="removeButton" value="<<" title="Remove grade from control group" />
</div>
</div>
</div>
<div class="col-sm-5">
<h3>Associated grades</h3>
<div class="grades-padding-top">
<div class="form-group">
<select class="form-control" size="20" multiple="multiple" id="controlGradesList" asp-for="Data.AssociatedGradeRefs" asp-items="#(new SelectList(Model.Data.AssociatedGrades, "Ref", "Display"))">
</select>
</div>
</div>
</div>
</div>
<hr />
<button class="btn btn-primary" type="submit"><i class="fa fa-save"> </i>Save</button>
| Back to previous page
</form>
What am I missing here?

I needed to use and onclick event on the button to select all of the options in the select, prevent default and submit the form:
<button class="btn btn-primary" type="submit" onclick="submitForm(event)"><i class="fa fa-save"> </i>Save</button>
and
function submitForm(e) {
$("#controlGradesList option").prop("selected", true);
e.preventDefault();
$('#pageForm')[0].submit();
}

how retrieve the value from checkbox buttons on Bootstrap 4?

I Am using Bootstrap's button plugin for my buttons, currently I have 6 Checkbox buttons and I need a Method to retrieve the value of every checked button to make some calculations. But I cannot figure how, I tried searching here And found a pretty good way but for Radio Buttons and for a single checkbox but didn't find any for multiple.
how can I make a Jquery method for sweeping the btnGroup elements and retrieve all the checked values in an array?
Please help!!
PS. I Am not native English speaker and I Am pretty new to Jquery, so sorry if its a noob question.
Example Html:
<div class="btn-toolbar btn-group-toggle" data-toggle="buttons id="btnGroup">
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn1" id="" autocomplete="off" value="value1">value1</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn2" id="" autocomplete="off" value="value2">value2</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn3" id="" autocomplete="off" value="value3">value3</label>
</div>
</div>

You can use this selector:
$("#btnGroup input[type='checkbox']:checked")
To get all the checked checkboxes in the div with the id btnGroup. You can then use .each() to loop over all the checked boxes and use destructuring assignment to get the value of each checked box.
Here I have logged out each value as an example.
See example below:
let values = [];
$('.calculate').click(_ => {
values = [];
$("#btnGroup input[type='checkbox']:checked").each((_, {value}) => {
values.push(value);
});
console.log(values);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-toolbar btn-group-toggle" data-toggle="buttons" id="btnGroup">
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn1" id="" autocomplete="off" value="value1">value1</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn2" id="" autocomplete="off" value="value2">value2</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn3" id="" autocomplete="off" value="value3">value3</label>
</div>
</div>
<button class="calculate btn btn-primary btn-lg">Calculate</button>

Show div element when user inputs text in a different field

I am trying to show a div element only whenever user inputs some text in a different field.
Text Field:
<input type="text" id="feedUrl" placeholder="API"
Div:
div class="col-xs-12 text-left" id="continue" style="display: none;">
<a class="btn btn-secondary" style="margin-top:30px;" id='continueNewFeed'>
Continue
</a>
</div>
JaveScript:
if($('feedUrl').val()){
$('#continue').show();
}
The issue I am having is that the Continue div does not show up whenever I write in the feedUrl input.
Am I missing something?

You have to set a listener on the input to detect changes. Also modify the ID selector as #bukharim mentiond in comments to $("#feedUrl"):
$(document).ready(function(){
$("#feedUrl").on("input",function(){
if($(this).val()){
$('#continue').show();
}
else{
$('#continue').hide();
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="feedUrl" placeholder="API">
<div class="col-xs-12 text-left" id="continue" style="display: none;">
<a class="btn btn-secondary" style="margin-top:30px;" id='continueNewFeed'>
Continue
</a>
</div>

Bind the event input to capture changes from that input field and check for the entered value.
Use this selector instead:
$('#feedUrl')
var $feedUrl = $('#feedUrl')
$feedUrl.on('input', function() {
var $continue = $('#continue');
if ($(this).val()) $continue.show();
else $continue.hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="feedUrl" placeholder="API">
<div class="col-xs-12 text-left" id="continue" style="display: none;">
<a class="btn btn-secondary" style="margin-top:30px;" id='continueNewFeed'>
Continue
</a>
</div>

Delete row using jquery by pressing button

I am writing a code which adds rows dynamically into a cart. Their is delete button in front of every row to delete that row. When the user press button the parent of that button should be grabbed and then implement remove() method to remove that row. But this way its not working for me.. Can anybody tell me where i am doing wrong? Following is my code
<div class="container" id="dynamic">
<div class="row " id="main-row">
<div class="col-sm-1 " id="serial">1</div>
<div class="col-sm-2 ">
<select class="container-fluid">
<option value="1">Computer</option>
<option value="2">Mobile</option>
<option value="3">LCD</option>
<option value="4">Keyboard</option>
<option value="5">Mouse</option>
</select>
</div>
<div class="col-sm-2 "><input class="length" type="number" min="1" name="name" value="" /></div>
<div class="col-sm-2 "><input class="length" type="text" name="text" value="" min="1" /></div>
<div class="col-sm-2"><input class="length" type="text" min="1"/></div>
<button class="btn-primary col-sm-1 del ">Delete</button>
</div>
</div>
<button class="btn btn-primary" id="button1">Add Row</button>
</section>
Here is my jquery code.
//code for adding rows dynamically
var counter = 1;
$(function () {
$("#button1").click(function () {
counter++;
$('#dynamic').append($("#main-row").clone().attr("id",counter-1));
$("#serial").text(counter);
});
});
//code for deleting row
$('.del').click(function () {
$(this).parent().remove();
});

Since you're adding the rows dynamically, you'll need to use a delegated event handler.
Also use this instead of ".del" to avoid deleting all the rows.
$(document).on('click', '.del', function () {
$(this).parent().remove();
});
Otherwise, the new .del objects will not get the the click event.

Multiple products in one form

I would like to add a functionality in my form, in which a user can add as many entries before hitting submit button, like a 'add to cart' functionality, show the added entries in same page, in a separate div with submit button then save those multiple entry in database using that submit button(in a separate div that shows added entry).
So far my form allows only entries on per submit bases, meaning is if the user wants to add another entry, he/she has to go back to the form and add and click to submit again.
<form method="POST" name="myForm" action="saveto.php">
<label> Speed Rating:</label>
<select name="speed_rating" required class="form-control" id="speed_rating" ></select>
<div class="form-group col-sm-8">
<label> Description:</label>
<select name="description" required class="form-control" id="description" >
</select>
</div>
<div class="form-group col-sm-4">
<label> Load Index:</label>
<select name="load_index" required class="form-control" id="load_index" >
</select>
</div>
<div class="form-group col-sm-6">
<label> Vendor:</label>
<select name="vendor" required class="form-control" id="vendor" >
</select>
<div class="note"> Recommended Vendor : <span id="recomvend"> </span> </div>
</div>
<div class="form-group col-sm-6">
<label> Quantity:</label>
<input type="text" required name="qty" class="form-control" id="qty"></div>
<div style="clear:both"> </div>
<input type="submit" name="submit" class="btn btn-primary smp" value="Submit">
<button id="clear" type="button" class="btn btn-primary smp smp2" > Reset </button>
</div>
<input type="submit" value="submit" name="submit">
</form>
How would you achieved this? My saveto.php is just a normal script that will process the submitted data to database, one entry in a per submit bases.

I created this jsfiddle https://jsfiddle.net/jy6vh4rp/31/
If that's what you are looking for then you should add this to your front end:
<form action="validate.php" method="post">
<div style="padding: 30px 0; text-align: center;">
<button type="button" onclick="createDOM()">Add</button>
<input type="submit" value="submit" name="submit" />
</div>
<div class="productsContainer"></div>
</form>
<script>
$(document).ready(function() {
id = 0;
createDOM = function() {
$(".productsContainer").append('<input type="text" id="' + id + '" name="products[]" value="' + id + '" />');
id++;
};
});
</script>
And this to your validation backend :
foreach($_POST['products'] as $prodInput){
$product = filter_var($prodInput,FILTER_SANITIZE_NUMBER_INT);
if( is_numeric($product) ){
echo $product;
}
}