How do you get the data you saved in form (html)?

Question

I have no idea of html and need your help to do something.

I wrote this code:

<form action="Programmierung/1.html">
    <table>
        <tr>
            <td><label for = "name">Name</label></td>
        </tr>
        <tr>
            <td><input id="name" type="text" size="15"/></td>
        </tr>
        <tr>
            <td><label for = "vorname">Vorname</label></td>
        </tr>
        <tr>
            <td><input id="vorname" type="text" size="15"/></td>
        </tr>
        <tr>
            <td><label for = "geburtsdatum">Geburtsdatum</label></td>
        </tr>
        <tr>
            <td><input id="geburtsdatum" type="date"/></td>
        </tr>
        <tr>
            <td><label for = "strasse">Straße</label></td>
            <td><label for = "hausnummer">Hausnummer</label></td>
        </tr>
        <tr>
            <td><input id="strasse" type="text" size="15"/></td>
            <td><input id="hausnummer" type="text" size="15"/></td>
        </tr>   
        <tr>
            <td><label for = "plz">Postleittzahl</label></td>   
            <td><label for = "ort">Ort</label></td>
        </tr>
        <tr>
            <td><input id="plz" type="text" size="15"/></td>
            <td><input id="ort" type="text" size="15"/></td>
        </tr>
        <tr>
    </table>
    <br><br>
    <table>
            <td><input type="submit" value="01: Personenbezogene Daten"/></td>
    </table> 
</form>

I want to send all the variables to another html page named "1.html", but I don't know how. What did I do wrong? Do I need php for that? And if yes how do I implement it?

Answer 1

These days there is no need to use forms to transmit data to other pages. That was how it was done in the 1990s... but today, we use AJAX.

With a form, the user enters data, clicks submit, and the page sends the data - and navigates over to - another page. The view actually changes over to that other page.

AJAX is even simpler than working with forms, especially if you use the jQuery $.ajax().done() code block. With AJAX, you:

a. Collect the data from the user inputs (jQuery has a simple method to do this called .serialize() - it just creates an object of key-value-pairs that represent the form controls and their values, all ready to send to the backend processing file in the AJAX code block. Something similar can be done with pure javaScript, but you can get the idea of what is required from .serialize())

b. Specify the server-side processing file (a .PHP file is quite easy to do, see below)

c. When the user clicks "submit", the data is sent over to the .php file, you receive it over there and do something with it, then the .php file sends back (using the php command echo) a string of data to the .done() part of the AJAX code block, and inside the .done() block, you receive the data from the php side, and

d. Still inside the .done() block, you have the opportunity to modify the webpage with the newly received data.

So, for example, you can:

• Send login information to the .php file, and it can respond with a pass or fail, zero or one, response. Or, the php side can send back some hidden data that non-authenticated users are not permitted to see.

• Send an address to the back-end file, and the php file can insert that into a database (MySQL or MariaDB, for example)

• Send quiz answers to the back-end file and it can respond with the correct answer, or with just a 1/0 (pass/fail), whatever.

When the ajax code block is finished, the user is still on the same page as before -- but the page may have been updated with new information. So, if you have several ajax events happening on your page, you can do all the interaction with the user that you wish - you do not need other pages.

Important notes:

1. jQuery is now outdated. Vanilla javascript is much improved since 2015, and the Fetch API is almost as easy to use as jQuery's $.ajax(). However, it is more difficult to explain and still a bit more difficult for a beginner. I suggest that you study the $.ajax() way of doing it, and then try to switch over to using Fetch.

2. You can still use a <form> container and a submit button, but you do not put an action= attribute on the form -- the back end processing file is specified in the $.ajax() code block.

3. And most importantly, if you use a form, you must trap the click event on the submit button (with javascript), and use event.preventDefault() to stop the form from trying to navigate away from the current page. See the following examples:

AJAX vs Form Submission

How can I make, when clicking a button, send an email with the data included from the form?

values not updated after an ajax response

How to make an Ajax Contact Form

Implementing PHP

Is easy. Just rename the file from 1.html to 1.php. Done.

Inside any .php file, the actual php code must be surrounded with "start" and "finish" tags that look like this:

<?php to start, and

?> to finish.

Often, the file begins with the <?php... and if the entire file is php code then the final ?> may be omitted. If you are using a php file as a back-end processing file for AJAX, it is common for the entire file to be php - in which case you would begin the file with <?php and the processing would end when you echo the data back to the client-side page (usually called index.html or index.php or some such.

Note that a file ending in .php doesn't need to have any php code in it at all... You can rename all your .html files to .php and everything will still work the same. The only difference is that now you can use .php code inside that file -- however the php code will be processed all at once, at the beginning, before the user ever has the opportunity to interact with the page.

(That is another benefit of AJAX - a common question is "How do I run some more PHP code", and the answer is: "Via a user event that you trap to make another AJAX call")