Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Validating 'required' form page data for save to database

Posted by: Freddz Jan 7 2019, 08:34 PM

Hello,
I have a form page where I check the mandatory inputs client-sided by the attribute 'required' (when clicking send button).
When all required inputs are done the send button click...
1.) should call a php file 'dbinsert.php' which just contains the save process of the form data to a database.
2.) But the success message should be shown on the SAME page, on top of the form page.
How can I implement this process under those 2 conditions?

I suppose that the send button's 'action' attrbute should be empty and the php file has to be called via Ajax (within a Javascript function?) !?
But unfortunately I fail in implementing THIS specific configuration.

Could you help me, please?
If so, please specify in your answer all necessary code lines like the form header, the submit button and the Javascript function that executes the Ajax call (and also fires the success message, I suppose)?
Thank you so much!

The following constellation does not work:
* <FORM NAME="Betrugseingabe" ACTION="../cgi-bin/DBinsert.php" METHOD=POST>
* <INPUT TYPE="submit" NAME="Absenden" VALUE="Absenden" ID="Schaltflaeche1" formtarget="_self">

Posted by: Christian J Jan 8 2019, 05:56 AM

Hello

QUOTE(Freddz @ Jan 8 2019, 02:34 AM) *

Hello,
I have a form page where I check the mandatory inputs client-sided by the attribute 'required' (when clicking send button).
When all required inputs are done the send button click...
1.) should call a php file 'dbinsert.php' which just contains the save process of the form data to a database.
2.) But the success message should be shown on the SAME page, on top of the form page.
How can I implement this process under those 2 conditions?

The easiest way is to put the HTML form code and PHP script in the same file. Then if you omit the ACTION attribute of the FORM element, the form will submit to its own URL:

CODE
<FORM NAME="Betrugseingabe" METHOD=POST>

You must also write the PHP script so that it checks if the form has been submitted or not when the page is loaded. This can be done with the isset() method checking if any of the form variables have been set.

Posted by: Freddz Jan 8 2019, 08:55 AM

Thank you very much.

But how is the button (<Input Type= ...>) been defined so that the PHP-Script is been executed.
JUST this part you unfortunately omited. ;-)
If I e.g. use:
"<INPUT TYPE=SUBMIT NAME="Absenden" onClick="return handleClick();>"
the attribute 'required' of the mandatory input elements will be ignored !!!...

Could you specify this button definition in detail, please?

Posted by: Freddz Jan 8 2019, 10:10 AM

Another little question to you related to my problem:
Isn't there anywhere a nice, simple, powerful, free WYSIWYG editor that supports things like that?
Do you know some?
I wish to create such web sites (including form pages like that) in a rapid way!...

Posted by: Christian J Jan 8 2019, 12:39 PM

QUOTE(Freddz @ Jan 8 2019, 02:55 PM) *

Could you specify this button definition in detail, please?

Something like this:

CODE
<?php
if(isset($_POST['Absenden']))
{
    // put form handler script here
    echo "Form was submitted.";
}

else
{
?>
Form is not submitted.

<form method="post">
<INPUT TYPE=SUBMIT NAME="Absenden">
</form>

<?php
}
?>

Sidenote:
QUOTE
I check the mandatory inputs client-sided by the attribute 'required'

Note that client-side form validation can easily be circumvented by malicious users, so always validate the form on the server-side as well.

The above PHP only checks if some POST form was submitted, it doesn't check if all form fields were included in the form submission, or if the data is valid or safe to use. To be on the safe side, run isset() on all the form fields, sanitize the data from all of them as well with e.g. htmlspecialchars(). Further checks might be required before creating an email or querying a database.

Posted by: Christian J Jan 8 2019, 12:42 PM

QUOTE(Freddz @ Jan 8 2019, 04:10 PM) *

Isn't there anywhere a nice, simple, powerful, free WYSIWYG editor that supports things like that?
Do you know some?

No idea, I never use WYSIWYG editors. A text editor with a clipbook library goes a long way though. You can also use templates that you've already created.




Posted by: Freddz Jan 10 2019, 04:57 AM

Hello Christian.
I am very sorry but I do not understand your code:
You integrated the form description with button into a php script??

But how could the php script be started?? What from?
Cause it should be a click to the button only. But this button is within the php script.
So one process requires the other. How should that work?...

Posted by: Christian J Jan 10 2019, 07:35 AM

QUOTE(Freddz @ Jan 10 2019, 10:57 AM) *

But how could the php script be started?? What from?

PHP in a file runs every time the file is requested. Depending on wether the form has been submitted or not, your script can then be made to either save to the database or display the HTML form.

The isset() function checks if the form field "Absenden" has been submitted. If it has the IF condition becomes true, and the code in it will run:

CODE
if(isset($_POST['Absenden']))
{
    // here you can put the form handling script and database query
}

In other cases, the IF condition is false, and the ELSE condition will instead make the HTML form appear:

CODE
else
{
?>
Form is not submitted.

<form method="post">
<INPUT TYPE=SUBMIT NAME="Absenden">
</form>

<?php
}
?>

Posted by: Christian J Jan 10 2019, 07:41 AM

Here's another way of looking at it, where especially the ELSE condition may be easier to understand:

CODE
<?php

echo '<p>This text is always shown when the page is loaded.</p>';

if(isset($_POST['Absenden']))
{
    echo '<p>This text is only shown if the form field "Absenden" was submitted.</p>';
}

else
{
    echo '<p>This text is only shown if the page was NOT requested by a POST form submission.</p>';
    echo '<form method="post"><input type="submit" name="Absenden" value="Submit \'Absenden\'"></form>';
}

?>

Posted by: Freddz Jan 12 2019, 04:29 AM

Hello Christian.

Thank you again.
But I still don't understand e.g. why there is a button in the else part. Etc.

