java web applications - html

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>

Related

bootstrap dropdown choose confirm by button

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>

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>

issue with making a <select> box bringing you to another page

Hey guys so I am trying to create a quick search with the boxes. I thought I could just put in some tags but does not work so I was wondering how I would go about doing this?
Here is my code:
<div id="advancesearch">
<div class="audio-quicksearch">
<select>
<option value="Microphones">Microphones</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
</div><!-- END #advancesearch -->

Why don't you use JavaScript window.location?
<div id="advancesearch">
<div class="audio-quicksearch">
<select>
<option value="Microphones" onclick="window.location='http://www.google.com'">Microphones</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
</div>
Or create a function
<div id="advancesearch">
<div class="audio-quicksearch">
<select>
<option></option>
<option value="Microphones" onclick="redirect_me('http://www.google.com');">Microphones</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
</div>
<script>
function redirect_me(re_link) {
window.location = re_link;
}
</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

How to prevent newline/line break within a <form></form>?

This is my code.
<form name="publish">
<?php include 'location.selector.html'; ?>
<input type="submit" value="submit"/> </form>
When displayed, there is a newline preceding the
submit
button, how to eliminate this newline/line break?
The HTML content of location.selector.html is
<table><tr><td>都道府県を選択してください</td>
<td>市区町村を選択してください</td></tr>
<tr><td align="center">
<SELECT name="pref" onChange="changePref(true)">
<OPTION VALUE="99">全国
<OPTION VALUE="0">北海道
<OPTION VALUE="1">青森県
<OPTION VALUE="2">岩手県
<OPTION VALUE="3">宮城県
<OPTION VALUE="4">秋田県
<OPTION VALUE="5">山形県
<OPTION VALUE="6">福島県
<OPTION VALUE="7">茨城県
<OPTION VALUE="8">栃木県
<OPTION VALUE="9">群馬県
<OPTION VALUE="10">埼玉県
<OPTION VALUE="11">千葉県
<OPTION VALUE="12">東京都
<OPTION VALUE="13">神奈川県
<OPTION VALUE="14">新潟県
<OPTION VALUE="15">富山県
<OPTION VALUE="16">石川県
<OPTION VALUE="17">福井県
<OPTION VALUE="18">山梨県
<OPTION VALUE="19">長野県
<OPTION VALUE="20">岐阜県
<OPTION VALUE="21">静岡県
<OPTION VALUE="22">愛知県
<OPTION VALUE="23">三重県
<OPTION VALUE="24">滋賀県
<OPTION VALUE="25">京都府
<OPTION VALUE="26">大阪府
<OPTION VALUE="27">兵庫県
<OPTION VALUE="28">奈良県
<OPTION VALUE="29">和歌山県
<OPTION VALUE="30">鳥取県
<OPTION VALUE="31">島根県
<OPTION VALUE="32">岡山県
<OPTION VALUE="33">広島県
<OPTION VALUE="34">山口県
<OPTION VALUE="35">徳島県
<OPTION VALUE="36">香川県
<OPTION VALUE="37">愛媛県
<OPTION VALUE="38">高知県
<OPTION VALUE="39">福岡県
<OPTION VALUE="40">佐賀県
<OPTION VALUE="41">長崎県
<OPTION VALUE="42">熊本県
<OPTION VALUE="43">大分県
<OPTION VALUE="44">宮崎県
<OPTION VALUE="45">鹿児島県
<OPTION VALUE="46">沖縄県
</SELECT></td><td align="center">
<SELECT NAME="city">
<OPTION VALUE="99" SELECTED>全地区
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
</SELECT></td></tr></table>

Include the table before your form tag or use try using below CSS:
<style type="text/css">
form, table {
display:inline;
margin:0px;
padding:0px;
}
</style>

It's been awhile since I did CSS but try the
display:inline
style.