Sending the form data using json formate - json

I am using the JSON format to send the form data using but there is found error that "The POST method is not supported for this route. Supported methods: GET, HEAD". Actually I am using API of getting hotels.For this send the request through JSON format but I got error.
This is my API url in which I am sending the request- https://cdn.grnconnect.com/static-assets/documentation/GRN_v3-1.3/hotels/search_and_availability_request/#search-and-availability-request
<form class="mt40 mb50" action="#" method="post" id="myForm">
<input type="text" name="searchCity" id="searchCity">
<input type="text" name="searchCityCode" id="searchCityCode">
<input type="text" name="nationality" id="nationality">
<input type="text" name="checkin" id="checkin">
<input type="text" name="checkout" id="checkout">
<select class="form-control" name="adult" id="adult" style="height:40px;">
<option value="">Adult Member</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<button type="submit" class="awe-btn awe-btn-13 pr30 pl30 f16 bold font-hind"
id="find">Find
</button>
</form>
Script is-
$(document).ready(function(){
$("#find").click(function(){
var searchCity = $("#searchCity").val();
var adults = $("#adults").val();
var checkins = $("#checkin").val();
var checkouts = $("#checkout").val();
var nationality = $('#nationality').val();
// Checking for blank fields.
if (searchCity =='' || adults =='' || checkins =='' || checkouts =='' || nationality =='') {
alert("Please fill all fields...!!!!!!");
}
else {
$.ajax({
url:'https://cdn.grnconnect.com/api/v3/hotels',
type:'GET',
Data: {destination_code: search City, check-in: check-ins, check out: checkouts,client_nationality: nationality, cutoff_time: 5000, more_results: true,
hotel_info: false, rates: "comprehensive",rooms:adults},
success:function(data){
if(data['error'] == '0'){
window.location.href = 'https://cdn.grnconnect.com/api/v3/hotels';
}
},
error:function(e){
alert("error in request");
},
});
}
});
});

The route method is not specified in the route file for this route. Example:
Route::post('/hotels', 'HotelController#post')->name('hotel');

The URL is incorrect, the URL should be:
https://cdn.grnconnect.com/api/v3/hotels/availability
Instead of https://cdn.grnconnect.com/api/v3/hotels/

Related

How to submit form with blank or empty values and non blank values in Laravel