To show you the situation I put your first and afterwards your second php code part into a page into its (empty) form tags. So the second button 'Abschicken' is its send button (with Name='Absenden').

Now I can press both buttons in each case but nothing happens - like I expected.
These are the screenshots: http://prntscr.com/m66io7 and http://prntscr.com/m66ayq.

As you can see it's not working as you intended me to demonstrate.
I am sorry, but would you please explain more detailed so that I can integrate your test code into a page properly?

Thank you very much.

Posted by: Christian J Jan 12 2019, 05:55 AM

QUOTE(Freddz @ Jan 12 2019, 10:29 AM) *

But I still don't understand e.g. why there is a button in the else part. Etc.

The database query should only run if a form has been submitted, so the first thing the PHP script does is check that. In pseudo-code:

CODE
if(the form was submitted)
{
    Run the database query (and maybe a confirmation message for the user). Show no HTML form.
}

If no form has yet been submitted (such as the first time the user loads the page), the PHP script instead displays the form. In pseudo-code:

CODE

else
{
    The form is not yet submitted, so the HTML form is shown on the page.
}

(It may seem counter-intuitive to use the ELSE condition the first time the page is loaded, but it's a more convenient way to write the PHP script.)

QUOTE
To show you the situation I put your first and afterwards your second php code part into a page into its (empty) form tags. So the second button 'Abschicken' is its send button (with Name='Absenden').

Now I can press both buttons in each case but nothing happens - like I expected.

These are the screenshots: http://prntscr.com/m66io7

Not sure I understood the above, but you don't need two submit buttons. Just make sure the button's NAME attribute value is the same as in the $_POST variable.

QUOTE
and http://prntscr.com/m66ayq.

This looks like a PHP syntax error, the PHP code is not supposed to appear on the page. Can you post the actual code you used here on the forum?

Posted by: Freddz Jan 12 2019, 09:34 AM

Hello Christian.

I think you think that my form page is described by php code. But it is not. It is pure HTML code only.
And I just put your two code samples from above into the form page. That's it.

Let's give you a simple example of my form page with just one select element and your first code sample (which does not contain syntax errors):
++++++++++++++++++++++++++++++++++++
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</HEAD>

<BODY NOF="(MB=(DefaultMasterBorder, 150, 51, 66, 0), L=(KontaktLayout, 849, 452))">
<DIV ID="LayoutLYR"><LAYER ID="LayoutLYR" TOP=0 LEFT=0 VISIBILITY=INHERIT WIDTH=915 HEIGHT=653 Z-INDEX=1><DIV ID="Text39LYR" CLASS="TextObject"><LAYER ID="Text39LYR" VISIBILITY=INHERIT TOP=190 LEFT=81 WIDTH=801 HEIGHT=38 Z-INDEX=1>
</LAYER></DIV><DIV ID="Tabelle4LYR" STYLE="background-color: rgb(217,217,217);"><LAYER ID="Tabelle4LYR" VISIBILITY=INHERIT TOP=249 LEFT=104 WIDTH=746 HEIGHT=272 Z-INDEX=2 bgcolor="#D9D9D9">
<FORM NAME="Tabelle4FORMULAR" METHOD=POST>
<TABLE ID="Tabelle4" BORDER=0 BGCOLOR="#D9D9D9" CELLSPACING=3 CELLPADDING=1 WIDTH="100%">

<?php
if(isset($_POST['Absenden']))
{
// put form handler script here
echo "Form was submitted.";
}

else
{
?>
Form is not submitted.

<form method="post">
<INPUT TYPE=SUBMIT NAME="Absenden">
</form>

<?php
}
?>

<TR>
<TD>
<P>&nbsp;</P>
</TD>
<TD WIDTH=136>
<P><B>Thema:</B></P>
</TD>
<TD WIDTH=253>
<P>
<SELECT ID="Auswahlfeld1" NAME="Auswahlfeld1" required>
<OPTION VALUE="" SELECTED>/ Thema wählen /</OPTION>
<OPTION VALUE="1">Option 1</OPTION>
<OPTION VALUE="2">Option 2</OPTION>
<OPTION VALUE="3">Option 3</OPTION>
<OPTION VALUE="4">Option 4</OPTION>
<OPTION VALUE="5">Option 5</OPTION>
</SELECT>
</P>
</TD>
<TD WIDTH=299>
</TR>
<TR>
<TD>
<P>&nbsp;</P>
</TD>
<TD>
<P>&nbsp;</P>
</TD>
<TD WIDTH=253>
<P STYLE="text-align: center;"><INPUT TYPE=SUBMIT NAME="Absenden" VALUE="Abschicken" ID="Schaltflaeche1"></P>
</TD>
<TD>
<P>&nbsp;</P>
</TD>
<TD>
<P>&nbsp;</P>
</TD>
</TR>

</TABLE>
</FORM>
</BODY>
</HTML>
+++++++++++++++++++++++++++++++

Goal is again:
If select box is not selected you get a notification (works fine already) and 'else' option should be taken.
If it is selected the 'if' option should be taken which will contain the php code script later for saving the select box value to database.

Posted by: Christian J Jan 12 2019, 02:14 PM

QUOTE(Freddz @ Jan 12 2019, 03:34 PM) *

Let's give you a simple example of my form page with just one select element and your first code sample (which does not contain syntax errors):

You can't nest forms inside each other. Instead, put all of your existing HTML form in the ELSE:

CODE
<?php
if(isset($_POST['Absenden']))
{
    // Put form handler script here.
    echo '<p>The form was submitted.</p>';  
}

else // The form is not yet submitted
{
?>
<FORM NAME="Tabelle4FORMULAR" METHOD=POST>
...
</FORM>
<?php
}
?>


As a sidenote, the LAYER element is ancient. It was only supported by the Netscape4 browser back in the 1990s, and is probably ignored by all other browsers. See also http://www.blooberry.com/indexdot/html/tagpages/l/layer.htm

Posted by: Freddz Jan 14 2019, 07:48 AM

Hello Christian.
Thank you very much.
But once again your code begins with <?php again. I don't have a php file of the page. My page file has the extension .html, and not .php.
So could you please solve with me this situation by keeping my main structure like sent at last? This was the main condition of my request.
Maybe then I will have to use Ajax to execute the dbinsert php code and will have to use the event 'onSubmit'. I mentioned this in my very first message.

Why shouldn't this be possible as well?...

Posted by: Christian J Jan 14 2019, 09:53 AM

QUOTE(Freddz @ Jan 14 2019, 01:48 PM) *

But once again your code begins with <?php again. I don't have a php file of the page. My page file has the extension .html, and not .php.

If you don't want to change the file extension, you can easily configure your server to run PHP in files with .html extensions too. Usually this is done with a .htaccess directive, a few are mentioned here: https://stackoverflow.com/questions/4687208/using-htaccess-to-make-all-html-pages-to-run-as-php-files --but, since your current path is "../cgi-bin/DBinsert.php" maybe you currently only runs PHP as CGI? Ask your web host support what applies in your case.

You might also load the form and PHP script page from "../cgi-bin/DBinsert.php" in an IFRAME in the .html parent page.

QUOTE
Maybe then I will have to use Ajax to execute the dbinsert php code and will have to use the event 'onSubmit'. I mentioned this in my very first message.

Why shouldn't this be possible as well?...

Yes Ajax can also be used, forum member http://forums.htmlhelp.com/index.php?showuser=19088 is better at that than me. Personally I think Ajax is an unnecessary complication for this, though.

Posted by: Freddz Jan 14 2019, 11:54 AM

So from your side you just cannot send me a solution which just keeps my basic structure?...:
A classic html page with client-verification = attribute 'required' which uses php ONLY for a db insert process?

I suppose Ajax is only necessary if I want to use/start a separate php file JUST for the db insert process (but not for building a whole page), isn't it?
But if I integrate this php code into an HTML form Ajax might even be avoided!?
So THIS solution I was asking for...

So you cannot help me here? But I should ask CharlesEF anyway?
Is your suggestion that I should write him a direct message?...

Posted by: CharlesEF Jan 14 2019, 12:52 PM

I posted a $_GET Ajax example a couple of weeks ago. See post #14 in this http://forums.htmlhelp.com/index.php?showtopic=59732&pid=136612&st=0&#entry136612. If you need a $_POST Ajax example just post back.

Posted by: Christian J Jan 14 2019, 01:05 PM

QUOTE(Freddz @ Jan 14 2019, 05:54 PM) *

So from your side you just cannot send me a solution which just keeps my basic structure?...:
A classic html page with client-verification = attribute 'required' which uses php ONLY for a db insert process?

If you want to keep your structure it seems you must either load "../cgi-bin/DBinsert.php" in an iframe or call it with Ajax.

QUOTE
I suppose Ajax is only necessary if I want to use/start a separate php file JUST for the db insert process (but not for building a whole page), isn't it?

Yes, Ajax or an iframe.

QUOTE
But if I integrate this php code into an HTML form Ajax might even be avoided!?

Yes. For example, use this in the HTML form page:

CODE
<iframe name="foo"></iframe>
<FORM NAME="Betrugseingabe" ACTION="../cgi-bin/DBinsert.php" METHOD=POST target="foo">

If you also want a success message, "../cgi-bin/DBinsert.php" must create it as an HTML page in the iframe. But if you use Ajax instead of an iframe you may have greater control over where to place the success message.

Posted by: Freddz Jan 14 2019, 01:58 PM

I meanwhile think the basic question ist just a simple one here:
How can be detected that the 'required' attribute is fulfilled? (that any mandatory field is set) I suppose that there is a page submission as soon as 'required' is fulfilled from all the field elements. Isn't that correct??

So then the php script to make an db insert has to be started. That's it, isn't it?
So isset should not be really necessary!?...

Instead shouldn't e.g. the following architecture generally work then?...
+++++++++++++++++++++++++++++++++++++++++++
<script>
function DBinsert(){
<?php
echo "Form was submitted. Place the DBinsert code here!";
?>
alert("Field data saved successfully!...");
}
</script>

<form id="myForm" method="POST" action="" onSubmit="DBinsert();">

<select id="choice" name="choice[]" multiple required>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>

<input type="submit" name="btnsubmit">
</form>
+++++++++++++++++++++++++++++++++++++++++++
Action="" means that success message is not shown on another page. Instead a function is executed via onSubmit event which contains the DBinsert php script.
So why shouldn't that work fulfilling all my client-side conditions, Christian?...

Note: Of course you could use isset instead of onSubmit as well, replacing function DBinsert by isset's if condition!?...

Please let me know which mistake I do here.

Posted by: CharlesEF Jan 14 2019, 02:19 PM

If you want to make sure your required fields are not blank before you submit the form then all you have to do is click the Submit button. The browser will alert you if any fields are blank. If any fields are blank then the form will not submit.

Also, 'onSubmit' isn't a valid form attribute, well it is a valid event. Get rid of it. The action attribute is where you need to place the path and script name of the PHP script to process the submit.

How exactly do you want the form to behave once the submit is clicked?

Posted by: Christian J Jan 14 2019, 03:31 PM

QUOTE(Freddz @ Jan 14 2019, 07:58 PM) *

How can be detected that the 'required' attribute is fulfilled? (that any mandatory field is set)

The REQUIRED attribute just makes the browser check that the form field is not empty. If the field is empty, the browser refuses to submit the form. The REQUIRED attribute is only meant as an aid for the user/visitor, it should not be relied upon by site owners for security.

QUOTE
I suppose that there is a page submission as soon as 'required' is fulfilled from all the field elements. Isn't that correct??

To be exact: the browser then no longer refuses to let the user submit the form. But the user still needs to submit by himself...

QUOTE
So then the php script to make an db insert has to be started. That's it, isn't it?

If you trust the user, yes (note that spam bots and malicious users can easily avoid the REQUIRED attribute).

QUOTE
So isset should not be really necessary!?...

In my example isset() was used to let the PHP script know if the form data should be written to the database, or if a HTML form should be created for the user. You could also use isset() to double-check the submitted form data.

QUOTE
Instead shouldn't e.g. the following architecture generally work then?...

Only if the "DBinsert code" is Ajax. If you don't use Ajax, the PHP script needs to know if the form is yet submitted or not --you don't want the PHP script to try to write to the database before the user has submitted the form...

QUOTE
a function is executed via onSubmit event which contains the DBinsert php script.
So why shouldn't that work fulfilling all my client-side conditions, Christian?...

It doesn't work because PHP runs on the server as soon as the URL is requested. Javascript runs in the browser after the page has been sent by the server, been loaded in the browser, and the user has fired the onsubmit event. The only way javascript can control when PHP is run is by using Ajax, or by using javascript to load a separate page (say in an iframe) that in turn contains PHP.

Posted by: Christian J Jan 14 2019, 03:36 PM

QUOTE(CharlesEF @ Jan 14 2019, 08:19 PM) *

Also, 'onSubmit' isn't a valid form attribute, well it is a valid event.

Isn't it both? https://www.w3.org/TR/html/sec-forms.html#example-5b22c23a unsure.gif

Posted by: CharlesEF Jan 14 2019, 04:44 PM

QUOTE(Christian J @ Jan 14 2019, 02:36 PM) *

QUOTE(CharlesEF @ Jan 14 2019, 08:19 PM) *

Also, 'onSubmit' isn't a valid form attribute, well it is a valid event.

Isn't it both? https://www.w3.org/TR/html/sec-forms.html#example-5b22c23a unsure.gif

Yes, it is. I was trying to tell the OP that is wasn't needed. Just use the action attribute.

Posted by: Freddz Jan 14 2019, 06:09 PM

Hello Charles.
Thank you for your time!
My goal is:
1) The 'required' verification process like you described before (works fine already).
2) If form element is selected a php script (file) should be executed (to save the form data into a database (script works fine already!) and
3) a success window/message should be shown (NOT in a separate page!).

