Develop Reference

Uncaught TypeError: payuForm.submit is not a function . How to correct this error in console?

I have written a form containing some input fields of which some are hidden values as shown below :
<form method="POST" enctype= "multipart/form-data" action="<?php echo $payuaction; ?>" name="payuForm">
<div class="span9" style="margin-left:0;">
<label><span style="color:#F00"> * </span>Landmark </label>
<input type="text" id="landmark" name="landmark" style=" background:none; border-bottom: 3px solid #b7b6b6;" class="span3" placeholder="Enter Landmark" required>
<span class="errorval"><?php $this->validation->show_error('landmark', "Please enter your Landmark.")?></span>
</div>
<input type="hidden" name="hash" value="<?php echo $hash; ?>"/>
<input type="hidden" name="txnid" value="<?php echo $txnid; ?>" />
<div class="span9" style=" margin-left:0;">
<button id="submit" name="buysubmit" value="submit" class="btn btn-danger" style="color:#FFF; margin-bottom:10px; margin-top:10px;"> Pay Now
</button>
</div>**strong text**
</form>
js:
<script>
var hash = '<?php echo $hash ?>';
submitPayuForm();
function submitPayuForm() {
if(hash == '') {
return;
}
var payuForm = document.forms.payuForm;
console.log(payuForm);
payuForm.submit();
}
</script>
When submitting the button in form, it is not going to the link specified in the action in the form tag. It is going to this same page containing this form. On second button click , it is directing to the action page.
In console, error is
Uncaught TypeError: payuForm.submit is not a function
at submitPayuForm
Can any help me on this ?

Please read about the forms here: https://developer.mozilla.org/en-US/docs/Web/API/Document/forms
According to this, you should be able to access your form by using doucment.forms[0].payuform
Or even better, try document.forms["payuform"]

Hiding first form and then displaying second. Secnd form performs multiple submits

I have two forms with single input fields. When the page loads I want the first form to be displayed and on submit of this first form I want to retain the value entered in a session in php for later use. Further on submit of first form I want to unhide the second form using jquery. The second form performs multiple submits. Problem I am facing is that the second form on submit brings back the first form and I am having trouble with submits of the two forms. I want the second form to stay consistent and wish to open the first form only once initially.
Here is the code I am working with :
JS
<script>
$(document).ready(function() {
$("#submitvendor").click(function() {
$("#vendorform").hide(1000);
$("#imeiform").css("display", "block");
})
});
</script>
HTML
<div id="vendorform" class="container" style = " position: relative; top: 50px ;left: 20px ; width: 500px; border: 7px solid #c68c53; border-bottom-left-radius: 30px; border-top-right-radius: 30px; padding: 25px;">
<form id="vendor" class="form-inline" role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method = "POST" >
<div class="form-group">
<label >Vendor Reference:&nbsp&nbsp&nbsp&nbsp&nbsp</label>
<input type="text" class="form-control" id="vendorreference" name="vendorreference" placeholder="Enter Vendor Reference here" required>&nbsp&nbsp&nbsp
</div>
<input type="submit" id="submitvendor" name="Submit" value="Submit">
</form>
</div>
<div id="imeiform" class="container" style = " display: none; position: relative; top: 70px ;left: 20px ; width: 500px; border: 7px solid #c68c53; border-bottom-left-radius: 30px; border-top-right-radius: 30px; padding: 25px;">
<form class="form-inline" role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method = "POST" >
<div class="form-group">
<label >&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspIMEI:&nbsp&nbsp&nbsp&nbsp&nbsp</label>
<input type="text" class="form-control" id="imei" name="imei" placeholder="Enter IMEI here" required >&nbsp&nbsp&nbsp
</div>
<input type="submit" id="imei" class="btn btn-default" name="Submit" value="SUBMIT">
</form>
</div>
PHP
<?php
session_start();
include_once('config.php');
if (isset($_POST['Submit'])) {
if (!isset($_SESSION['vendor'])) {
$_SESSION['vendor'] = $_POST['vendorreference'];
}
echo "Submitted";
}
if (isset($_POST['SUBMIT'])) {
$imei = $_POST['imei'];
echo "Second form submitted";
}
?>

