0

I am at that stage of creating a web-site where I need to figure out how to have a user input 2 dates at any page and upon pressing "Find" go the the booking page where name, email etc. will be asked for. However, instead of filling out the dates again, I need them to be fillied out from the dates chosen on the previous page, that is to parse the form's inputs from page one to page two. Now, I have read that it could be done with JavaScript using cookies and by using PHP.

My question is: what is considered a better practice and why? And if there are other good ways, what are they and why are they considered good?

From what I understand, JavaScript is heavier to process, but is a good solution if php is not available to the web-site developer. Also, JavaScript is subject to being enabled on one's computer.

PHP, on the other hand is a more orthodox way, yet requires a database, so that with each submission, more and more entries in the database would apper, so more memory requires to host it.

Please correct me if I am wrong, especially about the PHP method.

Tony
  • 79
  • 7

2 Answers2

2

You make a couple of incorrect assumptions, so let me try to answer your question.

First of all you have to realize that JavaScript and PHP are conceptually totally different languages. JavaScript runs on the user's computer, while PHP runs on the server. JavaScript is a client-side language, while PHP is a server-side language. Take a look at this answer for a detailed explanation about the difference.

Generally speaking, you should use JavaScript to make web pages dynamic and use a server-side language like PHP for the business logic. In your case PHP would be the way to go.

The drawbacks you mentions for PHP are not true. You can use PHP with a database, but it is by no means mandatory. In your case there's no reason not to use it.

What you should do to create the webpage you mention is the following:

  1. Make a form where the user can enter the dates and set its action to the second page;

  2. Read this form on the second page using a server-side language (in PHP: $_POST['date']) and use it to fill out the form.

That should do the trick.

Community
  • 1
  • 1
Frog
  • 1,631
  • 2
  • 17
  • 26
  • Ah, okay, just found some tutorial on that after you posted! Thanks for your corrections! – Tony Aug 08 '15 at 10:04
  • It looks to m like you have all he pieces laid out and you joust need to run with the solution you think makes the most send or that it ant to try. You at not contemplating a large architecture, just a small amount of handling interactivity . There is no best answer. More than one way works. Some people require their app to work everywhere done some don't, which can be the deciding factor for js, as example – DanAllen Aug 08 '15 at 10:09
  • Okay, now I have a different quiestion: what would be an approximate code to fill a form on the next page after submission on the first? I presume it's not as simple as the tutorial shows, since there it just returns the input values and writes them using `echo("First": "$first_input"); echo("Second": "$second_input");` etc. Or shall I just insert such code into my form's input fields? Say: ` – Tony Aug 08 '15 at 10:12
  • Tony, you need to sanatize:, such as: $inputs = array_map('strip_tags', $_POST); echo $inputs['date1']; – schellingerht Aug 08 '15 at 10:14
  • @DanAllen JavaScript would not work on mobile, correct? I'd like my pages to work on mobile, that's a good point that I forgot to mention! Is PHP a better way then than JS? – Tony Aug 08 '15 at 10:16
  • Javascript is client side, excuted on the client's device. Examples: events (click, mouseover, scroll, etc.), effects, etc. Php is server side and returns html, json. Examples: database actions, sending mail, handling uploaded files, etc. – schellingerht Aug 08 '15 at 10:21
  • @HenriSchellingerhout Okay, I'll wash my hands just now (kidding). I'll read some on sanitazation once I get the form to work!) And, is the sanitization required here at all? Since all I need is to send input data from one form to the next, so no databse is involed. (The form that gets submitted via email from the second page has patterns set JQuery Validator too) – Tony Aug 08 '15 at 10:22
  • Sanatize prevents problems as unwanted html on your page, sql injections, etc. It's great if you apply clientside validation (such as jQuery validation) and serverside validition. :-) – schellingerht Aug 08 '15 at 11:38
  • @Tony: Henri is right, you should sanitize the input. A lot has been written about why this is needed, but it is vital for the security of your website. In PHP you can for example use the `htmlentities` function. I think the easiest method to implement your idea, is by setting the `value` attribute of the input form to (for example) `htmlentities($_POST['input'])`. By the way, don't forget to accept an answer if you're satisfied! – Frog Aug 08 '15 at 15:02
  • Tony, js is ok for mobile, but there are some people who disable js, for various reasons. Some web sites don't care about the non-js users, others cater to them. The most important point under discussion here is the importance of sanitizing input, to make sure it cannot trash your system. The way I do it I run every string coming in through str_replace function on the server, replacing ' with |, because I use ' to delimit strings going into the database. – DanAllen Aug 11 '15 at 03:06
  • @DanAllen: That is **not** the correct way to sanitize your input! Preferably you should use prepared statements, but otherwise use `mysql_real_escape_string` or an analogous function for other database software. – Frog Aug 11 '15 at 10:59
1

You need all completed steps before saving to database (read: handling by back-end), so it's better to handle the steps and their navigation client side. If all steps completed, post full form to back-end.

The most simple approach is this:

  • put different divs in your form, called steps
  • the "submit" of the first form sets div#step1 hidden and displays div#step2 with javascript (native, jquery, or what you want)
  • div#step2 has the second form
  • the submit in step2 is post for the full form

Pseudo code below:

<form name="myForm" action="yourbackendlink" method="post">
    <div id="step1">
        // your first form here
        <input type="button" value="Next">
    </div>

    <div id="step2">
        // your next step here
        <input type="submit" value="Finish">
    </div>
</form>

De first button:

  • hide div step 1, display div step 2. It's in the same form!

De finish button:

  • submit (post) to form action link and handle via back-end (for example php), so it contains te full form input
schellingerht
  • 5,726
  • 2
  • 28
  • 56