I have modal pop up window with form, on submission of form I want to insert data whatever user has selected or entered. Currently I am not able to submit form unless I fill all the field and select any values from dropdown.
Here is my Html code:
<div id="feedbackModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form method="post" id="feedback_form" autocomplete="off">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
{{csrf_field()}}
<span id="form_output"></span>
<div class="form-group">
<label>Adjust Risk Level:</label>
<select name="FeedRisklevel" id="FeedRisklevel" class="form-control">
<option value="">Select Risk Level</option>
<option value="High Risk">High Risk</option>
<option value="Low Risk">Low Risk</option>
</select>
</div>
<div class="form-group">
<label>Influencers:</label><br/>
<select name="Feedinfluencers[]" id="Feedinfluencers" multiple class="form-control">
<option value="Long Work Hours">Long Work Hours</option>
<option value="No Vacation/Leaves in Recent past">No Vacation/Leaves in Recent past</option>
<option value="Salary not per market standards">Salary not per market standards</option>
<option value="Lower Salary than Peers">Lower Salary than Peers</option>
<option value="No Bonus Received in last one year
">No Bonus Received in last one year</option>
<option value="No Salary Revision in last one year">No Salary Revision in last one year</option>
<option value="Expecting Relocation">Expecting Relocation</option>
<option value="Expecting Progression">Expecting Progression</option>
<option value="Looking for Role/Job/Unit change">Looking for Role/Job/Unit change</option>
<option value="Upskilling/Learning Programs Missing">Upskilling/Learning Programs Missing</option>
<option value="High Work Pressure/Stress">High Work Pressure/Stress</option>
<option value="Non-Alignment with Supervisors/Managers">Non-Alignment with Supervisors/Managers</option>
<option value="Lower Bonus received than expected in last one year">Lower Bonus received than expected in last one year</option>
<option value="Lower Salary Revision than expected in last one year">Lower Salary Revision than expected in last one year</option>
<option value="No Work Life Balance">No Work Life Balance</option>
<option value="Lack of Job Security">Lack of Job Security</option>
<option value="Lack of Recognition">Lack of Recognition
</option>
<option value="Lack of Career Opportunities">Lack of Career Opportunities</option>
<option value="Lack of Employee Care Activities">Lack of Employee Care Activities</option>
</select>
</div>
<div class="form-group">
<label>Employee Discussion Feedback:</label>
<input type="text" name="feedback" id="feedback" class="form-control" placeholder="Feedback" value="" />
</div>
<div class="form-group">
<label>Action Taken:</label>
<input type="radio" class="check" name="check" value="Yes">Yes
<input type="radio" class="check" name="check" value="No" checked>No
<select name="action[]" id="action" multiple class="action form-control">
<option value="Offcycle Salary Revision">Offcycle Salary Revision</option>
<option value="Special Bonus">Special Bonus</option>
<option value="Retention Bonus">Retention Bonus</option>
<option value="Internal Career Opportunity">Internal Career Opportunity</option>
<option value="Monthly/Quarterly Recognition">Monthly/Quarterly Recognition</option>
<option value="Inline Progression">Inline Progression</option>
<option value="Stay Interview">Stay Interview</option>
<option value="One on one discussion/Counselling">One on one discussion/Counselling</option>
<option value="Personal Development Plan">Personal Development Plan</option>
<option value="Relocation Opportunity">Relocation Opportunity</option>
<option value="Flexibility in the Schedule">Flexibility in the Schedule</option>
<option value="Upskilling/Learning Programs Scheduled">Upskilling/Learning Programs Scheduled</option>
<option value="Workload Balanced">Workload Balanced</option>
</select>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="feedback_id" id="feedback_id" value="" />
<input type="hidden" name="FeedRisklevel_id" id="FeedRisklevel_id" value="" />
<input type="hidden" name="Feedinfluencers_id" id="Feedinfluencers_id" value="" />
<input type="hidden" name="Action_id" id="Action_id" value="" />
<input type="hidden" name="button_action" id="button_action" value="insert" />
<input type="submit" name="submit" id="Feedback" value="Submit" class="btn" style="background-color: #CA0088;color: #fff" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
This is my script:
$('#feedback_form').on('submit', function(event){
event.preventDefault();
var form_data = $(this).serialize();
$.ajax({
url:"{{ route('Predictions.store') }}",
method:"POST",
data:form_data,
dataType:"json",
success:function(data)
{
if(data.error.length > 0)
{
var error_html = '';
for(var count = 0; count < data.error.length; count++)
{
error_html += "<div class='alert alert-danger'>"+data.error[count]+"</div>";
}
$('#form_output').html(error_html);
}
else
{
$('#form_output').html(data.success);
$('#feedback_form')[0].reset();
$('#feedback').val('');
$('#FeedRisklevel').val('');
$('#Feedinfluencers').val('');
$('#action').val('');
$('.modal-title').text('Submit Feedback');
$('#button_action').val('insert');
$('#members_data').DataTable().ajax.reload();
}
}
})
});
This is my Controller:
public function store(Request $request)
{
// $validation = Validator::make($request->all(), [
// 'feedback' => 'required',
// 'FeedRisklevel' => 'required',
// 'Feedinfluencers' => 'required',
// 'action' => 'required'
// ]);
$error_array = array();
$success_output = '';
// if ($validation->fails())
// {
// foreach ($validation->messages()->getMessages() as $field_name => $messages)
// {
// $error_array[] = $messages;
// }
// }
// else
// {
if($request->get('button_action') == 'insert')
{
$data = new Prediction([
'Feedback' => $request->get('feedback'),
'Feedinfluencers' => $request->get('Feedinfluencers'),
'FeedRisklevel' => $request->get('FeedRisklevel'),
'Action' => $request->get('action')
]);
$data->save();
$success_output = "<div class='alert alert-success'>Data Inserted</div>";
}
if($request->get('button_action') == 'update')
{
$data = Prediction::find($request->get('feedback_id'));
$data->Feedback = $request->get('feedback');
$data->save();
$data1 = Prediction::find($request->get('FeedRisklevel_id'));
$data1->FeedRisklevel = $request->get('FeedRisklevel');
$data1->save();
$data2 = Prediction::find($request->get('Feedinfluencers_id'));
$data2->Feedinfluencers = $request->get('Feedinfluencers');
$data2->save();
$data3 = Prediction::find($request->get('Action_id'));
$data3->Action = $request->get('action');
$data3->save();
$success_output = '<div class="alert alert-success">Thanks for your Feedback!</div>';
}
$output = array(
'error' => $error_array,
'success' => $success_output
);
echo json_encode($output);
}
I am able to store data but have to select all the values what I need is it should submit the data whaterver user have selected if it is blank it should insert blank data in DB. Can someone help me out how I can do that?
Step 1: Firstly make all fields as nullable in database table.
Step 2: After that modify your select tag as:
<select name="Feedinfluencers[]" id="Feedinfluencers" multiple class="form-control">
> <option value="">Select</option>
<option value="Long Work Hours">Long Work Hours</option>
<option value="No Vacation/Leaves in Recent past">No Vacation/Leaves in Recent past</option>
.
.
</select>
Step 3: change other select as per your code:
<select name="action[]" id="action" multiple class="action form-control">
> <option value="">Select</option>
<option value="Offcycle Salary Revision">Offcycle Salary Revision</option>
<option value="Special Bonus">Special Bonus</option>
After this you can add or upadte nullable fields
Apart from that if you want to add or update data direct you can above code:
Step 1:
In App\Model make specific changes as:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use Auth;
class Prediction extends Model
{
protected $table = 'prediction';
protected $primaryKey = 'id';
protected $guarded = ['id'];
}
Step 2: After this you can directly use in controller as:
public function store(Request $request)
{
if($request->get('button_action') == 'insert')
{
$param = $request->all();
$param['button_action'] = 'insert'; // if you want to overload you field with new data
$prediction= Prediction::create($param);
}
if($request->get('button_action') == 'update')
{
$param = $request->all();
$param['button_action'] = 'update'; // if you want to overload you field with new data
$prediction= Prediction::where('id',$id)->update($param);
}
}
Above is the snippet example for your code you can use it as per you requirments.

