1

i have developed a registration page but it has bugs.
1: due to empty value of radio, on submitting the undefined index error appears at at the bottom of the page.
2: on success full registration the page heads towards another page but (on click to go back) the values in the text boxes in the registration form such as name email radio doesn't rub out. i want the text boxes to be empty.

Here is the code.

<html>
    <head><title></title></head>
        <link href="blogsup.css" rel="stylesheet" type="text/css">
    <body>
         <div class="header">
         </div>
        <div class="main-body">
            <div class="div login-form">
                 <div class="sign-up">  
                    <center>Sign up</center>
                    <center><span id="error" style="color:darkred; font- 
family:lato; font-size:12px;"></span></center>
                </div>
            <form method="post">
                    <div class="login-form-password">
                        <font class="font-family">NAME</font><br>
                        <input class="textbox div" type="textbox" name="name" 
id="nametextbox"  Placeholder="Mac Kaleb"><br><br>
                        <font class="font-family">EMAIL</font><br>
                        <input class="textbox div" type="email" name="email" 
id="email"
                        Placeholder="example123@gmail.com"><br><br>
                        <font class="font-family">PASSWORD</font><br>
                        <input class="textbox div" type="password" 
 name="password" id="password" placeholder="Password">
                        <br><br>
                        <font class="font-family">CONFIRM PASSWORD</font><br>
                        <input class="textbox div" type="password" 
name="confirmpassword" id="confirmpassword" placeholder="Confirm password"> 
<br><br>
                        <font class="font-family">Gender</font><br>
                        <input type="radio" name="gender" id="gender" 
 value="Male">Male<br>
                        <input type="radio" name="gender" id="gender" 
 value="Female">Female
                    </div>
                    <input class="button cursor" type="submit" name="signin" 
  onclick="return check();" value="Create my account">
            </form> 
        </div>
    </div>
    </body>
</html>
<?php
$user='root';
$password='';
$db='blogsup';
$con=mysqli_connect('localhost' ,$user,$password,$db);
if(isset($_POST['signin'])){
 $name=$_POST['name'];
 $email=$_POST['email'];
 $password=$_POST['password'];
 $confirmpassword=$_POST['confirmpassword'];
 $gender=$_POST['gender'];
 $que="insert into registration (name,email,password,confirmpassword,gender) 
 values('$name','$email','$password','$confirmpassword','$gender')";
 $run=mysqli_query($con,$que);
  if($run){
  header('location:http://localhost/blogsup/login.php');
  }
   }
   ?>
<script type="text/javascript">
 var nametextbox = document.getElementById('nametextbox');
 var email = document.getElementById('email');
 var password= document.getElementById('password');
 var confirmpassword = document.getElementById('confirmpassword');
 var gender = document.getElementById('gender');
 var error = document.getElementById('error');
 function check(){
    if(nametextbox.value == "" || email.value == "" || password.value == "" 
  || confirmpassword.value == "" || gender.checked == false){       
    error.innerHTML = "<sup>*</sup>Fields cannot be blank.";
    return false;
     }
   }
 </script>
user3783243
  • 5,368
  • 5
  • 22
  • 41
  • 1
    Use parameterized queries. This is open to SQL injections. Hash the user passwords. Why are you storing the confirmation password? – user3783243 Jul 19 '18 at 21:38
  • _Small Note_ the `` tag is deprecated and you should not use it, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font – RiggsFolly Jul 19 '18 at 21:56
  • So you have to test if `$_POST['gender']` is set using `isset()` – RiggsFolly Jul 19 '18 at 21:58

1 Answers1

0

For the first bug: the second <center> that contains the error span is never closed with a </center>, thus everything else is part of the center element as well. Because of this, the span is styled after the JS adds contents to it, making it pop up below the rest of the center element.

Then there's the sheer amount of things in general wrong with this code that might be causing issues.

Self closing tags aren't closed. Tags like input, break and other single element tags should be self closing, like <input {attributes} /><br/>. Not breaking your page, but it's a common convention that makes the code a lot easier to read (especially because old browsers would use content between the <input> and </input> as default value)

Why use JS to validate the form contents? Form elements have a required attribute. For backwards compatibility it's required="required", that makes sure it's filled out.

For actual validation, use PHP to set the contents of the error property, because you can check the actual data and let someone fill it out again if illegal entries are used.

Use some sort of security before inserting anything into a database, or users can break it. Check the official PHP site for functions that help sanitize and secure input.

Please prevent plaintext passwords in your database (hashing, encrypting, even rot13 is better than this).

Why do you save the second password, but don't you compare the two passwords against eachother? This allows two different passwords to be used and it saves both (they should be the same, so it's redundant data).

Radio buttons have a checked attribute to define a default selected option, that prevents a lot of issues.

Why not add the error above the <div class="sign-up"> to make sure it appears above it?

Why is your database connection not closed? It's a simple call to mysqli_close() and it should always be done.

Addressing bug 2: I am not entirely sure, but your form has no action, so I think the page contents aren't actually reloaded. This is probably why the input fields don't get cleared. Set the action property of the form to action="#", that might fix it.

RivenSkaye
  • 440
  • 3
  • 13