You can achieve this simply using PHP,
HTML
<div id="vendorform" class="container" style = "display:<?php echo ($top_form == "Y" ) ? "block": "none"; ?>; position: relative; top: 50px ;left: 20px ; width: 500px; border: 7px solid #c68c53; border-bottom-left-radius: 30px; border-top-right-radius: 30px; padding: 25px;">
<form id="vendor" class="form-inline" role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method = "POST" >
<div class="form-group">
<label >Vendor Reference:&nbsp&nbsp&nbsp&nbsp&nbsp</label>
<input type="text" class="form-control" id="vendorreference" name="vendorreference" placeholder="Enter Vendor Reference here" required>&nbsp&nbsp&nbsp
</div>
<input type="submit" id="submitvendor" name="first_form" value="Submit">
</form>
</div>
<div id="imeiform" class="container" style = "display:<?php echo ($bottom_form == "Y" ) ? "block": "none"; ?>; position: relative; top: 70px ;left: 20px ; width: 500px; border: 7px solid #c68c53; border-bottom-left-radius: 30px; border-top-right-radius: 30px; padding: 25px;">
<form class="form-inline" role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method = "POST" >
<div class="form-group">
<label >&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspIMEI:&nbsp&nbsp&nbsp&nbsp&nbsp</label>
<input type="text" class="form-control" id="imei" name="imei" placeholder="Enter IMEI here" required >&nbsp&nbsp&nbsp
</div>
<input type="submit" id="imei" class="btn btn-default" name="second_form" value="SUBMIT">
</form>
</div>
PHP
<?php
session_start();
include_once('config.php');
$top_form = "Y";
$bottom_form = "N";
if (isset($_POST['first_form'])) {
if (!isset($_SESSION['vendor'])) {
$_SESSION['vendor'] = $_POST['vendorreference'];
}
$top_form = "N";
$bottom_form = "Y";
}
if (isset($_POST['second_form'])) {
$imei = $_POST['imei'];
$top_form = "N";
$bottom_form = "Y";
echo "Second form submitted";
}
?>
I've set the two flags at the top which is controlling style behaviour, let me know if it works for you.

The simplest way to hide the first form is to set its css to display:none once it is submitted.
Put your PHP logic at the top. session_start() especially should be near the beginning, before any HTML is sent to the browser. Since PHP can tell when the form is submitted, you can use it to set the appropriate style. No need for Javascript
<?php
session_start();
...
$vendor_style = isset($_POST['Submit'])? 'display:none;': 'display:block;';
$imei_style = isset($_POST['Submit'])? 'display:block;': 'display:none;';
...
?>
Then down the page in the HTML, you can set the display to none or block depending on whether the first form has been submitted
<form id="vendor" style="<?= $vendor_style ?>" class="form-inline"...
...
<form id="imei" style="<?= $imei_style ?>" class="form-inline"...
Obviously you'll have to do some form validation in PHP but you get the idea.

Post request with multiple type of data

I've created below form, which when the submit button is pressed is suppose to make a post request and in the php add this to mysql. However i keep getting a Post 500 (Internal Server Error) when the post request is executed.
form
<form method="post" action="">
<div class="reg_section personal_info">
<input type="text" id="title" value="" placeholder="Campnavn" required="required" maxlength="25">
<textarea name="textarea" id="description" value="" placeholder="Beskrivelse" required="required" minlength="100"></textarea>
<div class="upload">
<input type="file" name="upload" accept="image/*" id="image" />
<span class="fileName">Select file..</span>
</div>
</div>
<div>
<span class="submit" style="text-align: left; padding: 0 10px;"><input type="submit" id="insert" value="Tilføj"></span>
<span class="submit" style="text-align: right; padding: 0 10px;"><input TYPE="button" value="Fortryd" onclick="div_hide();"></span>
</div>
</form>
javascript
$( document ).ready(function() {
$("#insert").click(function(e) {
var description = $('#description').val();
var title = $('#title').val();
var image = $("#image").serialize()
$.post("insert.php",
{
title: title,
body: description,
longitude: currentMarker.lng(),
latitude: currentMarker.lat(),
image: image
}, function (data) {
}).error(function () {
});
});
});
insert.php
<?php
include('config.php');
if (isset($_POST['title']) && isset($_POST['body']) && isset($_POST['longitude']) && isset($_POST['latitude']))) {
$target_dir = "image/";
$title = $_POST['title'];
$body = $_POST['body'];
$longitude = (float)$_POST['longitude'];
$latitude = (float)$_POST['latitude'];
$image = $_FILES['image'];
$strSQL = $db->query("INSERT INTO camps (title, body, longitude, latitude, image) VALUES ('$title', '$body', '$longitude','$latitude', '$image')");
}
?>