This is why I left the action attribute empty but used the event onsubmit.

Posted by: Freddz Jan 14 2019, 06:23 PM

Would you please show me the code that uses Ajax? This way this problem should be solved.

Posted by: CharlesEF Jan 14 2019, 09:19 PM

QUOTE(Freddz @ Jan 14 2019, 05:23 PM) *

Would you please show me the code that uses Ajax? This way this problem should be solved.

I can post another AJAX example but I need to know if the PHP script uses $_GET or $_POST method. I 'assume' it uses $_POST but I want to double check. You should know that if you use ajax then you must write code to validate any required fields and you will need to clear the fields once the PHP script is done. As for the success window/message that depends on how the PHP script was written. Can you attach the file or post the code?

Posted by: Freddz Jan 15 2019, 02:14 AM

Hello Charles.
Yes, I use POST.
The PHP script is written like this:
++++++++++++++++++++++
$conn = new mysqli(...);
$sql = "INSERT INTO ... VALUES ('" . $_POST["Name"] . "', '" ... );"
$conn->query($sql);
++++++++++++++++++++++

I can put this script also into the HTML form page code if it is more difficult with a php file.

But as I said: Main condition is that the fields are validated by attribute 'required' !! I assume that such a solution should exist!
If this regardless isn't possible I begin to ask myself why this attribute is existing. My process (saving the form data to a database afterwards) is really a standard one!!

