bootstrap dropdown choose confirm by button - html

after selecting the item from dropdown the user will confirm the selection by clicking the button. and then has to move it to the page assigned to this item how to do it? after selecting the item from dropdown the user will confirm the selection by clicking the button. and then has to move it to the page assigned to this item how to do it?
thanks :)
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap-select Tests (Bootstrap 4)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/css/bootstrap-select.min.css">
<style>
body {
padding-top: 70px;
margin-left: 200px;
}
</style>
</head>
<body>
<select class="selectpicker" data-width="75%" data-live-search="true" title="Wybierz urządzenie...">
<optgroup label="Producent1">
<option>Maszyna 1</option>
<option>Maszyna 2</option>
<option>Maszyna 3</option>
</optgroup>
<optgroup label="Producent1">
<option>Maszyna 1</option>
<option>Maszyna 2</option>
<option>Maszyna 3</option>
</optgroup>
</select>
<br>
<br>
<br>
<br>
<button type="button" data-width="75%" class="btn btn-lg btn-danger">Szukaj!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>
<script src="../dist/js/bootstrap-select.js"></script>
</body>
</html>

check this:
html file:
<form action="page.php" method="post">
<div class="form-group">
<label for="selectedItem"> select:</label>
<select class="form-control" id="selectedItem" name="selectedItem">
<optgroup label="Producent1">
<option value="Maszyna1">Maszyna 1</option>
<option value="Maszyna2">Maszyna 2</option>
<option value="Maszyna3">Maszyna 3</option>
</optgroup>
<optgroup label="Producent2">
<option value="Maszyna4">Maszyna 4</option>
<option value="Maszyna5">Maszyna 5</option>
<option value="Maszyna6">Maszyna 6</option>
</optgroup>
</select>
</div>
<button type="submit" id="btnRedirect" data-width="75%" class="btn btn-lg btn-danger">Szukaj!</button>
</form>
page.php file:
<?php
$addresses=array(
'Maszyna1'=>'https://facebook.com',
'Maszyna2'=>'https://google.com',
'Maszyna3'=>'https://twitter.com/',
);
if (isset($_POST['selectedItem']) && !empty($_POST['selectedItem'])){
$selectedItem=$_POST['selectedItem'];
foreach ($addresses as $key=> $address){
if ($selectedItem===$key)
header("Location:".$address);
}
}
?>

put it in form tag with action and method attributes and change button type to submit. a something like this:
<div class="container">
<div class="form-group">
<label for="selectedItem"> select:</label>
<select class="form-control" id="selectedItem" name="selectedItem">
<optgroup label="Producent1">
<option value="https://www.facebook.com/">Maszyna 1</option>
<option value="https://www.google.com/">Maszyna 2</option>
<option value="Maszyna3">Maszyna 3</option>
</optgroup>
<optgroup label="Producent2">
<option value="Maszyna3">Maszyna 3</option>
<option value="Maszyna4">Maszyna 4</option>
<option value="Maszyna5">Maszyna 5</option>
</optgroup>
</select>
</div>
<button type="submit" data-width="75%" class="btn btn-lg btn-danger">Szukaj!</button>

Related

iOS switch focus between selects - strange behaviour

This strange behaviour happened both on Chrome and Safari on iOS 13.3.
If I select one value from the first select options and switch to the second select the value (in the same position I think) is automatically selected.
Does anyone have faced this problem? Maybe I'm missing something obvious.
Video here
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="form-group">
<div class="row">
<div class="small-6 columns">
<label class="required">Number Adults</label>
<select id="NumberAdults" name="NumberAdults" style="min-width: 200px; font-size: 16px;">
<option value="ad1">ad 1</option>
<option value="ad2">2</option>
<option value="ad3">3</option>
<option value="ad4">4</option>
<option value="ad5">5</option>
<option value="ad6">6</option>
<option value="ad7">7</option>
<option value="ad8">8</option>
<option value="ad9">9</option>
<option value="ad10">10</option>
</select>
</div>
<div class="small-6 columns">
<label class="required">Number Childs</label>
<select id="NumberChilds" name="NumberChilds" style="min-width: 200px; font-size: 16px;">
<option value="nc1">nc 1</option>
<option value="nc2">2</option>
<option value="nc3">3</option>
<option value="nc4">4</option>
<option value="nc5">5</option>
<option value="nc6">6</option>
<option value="nc7">7</option>
<option value="nc8">8</option>
<option value="nc9">9</option>
<option value="nc10">10</option>
</select>
</div>
</div>
</div>
</body>
</html>
One possible way to solve this is to set the first one (or the one that makes sense) as selected:
<option selected=“selected” value="nc1">nc 1</option

Materialize options not showing in select tag

The options in select tag is not displaying in materialize css.
<div class="row">
<div class="browser-default input-field col s12">
<select name="select_1" id="select_1">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
</div>
js:
$(document).ready(function(){
$('select').formSelect();
});
I have used $('select').material_select(); but still the options did not show.
Any reason for this? How can I show the options in the select?
I have missed the below part.
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

