We Keep Coding

Dropdown list resets after selection is made in Laravel

I have a dropdown list in my view where the user can select a staff member and then filter by the selected staff then they will be shown the records for that selected staff member only. I noticed that upon hitting the search button, the records for the selected staff member shows but the dropdown resets to the first staff member. Is there any way to show the selected staff member even after the page refreshes?
My View:
<form action="{{route('exportVehiclesToExcel')}}" method="GET" >
<div style="display: flex">
<div>
<label>Pick a staff member</label>
<select name="smsstaff_key" id="smsstaff_key" required>
#foreach ($staff as $staffMember)
<option value="{{$staffMember->smsstaff_key}}" {{request()->input('smsstaff_key') === $staffMember->smsstaff_key ? 'selected="selected"' : ''}}>{{$staffMember->name}}</option>
#endforeach
</select>
<div style="margin-left: 3px;">
<button class="btn btn-primary" formaction="searching">Filter by selected staff member</button>
</div>
</div>
<div style="margin-left: 50px;">
<label>From:</label>
<input style="width: 14em" type="date" class="form-control" name="startDate" value="{{ $startDate }}" required>
</div>
<div style="margin-left: 20px;">
<label>To:</label>
<input style="width: 14em" type="date" class="form-control" name="endDate" value="{{ $endDate }}" required>
</div>
<div style="margin-left: 20px;">
<button class="btn btn-success" formaction="tech/export/" type="submit">Export filtered</button>
</div>
</form>
<div style="margin-left: 10px;">
All to Excel
</div>
I also tried to put this code in my view:
<script type="text/javascript">
document.getElementById('smsstaff_key').value = "<?php echo $_GET['smsstaff_key'];?>";
</script>
however, it returns an undefined array key "smsstaff_key" error.

This is what Laravel uses to handle sent values after the request:
https://laravel.com/docs/8.x/requests#old-input

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

hidden input not submited

Hi i have modal popup have hidden input with id value from database.
<input id="no_id" name="no_id" type="hidden" value="<? echo $no_id;?>">
I have javascript to call the hidden value below
$(document).ready(function(){
$(".btn").click(function(){
$("#no_id").val($(this).data('id'));
});
the problem is when the form submited, the hidden value not submited.
Any idea to solve this problems
thanks
.btn to call the modal is below, with data-id as value to hidden input
<a target="_blank" data-id="<? echo $no_id;?>" data-toggle="modal" href="#update_bayar" class="btn mini red"><i class="icon-exclamation-sign"></i></a>
Modal form is here
<form id="myForm" action="action.php" method="get" enctype="multipart/form-data">
<div class="modal fade" id="update_bayar" tabindex="-1" role="basic" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Update Status Bayar</h4>
</div>
<div class="modal-body">
<div class="span12"><b>Pembayaran Langsung Ke Kas Negara</b>
<label class="control-label">Nomor NTPN</label>
<input name="no_ntpn" value="test value" type="text" placeholder="" class="m-wrap span12">
<label class="control-label">Tanggal NTPN</label>
<div class="controls">
<input name="tgl_ntpn" type="text" placeholder="" class="m-wrap span12 date-picker" value="test value">
</div><br>
<b>Pembayaran Ke Rekening Bendahara</b>
<label class="control-label">Nomor Rekening</label>
<div class="controls">
<input name="tanggal_bayar" value="test value" type="text" placeholder="" class="m-wrap span12">
</div>
<label class="control-label">Lampirkan Bukti Transfer/Rekening Koran</label>
<input type="file" name="file" />
</div>
<div id="output"></div>
<div id="progressbox"><div id="progressbar"></div ><div id="statustxt">Loading...</div ></div>
</div>
<div class="modal-footer">
<input id="no_id" name="no_id" type="hidden" value="<? echo $no_id;?>">
<button id="submit" name="submit_status_bayar" type="submit" class="btn green"><i class="icon-save"></i> Simpan</button>
</div>
</div>
</div>
</div>
</form>
got the answer after remove .btn submit class

I can not understand one thing, you have already given value to that hidden field using PHP code, and then on btn click, you are picking btn's data-id value and assigning it to the hidden field.
I think if the .btn is not having any value with its data-id attribute, then it will set hidden fields with blank.
That is the reason I can see, you are not getting its value in your PHP code.

jQuery and Ajax not working $.on

I want when I click on Clear button, all fields in the form to be cleared.
The ajax request is only replacing the form from the tag <form> to </form>.
When it is clicked on Clear button, the console output is working.
I have the following form:
<div class="col-lg-5 formWrapper">
<form data-th-fragment="layoutForm" id="layoutForm" class="form-horizontal" data-th-object="${layout}" data-th-action="#{/layouts/add}" method="POST" role="form">
<div class="row">
<input id="objectId" data-th-field="*{id}" type="hidden">
<input data-th-if="*{filePath} !=null" data-th-field="*{filePath}" type="text" hidden="hidden">
<label for="layoutName" >Layout name</label>
<input data-th-field="*{name}" id="layoutName" class="form-control" type="text">
</div>
<div class="row">
<div class="col-lg-4">
<label for="status">Status</label>
<select id="status" data-th-field="*{status}"class="form-control">
<option value="1">Active</option>
<option value="0">Blocked</option>
</select>
</div>
<div class="col-lg-6">
<label for="exhibitorName">Exhibitor</label>
<select data-th-field="*{exhibitor}" name="exhibitorName" id="exhibitorName" class="form-control">
<option data-th-each="exhibitor : ${exhibitorsList}" data-th-value="${exhibitor.id}" data-th-text="${exhibitor.exhibitorName}"></option>
</select>
</div>
</div>
<div class="row">
<div class=" col-lg-3">
<input id="clearForm" type="reset" value="Clear" class="form-control btn-lg btn btn-default">
</div>
<div class=" col-lg-3 col-lg-offset-4">
<input id="submitButton" type="submit" value="Add" class="form-control btn-lg btn btn-success">
</div>
</div>
</form>
</div>
The form looks something like this:
The jQuery is as follow:
$(document).ready(function() {
$('.formWrapper').on('click','#clearForm', function (event) {
$(this).closest('form').find("input[type=text]").val("");
console.log("ASD");
});
});
The snipped is how I replace the form:
$("body").on('click','#editLayout', function(event){
var ajax = $.ajax({
url : "/layouts/edit/" + $(this).data("id"),
dataType : "html",
success: function (data) {
$("#layoutForm").replaceWith(data);
$('#submitButton').val('Edit').addClass('btn-warning').removeClass('btn-success');
}
});
});

Try this,
$('#form_id').trigger("reset");
or
$('#form_id')[0].reset();
A reset button doesn't need any script at all (or name or id):
<input type="reset">
and you're done. But if you really must use a script, note that every form control has a form property that references the form it's in, so you could do:
<input type="button" onclick="this.form.reset();">
But a reset button is a far better choice.

Try to use $('#clearForm').reset(); or $('#clearForm')[0].reset();

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