I also expected that if a page is been submitted that the form elements are resetted. However, to reset them manually wouldn't be a problem.

Posted by: Freddz Jan 15 2019, 02:32 AM

If it means that we cannot use a function (javascript) because in this function a php code cannot be implemented directly but just via Ajax (which limits the possibilities) we still could use isset instead, couldn't we?
Cause then we may not need a function but can put the isset php code directly into the HTML code anywhere, right?...

Posted by: Freddz Jan 15 2019, 03:52 AM

Ah, this is also not possible, right?
isset can only be used within a php page file but cannot be nested into a html file!?.

I once created the site with Netobjects Fusion Elements. This doesn't support php page files but only html pages.
So do I only have the chance to use cgi script code to save form data of an html page file into a database (if I want to continue to work with NOF)?...

Or I have to use the action attribute to execute a php code but then have to accept that the success message cannot be displayed by a simple alert message window but only by a separate new page that "Action='dbinsert.php'" created?...

Posted by: Christian J Jan 15 2019, 07:03 AM

QUOTE(Freddz @ Jan 15 2019, 08:14 AM) *

$sql = "INSERT INTO ... VALUES ('" . $_POST["Name"] . "', '" ... );"

The above is very dangerous, to avoid SQL injection exploits you should never use raw form data (such as $_POST) in the database query before sanitizing it. The sanitation must be done by the PHP script, not by the HTML form.

QUOTE

I can put this script also into the HTML form page code if it is more difficult with a php file.

I think that would be the simplest solution.

QUOTE

But as I said: Main condition is that the fields are validated by attribute 'required' !! I assume that such a solution should exist!

Yes, but it only works on the client-side (the browser), so it can't be trusted for security.

QUOTE

If this regardless isn't possible I begin to ask myself why this attribute is existing.

It's just meant as a convenience for users. As https://www.w3.org/TR/html/sec-forms.html#clientside-form-validation says, it "allows the user to avoid the wait incurred by having the server be the sole checker of the user’s input."

