Andrea
Reputation: 1
Activate a Form in HTML
I'm not a programmer or web developer, I mainly rely on free templates to edit on HTML. Due to Covid19, I have to create a lottery webpage for a school. I found a movie seat reservation templates and modified to what I need. All works except that when the form is finished it does anything. I would like to receive the name and the number that the customer had reserved but it doesn't. Well the form does not send any "reply" because it need to be set up. But since I know only the basic of HTML and CSS and assuming that the form is in JS I had no idea how to let it work.
So basically, the online interface work until the end, but it does not provide me any data about the selection made by the customer and it does not refresh the website whit the number already taken.
I'm try to post the HTML here, if someone is able to helping me I appreciate a lot
function onLoaderFunc() {
$(".seatStructure *").prop("disabled", true);
$(".displayerBoxes *").prop("disabled", true);
}
function takeData() {
if (($("#Username").val().length == 0) || ($("#Numseats").val().length == 0)) {
alert("Inserisci il nome e il numero di caselle ");
} else {
$(".inputForm *").prop("disabled", true);
$(".seatStructure *").prop("disabled", false);
document.getElementById("notification").innerHTML =
"<b style='margin-bottom:0px;background:#ff9800;letter-spacing:1px;'>Adesso seleziona i numeri!</b>";
}
}
function updateTextArea() {
if ($("input:checked").length == ($("#Numseats").val())) {
$(".seatStructure *").prop("disabled", true);
var allNameVals = [];
var allNumberVals = [];
var allSeatsVals = [];
//Storing in Array
allNameVals.push($("#Username").val());
allNumberVals.push($("#Numseats").val());
$('#seatsBlock :checked').each(function () {
allSeatsVals.push($(this).val());
});
//Displaying
$('#nameDisplay').val(allNameVals);
$('#NumberDisplay').val(allNumberVals);
$('#seatsDisplay').val(allSeatsVals);
} else {
alert("Please select " + ($("#Numseats").val()) + " seats")
}
}
function myFunction() {
alert($("input:checked").length);
}
/*
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}*/
$(":checkbox").click(function () {
if ($("input:checked").length == ($("#Numseats").val())) {
$(":checkbox").prop('disabled', true);
$(':checked').prop('disabled', true);
} else {
$(":checkbox").prop('disabled', true);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body onload="onLoaderFunc()">
<h1>Lotteria Asilo</h1>
<div class="container">
<div class="w3ls-reg">
<!-- input fields -->
<div class="inputForm">
<h2>Completa i campi richiesti e seleziona il tuo numero</h2>
<div class="mr_agilemain">
<div class="agileits-left">
<label> Nome
<span>*</span>
</label>
<input type="text" id="Username" required>
</div>
<div class="agileits-right">
<label> Number of Seats
<span>*</span>
</label>
<input type="number" id="Numseats" required min="1">
</div>
</div>
<button onclick="takeData()">Seleziona i numeri</button>
</div>
<!-- //input fields -->
<!-- seat availabilty list -->
<ul class="seat_w3ls">
<li class="smallBox greenBox">Numeri selezionati</li>
<li class="smallBox redBox">Numeri gia' riservati</li>
<li class="smallBox emptyBox">Numeri Liberi</li>
</ul>
<!-- seat availabilty list -->
<!-- seat layout -->
<div class="seatStructure txt-center" style="overflow-x:auto;">
<table id="seatsBlock">
<p id="notification"></p>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>0</td>
<td>
<input type="checkbox" class="seats" value="1">
</td>
<td>
<input type="checkbox" class="seats" value="2">
</td>
<td>
<input type="checkbox" class="seats" value="3">
</td>
<td>
<input type="checkbox" class="seats" value="4">
</td>
<td>
<input type="checkbox" class="seats" value="5">
</td>
<td>
<input type="checkbox" class="seats" value="6">
</td>
<td>
<input type="checkbox" class="seats" value="7">
</td>
<td>
<input type="checkbox" class="seats" value="8">
</td>
<td>
<input type="checkbox" class="seats" value="9">
</td>
<td>
<input type="checkbox" class="seats" value="10">
</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>
<input type="checkbox" class="seats" value="11">
</td>
<td>
<input type="checkbox" class="seats" value="12">
</td>
<td>
<input type="checkbox" class="seats" value="13">
</td>
<td>
<input type="checkbox" class="seats" value="14">
</td>
<td>
<input type="checkbox" class="seats" value="15">
</td>
<td>
<input type="checkbox" class="seats" value="16">
</td>
<td>
<input type="checkbox" class="seats" value="17">
</td>
<td>
<input type="checkbox" class="seats" value="18">
</td>
<td>
<input type="checkbox" class="seats" value="19">
</td>
<td>
<input type="checkbox" class="seats" value="20">
</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="checkbox" class="seats" value="21">
</td>
<td>
<input type="checkbox" class="seats" value="22">
</td>
<td>
<input type="checkbox" class="seats" value="23">
</td>
<td>
<input type="checkbox" class="seats" value="24">
</td>
<td>
<input type="checkbox" class="seats" value="25">
</td>
<td>
<input type="checkbox" class="seats" value="26">
</td>
<td>
<input type="checkbox" class="seats" value="27">
</td>
<td>
<input type="checkbox" class="seats" value="28">
</td>
<td>
<input type="checkbox" class="seats" value="29">
</td>
<td>
<input type="checkbox" class="seats" value="30">
</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>
<input type="checkbox" class="seats" value="31">
</td>
<td>
<input type="checkbox" class="seats" value="32">
</td>
<td>
<input type="checkbox" class="seats" value="33">
</td>
<td>
<input type="checkbox" class="seats" value="34">
</td>
<td>
<input type="checkbox" class="seats" value="35">
</td>
<td>
<input type="checkbox" class="seats" value="36">
</td>
<td>
<input type="checkbox" class="seats" value="37">
</td>
<td>
<input type="checkbox" class="seats" value="38">
</td>
<td>
<input type="checkbox" class="seats" value="39">
</td>
<td>
<input type="checkbox" class="seats" value="40">
</td>
<td>40</td>
</tr>
<tr>
<td>4</td>
<td>
<input type="checkbox" class="seats" value="41">
</td>
<td>
<input type="checkbox" class="seats" value="42">
</td>
<td>
<input type="checkbox" class="seats" value="43">
</td>
<td>
<input type="checkbox" class="seats" value="44">
</td>
<td>
<input type="checkbox" class="seats" value="45">
</td>
<td>
<input type="checkbox" class="seats" value="46">
</td>
<td>
<input type="checkbox" class="seats" value="47">
</td>
<td>
<input type="checkbox" class="seats" value="48">
</td>
<td>
<input type="checkbox" class="seats" value="49">
</td>
<td>
<input type="checkbox" class="seats" value="50">
</td>
<td>
50
</td>
</tr>
<tr>
<td>5</td>
<td>
<input type="checkbox" class="seats" value="51">
</td>
<td>
<input type="checkbox" class="seats" value="52">
</td>
<td>
<input type="checkbox" class="seats" value="53">
</td>
<td>
<input type="checkbox" class="seats" value="54">
</td>
<td>
<input type="checkbox" class="seats" value="55">
</td>
<td>
<input type="checkbox" class="seats" value="56">
</td>
<td>
<input type="checkbox" class="seats" value="57">
</td>
<td>
<input type="checkbox" class="seats" value="58">
</td>
<td>
<input type="checkbox" class="seats" value="59">
</td>
<td>
<input type="checkbox" class="seats" value="60">
</td>
<td>60</td>
</tr>
<tr>
<td>6</td>
<td>
<input type="checkbox" class="seats" value="71">
</td>
<td>
<input type="checkbox" class="seats" value="72">
</td>
<td>
<input type="checkbox" class="seats" value="73">
</td>
<td>
<input type="checkbox" class="seats" value="74">
</td>
<td>
<input type="checkbox" class="seats" value="75">
</td>
<td>
<input type="checkbox" class="seats" value="76">
</td>
<td>
<input type="checkbox" class="seats" value="77">
</td>
<td>
<input type="checkbox" class="seats" value="78">
</td>
<td>
<input type="checkbox" class="seats" value="79">
</td>
<td>
<input type="checkbox" class="seats" value="80">
</td>
<td>70</td>
</tr>
<tr>
<td>7</td>
<td>
<input type="checkbox" class="seats" value="81">
</td>
<td>
<input type="checkbox" class="seats" value="82">
</td>
<td>
<input type="checkbox" class="seats" value="83">
</td>
<td>
<input type="checkbox" class="seats" value="84">
</td>
<td>
<input type="checkbox" class="seats" value="85">
</td>
<td>
<input type="checkbox" class="seats" value="86">
</td>
<td>
<input type="checkbox" class="seats" value="87">
</td>
<td>
<input type="checkbox" class="seats" value="88">
</td>
<td>
<input type="checkbox" class="seats" value="89">
</td>
<td>
<input type="checkbox" class="seats" value="90">
</td>
<td>80</td>
</tr>
<tr>
<td>8</td>
<td>
<input type="checkbox" class="seats" value="I1">
</td>
<td>
<input type="checkbox" class="seats" value="I2">
</td>
<td>
<input type="checkbox" class="seats" value="I3">
</td>
<td>
<input type="checkbox" class="seats" value="I4">
</td>
<td>
<input type="checkbox" class="seats" value="I5">
</td>
<td>
<input type="checkbox" class="seats" value="I6">
</td>
<td>
<input type="checkbox" class="seats" value="I7">
</td>
<td>
<input type="checkbox" class="seats" value="I8">
</td>
<td>
<input type="checkbox" class="seats" value="I9">
</td>
<td>
<input type="checkbox" class="seats" value="I10">
</td>
<td>90</td>
</tr>
</table>
<div class="screen">
</div>
<button onclick="updateTextArea()">Confirma Selezione</button>
</div>
<!-- //seat layout -->
<!-- details after booking displayed here -->
<div class="displayerBoxes txt-center" style="overflow-x:auto;">
<table class="Displaytable w3ls-table" width="100%">
<tr>
<th>Nome</th>
<th>Totale Ceselle Prenotate</th>
<th>Numeri Prenotati</th>
</tr>
<tr>
<td>
<textarea id="nameDisplay"></textarea>
</td>
<td>
<textarea id="NumberDisplay"></textarea>
</td>
<td>
<textarea id="seatsDisplay"></textarea>
</td>
</tr>
</table>
</div>
<!-- //details after booking displayed here -->
</div>
</div>
<div class="copy-wthree">
<p>© TheABdeveloper - All Right Reserved | Oratorio Palosco
</p>
</div>
</body>
</html>Upvotes: 0
Views: 130
Answers (1)
Nathn
Reputation: 429
Hello and welcome to Stack Overflow ! 👋
Unfortunaly, you cannot process or send the data of a form only with HTML and Javascript. It is because these languages are processed only client-side and cannot really send anything alone.
To do it you will need to put all your input and checkbox fields, as well as the submit button (by the way you will need to add a type='submit' in your confirm button), in a <form> tag.
This form tag will get 2 essential attributes : method and action.
The method is how you want to send the data : in short, it will be GET if you want the data to be transferred via the URL (example : for a search bar), or it will be POST if you want it to be more secure and to transfer more data.
In your case, I think method='POST' is the best.
The action attribute is the URL of the page where is located the code which will process the data. And that's where all the fun begins : this code isn't Javascript, it's PHP.
It's a server-side and more complicated language than JS, so for obivious reasons I can't explain it here, but here are some tutorials and websites to learn it :
Good luck !
Upvotes: 1
Related Questions
- Enable button on any form change
- onClick enable form
- Forms Using HTML and Javascript
- Triggering a button click from javascript
- Enable Button After Form Auto Populates
- how can i enable the submit button in the form?
- Trigger a form action
- Activating script with a button in the same form
- How to activate a button with jQuery?
- Link to activate form field