I try to validate in array by using 'id_s.*' => 'required', not sure why t didnt work
UPDATED I add my jquery append , in my controller I use loop which I want to require id_s
In my html
<select id="custom-select" class="form-control custom-select" name="id_s[]" >
<option disabled="true" selected="true" name="id_s[]" value="choose">choose</option>
#foreach($subject as $s)
<option value="{{$s->ID}}" name=id_s[]>{{$s->NAME}} / {{$s->CREDIT}} </option>
#endforeach
</select>
$(document).ready(function() {
$('#add-form').click(function() {
i++;
id_i++;
$('#add-me').append(
'<tr>'+
'<td>'+
'<select id="custom-select" name="id_s[]" class="form-control custom-select"><option disabled="true" selected="true" name="id_s[]" value="choose">choose</option>#foreach($subject as $s)<option value="{{$s->ID}}" name=id_s[]>{{$s->NAME}} / {{$s->CREDIT}}</option>#endforeach</select>'
+'</td>'
+'<td>'
+'<button id="'+i+'" type="button" class="btn btn-danger delegated-btn">Delete</button>'
+'</td>'
+'</tr>'
);
$('button.btn.btn-danger').click(function() {
var whichtr = $(this).closest("tr");
whichtr.remove();
});
});
});
For the select you will not need to do array in the name and you don't need to add name to the options as well :
<select id="custom-select" class="form-control custom-select" name="id_s" >
<option disabled="true" selected="true" value="choose">choose</option>
#foreach($subject as $s)
<option value="{{$s->ID}}" >{{$s->NAME}} / {{$s->CREDIT}}</option>
#endforeach
</select>
and the validation like this :
'id_s' => 'required|not_in:choose'
Related
I have a form that adds a new property listing into the properties table in the db. I keep getting errors that inputs are null and also Laravel isn't grabbing the value inputted into the select HTML tag. I am putting data into the form, but it keeps telling me the fields are null.
Add property form:
<h1 class="admin-header">Add New Listing</h1>
#if($errors->any())
<h4>{{$errors->first()}}</h4>
#endif
<form method="POST" action="{{ route('admin.store_properties') }}" id="add_property_form" enctype="multipart/form-data">
#csrf
<div>
<label for="prop_title">Property Title</label>
<input type="text" id="prop_title" />
</div>
<div>
<label for="prop_desciption">Property Description</label>
<textarea name="prop_desciption" id="prop_desciption"></textarea>
</div>
<div>
<label for="prop_img">Property Image</label>
<input type="file" name="prop_img" id="prop_img" required />
</div>
<div>
<label for="prop_beds">Number of Bedrooms</label>
<input type="number" name="prop_beds" id="prop_beds" steps="1" min="1" />
</div>
<div>
<label for="prop_baths">Number of Bathrooms</label>
<input type="number" name="prop_baths" id="prop_baths" />
</div>
<div>
<label for="prop_ft">Sqaure Feet</label>
<input type="number" name="prop_ft" id="prop_ft" />
</div>
<div>
<label for="props_basement">Finished Basement?</label>
<select name="props_basement" id="props_basement">
<option value="" selected disabled>Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div>
<label for="prop_tax">Property Tax</label>
<input type="number" name="prop_tax" id="prop_tax" />
</div>
<div>
<label for="props_heat">Heat Type</label>
<select name="props_heat" id="props_heat">
<option value="" selected disabled>Select an option</option>
<option value="gas">Gas</option>
<option value="oil">Oil</option>
<option value="electric">Electric</option>
</select>
</div>
<div>
<label for="props_waterheater">Finished Basement?</label>
<select name="props_waterheater" id="props_waterheater">
<option value="" selected disabled>Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div>
<label for="prop_year">Year Built</label>
<input type="number" name="prop_year" id="prop_year" />
</div>
<button type="submit">Add New Listing</button>
</form>
Route:
Route::group(['prefix' => 'admin'], function() {
Route::get('/', function() {
return view('admin.dashboard');
})->middleware('auth');
Route::get('/properties', [PropertiesController::class, 'index'])->middleware('auth');
Route::get('/properties/create', [PropertiesController::class, 'create'])->middleware('auth');
Route::post('/properties/store-post', [PropertiesController::class, 'store'])->name('admin.store_properties')->middleware('auth');
});
Controller store() method:
public function store(Request $request)
{
// Create a new Property and store it in the properties DB
$prop = new Property;
$path;
if ($request->hasFile('prop_img')) {
// Get filename with extension
$filenameWithExt = $request->file('prop_img')->getClientOriginalName();
// Get just filename
$filename = pathinfo($filenameWithExt, PATHINFO_FILENAME);
// Get just extension
$extension = $request->file('prop_img')->getClientOriginalExtension();
// Filename to store
$filenameToStore = $filename . '_' . time() . '.' . $extension;
// Upload Image
$path = $request->file('prop_img')->storeAs('public/property_images', $filenameToStore);
} else {
// Filename to store
$filenameToStore = 'noimage.jpg';
}
$prop->property_title = $request->input('prop_title');
$prop->property_description = $request->input('prop_desc');
$prop->property_image = $path;
$prop->bedrooms = $request->input('prop_beds');
$prop->bathrooms = $request->input('prop_baths');
$prop->square_feet = $request->input('prop_ft');
$prop->finished_basement = $request->input('prop_basement');
$prop->prop_tax = $request->input('prop_tax');
$prop->heat_type = $request->input('prop_heat');
$prop->water_heater = $request->input('prop_waterheater');
$prop->year_built = $request->input('prop_year');
$prop->save();
return view('admin.add_property');
}
I can see a typo in your code
In blade file you used tag name 'props_basement' but in controller you are using 'prop_basement'
Try this to fix:
<select name="prop_basement" id="props_basement">
<option value="" selected disabled>Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
I am trying to apply filters to my products
This is my database
I'm trying to filter by gender, if it is a kid or not, price range and size
My form:
<form method="GET" action="{{route('products.all')}}">
<div class="filters">
<select class="form-control search" name="gender">
<option value="" selected disabled hidden>Gender...</option>
<option value="M">Man</option>
<option value="W">Woman</option>
</select>
<label>Kids?</label>
<input class="form-control search" type="checkbox" name="kids" value="1">
<div class="filters-all">
Price...
<div class="search">
<input type="text" class="start d-none" name="price-start" />
<input type="text" class="end d-none" name="price-end" />
<input type="text" id="sampleSlider" />
</div>
</div>
<select class="form-control search" name="size">
<option value="" selected disabled hidden>Sizes...</option>
#foreach($sizes as $size)
<option value="{{$size->size}}">{{$size->size}}</option>
#endforeach
</select>
<input type="submit" class="btn btn-secondary"value="Filter"/>
</div>
</form>
My controller with query:
$gender = $request->get('gender');
$child = $request->get('kids');
$size = $request->get('size');
$price_start = $request->input('price-start');
$price_end = $request->input('price-end');
if(!empty($gender) && !empty($size)&& !empty($price_start) && !empty($price_end)){
Product::whereHas('stocks', function ($query) {
$query->where('size', '=', $size);
})
->whereHas('childs', function ($query){
$query->where('child', '=', $child);
})
->where('gender', '=', $gender)
->whereBetween('price', [$price_start, $price_end])
->inRandomOrder()->paginate(12);
}else{
$products = Product::inRandomOrder()->paginate(12);
}
When submitting the form data, it appears correctly in the get:
But when filtering, the link returns "that the variables are not initialized"
I've been thinking for a while but I have the solution. Maybe the query is wrong?
I have a sign-up form which asks users to select a country from a drop down menu.
I have a bit of script that, depending on the country selected by the user, displays a particular Region/State field.
$("#Country").change(function() {
if ( $(this).val() == "GB") {
$("#RegionsUS").hide();
$("#RegionsOTHER").hide();
$("#RegionsUK").show();
}
else if ( $(this).val() == "US") {
$("#RegionsUS").show();
$("#RegionsOTHER").hide();
$("#RegionsUK").hide();
}
else {
$("#RegionsOTHER").show();
$("#RegionsUS").hide();
$("#RegionsUK").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<select name="Country" id="Country" class="form-control" required>
<option selected>Please select</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="FR">France</option>
</select>
<input type="text" id="RegionsOTHER" name="Region" class="form-control" placeholder="Region/State" maxlength="50">
<select id="RegionsUS" name="Region" class="form-control" style="display:none;">
<option value="Alabama">Alabama</option>
</select>
<select id="RegionsUK" name="Region" class="form-control" style="display:none;">
<option value="England">England</option>
<option value="Scotland">Scotand</option>
</select>
</form>
Problem is, when the form is submitted, all three region fields are submitted despite two of them always being hidden.
How do I prevent the hidden fields from being submitted with the form?
Thank you.
NJ
Sorry, despite searching pretty much all day yesterday and not seeing the following, my question is obviously very similar to this question:
Preventing an HTML form field from being submitted
So I've edited my function and HTML as follows:
$("#Country").change(function() {
if ( $(this).val() == 425) {
$("#RegionsUS").hide();
document.getElementById('RegionsUS').disabled = true;
$("#RegionsOTHER").hide();
document.getElementById('RegionsOTHER').disabled = true;
$("#RegionsUK").show();
document.getElementById('RegionsUK').disabled = false;
}
else if ( $(this).val() == 426) {
$("#RegionsUS").show();
document.getElementById('RegionsUS').disabled = false;
$("#RegionsOTHER").hide();
document.getElementById('RegionsOTHER').disabled = true;
$("#RegionsUK").hide();
document.getElementById('RegionsUK').disabled = true;
}
else {
$("#RegionsOTHER").show();
document.getElementById('RegionsOTHER').disabled = false;
$("#RegionsUS").hide();
document.getElementById('RegionsUS').disabled = true;
$("#RegionsUK").hide();
document.getElementById('RegionsUK').disabled = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<select name="Country" id="Country" class="form-control" required>
<option selected>Please select</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="FR">France</option>
</select>
<input type="text" id="RegionsOTHER" name="Region" class="form-control" placeholder="Region/State" maxlength="50">
<select id="RegionsUS" name="Region" class="form-control" style="display:none;" disabled="disabled">
<option value="Alabama">Alabama</option>
</select>
<select id="RegionsUK" name="Region" class="form-control" style="display:none;" disabled="disabled">
<option value="England">England</option>
<option value="Scotland">Scotand</option>
</select>
</form>
I want to populate select tag with data from api get request. Here is my html code
<div id="app">
<label for="country" class="control-label">Country</label>
<select v-model="selectedCountry" #change="onChangeCountry" name="country" id="country" class="form-control" tabindex="11">
<option selected disabled value="">Please select one</option>
#foreach($countries as $country)
<option value="{{ $country->id }}">{{ $country->name }}</option>
#endforeach
</select>
<label for="city" class="control-label">City</label>
<select v-model="cities" name="city" id="city" class="form-control" tabindex="12">
<option v-bind:value="city.id">#{{ city.name }}</option>
</select>
</div>
And now my JavaScript code:
<script type="text/javascript">
new Vue({
el: '#app',
data: {
selectedCountry: '',
cities: []
},
methods: {
onChangeCountry: function (event) {
axios.get('http://localhost:8000/api/cities/country/' + this.selectedCountry)
.then(function (
this.cities = response.data
}).catch(function(error) {
console.log('an error occured ' + error);
});
}
}
});
</script>
I'm pretty sure that the data is received because i did a lot of console.log but I don't know how to append the received data to my second select tag nor how to proceed.
Try this in the select
<select v-model="selectedCity" name="city" id="city" class="form-control" tabindex="12">
<option v-for="(city,cityIndex) in cities" :key="city.id" :value="city.id">{{ city.name }}</option>
</select>
Add 'selectedCity' to the data object and then access its value through this.selectedCity
This is in the vue docs
https://v2.vuejs.org/v2/guide/list.html
https://v2.vuejs.org/v2/guide/forms.html#Select
I finally got it working
i just needed to create a city variable in data function
and in select i don't need to bind it to array of cities[], the city variable is fine v-model="city"
<select v-model="country" class="form-control">
<option disabled value="" selected="selected">Please select one</option>
<option v-for="country in countries" :key="country.id" v-bind:value="country.id">
{{country.name}}
</option>
</select>
<script>
export default {
data() {
return {
countries: {},
country:''
}
</script>
You need to use v-for to loop the cities and create the option elements:
<select name="city" id="city" class="form-control" tabindex="12">
<option v-for="(city, index) in cities"
:key="index"
:value="city.id">#{{ city.name }}
</option>
</select>
Also, change your data property into a function so it's reactive:
data () {
return {
selectedCountry: '',
cities: []
}
}
<select name="A">
<option value="1">Volvo</option>
<option value="2">Saab</option>
</select>
<select name="B">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
<input type="Submit" >
After I submit, I want to show result from A and B. For example:
if($_POST['A']==1 && $_POST['B']==2){
echo 'true';
}else{
echo '0';
}
Is it possible to do this in joomla?
you have to enclosed this input fields into form tag. For example
<form method="post">
<select name="A">
<option value="1">Volvo</option>
<option value="2">Saab</option>
</select>
<select name="B">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
<input type="Submit" >
</form>
Hope it will help