QUOTE(Freddz @ Jan 15 2019, 08:32 AM) *

If it means that we cannot use a function (javascript) because in this function a php code cannot be implemented directly but just via Ajax (which limits the possibilities) we still could use isset instead, couldn't we?
Cause then we may not need a function but can put the isset php code directly into the HTML code anywhere, right?...

Yes, but then you must submit the whole page (like in my first suggestion), so that the PHP can run on the server.

QUOTE(Freddz @ Jan 15 2019, 09:52 AM) *

Ah, this is also not possible, right?
isset can only be used within a php page file but cannot be nested into a html file!?.

PHP can be used in a .html file (if you configure the server that way). But PHP always run on the server before the file is sent to the browser (except when using Ajax).

QUOTE

I once created the site with Netobjects Fusion Elements. This doesn't support php page files but only html pages.
So do I only have the chance to use cgi script code to save form data of an html page file into a database (if I want to continue to work with NOF)?...

I don't know, but in general I advice against using WYSIWYG editors like these.

QUOTE

Or I have to use the action attribute to execute a php code

I assume you mean using different URLs for the form and PHP script?

QUOTE

but then have to accept that the success message cannot be displayed by a simple alert message window but only by a separate new page that "Action='dbinsert.php'" created?...

If the PHP page is loaded in an iframe, you can still make it produce an alertbox if that's what you want.

Posted by: Freddz Jan 15 2019, 09:23 AM

See, Christian, we meanwhile have discussed about 4 or 5 methods an implementation could be done. Obviously at each method there is at least one disadvantage not fulfilling my early conditions. Isn't it?

It seems as if not even one of the following 4 can be used for my wished, quick solution!?...
1) If Action<>"" (Action ="dbinsert.php", the php file JUST contains the SQL commands!!) then a NEW page shows the success message.
2) If onsubmit is used in the form tag to execute a Javascript function which should contain the php script this is not allowed.
3) If using Ajax (to execute php code within a HTML page) attribute 'required' of the input elements cannot be used.
4) If isset is used to execute a php code within an html page file (on page submission) this is not allowed.

Is this summary correct so far??...

Only version 1 seems to work by fulfilling the 2 main conditions:
* using the attribute 'required' to make the client-sided validation
* afterwards using my php dbinsert code. (probably without page change)

See, this/my site is not a big and critical one. No big or confidential data in db.
And I want to finish this site quick - at least a first rough version. It can have some unsecurity.

Main point: It should work (by fulfilling the 2 conditions above) and it should be configurable at Netobjects. It is not a permanent solution, Christian. IF this site will be successful I (or any better programmer than me) will improve it anyway!

So you must not ask me about my code wishes. I just wish a working version fulfilling the upper conditions! That's it.
So which is your final suggestion fitting most, and forgetting your additional security considerations?...

Posted by: Christian J Jan 15 2019, 12:33 PM

QUOTE(Freddz @ Jan 15 2019, 03:23 PM) *

Obviously at each method there is at least one disadvantage not fulfilling my early conditions. Isn't it?

"Disadvantage" doesn't mean it's impossible. Number 1, 3 and 4 are quite possible to do with a little work.

QUOTE
1) If Action<>"" (Action ="dbinsert.php", the php file JUST contains the SQL commands!!) then a NEW page shows the success message.

Why not load dbinsert.php in an iframe on the form page, and let dbinsert.php write out the success message? That way the message will appear inside the iframe.

QUOTE
2) If onsubmit is used in the form tag to execute a Javascript function which should contain the php script this is not allowed.

Correct, javascript can't run PHP (except with Ajax).

QUOTE
3) If using Ajax (to execute php code within a HTML page) attribute 'required' of the input elements cannot be used.

It can: REQUIRED works with onsubmit, javascript and Ajax.

QUOTE
4) If isset is used to execute a php code within an html page file (on page submission) this is not allowed.

It is allowed: you can use isset and PHP if the form submission reloads the same page (such as when using ACTION=""). All it requires is enabling PHP in .html files, which is normally simple to do (ask your web host support).

(Here's another idea: 5) why not use my isset script, but at "../cgi-bin/DBinsert.php" from the start? That is, the user goes to DBinsert.php, fills out the form there, and when the form is submitted DBinsert.php writes to the database.)

QUOTE
See, this/my site is not a big and critical one. No big or confidential data in db.
And I want to finish this site quick - at least a first rough version. It can have some unsecurity.

It's up to you, but malware bots are continuously testing random sites for all kinds of known vulnerabilities. So a site doesn't need to be big to be a target. And even if your database contains nothing important it can still be manipulated to post malware on your web site, in which case search engines may blacklist it until you remove the malware.

QUOTE
So which is your final suggestion fitting most, and forgetting your additional security considerations?...

I'd use number 4, like I've said all along. tongue.gif Can't say what works with Netobjects though.

Posted by: CharlesEF Jan 15 2019, 01:58 PM

Attached is an example of a $_POST Ajax function. It uses the 'onsubmit' event of the form. This allows the browser to handle all required elements and only perform the ajax call once all elements are filled in. Most modern browsers support this code but IE requires version 10 minimum. Also, IIS web server doesn't allow POST requests from HTML pages without making a configuration change.
Attached File  ajax_post.html ( 1.42k ) Number of downloads: 500

Posted by: Freddz Jan 15 2019, 02:17 PM

I assume your solution 5 cannot be used as Netobjects (NOF) doesn't support php files. (I would like to work at this site with NOF yet. However, I am just trying the free tool 'Blue Griffon' now...)
Now solution 3 could be an option as well. Cause before I understood from Charles' sentence "if you use ajax then you must write code to validate any required fields" I understood that attr. required is ignored here. But now you say it is not...

However, version 4 seems to be the best solution now. I agree to you.
Cause before I tried this version already but failed. Now you said that it may be my Apache configuration. VERY important!! Thanks. I will check that asap now...
If so this problem would have a quite simple solution then. Very fine. But it was a quite long way to here... ;-)

