PHP-Scraping - Submit a form for Javascript "onclick" via curl - php

I would call a javascript-Function on a Remote-Server via Curl + PHP. The Submit-Button is a div-Element and call a function in by 'onclick'.
Steps of Scraper:
1. Login
2. Save session
3. Call a secure-link with session
Question: How to submit a form for Javascript "onclick" via curl?
I would implement a PHP-Scraper for following form:
<script language="JavaScript" type="text/javascript">
function logon() {
if(document.forms['form1'].elements["USERNAME"].value==""){
alert('foo');
document.forms['form1'].elements["USERNAME"].focus();
return paxReturn(false);
}
if(document.forms['form1'].elements["PASSWORD"].value==""){
alert('foo');
document.forms['form1'].elements["PASSWORD"].focus();
return paxReturn(false);
}
if (mywindow!=null) {
showObjectWithSrvlt('paxInfo','LoginServlet');
}
if((mywindow==null)||(mywindow.closed)) {
var prm ='toolbar=no,titlebar=no,directories=no,menubar=no,resizable=yes,scrollbars=yes,width=900,height=600,top=0,left=0';
mywindow = window.open("",'bar',prm);
}
document.forms['form1'].target = 'bar';
try{
mywindow.resizeTo(screen.width,screen.height);
}catch(e) {}
document.forms['form1'].submit();
try{
mywindow.focus();
}catch(e) {}
document.forms['form1'].elements["USERNAME"].value="";
document.forms['form1'].elements["PASSWORD"].value="";
/* grecaptcha.reset(); */
}
</script>
<form name="form1" method="post" target="foo" action="foo.jsp">
<input class="FormText" type="hidden" name="clickedButton" id="clickedButton" value="">
<input class="FormText" type="hidden" name="paxInfo" id="paxInfo" value="">
<div class="col-lg-10 col-md-12">
<div class="card mask">
<br>
<br>
<table class="login-table-list">
<tbody><tr>
<td><div align="right">Username: </div></td>
<td><input type="text" name="USERNAME" value="" maxlength=" 20" size=" 18" class="InputText " id="USERNAME" autocomplete="OFF"></td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr>
<td><div align="right">Password: </div></td>
<td><b><input class="InputText" type="password" name="PASSWORD" size="18" value="" onkeypress="javascript:return login(event);" autocomplete="off"></b></td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr>
<td></td>
<td>
<div style="width:27%; float:left;" class="stdbtnnrmWithFrameNoImage login-btn" onclick="javascript: if (disableButtonContent(this,false)) { logon() } ">
Login
</div>
</td>
</tr>
</tbody></table>
<br>
<br>
</div>
</div>
</form>
Thanks in advance for your help!

Related

neither required nor pattern is working in html

