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 to use form selection value in another page

I have very simple page in HTML/PHP in which I am displaying form like below
<div class="modal-content">
<div class="modal-header" style="background: #095077; color: #fff" >
<h3 class="modal-title" id="formModalLabel" style="margin-left: 20px; margin-top: 20px;margin-bottom: 20px;">Compare Numbers
</h3>
</div>
<div class="modal-body">
<form id="demo-form" class="mb-4" novalidate="novalidate">
<div class="form-group row align-items-center" style = "margin-bottom:20px">
<label class="col-sm-3 text-left text-sm-right mb-0">Number 1
</label>
<div class="col-sm-9">
<select name="number1" id="number1" class="form-control" required>
<option value="">--Select 1st Number--
</option>
<?phpwhile($number_row=mysqli_fetch_array($number_result)){?>
<option value="<?php echo $number_row['number'];?>">
<?php echo $number_row['number'];?>
</option>
<?php}?>
</select>
</div>
</div>
<div class="form-group row align-items-center">
<label class="col-sm-3 text-left text-sm-right mb-0">Number 1
</label>
<div class="col-sm-9">
<select name="number2" id="number2" class="form-control" required>
<option value="">--Select 2nd Number--
</option>
<?phpwhile($number2_row=mysqli_fetch_array($number2_result)){?>
<option value="<?php echo $number2_row['number'];?>">
<?php echo $number2_row['number'];?>
</option>
<?php}?>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Close
</button>
<button type="button" onclick="location.href='details.php?id='" class="btn btn-primary">Compare
</button>
</div>
</div>
</div>
I want pass number1 and number2 value with details.php when user press compare button. I do not know how I can use selection value from form. Let me know if someone can help me for do it.
Thanks

There are multiple ways to do this. Simplest way is, You can use the action attribute in the form and use submit button to submit the values to details.php
<form id="demo-form" class="mb-4" novalidate="novalidate" action='details.php' method='GET'>
<button type="submit" class="btn btn-primary">Compare</button>
in details.php you will get the submitted values. Now by Capturing the submitted Form Data in details.php, compare the values and respond back with resultant html.

You can do it with Javascript;
But I think it's better to do with form-submit:
At first, change
<form id="demo-form" class="mb-4" novalidate="novalidate">
to
<form id="demo-form" class="mb-4" novalidate="novalidate" action="details.php" method="get">
Then you can change the button to a submit button instead of normal button:
<input type="submit">
So you are able to get the params of your form to details.php. It will call details.php?number1=2&number2=3
In your details.php you can get the values with PHP using $_GET['number1'] and so on..

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;
}
}

Instead of adding another element It is landing to a another page

I have created a modal list using bootstrap and Actually I have a form list created and when entered details, it will land me to a desired page. Register button performs this function. But now I have also added a dependent dropdown(Skills,Level) options. It also has a add button and Whenever I am clicking on add button instead of adding another elements,its landing me to that same page and displays added successfully message. Can anyone help me?
<form id='work' method="post" action="registerdb.php">
<div class="form-group">
<label for="recipient-name" class="control-label">First Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-user"></span></span>
<input type="text" id = "firstname" name = "firstname" class="form-control"
placeholder="First Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group"><label for="exampleInputEmail1">Last Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-user"></span></span>
<input type="text" id = "lastname" name = "lastname" class="form-control"
placeholder="Last Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label>Company Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-briefcase"></span></span>
<input type="text" id= "companyname" name = "companyname" class="form-
control" placeholder="Company Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group"><label for="exampleInputEmail1">E-mail ID</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" id = "emailid" name = "emailid" class="form-control"
placeholder="Email" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-asterisk"></span></span>
<input type="password" id = "password" name = "password" class="form-
control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Type of Industry</label>
<div class="input-group">
<select class="input-medium bfh-countries" data-country="US">
<option value="" disabled="disbaled" selected="selected">Please Select a
Value</option>
<option value="Accounting">Accounting</option>
<option value="Aeronautical">Aeronautical</option>
<option value="Agriculture">Agriculture</option>
<option value="Science and Research">Science and Research</option>
</select>
</div>
</div>
</div>
<hr>
<div align="center">
<button type="button" class="btn btn-primary" data-
dismiss="modal">Close</button>
<input class="btn btn-primary" type = "submit" name = "submit" value =
"register" />
</div>
</form>
<script>
$( "#add" ).click(function() {
var row = $("#wrapper-1").clone();
//row.remove("#add");
$('#wrapper').append(row);
});
</script>
<div id="wrapper" width="100%">
<div id="wrapper-1" style="float: left; width: 85%;">
<div id="first" style="float: left; width: 65%;">
<label for="skills">Skills</label>
<select id="one" class="step1">
<option value="">Please select an option</option>
<option>C</option>
<option>C++</option>
<option>Java</option>
<option>PHP</option>
</select>
</div>
<div class="general" style="float: left; width: 35%;">
<label for="skills">Level</label>
<select id="two" class="step2">
<option value="">option</option>
<option>Begineer</option>
<option>Expert</option>
<option>Advanced</option>
</select>
</div>
</div>
<div class="add-general" style="float: left; width: 15%;">
<button id="add">add</button>
</div>
</div>