To your last alarming remarks about security. I doubt that I could edit this with NOF as well. However, I then would have to do it manually soon after version 4. So would you please show me already now by short code samples which kind of secure implementation (form page and db save process) would be satisfying here?

Thank you very very much, Christian! You are doing a VERY good 'job' with me !!!!!

Posted by: Christian J Jan 15 2019, 03:50 PM

QUOTE(Freddz @ Jan 15 2019, 08:17 PM) *

I assume your solution 5 cannot be used as Netobjects (NOF) doesn't support php files.

But ../cgi-bin/DBinsert.php is a PHP file already, yes? unsure.gif The only difference is that my PHP script would also output HTML code.

QUOTE
Now solution 3 could be an option as well. Cause before I understood from Charles' sentence "if you use ajax then you must write code to validate any required fields" I understood that attr. required is ignored here. But now you say it is not...

Maybe Charles meant that you should validate in the PHP script as well. unsure.gif

QUOTE
However, version 4 seems to be the best solution now. I agree to you.
Cause before I tried this version already but failed. Now you said that it may be my Apache configuration. VERY important!! Thanks. I will check that asap now...
If so this problem would have a quite simple solution then. Very fine. But it was a quite long way to here... ;-)

See also post #15... wink.gif

QUOTE
To your last alarming remarks about security. I doubt that I could edit this with NOF as well.

It's done in the PHP script.

QUOTE
So would you please show me already now by short code samples which kind of secure implementation (form page and db save process) would be satisfying here?

It may depend a little on your form fields. If you only use a SELECT menu, you might compare the user's submitted form data with a whitelist of allowed values (say only integers 1-5). If you have text fields it becomes trickier, this might be a start: http://php.net/manual/en/mysqli.real-escape-string.php

However I suspect Charles (or almost anyone) is better at this than me, so it's probably best I don't go into detail.

QUOTE
Thank you very very much, Christian! You are doing a VERY good 'job' with me !!!!!

You're welcome!

Posted by: CharlesEF Jan 15 2019, 03:53 PM

I forgot to say that you didn't post enough 'DBinsert' code for me to tell if you will get a response back from the ajax call. Also, in the 'DBinsert.php' file you should check to make sure every value needed is supplied in the $_POST array before doing the database insert.

Posted by: Freddz Jan 18 2019, 07:36 AM

To solution 1: The idea with the iFrames is a good one. Unfortunately NOF does not seem to support iFrames.

To solution 3: See my answer to Charles.

To solution 4: This seems to be the easiest solution. But I didn't had time to ask my server provider yet... Will come back to this point soon.

To solution 5: I understood that the form page infos are within the dbinsert.php file. So you JUST work with this file but don't habe any html at all. But NOF doesn't support that. Did I misunderstand you here?

Posted by: Freddz Jan 18 2019, 09:13 AM

QUOTE(CharlesEF @ Jan 15 2019, 09:53 PM) *

I forgot to say that you didn't post enough 'DBinsert' code for me to tell if you will get a response back from the ajax call. Also, in the 'DBinsert.php' file you should check to make sure every value needed is supplied in the $_POST array before doing the database insert.


Thank you very much, Charles. Your code is working fine! However, I don't understand the function onsubmit that good. But I will double check it soon by reading about it. I just havn't much time right now, unfortunately.
Additional form elements I would add just by additional code lines of "formData.append(....", right?
I tried that and it worked fine...

So thank you very much again!!!
I will see which solution is better to integrate into NOF now, sol. 3 or 4...

Posted by: Christian J Jan 18 2019, 12:44 PM

QUOTE(Freddz @ Jan 18 2019, 01:36 PM) *

To solution 1: The idea with the iFrames is a good one. Unfortunately NOF does not seem to support iFrames.

That NOF version must be really old then. Can't you add just the iframe HTML manually (with a text editor)?

QUOTE
To solution 4: This seems to be the easiest solution. But I didn't had time to ask my server provider yet... Will come back to this point soon.

Or maybe it's enough to rename the form page to something like "example.php" to make PHP code run in it?

QUOTE
To solution 5: I understood that the form page infos are within the dbinsert.php file. So you JUST work with this file

Yes it's exactly the same as solution 4, except that the URL is different.

QUOTE
but don't habe any html at all.

It does have HTML, but it only prints the form before it's submitted, and only prints the success message after the form is submitted.

QUOTE
But NOF doesn't support that.

You will have to write the combination of PHP and HTML yourself, of course.


Posted by: CharlesEF Jan 18 2019, 02:37 PM

QUOTE(Freddz @ Jan 18 2019, 08:13 AM) *

Additional form elements I would add just by additional code lines of "formData.append(....", right?

Yes, that is correct. As for security, since you are using 'mysqli' you should use parameterized queries. That will help guard against malicious sql code.
As for NOF, I would never design a website based on the limitations of software. But I don't use any program to write any of my code.

Posted by: Freddz Jan 21 2019, 06:52 AM

Yes, I know that I have to edit the generated file afterwards to e.g. realise iFrame support. However, it is nerving to do that any time you modify this page.
That's why I am prefering a solution that forces manual modifications as less as possible.
So that's why I am currently concentrating on solution 4.

Unfortunately this doesn't work yet.
What I did:
I added an .htaccess file in the html folder with the line:
"AddType application/x-httpd-php .html .htm" and set in the /etc/apache2/apache2.conf file the AllowOverride option from 'none' to 'all':
<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>

But my test page of the isset function is still not working.
What I couldn't find yet:
1) A proof command if the above apache config file really is the right one. Cannot find an apache command for asking its config file to be totally sure.
2) Cannot find an apache proof command for asking its current override setting.
Points 1 and 2 for making sure that override is really working...
3) Maybe there is still a mistake at my page file!?... Therefore I copied it below to this message for you.
I would appreciate it if you could have a quick look...

Thank you so much for your continuous help !!!

Here is the isset page code:
++++++++++++++++++++++++++++++++++++++++++++++++
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</HEAD>

<BODY NOF="(MB=(DefaultMasterBorder, 150, 51, 66, 0), L=(KontaktLayout, 849, 452))">
<DIV ID="LayoutLYR"><LAYER ID="LayoutLYR" TOP=0 LEFT=0 VISIBILITY=INHERIT WIDTH=915 HEIGHT=653 Z-INDEX=1><DIV ID="Text39LYR" CLASS="TextObject"><LAYER ID="Text39LYR" VISIBILITY=INHERIT TOP=190 LEFT=81 WIDTH=801 HEIGHT=38 Z-INDEX=1>
</LAYER></DIV><DIV ID="Tabelle4LYR" STYLE="background-color: rgb(217,217,217);"><LAYER ID="Tabelle4LYR" VISIBILITY=INHERIT TOP=249 LEFT=104 WIDTH=746 HEIGHT=272 Z-INDEX=2 bgcolor="#D9D9D9">
<FORM NAME="Tabelle4FORMULAR" METHOD=POST>

<?php
if(isset($_POST['Absenden']))
{
// put form handler script here
echo "Form was submitted (field data saved successfully)!...";
}
else
{
echo "Form was not submitted.";
}
?>

<TABLE ID="Tabelle4" BORDER=0 BGCOLOR="#D9D9D9" CELLSPACING=3 CELLPADDING=1 WIDTH="100%">
<TR>
<TD>
<P> </P>
</TD>
<TD WIDTH=136>
<P><B>Thema:</B></P>
</TD>
<TD WIDTH=253>
<P>
<SELECT ID="Auswahlfeld1" NAME="Auswahlfeld1" required>
<OPTION VALUE="" SELECTED>/ Thema wählen /</OPTION>
<OPTION VALUE="1">Option 1</OPTION>
<OPTION VALUE="2">Option 2</OPTION>
<OPTION VALUE="3">Option 3</OPTION>
<OPTION VALUE="4">Option 4</OPTION>
<OPTION VALUE="5">Option 5</OPTION>
</SELECT>
</P>
</TD>
<TD WIDTH=299>
</TR>
<TR>
<TD>
<P> </P>
</TD>
<TD>
<P> </P>
</TD>
<TD WIDTH=253>
<P STYLE="text-align: center;"><INPUT TYPE=SUBMIT NAME="Absenden" VALUE="Abschicken" ID="Schaltflaeche1"></P>
</TD>
<TD>
<P> </P>
</TD>
<TD>
<P> </P>
</TD>
</TR>

</TABLE>
</FORM>
</BODY>
</HTML>
+++++++++++++++++++++++++++++++++++++++++++++++

Posted by: Freddz Jan 21 2019, 07:13 AM