How to execute Jquery code in vue.js. I wan to run JQuery in vue.js

Here I am trying to run jQuery code in vue.js. Without vue.js my jQuery code is running fine but when I am adding vue.js cdn The is not working. Here I am trying while user enters a value in form input fields if suddenly session logouts or user navigate to a different page the form field value should not clear. That I have written in jQuery but while i am using that code in vue.js method I am unable to get the output. So how to run jQuery code in vue.js please help me.
<div class="">
First name:<br>
<input type="text" id="xgh" name="firstname" class="auto-save">
<br><br>
Description:<br>
<textarea name="name" id="uzt" rows="8" cols="80" class="auto-save"></textarea>
<br><br>
Preferred car manufacturer :<br>
<select id="dfj" class="auto-save">
<option value="none" selected>--</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
Gender :<br>
<input id="gho" class="auto-save" type="radio" name="gender" value="female"> Female<br>
<input id="jdw" class="auto-save" type="radio" name="gender" value="other"> Male
<br><br>
</div>
vue.js
new Vue({
el: '#q-vikreya',
data() {
return {
step:1,
firstname:'',
Description:'',
Manufacture:'',
gender:'',
methods: {
submitForm: function(){
axios({
method : "POST",
url: "{% url 'PostAd' %}", //django path name
headers: {'X-CSRFTOKEN': '{{ csrf_token }}', 'Content-Type': 'application/json'},
data : {"category":this.category, "title":this.title,
"address":this.address,
"city": this.city,
"state": this.state,
"zip": this.zip,
"price": this.price,
"description": this.description,
"radio_price": this.radio_price,
"Job_title": this.model,
},//data
}).then(response => {
console.log("response");
console.log(response.data);
this.success_msg = response.data['msg'];
window.location.replace('{% url "classifieds" %}') // Replace home by the name of your home view
}).catch(err => {
this.err_msg = err.response.data['err'];
console.log("response1");
console.log(err.response.data);
});
},
},
})
Jquery
<script>
$('.auto-save').savy('load',function(){
console.log("All data from savy are loaded");
});
</script>

Make "name" not appear on url using a <select>

I'm writing a simple form, but I've encountered a problem. The form must generate an url like this
https://website.com/properties/hotelvinadelmar?locale=es&check_in_date=22-03-2019&check_out_date=25-03-2019&number_adults=4&number_children=9
The part after /properties/ (in this case, "hotelvinadelmar") is a code for an especific hotel, while the rest is the information the customer provide to check if there's availability.
I wrote this form:
Sucursal: <br>
<select name="test" id="id" required>
<option value="hotelvinadelmar?locale=es">Viña del Mar</option>
<option value="hotelsantiago1?locale=es">Nueva Providencia</option>
<option value="hotelsantiago2?locale=es">Providencia</option></select>
<br><br>
</select>
this almost work, but generates an url like this (...)/properties/?test=hotelvinadelmar?locale=es&number_adults=1(...)
Which is creating an url structured like this
[form action (the url I entered)][Option Name][selected Option Value]
But the thing must be like this
[form action (the url I entered)][selected Option Value]
How can this be achieved? Thanks in advance!
this is the correct behavior because the submitted form data test=hotelvinadelmar will be added after the URL
(...)/properties/, in order the achieve the desired result you can try to add action attribute to your form as <form action="/hotel"> and change the select as:
<select name="hotelname" required>
<option value="hotelvinadelmar">Viña del Mar</option>
<option value="hotelsantiago1">Nueva Providencia</option>
<option value="hotelsantiago2">Providencia</option></select>
<br><br>
</select>
the generated link will be: (...)/properties/hotel?name=hotelvinadelmar(...)
or you can use a javascript function with onSubmit event, for example:
<script>
function submitForm(){
var hotelName = document.getElementById('hotelName').value;
var param1Value = document.getElementById('id').value;
switch(hotelName) {
case 'hotelvinadelmar':
window.location.href = '/hotelvinadelmar?param1=' + param1Value + '&param2=' + (...);
break;
case 'hotelsantiago1':
window.location.href = '/hotelsantiago1?param1=' + param1Value;
break;
}
// stop submit
return false;
}
</script>
<form onsubmit="submitForm()" method="get">
<select id="hotelName" required>
<option value="hotelvinadelmar">Viña del Mar</option>
<option value="hotelsantiago1">Nueva Providencia</option>
<option value="hotelsantiago2">Providencia</option></select>
</select>
<input type="submit" value="submit"/>
</form>
Capture the submission event and update the form action attribute to append the hotel name to the submission path:
document.forms[0].addEventListener("submit", function (evt) {
let ff = evt.target;
ff.action = "/properties/" + ff.hotelname.options[ff.hotelname.selectedIndex].value;
});
You'll need remove the locale property from your select input. Simply add a hidden form element (or selectable option) to your form:
<input type="hidden" name="locale" value="es">
An example url:
https://website.com/properties/hotelvinadelmar?locale=es&hotelname=hotelvinadelmar&val1=one&val2=two
Here's a demonstration how the form action attribute can be updated:
document.forms[0].addEventListener("submit", function (evt) {
evt.preventDefault(); // demonstration only
let ff = evt.target;
ff.action = "/properties/" + ff.hotelname.options[ff.hotelname.selectedIndex].value;
console.log(ff.action); // demonstration only
return false; // demonstration only
});
<form action="/properties/" method="get">
<input type="hidden" name="locale" value="es">
Sucursal:
<select name="hotelname" id="id" required>
<option value="hotelvinadelmar">Viña del Mar</option>
<option value="hotelsantiago1">Nueva Providencia</option>
<option value="hotelsantiago2">Providencia</option>
</select>
<input type="hidden" name="val1" value="one">
<input type="hidden" name="val2" value="two">
<input type="submit">
</form>

Pass html control values in Url.Action: MVC

I want to pass two parameters in #Url.Action.
View:
<select id="ddlSearchBy" name="ddlSearchBy" style="width: 150px">
<option value="TaxCode">Tax Code</option>
<option value="TaxDescription">Tax Description</option>
<option value="ClassDescription">Class Description</option>
<option value="ZoneName">Zone Name</option>
</select>
<input type="text" name="txtSearchValue" id="txtSearchValue"/>
<button type="button" id="btnDownload">Download</button>
<button type="button" id="btnSearch">Search</button>
On Download button click, I am calling the method "ExportToExcel" in Masters Controller and also I need to pass two parameters. i.e. the selected value of select html and textbox value.
Now, I am using like below;
<button type="button" id="btnDownload" onclick="location.href='#Url.Action("ExportToExcel", "Masters", new { ddlSearchBy = #TempData["ddlSearchBy"], txtSearchValue = #TempData["txtSearchValue"] })'">Download</button>
Can I directly pass the html control values in #Url.Action?
Edited:
Controller:
[HttpPost]
public ActionResult ExportToExcel(string ddlSearchBy, string txtSearchValue)
{
var grid = new GridView();
grid.DataSource = from data in GetTaxMasterTable(ddlSearchBy, txtSearchValue)
select new
{
Code = data.taxCode,
TaxDescription = data.taxDescription,
ClassDescription = data.classDescription,
Location = data.locationShortName,
Zone = data.zoneName,
TaxValue = data.taxValue,
Tax = data.taxPercentage,
ModifiedDate = data.modifiedDate
};
grid.DataBind();
Response.ClearContent();
Response.AddHeader("Content-Disposition", "attachment; filename = TaxMaster.xls");
Response.ContentType = "application/vnd.ms-excel";
StringWriter sw = new StringWriter();
HtmlTextWriter htw = new HtmlTextWriter(sw);
grid.RenderControl(htw);
Response.Write(sw.ToString());
Response.End();
return RedirectToAction("TaxMaster");
}
jQuery:
$("#btnSubmitDownloadExcel").click(function (e) {
var ddlSearchBy = $("#ddlSearchBy").val();
var txtSearchValue = $("#txtSearchValue").val();
$.ajax({
type: "POST",
url: "/Masters/ExportToExcel",
data: JSON.stringify({ "ddlSearchBy": ddlSearchBy, "txtSearchValue": txtSearchValue }),
contentType: "application/json; charset=utf-8",
datatype: "json",
success: function (data) {
alert(JSON.stringify(data));
},
error: function (data) {
alert("err");
alert(JSON.stringify(data));
}
});
});
This code is not downloading the Excel.
You cannot pass values from input elements using regular hyperlinks (Url.Action) without resorting to javascript.
But you can simply use a form with a method of GET.
<form action="Masters/ExportToExcel" method="get">
<select id="ddlSearchBy" name="ddlSearchBy" style="width: 150px">
<option value="TaxCode">Tax Code</option>
<option value="TaxDescription">Tax Description</option>
<option value="ClassDescription">Class Description</option>
<option value="ZoneName">Zone Name</option>
</select>
<input type="text" name="txtSearchValue" id="txtSearchValue"/>
<button type="submit" id="btnDownload">Download</button>
</form>
Might want to use the Html.BeginForm() helper to generate the form for a more cleaner code, but the end result is the same.
Update - If you already have a form with another submit action
If you don't need to support IE 9 or below, you can use the formaction attribute to have the button change the action of the form.
Example:
<form action="SomeController/Search" method="get">
<select id="ddlSearchBy" name="ddlSearchBy" style="width: 150px">
<option value="TaxCode">Tax Code</option>
<option value="TaxDescription">Tax Description</option>
<option value="ClassDescription">Class Description</option>
<option value="ZoneName">Zone Name</option>
</select>
<input type="text" name="txtSearchValue" id="txtSearchValue"/>
<button type="submit" id="btnSearch">Search</button>
<button type="submit" id="btnDownload" formaction="Masters/ExportToExcel">Download</button>
</form>
In this example, the form will do a get by default on SomeController/Search, when you click the btnSearch button. However, if you click the btnDownload button, the form will do a get request to Masters/ExportToExcel.
If you need to support IE below version 10, you need to use javascript to change the action of the form before you submit it.
Example using jQuery:
<form action="SomeController/Search" method="get">
<select id="ddlSearchBy" name="ddlSearchBy" style="width: 150px">
<option value="TaxCode">Tax Code</option>
<option value="TaxDescription">Tax Description</option>
<option value="ClassDescription">Class Description</option>
<option value="ZoneName">Zone Name</option>
</select>
<input type="text" name="txtSearchValue" id="txtSearchValue"/>
<button type="submit" id="btnSearch" onclick="$(this).closest('form').attr('action','SomeController/Search');">Search</button>
<button type="submit" id="btnDownload" onclick="$(this).closest('form').attr('action','Masters/ExportToExcel');">Download</button>
</form>

How to append select options after detaching them using jQuery

I'm having trouble trying to figure out how to append select options after detaching them based on the value of the initial select option of a form.
Here's the HTML for my form:
<form id="booking-form" action="#" method="post">
<legend class="bold">Bookings</legend>
<div class="input clearfix required">
<label for="cinema">Cinema</label>
<select name="cinema" id="cinema">
<option value></option>
<option value="maxima">Cinema Maxima</option>
<option value="rivola">Cinema Rivola</option>
</select>
<div class="error">
<p>Please select a cinema</p>
</div>
</div>
<div class="input clearfix required">
<label for="day">Day</label>
<select name="day" id="day">
<option value></option>
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select>
<div class="error">
<p>Please select a time</p>
</div>
</div>
<div class="input clearfix required">
<label for="time">Time</label>
<select name="time" id="time">
<option value></option>
<option value="12">12pm</option>
<option value="3">3pm</option>
<option value="4">4pm</option>
<option value="6">6pm</option>
<option value="7">7pm</option>
<option value="9">9pm</option>
</select>
<div class="error">
<p>Please select a time</p>
</div>
</div>
<div class="input">
<input type="submit" value="Submit">
</div>
</form>
And here's the jQuery code I've written:
$(document).ready(function(){
// ***** Begin Booking Form Manipulation ***** //
// If Cinema Maxima is selected, remove Cinema Rivola time options
$('#cinema').change(function() {
if( $('#cinema').val() == 'maxima') {
$('#time option[value="12"]').detach();
$('#time option[value="4"]').detach();
$('#time option[value="7"]').detach();
}
// Else, remove Cinema Maxima time options
else {
$('#time option[value="3"]').detach();
$('#time option[value="6"]').detach();
$('#time option[value="9"]').detach();
}
});
// If Cinema Maxima is selected but weekend session is not selected, remove 3pm time option
$('#day').change(function() {
if( $('#cinema').val() == 'maxima' && $('#day').val() != 'saturday' || 'sunday') {
$('#time option[value="3"]').detach();
}
});
});
// ***** End Booking Form Manipulation ***** //
I'm not sure I've I'm approaching this the best way after having spent the last few hours trawling through stackoverflow, but I can't seem to find a solution! Any advice for a beginner would be greatly appreciated!
I've upload my code to jsfiddle here: http://jsfiddle.net/nness/L9v6ejvt/
Wouldn't you know it - .show() and .hide() seem to work perfectly on my PC when using Chrome! Is anyone else using Chrome on Mac?.. If so, any thoughts as to why it's playing up? The saddest part is had I been using the PC from the get-go this would have saved me the best part of a day! Thanks for all your suggestions guys, all very much appreciated!
If you can add the corresponding classes for the select as follows:
<select name="time" id="time">
<option value></option>
<option value="12" class="rivola">12pm</option>
<option value="3" class="maxima">3pm</option>
<option value="4" class="rivola">4pm</option>
<option value="6" class="maxima">6pm</option>
<option value="7" class="rivola">7pm</option>
<option value="9" class="maxima">9pm</option>
</select>
You can simply hide and show them like
$(document).ready(function () {
$('#cinema').on('change', function (ev) {
$('#time option').hide();
$("."+this.value).show();
});
});
Updated Fiddle
Side note: unnecessary DOM manipulation is really bad...
You can set custom HTML attributes and then use jQuery
<option value="maxima" exceptitems="12,9">Cinema Maxima</option>
JQuery
$(document).ready(function(){
$('#cinema').on('change', function(ev) {
$('#time option').show();
var opt=$("option:selected", this);
var exceptItems=opt.attr('exceptitems');
if(exceptItems)
{
var items=exceptItems.split(",");
for (i = 0; i < items.length; i++) {
$('#time option[value="'+items[i]+'"]').hide();
}
}
});
});
DEMO1
Update 1:
I have nice solution
<option value="maxima" data-command="$('#time option[value=12]').hide()">Cinema Maxima</option>
JQuery
$(document).ready(function(){
$('#cinema').on('change', function(ev) {
var opt=$("option:selected", this);
var strCommand=opt.data("command");
eval(strCommand);
});
});
DEMO2
Update 2: For easy management
$.fn.extend({
executeCommand: function() {
return this.on('change', function(ev) {
var opt=$("option:selected", this);
var strCommand=opt.data("command");
eval(strCommand);
});
}
});
$('#cinema').executeCommand();
DEMO3