Your jsfiddle is messed up, you should load external CSS and scripts using the "external" feature on the left. And obviously your local files will not be accessible, so use absolute paths. I took the time to set it up properly this time.
Your HTML also looks messy, but browsers still understand it.
As for your unexpected behaviour, I think this post applies to your situation: Form is submitted when I click on the button in form. How to avoid this?
In essence: you just need to specify a type attribute (with value different from "submit" obviously) so that your "Add" button stops acting as a submit button.
<button id="add" type="button">add</button>
You also have a problem with attaching event listener on your "Add" button: your code must be executed after your button exists in DOM.
2 simple methods:
Put your script tag after your button HTML.
Have your code executed after DOM is ready / loaded (e.g. use jQuery(document).ready(function() { /** your code **/}) to request jQuery to execute it once DOM is ready).
jQuery(document).ready(function() {
$( "#add" ).click(function() {
var row = $("#wrapper-1").clone();
// You should change the id to avoid multiple elements
// with same id in your DOM...
$('#wrapper').append(row);
});
});
Updated jsfiddle: http://jsfiddle.net/qc3tu1f1/4/

Ajax serialize() method is not reading all data fields of html form

I'm trying to send the form data of my web page using jquery get() method. But when I submit the form only few of the field data where sent to the server.
Form:
<form class="form-horizontal" id="addpost" method="GET" action="">
<div class="control-group">
<label class="control-label" for="form-field">Post Title</label>
<div class="controls">
<input type="text" id="form-field" placeholder="Post Title" name="Post-title" value="" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="form-field-11">Content Here</label>
<div class="controls">
<textarea name="post-content" value="" class="autosize-transition span12" id="form-field-11" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 67px;"></textarea>
</div>
</div><!-- Insert Image Code -->
<div class="control-group">
<div class="widget-main">
<div class="controls">
<div class="ace-file-input">
<input id="id-input-file-2" type="file">
<a class="remove" href="#"></a>
</div>
</div>
<div class="controls">
<div class="ace-file-input ace-file-multiple">
<input id="id-input-file-3" type="file" multiple="">
<a class="remove" href="#">
<i class="icon-remove"></i>
</a>
</div>
<label>
<input id="id-file-format" type="checkbox" name="file-format">
<span class="lbl"> Allow only images</span>
</label>
</div>
</div>
</div><!-- Insert Image Code -->
<div class="space-4"></div>
<div class="control-group">
<label class="control-label" for="form-field-tags">Tag input</label>
<div class="controls">
<input id="form-field-tags" type="hidden" placeholder="Enter tags ..." value="Tag Input Control" name="tags">
</div>
</div>
<div class="space-4"></div>
<div class="control-group">
<label class="control-label" for="form-field-select-3">Select Category</label>
<div class="controls">
<label for="form-field-select-3">Chosen</label>
<select class="chzn-select" id="form-field-select-3" data-placeholder="Choose a Category...">
<option value="">
</option><option value="Blog">Blog
</option><option value="News Letter">News Letter
</option></select>
</div>
</div>
<div class="control-group" style="float:left; margin-right:25px">
<div class="controls"><button type="submit" class="btn btn-info">
<i class="icon-ok bigger-110"></i>
<input type="submit" value="" id="posubmit" style="opacity:0"/>Submit</button>
<button type="reset" class="btn"><i class="icon-undo bigger-110"></i>Reset</button>
</div>
</div>
<div id="resp" style="float:left; margin-top:5px">
<img id="loading" style="visibility:hidden;" src="assets/img/ajax-load.gif" width="16" height="16" alt="loading" />
</div>
</form>
JavaSccript:
$('#addpost').submit(function(e){
if(use_ajax)
{
$('#loading').css('visibility','visible');
$.get('test.php',$(this).serialize(),
function(data){
if(parseInt(data)==-1)
$.validationEngine.buildPrompt("#resp","* Please ensure all fields are filled.","error");
else
{
$("#resp").show('slow').after('<p id="resp-mes" style=" color:#000000; text-decoration: bold;">Success....</p>');
}
$('#loading').css('visibility','hidden');
setTimeout( "jQuery('#resp').hide('slow');",3000 );
setTimeout( "jQuery('#resp-mes').hide('slow');",5000 );
});
}
e.preventDefault();
}
)};
In this only 3 field values where sent to server.
That is Post-title, post-content and tags
I don't know why this happening.
Any help would be appreciated.

you have two issues.
Ajax and serialize upload doesn't work with file upload. (Read this question and answer for async upload)
jquery form serialize needs a name attribute. your select box (form-field-select-3) doesn't have a name attribute.
following is a note in jquery serialize documentation page -
Note: Only "successful controls" are serialized to the string. No
submit button value is serialized since the form was not submitted
using a button. For a form element's value to be included in the
serialized string, the element must have a name attribute. Values from
checkboxes and radio buttons (inputs of type "radio" or "checkbox")
are included only if they are checked. Data from file select elements
is not serialized.

Its because you have missed "name" attribute in select element
<select class="chzn-select" id="form-field-select-3" name="form-field-select-3" data-placeholder="Choose a Category...">
I have checked in my local, and now this is working fine.
Please check and let me know if any issue.
Thanks

I see that attrbute name="" is required and some of the input elems are missing those. so you can try placing this attribute and see if this solves the issue:
<select class="chzn-select" name="your-elem-name">
//--------------------------^^^^^^^^^^^^^^^^^^^^^-----try placing the name attr

ok of this entire form, only four elements may get sent through if all four are populated/selected from a higher index than zero;
the ones with these names;
"tags"
"file-format"
"post-content"
"Post-title"
this is because those are the only tags with a name attribute defined.
please give all the elements you want to post through to the server a name attribute with the post index you want to use to access them with.