java web applications

I have a problem trying an excercise so I need help for this:
Index:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>My first servlet page </h1>
</body>
Servlet:
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
try (PrintWriter out = response.getWriter()) {
/* TODO output your page here. You may use following sample code. */
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet primerservlet</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1>" + request.getContextPath() + "</h1>");
out.println("</body>");
out.println("</html>");
}
}
JSP:
</form>
<h1>Server hour: <%= new java.util.Date() %> </h1>
<h3>Background color</h3>
<select>
<option value="">Select background color</option>
<option value="1"> Blue</option>
<option value="2">Red</option>
<option value="3">green</option>
<option value="4">pink</option>
</select>
<h3> Select font color</h3>
<select>
<option value="">Select an option</option>
<option value="1">blue</option>
<option value="2">red</option>
<option value="3">green</option>
<option value="4">pink</option>
</select>
<input type="Submit" value="Change">
So I want to change background color and text of server hour with select tag, pressing button "change" like this
Your help is very appreciated,
i hope you are looking for this
$( "#select-background" ).change(function() {
$("h1").css('background-color',this.options[this.value].text);
});
$( "#select-color" ).change(function() {
$("h1").css('color',this.options[this.value].text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Server hour</h1>
<h3>Background color</h3>
<select id="select-background">
<option value="">Select an option</option>
<option value="1">blue</option>
<option value="2">red</option>
<option value="3">green</option>
<option value="4">pink</option>
</select>
<h3> Select font color</h3>
<select id="select-color">
<option value="">Select an option</option>
<option value="1">blue</option>
<option value="2">red</option>
<option value="3">green</option>
<option value="4">pink</option>
</select>
Change
<input type="Submit" value="Change">
to
<input type="button" value="Change" onClick="changeColor();">
Change
<select> to <select id="myID">
Add to javascript code
function changeColor()
{
$('h1').css({'color' : $("#myId option:selected").html()});
$('h3').css('background-color', $("#myId option:selected").html());
}
This solution is just with one jsp:
<form method="post">
<h1 style="color:${param.color};background:${param.bg};">Server Time:<%=new java.util.Date()%></h1>
<h3>Background color</h3>
<select name="bg">
<option value="">Select background color</option>
<option>Blue</option>
<option>Red</option>
<option>green</option>
<option>pink</option>
</select>
<h3>Select font color</h3>
<select name="color">
<option value="">Select an option</option>
<option>blue</option>
<option>red</option>
<option>green</option>
<option>pink</option>
</select>
<input type="Submit" value="Change" />
</form>

Linking to other pages in HTML via drop-down menu

I'm trying to link to other html pages via dropdown, and I've tried various codes but can't seem to get it to work. I'm using this code:
<form name="dropdown">
<select name="list" accesskey="target">
<option selected>Choose a theme</option>
<option value="index.html">Theme 1</option>
<option value="theme2.html">Theme 2</option>
<option value="theme3.html">Theme 3</option>
<select>
<input type=button value="Go" onclick="goToNewPage(document.dropdown.list)">
I have different html pages laid out differently to alternate between layouts, how can I get this to work?
You may try this
<form>
<select name="list" id="list" accesskey="target">
<option value='none' selected>Choose a theme</option>
<option value="index.html">Theme 1</option>
<option value="theme2.html">Theme 2</option>
<option value="theme3.html">Theme 3</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</form>
JS: (Put this code into your <head>...</head> secion)
<script type="text/javascript">
function goToNewPage()
{
var url = document.getElementById('list').value;
if(url != 'none') {
window.location = url;
}
}
</script>

Requiring to make a selection from a drop down html 5

Is it possible to force/require a user to make a selection from a drop down menu?
Example:
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
By default "Volvo" is selected. What I want is for the browser to know that the user has made a selection and not accept the auto default.
I am thinking something like this:
<form action="">
<select name="cars" required="required">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
Any advice?
A lot of time has passed since the question was posted.
For anybody stumbling over this like I did, the solution became a lot simpler by now:
You can just add a first option to the selection, with no value set.
The browser will automatically treat this like "nothing was selected":
<!DOCTYPE html>
<html>
<body>
<form>
<select required>
<option value="">Please select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit"/>
</form>
</body>
</html>
JSFiddle showing it work with no further JS required: https://jsfiddle.net/nrs5a7qh/
I tweaked an example from jquery validate to get this working for you. I know in your original question you asked for it to be based in HTML5 but maybe this blended example is acceptable.
http://jsfiddle.net/36MkJ/
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#carsForm").validate();
});
</script>
</head>
<body>
<form class="cmxform" id="carsForm" method="get" action="">
<select name="cars" class="required">
<option value="">Select a car</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
​Original Example was on http://docs.jquery.com/Plugins/Validation