Afterwards I tested your last suggestion, Christian, to rename the page file from .html to .php for testing. And SURPRISE:
This works!!
So it seems as if the page code is okay but Apache is still not configured correctly (of course I didn't forget to restart it)!...

So we just may have to clarify my points 1 and 2 above!?...

Posted by: Christian J Jan 21 2019, 11:09 AM

QUOTE(Freddz @ Jan 21 2019, 12:52 PM) *

I added an .htaccess file in the html folder with the line:
"AddType application/x-httpd-php .html .htm"

Without the quotes I hope? In any case, the exact directive can be very different depending on how Apache is configured. Asking the web host should be the easiest approach.

QUOTE
and set in the /etc/apache2/apache2.conf file

Are you running your own server? AFAIK you sually don't have access to that file on shared hosts? unsure.gif

QUOTE
Afterwards I tested your last suggestion, Christian, to rename the page file from .html to .php for testing. And SURPRISE:
This works!!
So it seems as if the page code is okay but Apache is still not configured correctly (of course I didn't forget to restart it)!...

Good! happy.gif I wouldn't say it's configured incorrectly though, it's just a matter of preference. If you want you can simply keep using the .php extension, that's what most sites do (including this forum).

Posted by: Freddz Jan 21 2019, 05:27 PM

My code is okay, isn't it?...

Yes, I have a root server. However, it was basically installed by the provider and I am not a web specialist. Could you clarify the points 1 and 2 above maybe?...
It is just to see what the current apache configuration is.
Unfortunately it seems as if it is not possible to check apache via command line for its current configs, is it?

I don't like to have a mixture of php and html files. Don't want to run away from that little apache config problem...

What do you mean by "It is just a matter of preference"?
Shouldn't the current code work fine if the internal php code will be interpreted/cared?...

Posted by: Christian J Jan 22 2019, 05:55 AM

QUOTE(Freddz @ Jan 21 2019, 11:27 PM) *

My code is okay, isn't it?...

The PHP yes, otherwise it wouldn't work with a .php extension either. (It's not valid HTML4 though, but that doesn't affect PHP.)

QUOTE
Could you clarify the points 1 and 2 above maybe?...
It is just to see what the current apache configuration is.
Unfortunately it seems as if it is not possible to check apache via command line for its current configs, is it?

Sorry I don't know. Maybe this could work: https://stackoverflow.com/questions/27152943/how-can-i-view-the-complete-httpd-configuration
You can also get a lot of PHP configs with http://php.net/manual/en/function.phpinfo.php

QUOTE
I don't like to have a mixture of php and html files. Don't want to run away from that little apache config problem...

Again, the easiest is to ask the provider. There are lots of different .htaccess directives used for this, depending on how Apache is used.

QUOTE
What do you mean by "It is just a matter of preference"?
Shouldn't the current code work fine if the internal php code will be interpreted/cared?...

Yes. By default, the PHP engine is only used for files with .php extensions. But you can change this in the preferences to .html, .foo or whatever extension you like.


Posted by: Freddz Feb 12 2019, 11:58 AM

QUOTE(CharlesEF @ Jan 15 2019, 09:53 PM) *

I forgot to say that you didn't post enough 'DBinsert' code for me to tell if you will get a response back from the ajax call. Also, in the 'DBinsert.php' file you should check to make sure every value needed is supplied in the $_POST array before doing the database insert.


Hello CharlesEF,

I meanwhile tested your Ajax code (s. #33) in detail. And now I realised that a new recordset is created but the data are NOT inserted into the database.
So it seems as if I still have to modify s.th. at my dbinsert.php file for this Ajax usage although it works fine when used for a usual access via HTML.
However, I am sure that all the $_POST values which are needed for the SQL insert command are appended in the array handed over.
Here is the whole code of dbinsert.php for you:
+++++++++++++++++++++++++++++++++++++++
$servername = "localhost";
$username = "xyz";
$password = "abc";
$dbname = "name";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$sql = "INSERT INTO Interessenten (Name, Email, Telefon, ....)
VALUES ('" . $_POST["Name"] . "', '" . $_POST["Mail"] . "', '" . $_POST["Telefon"] . "', '" . ..... "', '" . date("Y-m-d") . "')";

if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>
+++++++++++++++++++++++++++++++++++++++

So do you see the reason why the sql insert command is still not successful?
(Remark: I suppose that the order of data elements in the appended string must not be the same than the one in the sql command...)

This is the append code:
var formData = new FormData();
formData.append(document.getElementsByName("Name").id, document.getElementsByName("Name").value);
formData.append(document.getElementsByName("Mail").id, document.getElementsByName("Mail").value);
formData.append(document.getElementsByName("Telefon").id, document.getElementsByName("Telefon").value);
...

By the way how could I debug this process so that I would get a useful error message of this fault?...

Posted by: CharlesEF Feb 13 2019, 01:07 AM

The main problem I see is your use of 'getElementsByName'. That function returns an array and your code isn't written to handle arrays. You should use 'getElementById' instead. Each element in the <form> should have both an 'id' and a 'name' attribute. The 'id' can be used by Javascript and the 'name' can be used by PHP.

As for errors, Javascript errors can be seen using your browsers 'Web Development Tools' or whatever your browser calls it. PHP errors can be found in the php error log, which by default should be in your tmp directory.

If you want to see the errors on the page you are working on then put these 2 lines of code, in a php block, at the top of the web document.

CODE
ini_set('display_errors', 'On');
error_reporting(E_ALL);

Posted by: Freddz Feb 13 2019, 11:13 AM

Oh thank you.
So I changed from ByName to ByID again. IDs of each form element fits to the append commands.

But now a new recordset is not even created when pressing send button.
I also inserted your two lines to get errors but nothing changed.
I also opend Chrome dev tools to get logs (s. http://prntscr.com/mkmtuk) but there are so many functions and I cannot find any logs about my send process.

So I still have no idea what the reason is that data are not saved to db or why formdata is not correctly handed over at 'ajax.send(formData);' to my dbinsert.php sql file.
I am frustrated...

Can you maybe instruct me in some way how I can find that out?
Do you know a good description to quickly learn the usage of Chrome dev tools?...

Posted by: CharlesEF Feb 13 2019, 12:01 PM

Nothing in 'dbinsert.php' jumps out at me, except the fact that you are open to SQL injection attacks. Since you use mysqli_* you should use parameterized queries. As written 'dbinsert.php' won't send a response when ajax is used. You say no PHP errors are shown? If correct, that means the problem is on the Javascript side. Post the entire ajax function.

I hate google so I can't help you with Chrome (to me Android and Chrome are nothing more than spyware) .

Posted by: Freddz Feb 13 2019, 09:59 PM

QUOTE(CharlesEF @ Feb 13 2019, 06:01 PM) *

Nothing in 'dbinsert.php' jumps out at me, except the fact that you are open to SQL injection attacks. Since you use mysqli_* you should use parameterized queries. As written 'dbinsert.php' won't send a response when ajax is used. You say no PHP errors are shown? If correct, that means the problem is on the Javascript side. Post the entire ajax function.

I hate google so I can't help you with Chrome (to me Android and Chrome are nothing more than spyware) .



My Android phone runs without GAPPS !
But Chrome runs really better and more reliable than Firefox...
I can use Firefox as well here, no problem...

There you are with the Ajax code. But I didn't change anything at your code...


Attached File(s)
Attached File  ajax_post___modified.html ( 1.03k ) Number of downloads: 330

Posted by: CharlesEF Feb 14 2019, 10:19 AM

I still see the same problem. You did change the command but you didn't use the command I posted. You used 'getElementByID' instead, which is an invalid command. The correct command should be 'getElementById'. Case does matter.

Posted by: Freddz Feb 15 2019, 01:34 PM

Ohhh, you are sooo great!!
Now it works !!!!
(didn't know that letter capital is that important!)

Thank you so much, Charles! You made s.o. VERY happy today!!
All the best to you!

PS: What would you suggest to me to learn this stuff asap?
Maybe any good tutorials?...
But best would be a good, almost free WYSIWYG editor for me, maybe.
(I also still have Dreamweaver CS6...)

Posted by: CharlesEF Feb 15 2019, 03:40 PM

Glad to hear you got it working (after shooting yourself in the foot, a couple of times).

The javascript errors will show up in the 'Web Console'. While I can't help you with Chrome debugger tools you should at least see the errors in the console.

As for tutorials, sorry I don't keep up with that. Your best tool is the Internet 'Search' feature. I also don't use any WYSIWYG editors either. I write my code by hand. So, can't help you with that.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)