JSFiddle - React, Tailwind, and code Playground
by oroce
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css">
<form action="http://oroszi.net:3000/form" class="personal-info">
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>Név:</td>
<td><input type="text" name="name" class="required" />*</td>
</tr>
<tr>
<td>Születési hely:</td>
<td><input type="text" name="bplace" class="required ac-cities" />*</td>
</tr>
<tr>
<td>Születési dátum:</td>
<td><input type="text" name="bdate" class="required datetime" />*</td>
</tr>
<tr>
<td>Nem</td>
<td>
<div class="sex-choose">
<input type="radio" value="m" name="sex" id="rad-male" /><label for="rad-male">Fiú</label>
<input type="radio" value="f" name="sex" id="rad-female" /><label for="rad-female">Lány</label>
</div>
</td>
</tr>
<tr>
<td>Beleegyezés</td>
<td>
<input type="checkbox" name="agree" value="1" id="chk-agree" />
<label for="chk-agree">Beleegyezek bármibe</label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" class="form-submit" value="Mentés" />
</td>
</tr>
</tbody>
</table>
</form>
JavaScript
$(".form-submit").button();
$(".sex-choose").buttonset();
$("#chk-agree").button({
icons: {
primary: "ui-icon-check"
}
});
$(".datetime").datepicker({
firstDay: 1,
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true
});
$(".ac-citites").autocomplete({
source: ["Budapest", "Szeged", "Kecskemét", "Kiskunfélegyháza", "Sopron", "Móvár"]
});
$("form.personal-info").submit(function() {
var form = $(this);
$.ajax({
url: form.attr("action"),
data: form.serialize(),
success: function( resp ) {
console.log( resp )
},
error: function(xhr) {
console.log( resp );
}
});
return false;
});