CODEWITHSUNDEEP
javascriptphphtmlmysql
Nam Pham Hoang
Nam Pham Hoang

Reputation: 23

How can I transfer data from html to php in this case

<div id="background">
  <div class="form-group">
    <label for="usr" style="position:fixed;margin-top:180px;margin-left:900px;"><u>Account ID</u>:</label>
    <input type="text" placeholder="Enter your ID in here" class="form-control" id="usr" style="position:absolute;width:350px;margin-top:205px;margin-left:900px;">      
  </div>
  <div class="form-group">
    <label for="pwd" style="position:fixed;margin-top:230px;margin-left:900px;"><u>PIN</u>:</label>
    <input type="password" placeholder="Enter your PIN in here" class="form-control" id="pwd" style="position:absolute;width:350px;margin-top:255px;margin-left:900px;">
    <button type="submit" onClick="process_Login()" class="btn btn-default" style="font-weight:bold;font-family:Tahoma, Geneva, sans-serif;position:fixed;margin-left:1040px;margin-top:310px;width:100px;">Login</button>
    <button type="submit" class="btn btn-default" style="font-weight:bold;font-family:Tahoma, Geneva, sans-serif;position:absolute;margin-left:1150px;margin-top:310px;width:100px;">Sign Up</button>
  </div>
</div>

I have some problems with this code, I'm doing an ATM visual in web. I wanna transfer data from HTML file to PHP file, I know I have to use "form" but I don't know how to use it in this case, I also use "script" to solve if user enter an incorrect value.

<script>
  function process_Login() {
    var c = document.getElementById("usr").value;
    var d = document.getElementById("pwd").value;
    if (c.length == 0) {
      alert("ERROR: Your ID account is NULL");
    } else if (isNaN(c)) {
      alert("ERROR: Your ID must be number");
    }
  }
</script>

What will I do to fix it?

Upvotes: 2

Views: 109

Answers (3)

Tosif
Tosif

Reputation: 36

<div id="background">
 <div class="form-group">
<form method="post" id="dataForm">
<label for="usr" style="position:fixed;margin-top:180px;margin-left:900px;"><u>Account ID</u>:</label>
  <input type="text" placeholder="Enter your ID in here" class="form-control" id="usr" name="user" style="position:absolute;width:350px;margin-top:205px;margin-left:900px;">      
 </div>
 <div class="form-group">
   <label for="pwd" style="position:fixed;margin-top:230px;margin-left:900px;"><u>PIN</u>:</label>
   <input type="password" placeholder="Enter your PIN in here" class="form-control" id="pwd" name="pass" style="position:absolute;width:350px;margin-top:255px;margin-left:900px;">
   <button type="button" onClick="process_Login()" class="btn btn-default" style="font-weight:bold;font-family:Tahoma, Geneva, sans-serif;position:fixed;margin-left:1040px;margin-top:310px;width:100px;">Login</button>
   <button type="button" class="btn btn-default" style="font-weight:bold;font-family:Tahoma, Geneva, sans-serif;position:absolute;margin-left:1150px;margin-top:310px;width:100px;">Sign Up</button>
  </form>
</div>


//your javscript
 function process_Login() {
var c = document.getElementById("usr").value;
var d = document.getElementById("pwd").value;
if (c.length == 0) {
  alert("ERROR: Your ID account is NULL");
} else if (isNaN(c)) {
  alert("ERROR: Your ID must be number");
}

$.ajax({url:"your php page.php",type:'POST',data:$("#dataForm").serialize(),success: function(data){

    if(data==0){alert("No data Added");}
    }});

}

//on your php page
 <?php
 $user=$_POST['user'];
 $pass=$_POST['pass']; 
 //you database query for insert

 if($result)
 {
   echo "inserted";
 }
  else
 {
     echo 0;
 }
 ?>

Upvotes: 0

user3480964
user3480964

Reputation: 41

If you are doing a form, you will be posting it to your PHP script. Your inputs will need to have a name attribute, i.e,

<form action="myPHPLogin.php" method="post">
    <input type="text" placeholder="Do this.." name="username">

    <button type="submit">submit</button>
</form>

On your PHP script, you can access your fields with $_POST['username'] etc.

Upvotes: 1

Cichy
Cichy

Reputation: 109

You should create form like this:

<form action="file.php" method="post" onsubmit="return process_login()">
   <!-- your form code here -->
</for>

remember to delete onClick handler on your <input type="submit"> code and than your javascript code: 

<script type="text/javascript">
     function process_login(){
        var c = document.getElementById("usr").value;
        var d = document.getElementById("pwd").value;
        if(c.length==0){

           alert("ERROR: Your ID account is NULL");
           return false;

        } else if(isNaN(c)){

           alert("ERROR: Your ID must be number");
           return false;
        }
        return true;
      }
</script>

Upvotes: 0

Related Questions