I've got a form that submits correctly, but it has a value on a question appended to a name, now to edit i'm almost done in the edit form, but the blade php with the foreach argument fetches all options from the select, i want to show and be able to edit the previously selected option. how do i do this on blade php.
resuming i want to submit it first then in dashboard of the form results have a button of edit and be able to edit the previously submited forms.
here's the code:
<select name="quilometragem" id="mySelect" class="chosen-select" onchange="myFunction()">
#foreach($viaturas as $item)
<option value="{{ $item->matricula }}:{{ $item->quilometragem }}">
{{ $item->matricula }}
</option>
#endforeach
</select>
<p id="demo"></p>
<div class="form-group mb-3">
<label for="">Chegada Kms</label>
<input type="number" name="kmfim" class="form-control">
</div>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "Matricula:QuilómetrosCorrentes: " + x;
}
</script>
Related
Context
I have a form built fully using a livewire component because I need to bind several inputs to do real-time calculations. I expect the dropdown items not to change, but the text input fields need to be dynamic.
Problem
when I enter a value into a binded <input> field, the previously selected items in the <select> dropdown gets reset.
Gif of the issue:
()
I tried using the "old('VALUE')" function, but it appears to have no effect.
This is the code of "project" selector input (The stage selector code is identical):
<select id="range_project_id" name="project_id" value="{{ old('project_id') }}"
class="px-2 form-select" disabled form="create-land-registry-form">
<option selected>Choose a project..</option>
<option disabled>{ID}:{Name}</option>
#foreach (App\Models\Project::all() as $project)
<option value="{{ $project->id }}">
{{ $project->id . ': ' . $project->name }}
</option>
#endforeach
</select>
This is the code of one of the range selectors:
<div class="row">
<input wire:model.lazy="landRangeStart" type="text" name="land_id_start"
id="land_range_start" disabled form="create-land-registry-form"
class="col-3 form-control-lg border mx-2" placeholder="Starting from"
value="{{ old('land_id_start') }}" />
</div>
I tried using the "old('VALUE')" function, but it appears to have no effect.
In the parent div, add wire:ignore.self.
For example:
<div wire:ignore.self><-- Parent div -->
//Your other dropdown code in here
</div>
This directive tells Livewire to ignore changes to a subset of HTML within your component.
As you are using the raw HTML select and not a third party library, like Select2, my question is, why not bind the select value to the livewire component like so?
This would solve your problem and the component would be aware of the value from the get go.
I am working on jquery select2 dropdown. I have to display the multiple selected option in select area. For this purpose i loop through each of select2. If condition is met i will assign 'selected' attribute property to option so that it may appears in the select area.
But somehow the select2 fails to display the selected ''.
HTML CODE:
<div class="form-group col-md-12">
<label for="inputsskill">Skill<span class="required-field">*</span></label>
<fieldset>
<select class="custom-select w-100" name="skill_name[]" id="skill_name" multiple="multiple" style="width: 100%;">
#if(!$skills->isEmpty())
#foreach($skills as $skill)
<option value="{{$skill->id}}">{{$skill->name}}</option>
#endforeach
#endif
</select>
</fieldset>
</div>
JQUERY CODE:
// parse skills
var parseData = JSON.parse(skill);
// parseData is an array which contain 1,2,3 values like ['1','2','3']
$("#skill_name > option").each(function() {
// if select2 and array values matches assign selected attribute to that option
if( $.inArray($(this).val(), parseData) !== -1 ) {
$(this).attr('selected', 'selected');
}
});
Select2 Jquery:
$( "#skill_name" ).select2({
});
I dont know where i am going wrong, i would appreciate if someone guide me in this.
Thanks,
you can achieve this functionality with PHP easily.
E.g : fetch skills from the database which you want to preselect and create an array of skills. Then match this in your loop.Like
<div class="form-group col-md-12">
<label for="inputsskill">Skill<span class="required-field">*</span></label>
<fieldset>
<select class="custom-select w-100" name="skill_name[]" id="skill_name" multiple="multiple" style="width: 100%;">
#if(!$skills->isEmpty())
#foreach($skills as $skill)
<option value="{{$skill->id}}" <?php
if(in_array($skill->name, $selectedskillsArray)){
echo $selected = 'selected';
}
?> >{{$skill->name}}</option>
#endforeach
#endif
</select>
</fieldset>
</div>
Try this one.
Jquery solution
$( "#skill_name" ).select2({
});
$('#skill_name').val(["1","2","3"]).trigger('change');
I have stored multiselect values in database as string
Now while trying to edit the values in need to fetch this highlighted string as array and send it to edit view , so that i can populate multi select with this selected values.
My code in view for multi select
<div class="form-group">
<label class="control-label col-md-3">News For
<span class="required" aria-required="true"> * </span>
</label>
<div class="col-md-4">
{!! Form::select('news_todisplay[]',['users'=>'Users','staff'=>'Staff','cinemahall'=>'Cinemahall'],$todisplayarray,array('class'=>'form-control','multiple'=>'multiple')) !!}
</select>
</div>
</div>
Where $todisplayarray is the array fetched from database i.e they are users,staff, cinemahall
My controller code
public function edit($id)
{
$newsdetails=General_news::findOrFail($id);
$todisplayarray=explode(',',$newsdetails->news_todisplay);
return view('admin.editnews',compact('newsdetails','todisplayarray'));
}
Page view-source shows this
<select class="form-control" multiple="multiple" name="news_todisplay[]"><option value="users">Users</option><option value="staff">Staff</option><option value="cinemahall" selected="selected">Cinemahall</option></select>
This only shows last value as selected, where as it should display 3 of the values as selected.
Kindly let me know where I am going wrong.
Find the below answer
<?php
//get the old values from form
$old = old('category');
//get data from database table field
$cate= explode(',',$data->category_ids);
//stay the values after form submission
if($old){ $cate=$old; }
?>
<select id="categories" name="category[]" multiple>
#foreach ($categories as $val)
<option value="{{ $val->id }}" <?php echo in_array($val->id,$cate)?"selected" :"" ;?> >{{ ucfirst($val->category_name) }}</option>
#endforeach
</select>
I've used loop the categories data with id's and match the data stored in the table
I have an HREF with various data-attributes (about 8) that come from a PHP query and loaded into a table. When you click the button, it takes the data-attributes via jQuery and sends them to a modal window, where I can use them in a form.
I can open the window and place the attributes into an INPUT field with no problem.
What I would like to do is place the attribute in the first OPTION in a SELECT dropdown.
Here is the button with the attributes:
<tr><td><a href='' class='modAccount'
data-modcode=".$row[partner_code]."
data-modname=\"".$row[partner_name]."\"
data-boiler=\"".$row[boilerplate]."\"
data-surcharges=\"".$row[no_new_surcharges]."\"
data-ccalog=\"".$row[cca_logistics]."\"
data-toggle='modal'>Click</a></td></tr>
I have quite a few data-attributes. I had to eliminate a few for this question.
Here is the jQuery used to retrieve the data-attributes and send them to a modal window, called modifyModal.
Here is the jQuery:
$(function()
{
$('.modAccount').click(function(e)
{
e.preventDefault();
$partnerCode = $(this).attr('data-modcode');
$partnerName = $(this).attr('data-modname');
$boiler = $(this).attr('data-boiler');
$surcharges = $(this).attr('data-surcharges');
$ccalog = $(this).attr('data-ccalog');
// the 5 below currently populate the INPUT fields for the ID's listed
$('#modpartnerCode').val($partnerCode);
$('#modpartnerName').val($partnerName);
$('#modplatform').val($platform); // <- should go to dropdown
$('#modboiler').val($boiler); // <- should go to dropdown
$('#modsurcharges').val($surcharges); // <- should go to dropdown
});
});
$(document).on("click", ".modAccount", function ()
{
$('#modifyModal').modal('show');
});
As you've probably read in the note above, I can send the attributes to the INPUT fields with their respective IDs.
I need to be able to populate the first OPTION of a dropdown SELECT field.
I don't think I need to show the MODAL window code. As stated, I can populate the INPUT fields using the ID's I listed.
How can I get the IDs to populate the dropdown SELECT first OPTION value?
Here is the code for the modal:
<div class="modal fade" id="modifyModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
</div>
<div class="modal-body">
<form role="form" action="api/modifyAcct.php" method="get" id="modAcctForm" name="modAcctForm">
<input readonly type="text" class="form-control" id="modpartnerName" name="modpartnerName" />
<input readonly type="text" class="form-control" id="modpartnerCode" name="modpartnerCode" />
<select class="form-control" id="modboiler" name="modboiler" />
<option value=""></option> // <- #modboiler goes here
<option value="Y">Yes</option>
<option value="N">No<option>
</select>
<select class="form-control" id="modsurcharges" name="modsurcharges" />
<option value=""></option> // <- #modsurcharges goes here
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
<select class="form-control" id="modplatform" name="modplatform" />
<option value=""></option> // <- #modplatform goes here
<option value="Y"></option>
<option value="N"></option>
</select>
</div>
</div>
</div>
</div>
Use jquery to select the first option and set the value.
$('#modplatform option:first').val($platform);
$('#modboiler option:first').val($boiler);
$('#modsurcharges option:first').val($surcharges);
Im trying to get some values of my dropdown in php. Its in div, so how can I do that?
<div class="ui dropdown selection" tabindex="0" style="right: 120px;">
<div class="default text" name="dif" id="dif">Difficulty</div>
<i class="dropdown icon"></i>
<div class="menu" id="difficulty" name="difficulty">
<div class="item" value='0' data-value="0">Easy</div>
<div class="item" value='1' data-value="1">Normal</div>
<div class="item" value='2' data-value="2">Hardcore</div>
</div>
</div>
For example, if user select "Easy", I will get with php the value 0.
I tried:
$difficulty = ($_POST['difficulty']) ? $_POST['difficulty'] : '0';
You can access them in jQuery or Javascript:
http://robertnyman.com/2010/04/29/using-html5-custom-data-attributes-to-store-data-on-html-elements/
You could store the value in a hidden form and field and use .submit()
http://api.jquery.com/submit/
And then check for your post value. Divs do not store values, they are containers so adding 'value=0' will not work. But you can access attributes using JS or jQuery.
Edit: IGNORE BELOW I just saw your edit.
If you're using PHP, you can POST the data to another page.
<form action="process.php" method='post'>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit" />
</form>
Then on the process.php page you can access the value with the superglobal: $_POST['cars']
You can't get them from a div with just PHP. I'm guessing that there is some Javascript that is updating a hidden input somewhere on the page when the user selects an option from this stylized dropdown list. You'll need to find that hidden input, and that's where your data is coming from when the form is submitted.