I am trying to validate the mobile number, email, firstname and etc.. field by using required and pattern keyword but its not responding anything.
In my program there is one input field for mobile number if user has entered mobile number which is not stored in database, then registration page pops up and user should registered for further process and if they entered mobile number which is stored in database then random number is displayed, but when I am entering the values in registration form but it is not validating like I have return required keyword in input field but still its not responding.
Please help me out of this.
Below us my code:
HTML
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<body>
<div>
<form action = "#" method = "post" >
<div>
<legend >Login</legend>
<table id="verify_table" cellpadding="2" cellspacing="2" >
<tr>
<td> Mobile No. </td>
<td><input id="mob" type="tel" name="mobile" required pattern="\[7-9]{1}[0-9]{9}\" /></td>
<td><input type="button" name="verify" class="verify" value="Verify"></td>
</tr>
</table>
</div>
<div id="random" style="display: none;" >
<table id='random_table'>
<tr>
<td>Random Number generated</td>
<td id='rand'>
</tr>
</table>
</div>
<!--Register pop up-->
<div id="reg_light" class="white_content">
<div id="register-title">
<div id="reg-title">
<h6>Register</h6>
</div>
<div id="close">
<a href="javascript:void(0)" onclick="document.getElementById('reg_light').style.display='none';
document.getElementById('fade').style.display='none'; $('#firstname').val('');
$('#lastname').val('');
$('#mobile_number').val('');
$('#email').val('');">X</a>
</div>
</div>
<?php //echo form_open('register'); ?>
<div id="register-inner">
<form id="reg_form" method="POST">
<table id="register_table">
<tr><td><font color="red">* Fields are mandatory</font></td></tr>
<!--<form id="reg_form" onSubmit="return formValidation();">-->
<tr>
<table id="name">
<tr>
<td>First Name<font color="red">*</font></td>
<td><input id="firstname" type="text" placeholder="First Name" name="firstname" required pattern="[A-Za-z]+" ></td>
<td>Last Name<font color="red" >*</font></td>
<td> <input id="lastname" type="text" placeholder="Last Name" name="lastname" required pattern="[A-Za-z]+"></td>
</tr>
</table>
</tr>
<tr><td>&nbsp&nbsp</td></tr>
<tr>
<table id="gen">
<tr>
<td>Gender<font color="red">*</font></td>
<td><input type="radio" name="gender" value="Male"> Male</td>
<td><input type="radio" name="gender" value="Female"> Female</td>
</tr>
</table>
</tr>
<tr>
<table id="mob">
<tr>
<td>Mobile No.<font color="red">*</font></td>
<td><input id="mobile_number" type="text" placeholder="Mobile number" name="mobile_number" required pattern="[7-9]{1}[0-9]{9}" /></td>
<td>Email id<font color="red">*</font></td>
<td> <input id="email" type="email" placeholder="Email-id" name="email" required pattern="[A-Za-z]+[0-9]+#[A-Za-z]+.[A-Za-z]+"> </td>
</tr>
</table>
<table id="submit">
<tr>
<td id="errorBox"></td>
<td><input class="reg_data" id="submit" type="button" name="submit" value="Register"></td>
</tr>
</table>
</tr>
</table>
</form>
</div>
</body>
</html>
Here is my jQuery code
$(document).ready( function() {
$('.verify').click(function(){
var mob = $('#mob').val();
//alert(mob);
$.ajax({
url: "<?php echo base_url(); ?>/login/verify",
data: {'mob_no': mob},
type: "post",
cache: false,
success: function (data)
{
//alert(data);
var obj = $.parseJSON(data);
var fi="";
var otp="";
var rand="";
rand+=Math.floor(100000 + Math.random() * 99999);
$.each(obj, function()
{
fi=this['id'];
});
if(!fi=="")
{
//document.getElementById("random").innerHTML=random_number;
$('#rand').val(rand);
document.getElementById("rand").innerHTML=rand;
document.getElementById('random').style.display='block';
}
else
document.getElementById('reg_light').style.display='block';
document.getElementById('fade').style.display='block';
//alert(fi);
}
},
error: function (xhr, ajaxOptions, thrownError) {
//alert(thrownError);
}
});
});
});
Reset the form validation, after making the form visible
function resetFormValidator(formId) {
$(formId).removeData('validator');
$(formId).removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(formId);
}
For Dynamically created dom
Use
$(document).on('click','#id',function(){
// do somethings
})

Submitting two form using javascript but failed

