Skip to main content
N
nicoled94356575
Known Participant
August 20, 2018
Answered

JavaScript versus PHP (not especially DW CC)

  • August 20, 2018
  • 2 replies
  • 534 views

I have investigated for a long time (too long) on the net (StackOverflow e.g.) without any success. The question is asked by many people but no one among the proposed solutions helps me. So in desperation, I turn to this forum, even though DW has nothing to do with it.

< form id =  "myForm" method =  "Post " action =  "updateMySQLGuests. php " onsubmit =  "return formSubmit () ">

This boolean result function checks whether the value of the fields is correct before calling UpdateMySQLGuests.php (for example, verify if the e-mail contains a “@”) to create a record with the value of these form fields by POST method in MySQL. But "action= updateMySQLGuests.php " is executed before the formSubmit() function (which, in fact, is not executed at all). I work in localhost with Wampserver.

Thanks in advance for answer.

This topic has been closed for replies.
Correct answer osgood_

In your function you are most probably not using 'return false' if there is a form error (a field you want the user to complete) so it allows anything through to the php form processing script.

Try the below code:

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>Form Validation</title>

</head>

<body>

<form id="myForm" method="Post "action="updateMySQLGuests.php "onsubmit="return formSubmit()">

<div>

<label for="name">Name</label><br>

<input type="text" name="name" class="name">

</div>

<div>

<label for="email">Email</label><br>

<input type="text" name="email" class="email">

</div>

<input type="submit" name="submit" value="Sumbit">

</form>

<script>

function formSubmit() {

const name = document.querySelector('.name').value;

/*check name form field is not empty */

if(name === '') {

alert('Please provide your name');

return false; 

}

const email = document.querySelector('.email').value;

/* check email form field is not empty */

if(email === '') {

alert('Please provide your email');

return false; 

}

/* check email provided is valid */

var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;

if (pattern.test(email)) {

return true;

} else {

alert('Invalid email address');

return false;

}

}

</script>

 

</body>

</html>

2 replies

WolfShade
WolfShade
Legend
August 20, 2018

To add to what osgood_ has said, I normally use a <button></button> tag to submit a form, instead of <input type="submit" />.  The button will call the function, then the function will submit the form if validation has been successful.

<script>// type is no longer needed, as javascript is assumed default.
function myFunction(){
     warn = "";
     {perform validation}
     if(warn !== ""){ //validation failed
          alert(warn);
          return false;
          }
     else{
          document.myForm.submit();
          }
     }
</script>
<form name="myForm" id="myForm" action="mySubmit.php">
  ...
<button onclick="return myFunction();">Submit</button>
</form>

HTH,

^ _ ^

N
nicoled94356575Author
Known Participant
August 20, 2018

Do not forget to specify method="post" in <form name="myForm" id="myForm" action="mySubmit.php">

I change well <input type="submit" value="post"/> into you suggested

<button onclick="return validateValues()">Submit</button>

And this works perfectly.

But there is another problem.

If I write <button onclick="return formSubmit()">Submit</button> in order to call inside formSubmit() a beforeSubmit() containing different validateValues(), 2(), 3()..., the cascading calls of formSubmit()=>beforeSubmit()=>validateValues() does not work as it does not go further than formSubmit(). Strange... I have to investigate. Maybe I made some ridiculous mistake.

<script type="text/javascript">

function beforeSubmit() {;

if (validateValues())

{

return validateValues2()

}

return false;

}

</script>

<script type="text/javascript">

function formSubmit() {

return beforeSubmit();

}

</script>

MANY THANKS IN ANY CASE!

N
nicoled94356575Author
Known Participant
August 20, 2018

The problem came from returning directly the boolean value of the function. Solution (strange solution):

<script type="text/javascript">

function beforeSubmit() {;

     if (validateValues() == true) {

          if validateValues2() == true) {

               return true;

          }

     }

     return false;

}

</script>

<script type="text/javascript">

function formSubmit() {

     if (beforeSubmit() == true) {

          return true;

     }

     return false;

}

</script>

O
osgood_Correct answer
Legend
August 20, 2018

In your function you are most probably not using 'return false' if there is a form error (a field you want the user to complete) so it allows anything through to the php form processing script.

Try the below code:

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>Form Validation</title>

</head>

<body>

<form id="myForm" method="Post "action="updateMySQLGuests.php "onsubmit="return formSubmit()">

<div>

<label for="name">Name</label><br>

<input type="text" name="name" class="name">

</div>

<div>

<label for="email">Email</label><br>

<input type="text" name="email" class="email">

</div>

<input type="submit" name="submit" value="Sumbit">

</form>

<script>

function formSubmit() {

const name = document.querySelector('.name').value;

/*check name form field is not empty */

if(name === '') {

alert('Please provide your name');

return false; 

}

const email = document.querySelector('.email').value;

/* check email form field is not empty */

if(email === '') {

alert('Please provide your email');

return false; 

}

/* check email provided is valid */

var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;

if (pattern.test(email)) {

return true;

} else {

alert('Invalid email address');

return false;

}

}

</script>

 

</body>

</html>

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices