123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
<?php
if(isset($_POST['names'])) {
$names = $_POST['names'];
file_put_contents('namelist.txt', $names);
}
?>
<!DOCTYPE html>
<html>
<head>
<!--Style von der Wetteranzeige übernommen-->
<style>
html
{
font-family: "Arial", sans-serif;
font-size: 14pt;
width: 1100px;
min-height: 400px;
/* background-image: linear-gradient(-30deg, #92B2C3 0%, #FFF 40%);
background-repeat: no-repeat; */
background-color: #fff;
}
@media (min-width: 567px)
{
html
{
border: 1px solid;
}
}
body
{
margin: 12px;
}
table td
{
vertical-align: top;
text-align: left;
font-size:24px;
<!--border: 1px solid black;-->
}
.radio
{
font-size:16px;
}
h1
{
position: relative;
left: -12px;
top: -12px;
width: calc(100% + 16px);
margin-top: 0;
margin-left: 0;
margin-right: 0;
margin-bottom: 6px;
font-size: 20pt;
border-top: 1px solid #99AC00;
border-bottom: 1px solid #99AC00;
border-left: 0;
border-right: 0;
padding: 4px;
color: #000;
background-color: #eee;
background: linear-gradient(-30deg, #B9CC00, #EEE 50%);
}
</style>
<meta charset='UTF-8'>
<title>Namen erfassen</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$('button').click(function(e)
{
var action = $(this).attr('data-action'),
optionVal = $("input[type='radio'][name='anrede']:checked").val()+' '+$('input[name="vorname"]').val()+' '+$('input[name="nachname"]').val(),
$selectedOption = $('select[name="docsApp.options"] option:selected'),
$nameList = $('select[name="docsApp.options"]');
if(action === 'add')
{
$nameList.append($('<option>', {text:optionVal}));
}
if(action === 'edit')
{
$selectedOption.text(optionVal);
}
if(action === 'remove')
{
$selectedOption.remove();
}
e.preventDefault();
});
$('select').click(function()
{
var selectedName = $('select[name="docsApp.options"] option:selected').text();
if($('input[name="anrede"]').val() == 'Herr')
{
$("#Herr").prop("checked", true)
}
else
{
$("#Frau").prop("checked", true)
}
//$('input[name="anrede"]').selectedoption(selectedName.split(' ')[0]);
// andere Trennzeichen mit # vielleicht?
$('input[name="vorname"]').val(selectedName.split(' ')[1]);
$('input[name="nachname"]').val(selectedName.split(' ')[2]);
});
$('form').submit(function(e)
{
var nameList = {},
names,
i = 0;
$('select option').each(function()
{
nameList[i] = $(this).text();
i++;
});
names = JSON.stringify(nameList);
$.ajax({
type: 'post',
url: '',
data: {'names':names},
success: function()
{
$('.result').fadeIn(200).html('Namen gespeichert').fadeOut(3000);
}
});
e.preventDefault();
});
});
</script>
</head>
<!--Style infromationen nur nach oben!-->
<body>
<h1>Namen erfassen</h1>
<form>
<!--Keine Label!-->
<!--Keine Pixelangebane -> Punkt!-->
<label>Anrede
<input type="radio" id="Herr" name="anrede" value="Herr">Herr
<input type="radio" id="Frau" name="anrede" value="Frau">Frau
</label>
<label>Vorname
<input type="Text" name="vorname" autocomplete="off" >
</label>
<label>Nachname
<input type="Text" name="nachname" autocomplete="off" >
</label>
<button data-action='add'>Hinzufügen</button>
<button data-action='edit'>Ausgewählten überschreiben</button>
<button data-action='remove'>Löschen</button>
<br>
<br>
<table>
<colgroup> <col width="200"> <col width="650""></colgroup>
<tr>
<td>Liste </td>
<td>Vorschau</td>
</tr>
</table>
<table>
<colgroup> <col width="200"> <col width="650""></colgroup>
<tr>
<td>
<select name="docsApp.options" size="10" multiple="multiple">
<?php
$names = json_decode(file_get_contents('namelist.txt'));
foreach ($names as $name)
{
echo '<option>'.$name.'</option>';
}
?>
</select>
</td>
<td><br>
<center>Willkommen!</center> <!--Text-align anstatt Center! -->
<br>
<marquee width="650" direction="left" scrollamount="5" scrolldelay="1" > <!-- HTML5 / CSS gefrikel-->
<?php
foreach ($names as $name)
{
echo $name;
echo ' +++ ';
}
?>
</marquee>
</td>
</table>
<input type="Submit" name="" value="Liste speichern">
<br>
<input type="button" onClick="history.go(0)" VALUE="Vorschau aktualisieren">
</form>
<span class="result"></span>
</body>
</html>