i have been trying to Submit two form using javascript and failed. i have searched stackoverflow but none of the javascript works ...
also tried this Submit two forms with one button
here is my code ... my full page is very long so i have just pasted the two form code here ...
And each field of form1 (regForm) is required .. and form2 (frmAdd) contains a while
loop... both of them forms are different i guess... so any solution with javascript or any alternative with these forms ...
<script>
submitForms = function(){
document.forms["regForm"].submit();
document.forms["frmAdd"].submit();
}
</script>
<form action="userdata.php" method="post" name="regForm" id="regForm" >
<h2><em>Personal Details : </em></h2></br>
<table width="80%" border="0" cellpadding="3" cellspacing="3" class="forms">
<tr>
<td width="22%">NAME<span class="required"><font color="#CC0000">*</font></span></td>
<td width="78%">
<input name="full_name" type="text" id="full_name" size="40" value="<? echo $row_settings['full_name']; ?>" class="required"></td>
</tr>
<tr>
<td>FATHER'S NAME<span class="required"><font color="#CC0000">*</font></span></td>
<td>
<input name="f_name" type="text" id="f_name" size="40" value="<? echo $row_settings['f_name']; ?>" class="required"></td>
</tr>
<tr>
<td>MOTHER'S NAME<span class="required"><font color="#CC0000">*</font></span></td>
<td>
<input name="m_name" type="text" id="m_name" size="40" value="<? echo $row_settings['m_name']; ?>" class="required"></td>
</tr>
<tr>
<td>NATIONALITY<span class="required"><font color="#CC0000">*</font></span></td>
<td>
<input name="nationality" type="text" id="nationality" size="40" value="<? echo $row_settings['nationality']; ?>" class="required"></td>
</tr>
<tr>
<td>RELIGION<span class="required"><font color="#CC0000">*</font></span></td>
<td>
<input name="religion" type="text" id="religion" size="40" value="<? echo $row_settings['religion']; ?>" class="required"></td>
</tr>
</table></br>
<p align="center">
<!-- previous button <input name="doSave" type="submit" id="doSave" value="Submit"> -->
</p>
</form>
<form action="userdata.php" name="frmAdd" method="post">
<table width="80%" border="0" cellpadding="3" cellspacing="3" class="forms">
<tr>
<td width="5"> <div align="center">NO</div></td>
<td width="91"> <div align="center">Employer's NAME</div></td>
<td width="160"> <div align="center">COUNTRY</div></td>
<td width="198"> <div align="center">POSITION</div></td>
<td width="70"> <div align="center">FROM</div></td>
<td width="70"> <div align="center">TO</div></td>
<td width="70"> <div align="center">SALARY</div></td>
<td width="70"> <div align="center">REASONS FOR LEAVING</div></td>
</tr>
<?php for($i=1;$i<=4;$i++) { ?>
<tr>
<th width="5"> <div align="center"><? echo $i . "."; ?></div></th>
<td><input type="text" name="emp_name<?=$i;?>" size="25"></td>
<td><input type="text" name="emp_country<?=$i;?>" size="10"></td>
<td><input type="text" name="emp_pos<?=$i;?>" size="10"></td>
<td><input type="text" name="emp_frm<?=$i;?>" size="5"></td>
<td><input type="text" name="emp_to<?=$i;?>" size="5"></td>
<td><input type="text" name="emp_sal<?=$i;?>" size="5"></td>
<td><input type="text" name="emp_lev<?=$i;?>" size="25"></td>
</tr>
<?php } ?>
</table>
</br>
<!-- previous button <input type="submit" name="doHis" value="Save"> -->
<input type="hidden" name="hdlfrm" value="<?=$i;?>">
<input type="button" value="Click Me!" onclick="submitForms()" />
You can not submit two different forms on one page. You have a race condition.
If you want to submit two forms at once, either combine them and handle it at the server OR you can use Ajax to submit them.
I think the easiest way to do this is install jQuery and use the find method then serialize the whole thing and send it using a jQuery post, get, or ajax method.
There are missing "tags" and the code is not correct in some places.
It would be much easier if you just shortened the code to relevant parts and then posted.
So I had to do that for you.
You should test the following code. As long as that does not work, there is no need even more "form input" to write.
the test.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
submitForms = function(){
document.forms["regForm"].submit();
window.setTimeout(submitB,1000)
}
function submitB() {
document.forms["frmAdd"].submit();
}
</script>
<title>Emergency Table - Update</title>
</head>
<body>
<form action="writea.php" method="post" name="regForm" id="regForm" >
<h2><em>Personal Details : </em></h2></br>
<table width="80%" border="0" cellpadding="3" cellspacing="3" class="forms">
<tr>
<td width="22%">NAME<span class="required"><font color="#CC0000">*</font></span></td>
<td width="78%">
<input name="full_name" type="text" id="full_name" size="40" value="Romeo Delta" class="required"></td>
</tr>
</table></br>
</form>
<form action="writeb.php" name="frmAdd" method="post">
<table width="80%" border="0" cellpadding="3" cellspacing="3" class="forms">
<tr>
<td width="5"> <div align="center">TEST</div></td>
</tr>
</table>
</br>
<input type="hidden" name="hdlfrm" value="1000">
<input type="button" value="Click Me!" onclick="submitForms()" />
</form>
</body>
</html>
writea.php
<?php
if (isset($_POST['full_name'])) { $hdl = $_POST['full_name']; } else { $hdl = "Err."; }
$fp = fopen('dataa.txt', 'a+');
fwrite($fp, "Hello from write A : ".$hdl."\r\n");
fclose($fp);
?>
writeb.php
<?php
if (isset($_POST['hdlfrm'])) { $hdl = $_POST['hdlfrm']; } else { $hdl = "Err."; }
$fp = fopen('datab.txt', 'a+');
fwrite($fp, "Hello from write B : ".$hdl."\r\n");
fclose($fp);
?>
After submit the content of dataa.txt and datab.txt should be.
dataa.txt
Hello from write A : Romeo Delta
datab.txt
Hello from write B : 1000
If you do normal form post in your page the first submit action will done and redirects to that page and second form post will not done my solution is better to use ajax post method and submit these two forms hope this helpful..
Found a Solution for this ... used this jquery and jquery form js ...
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script>
$(document).ready(function() {
$('#form1').ajaxForm(function() {
});
$('#form2').ajaxForm(function() {
alert("Your Submitted Information has been Saved !");
window.location = "userdata.php";
return true;
});
$("#submitEverything").click(function(){
mySubmitFunction();
return false;
});
});
function mySubmitFunction() {
$("#form2").submit();
$("#form1").submit();
}
</script>
userdata.php is the page where this code was pasted
and have to use two different action in forms (like form1 action="page1" and form2 action="page2")