try this please, I change the <form> tag I add id and name,
and change the submit button to normal button
<button type="button" onclick="postdata();" id="insert" >Tilføj</button>
after I define a onclick function to button...
form
<form id="FormData" name="FormData">
<div class="reg_section personal_info">
<input type="text" id="title" value="" placeholder="Campnavn" required="required" maxlength="25">
<textarea name="textarea" id="description" value="" placeholder="Beskrivelse" required="required" minlength="100"></textarea>
<div class="upload">
<input type="file" name="upload" accept="image/*" id="image" />
<span class="fileName">Select file..</span>
</div>
</div>
<div>
<span class="submit" style="text-align: left; padding: 0 10px;">
<button type="button" onclick="postdata();" id="insert" >Tilføj</button>
</span>
<span class="submit" style="text-align: right; padding: 0 10px;">
<input TYPE="button" value="Fortryd" onclick="div_hide();"></span><br><br>
<span id="result" style="color:#9B0E11; font-size:13px; font-weight:700"></span>
</div>
</form>
JavaScript
<script type="text/javascript">
function postdata() {
var description = $('#description').val();
var title = $('#title').val();
var image = $("#image").serialize();
$.ajax({
type: 'POST',
url: 'insert.php',
data: {
desc: desctiption,
title: title,
image:image,
longitude: currentMarker.lng(),
longitude: currentMarker.lat(),
},
success: function (answer) {
$("#result").html(answer) // if you wanna get response from insert.php
$("#FormData")[0].reset(); // if you wanna reset form after submit
}
})
}
</script>
PS: in insert.php you add more one ")" in end of if statement you must delete it
if (isset($_POST['title']) && isset($_POST['body']) && isset($_POST['longitude']) && isset($_POST['latitude'])){

Div Not Floating Right Or Being inline with title

I want it so that when all the input fields are filled, the button automatically enables again but i am finding it hard to do so. I am using php to check the fields and html to enable/disable the button
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<?php
$required = array('FName', 'LName', 'Email', 'Subject', 'Comments');
$error = false;
foreach($required as $field) {
if (empty($_POST[$field])) {
$error = true;
}
else{
$error = false;
}
}
if ($error) {
} else {
}
?>
<div class="ContentBox" style="width:auto;">
<h1 class="Title">Contact Us</h1>
<div class="contact_form">
<form method="post" action="ThankYou.php">
<div id="contact_left">
<p>First Name: </p>
<input class="TextBox" type="text" name="FName">
<p>Last Name: </p>
<input class="TextBox" type="text" name="LName">
<p id="HText">Email: (?)<span id="HSpan">Only For Verification Purposes</span></p>
<p><input class="TextBox" type="email" name="Email"></p>
<p style="text-align:center;"><input class="Button_s" name="submit" type="submit value="Submit" id="submit" disabled="disabled"></p>
</div>
<div id="contact_right">
<p>Subject: </p>
<input class="TextBox" type="text" name="Subject">
<p>Comments: </p>
<textarea id="content" rows="10" cols="40" name="Comments"></textarea>
</div>
</form>
</div>
</div>
<?php
function check_input($data)
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
</body>
</html>

PHP code will be processed only in server side. PHP can process the input only after the user clicks the submit button.
You should use javascript in this scenario.

It is possible to use only HMTL and CSS to enable the "submit" button when all the fields are filled: http://jsfiddle.net/du97k26u/.
HTML:
<form method = "post">
<input type = "text" placeholder = "First Name" required />
<input type = "text" placeholder = "Last Name" required />
<input type = "submit" value = "Process" />
</form>
CSS:
form > input {
display: block;
}
form > input:invalid ~ input[type = "submit"] {
display: none;
}

My captcha is not working into my registration form

I'm making my registration form to which if user types correct captcha code then user's data will be stored into database, if captcha code is wrong then it'll print output as a wrong but my problem is if user enters the wrong captcha's code it will store user's data into database as well as showing "wrong code" output, pls help where i'm wrong?
here is my code.
<?php session_start(); ?>
<?php
// show potential errors / feedback (from registration object)
if (isset($registration)) {
if ($registration->errors) {
foreach ($registration->errors as $error) {
echo '<div class="alert-box error"><span>Error: </span>'.$error.'</div>';
}
}
if ($registration->messages) {
foreach ($registration->messages as $message) {
echo '<div class="alert-box success"><span>Success: </span>'.$message.'</div>';
}
}
}
/** Validate captcha */
if (!empty($_REQUEST['captcha'])) {
if (empty($_SESSION['captcha']) || trim(strtolower($_REQUEST['captcha'])) != $_SESSION['captcha']) {
$captcha_message ="Invalid captcha";
$style = "background-color: #FF606C color:#555
border-radius: 0px
font-family:Tahoma,Geneva,Arial,sans-serif font-size:11px;
font-size: 18px
padding: 30px 36px
margin:10px font-weight:bold
text-transform:uppercase border:2px solid #0c0b0b
background-color: #ff7e48 ";
echo'
<div id="result" style="$style">
<h2><div class="alert-box error"><span>error: </span>'.$captcha_message.'</div></h2>
</div>';
} else {
$captcha_message = "Valid captcha";
$style = "background-color: #CCFF99";
}
$request_captcha = htmlspecialchars($_REQUEST['captcha']);
unset($_SESSION['captcha']);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Registration with Linkvessel and collaborate with college's friends</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
<style>
.alert-box {
color:#555;
border-radius: 0px;
font-family:Tahoma,Geneva,Arial,sans-serif; font-size:11px; font-size: 18px;
padding: 30px 36px;
margin:10px;
}
.alert-box span {
font-weight:bold;
text-transform:uppercase;
}
.error {
border:2px solid #0c0b0b;
background-color: #ff7e48;
}
.success{
border:2px solid #0c0b0b;
background-color: #a3ea42;
}
</style>
</head>
<body onload="document.getElementById('captcha-form').focus()">
<div id="header">
<img id="logo_size" src="./images/logo.png" onmousedown="return false">
</div><br><br><br>
<form id="form_box" method="post" action="register.php" name="registerform">
<div id="title">
<h2>REGISTRATION FORM</h2>
</div>
<div class="controls pos_selectbox">
<select id="basic" name="user_college" class="input-medium">
<option>Select College</option>
<option>MAIIT kota</option>
</select>
<select id="basic" name="user_branch" class="input-medium">
<option>Select Branch</option>
<option>Computer science</option>
<option>Civil</option>
<option>Mechanical</option>
<option>Electrical</option>
<option>Bioinformatic</option>
</select>
<select id="basic" name="user_year" class="input-medium">
<option>Select year</option>
<option>1st year</option>
<option>2nd year</option>
<option>3rd year</option>
<option>4th year</option>
<option>Year completed</option>
</select>
</div><br>
<input id="input_pos" type="email" name="user_email" required="" placeholder="Email address" /><br><br>
<input id="input_pos" type="password" name="user_password_new" required="" placeholder="Password" /><br><br>
<input id="input_pos" type="password" name="user_password_repeat" required="" placeholder="Confirm password" /><br><br>
<input id="name_pos" type="text" name="user_firstname" required="" placeholder="First name" />
<input id="name_pos2" type="text" name="user_lastname" required="" placeholder="Last name" /><br><br>
<input id="datepicker" type="text" name="user_dob" required="" placeholder="Date of birth" /><br><br>
<input id="name_pos" type="text" name="user_state" required="" placeholder="State" />
<input id="name_pos2" type="text" name="user_city" required="" placeholder="city" /> <br><br>
<img src="captcha.php" id="captcha" /><br/>
<a href="#" onclick="
document.getElementById('captcha').src='captcha.php?'+Math.random();
document.getElementById('captcha-form').focus();"
id="change-image">Not readable? Change text.</a><br/><br/>
<input type="text" name="captcha" id="captcha-form" autocomplete="off" placeholder="Type code here" /><br><br>
<input type="submit" name="register" id="pos_submit" class="btn btn-primary btn-large" value="Create account.."/>
</form>
</html>
EDITED
<?php
// checking for minimum PHP version
if (version_compare(PHP_VERSION, '5.3.7', '<')) {
exit("Sorry, Simple PHP Login does not run on a PHP version smaller than 5.3.7 !");
} else if (version_compare(PHP_VERSION, '5.5.0', '<')) {
// if you are using PHP 5.3 or PHP 5.4 you have to include the password_api_compatibility_library.php
// (this library adds the PHP 5.5 password hashing functions to older versions of PHP)
require_once("libraries/password_compatibility_library.php");
}
// include the configs / constants for the database connection
require_once("config/db.php");
// load the registration class
require_once("classes/Registration.php");
// create the registration object. when this object is created, it will do all registration stuff automatically
// so this single line handles the entire registration process.
$registration = new Registration();
// show the register view (with the registration form, and messages/errors)
include("views/register.php");
?>

Simple example, remove register.php and on the Else add information on database if captcha is correct.
/** Validate captcha */
if (!empty($_REQUEST['captcha'])) {
if (empty($_SESSION['captcha']) || trim(strtolower($_REQUEST['captcha'])) != $_SESSION['captcha']) {
$captcha_message ="Invalid captcha";
$style = "background-color: #FF606C color:#555
border-radius: 0px
font-family:Tahoma,Geneva,Arial,sans-serif font-size:11px;
font-size: 18px
padding: 30px 36px
margin:10px font-weight:bold
text-transform:uppercase border:2px solid #0c0b0b
background-color: #ff7e48 ";
echo'
<div id="result" style="$style">
<h2><div class="alert-box error"><span>error: </span>'.$captcha_message.'</div></h2>
</div>';
} else {
$captcha_message = "Valid captcha";
$style = "background-color: #CCFF99";
//insert in database here and redirect to index or profil
}
$request_captcha = htmlspecialchars($_REQUEST['captcha']);
unset($_SESSION['captcha']);
}
and replace
<form id="form_box" method="post" action="register.php" name="registerform">
with
<form id="form_box" method="post" action="" name="registerform">