if the field empty JQUERY

I wrote a simple page with HTML and PHP. So, before PHP I would like to check empty fields with Jquery, but I do not learn the Jquery yet, so I would appreciated if someone helped me.
<?php
if(isset($_POST[add]))
{
if(empty($_POST[name]) || empty($_POST[surname])) {echo 'All form fields are required';}
}
?>
<form action="" method=post>
<table border=0 cellspacing=10 cellpadding=5>
<tr>
<td>Name:</td>
<td><input type="text" name="name" size="10" value=""></td>
</tr>
<tr>
<td>Surname:</td>
<td><input type="text" name="surname" size="10" value=""></td>
</tr>
<tr>
<td colspan=2><input type="submit" name="add" value="Add"></td>
</tr>
</table>
</form>
You can add validation by adding jquery.
$('input[name="add"]').click(function() {
if($('input[name="name"]').val() == '' || $('input[name="surname"]').val() == '') {
$('.error').html('');
if($('input[name="name"]').val() == '') {
$('.error').append('<p>Please enter your name</p>');
}
if ($('input[name="surname"]').val() == '') {
$('.error').append('<p>Please enter your surname</p>');
}
$('.error').show();
return false;
}
return true;
})
html code
<div class="error" style="display:none"></div>
<form action="" method=post>
<table border=0 cellspacing=10 cellpadding=5>
<tr>
<td>Name:</td>
<td><input type="text" name="name" size="10" value=""></td>
</tr>
<tr>
<td>Surname:</td>
<td><input type="text" name="surname" size="10" value=""</td>
</tr>
<tr>
<td colspan=2><input type="submit" name="add" value="Add"></td>
</tr>
</table>
</form>
Add a javascript function on submit let say validate() and add this jquery code in that
function validate() {
var name = $("#name").val();
if (name == "") {
alert('Name is required');
return false;
}
}
<input class="field-name" type="text" name="name" size="10" value="">
i added a class to this input field so i can use a jquery selector
var name = $('.field-name').val();
if(name="") {
console.log('name is empty');
//your code here to do something when the field is empty
}
Following code can give you some idea. I would suggest to read tutorial on jquery at
http://www.w3schools.com/jquery/default.asp
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$("#add").submit(function(){
if ($('#name').length == ""){
alert("ERROR in name!");
}
});
});
</script>
<form action="" method=post>
<table border=0 cellspacing=10 cellpadding=5>
<tr>
<td>Name:</td>
<td><input type="text" name="name" id="name" size="10" value=""></td>
</tr>
<tr>
<td>Surname:</td>
<td><input type="text" name="surname" id="surname" size="10" value=""</td>
</tr>
<tr>
<td colspan=2><input type="submit" name="add" id="add" value="Add"></td>
</tr>
</table>
</form>
</html>

Integrating validation with Recaptcha (or required fields)

I have a form below that I want to make certain fields required based on different things.
I want the following fields to be a straight forward required field with a popup alert if they're not filled in:
Name
Email
I want the phone field to be required if phone is ticked.
Address to be required if post is ticked.
How can I make the alert's pop up if things are missing but if everything is ok then send the form?
<div id="contactform">
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'white'
};
</script>
<form class="form" method="POST" action="<?php the_permalink(); ?>" onsubmit="return validateCaptcha()">
<input type="hidden" name="valid" value="0" />
<table border="0" style="float:left;" width="490">
<tbody>
<tr>
<td>
<p>Name:</p>
</td>
<td> </td>
<td colspan="2"><input type="text" name="fullname" id="fullname" /></td>
</tr>
<tr>
<td>
<p>Organisation:</p>
</td>
<td> </td>
<td colspan="2"><input type="text" name="companyname" id="companyname" /></td>
</tr>
<tr>
<td>
<p>E-mail:</p>
</td>
<td> </td>
<td colspan="2"><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>
<p>Daytime Tel:</p>
</td>
<td> </td>
<td colspan="2"><input type="text" name="tel" id="tel" /></td>
</tr>
<tr>
<td valign="top">
<p>Contact Method:</p>
</td>
<td> </td>
<td align="left" valign="top">
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Phone" id="phone" />
<label style="margin-right: 25px;">Phone</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Email" id="email" />
<label style="margin-right: 25px;">Email</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Post" id="post" />
<label style="margin-right: 25px;">Post</label>
</p>
</td>
</tr>
<tr>
<td>
<p>Address (if applicable):</p>
</td>
<td> </td>
<td colspan="2"><input type="text" name="address" id="address" /></td>
</tr>
<tr>
<td valign="top">
<p>Where did you hear about us?:</p>
</td>
<td> </td>
<td align="left" valign="top">
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup2[]" value="Search Engine" id="search" />
<label style="margin-right: 25px;">Search Engine</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup2[]" value="NPA" id="NPA" />
<label style="margin-right: 25px;">NPA</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup2[]" value="Advertisement" id="advertisement" />
<label style="margin-right: 25px;">Advertisement</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup2[]" value="Brochure" id="brochure" />
<label style="margin-right: 25px;">Brochure</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup2[]" value="Show" id="show" />
<label style="margin-right: 25px;">Show</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup2[]" value="Other" id="other" />
<label style="margin-right: 25px;">Other</label>
</p>
</td>
</tr>
<tr>
<td>
<p>Please Specify:</p>
</td>
<td> </td>
<td colspan="2"><input type="text" name="specify" id="specify" /></td>
</tr>
</tbody>
</table>
<table border="0" style="float:left;margin-left:146px;" width="490">
<tbody>
<tr>
<td> </td>
<td>
<script type="text/javascript">
function validateCaptcha()
{
if ($('input[name="valid"]')) return true;
if ($('input[name="recaptcha_response_field"]').val() == "")
{
alert("Please complete the CAPTCHA field.");
return false
}
$.ajax({
url: "http://www.medilogicuk.com/wp-content/themes/default/verify.php",
type: "POST",
async:"false",
data: {
recaptcha_response_field: $('input[name="recaptcha_response_field"]').val(),
recaptcha_challenge_field: $('input[name="recaptcha_challenge_field"]').val()
},
success: function(data){
if (data == "OK")
{
$('input[name="valid"]').val(1);
$('.form').submit();
}
else
{
alert(data);
}
},
error: function(){
alert("An error occured, please try again later");
}
});
return false;
};
</script>
<?php require_once('recaptchalib.php');
$publickey = ""; // you got this from the signup page
echo recaptcha_get_html($publickey);
?>
</td>
</tr>
<tr>
<td colspan="2"><button type="submit" name="submit" value="Send message">Send message</button></td>
</tr>
</tbody>
</table>
<? if(isset($_POST['submit'])) {
$to = "rob#domain.com";
$header = 'From: info#domain.com';
$subject = "Website enquiry";
$companyname_field = $_POST['companyname'];
$fullname_field = $_POST['fullname'];
$email_field = $_POST['email'];
$tel_field = $_POST['tel'];
$address_field = $_POST['address'];
$specify_field = $_POST['specify'];
$CheckboxGroup1 = $_POST['CheckboxGroup1'];
$CheckboxGroup2 = $_POST['CheckboxGroup2'];
if( is_array($_POST['CheckboxGroup1']) ){
foreach ($_POST['CheckboxGroup1'] as $val) {
$checkbox1results .= $val.", ";
}
}
if( is_array($_POST['CheckboxGroup2']) ){
foreach ($_POST['CheckboxGroup2'] as $val) {
$checkbox2results .= $val.", ";
}
}
$body = "Hello,\n\n You have an enquiry from the website, please see the details below:\n\n Name: $fullname_field\n Company Name: $companyname_field\n E-Mail: $email_field\n Tel: $tel_field\n Method of contact: $checkbox1results\n Address: $address_field\n Hear about us?: $checkbox2results\n Specify: $specify_field\n\n Please reply to the enquiry asap.\n\n Kind Regards \n The website";
mail($to, $subject, $body, $header);
echo "</br><p style=\"color:#e41770!IMPORTANT;\">Thank you for getting in touch, we will contact you shortly.</p>";
} ?>
</form>
Okie a quick Example for you:
The Form
<html>
<body>
<form action="#" method="POST">
<input id="email" type="text" value="" />
<a id="submit" href="#">Submit Form</a>
</form>
</body>
</html>
The Jquery Part:
$(document).ready(function(){
$('a#submit').click(function(event){
event.preventDefault();
validateEmail();
})
});
function validateEmail(){
//declarations
rule = /^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
//check
if ($('input#email').val() === '' || !rule.test($('input#email').val())){
alert ('That is not a Valid Email Address !');
return false;
} else {
alert('validation passed! Submit the form !');
//submit the form action here
}
}
Also you can try it live here http://jsfiddle.net/XMbEK/
You already have your answer in the code:
<script type="text/javascript">
function validateCaptcha()
{
if ($('input[name="valid"]')) return true;
if ($('input[name="recaptcha_response_field"]').val() == "")
{
alert("Please complete the CAPTCHA field.");
return false
}
Add your own needs after this:
if ( phone == 'what it needs to be' )
{
if( email == 'asdasd' ) {
// all is good
} else {
alert( 'need email too' );
}
return true;
}
else
{
alert('Blah blah wrong phone');
return false;
}
etc.

Why isn't Recaptcha showing up from PHP using XMLHttpRequest?

::EXPLINATION::
In an HTML file, I'm attempting to load a registration frame with a captcha check. The form itself shows up. The captcha does not. So I know that the javascript (posted below) gets what I want it to get. But there's something wrong that is keeping my captcha from showing up.
Just as a final note, I'm targetting a div with the id "splashTarget" I use CSS to arrange everything how I want it. I'm not going to post that because its probably not relevant, but if you think I do need to post it to get help let me know.
::CODE::
The form that doesn't seem to work:
<div class="splash"> </div>
<div style="text-align:left" id="registrationSplash" class="splashContent">
<div style="text-align:right">
<a style="color:darkred" href="javascript:closeSplash()">[ CANCEL ]</a>
</div>
<h1>REGISTER</h1>
<form action="" method="post" id="registerForm">
<?PHP
require_once('recaptchalib.php');
$publickey = "[censored]";
echo recaptcha_get_html($publickey);
echo '<!--'.recaptcha_get_html($publickey).'-->';
?>
<table>
<tr>
<td>First Name:</td>
<td><input type="text" name="firstname" maxlength="60"></td>
<td>Username:</td>
<td><input type="text" name="username" maxlength="30"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lastname" maxlength="60"></td>
<td>Password:</td>
<td><input type="password" name="pass" maxlength="30"></td>
</tr>
<tr>
<td>E-mail Address:</td>
<td><input type="text" name="firstname" maxlength="60"></td>
<td>Confirm Password:</td>
<td><input type="password" name="pass2" maxlength="30"></td>
</tr>
<tr>
<th colspan=4 style="text-align:right">
<button onclick="submitFormRegisterSplash()" type="button" name="submit" value="Login">Register!</button>
</th>
</tr>
</table>
</form>
<div id="status" />
</div>
The actual call to recaptia.
<?PHP
require_once('recaptchalib.php');
$publickey = "[censored]";
echo recaptcha_get_html($publickey);
echo '<!--'.recaptcha_get_html($publickey).'-->';
?>
Javascript Function used to load Register form:
function onRegisterClicked() {
var onRegisterClickedHttp;
if(window.XMLHttpRequest) {
onRegisterClickedHttp = new XMLHttpRequest();
onRegisterClickedHttp.onreadystatechange = function() {
if(onRegisterClickedHttp.readyState==4 && onRegisterClickedHttp.status==200) {
var response = onRegisterClickedHttp.responseText;
document.getElementById("splashTarget").innerHTML = response;
}
}
}
onRegisterClickedHttp.open("GET", "Verification/RegisterSplash.php", true);
onRegisterClickedHttp.send();
}
Result on Webpage after calls to create
<div id="splashTarget">
<div class="splash"> </div>
<div style="text-align:left" id="registrationSplash" class="splashContent">
<div style="text-align:right">
<a style="color:darkred" href="javascript:closeSplash()">[ CANCEL ]</a>
</div>
<h1>REGISTER</h1>
<form action="" method="post" id="registerForm">
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LehEsgSAAAAAAH2xfKSXKSdldMwoiOqZyO5TupV"></script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LehEsgSAAAAAAH2xfKSXKSdldMwoiOqZyO5TupV" height="300" width="500" frameborder="0"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript><!--<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LehEsgSAAAAAAH2xfKSXKSdldMwoiOqZyO5TupV"></script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LehEsgSAAAAAAH2xfKSXKSdldMwoiOqZyO5TupV" height="300" width="500" frameborder="0"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>--> <table>
<tbody><tr>
<td>First Name:</td>
<td><input type="text" name="firstname" maxlength="60"></td>
<td>Username:</td>
<td><input type="text" name="username" maxlength="30"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lastname" maxlength="60"></td>
<td>Password:</td>
<td><input type="password" name="pass" maxlength="30"></td>
</tr>
<tr>
<td>E-mail Address:</td>
<td><input type="text" name="firstname" maxlength="60"></td>
<td>Confirm Password:</td>
<td><input type="password" name="pass2" maxlength="30"></td>
</tr>
<tr>
<th colspan="4" style="text-align:right">
<button onclick="submitFormRegisterSplash()" type="button" name="submit" value="Login">Register!</button>
</th>
</tr>
</tbody></table>
</form>
<div id="status">
</div>
</div></div>
The Website in action is gumonshoe dot net slash Registration
You'll need to choose to try to register to see the pop up. I disabled the CSS that created the splash screen thinking that it might have been an issue with z-indexes. That doesn't appear to be the case.
Thanks for any tips.
The form HTML DOES work (see http://jsfiddle.net/5p5K3/). The error is caused by a feature:
<script> tags which are injected using .innerHTML = .... <script> are not parsed (functions and variables inside these tags are not defined, nor called). You have to include the CAPTCHA code inside the page, instead of adding it using AJAX.
EDIT
Add this HTML code (inside the <head> block):
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
Overwrite your function by my suggestion (replace <PUBLIC kEY HERE> by your public key):
function onRegisterClicked() {
Recaptcha.create("<PUBLIC KEY HERE>", "splashTarget", {
theme: "red",
callback: Recaptcha.focus_response_field
});
}
Obvious problem: The inserted recaptcha code is commented out with <!-- -->. Commented-out html/js is NOT going to be rendered/executed. Change
echo '<!--'.recaptcha_get_html($publickey).'-->';
to
echo recaptcha_get_html($publickey);

Categories