With jQuery I built some nice select boxes.
<fieldset>
<div><input type="checkbox" name="tools[RED]" value="true"><label>RED</label></div>
<div><input type="checkbox" name="tools[BLUE]" value="true"><label>BLUE</label></div>
<div><input type="checkbox" name="tools[BLACK]" value="true"><label>BLACK</label></div>
<div><input type="checkbox" name="tools[ORANGE]" value="true"><label>ORANGE</label></div>
<div><input type="checkbox" name="tools[GREEN]" value="true"><label>GREEN</label></div>
</fieldset>
To get any result in the table on the website, I have to do this:
$tools = json_encode($_POST['tools']);
which gives back a result like so:
{"RED":"true","BLACK":"true"}
However, what I need is something like this:
Red, Black, Orange, Green, Blue
So I tried this:
$test = $_POST['tools'];
$result = preg_replace('/({|:|true|}|")/', '', $test);
$test2 = preg_grep('/(^RED|^BLACK|^BLUE|^ORANGE|^GREEN|^red|^black|^blue|^orange|^green)/i', $result);
$tools = json_encode($test2);
Now, my result in the HTML website is this:
[]
My questions now are:
1) How can I check what goes back to the HTML table before it is shown there?
2) Why is the result only [] ?
Any help is welcome.
The full code is currently:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<!-- deze hieronder is nodig voor touchpad enabled sliders -->
<script src="jquery.ui.touch-punch.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<!-- selecteren van tools .backup.
<script>
function getSelectValues(select) {
var result = [];
var options = select && select.options;
var opt;
for (var i=0, iLen=options.length; i<iLen; i++) {
opt = options[i];
if (opt.selected) {
result.push(opt.value || opt.text);
}
}
return result;
}
</script>-->
<script>
function getSelectValues(select) {
var result = [];
var options = select && select.options;
var opt;
for (var i=0, iLen=options.length; i<iLen; i++) {
opt = options[i];
if (opt.selected) {
result.push(opt.value || opt.text);
}
}
return result;
}
</script>
<!-- accordion -->
<script>
$(function() {
$( "#accordion" ).accordion({
event: "click",
active: false,
collapsible: true,
autoHeight: false
});
});
</script>
<script>
$(function() {
$( "#slider-vertical" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
value: 1,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
});
</script>
<script>
$(function() {
$( "#slider-vertical2" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
value: 1,
slide: function( event, ui ) {
$( "#amount2" ).val( ui.value );
}
});
$( "#amount2" ).val( $( "#slider-vertical2" ).slider( "value" ) );
});
</script>
<title>Left X Right -BrainGame</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<script>
$(".js-example-basic-multiple").select2(); </script>
<style type="text/css">
p.label_checkbox_pair {
clear: both;
float: none;
position: relative;
}
p.label_checkbox_pair input {
left: 80px;
position: absolute;
top: 1px;
}
p.label_checkbox_pair label {
display: block;
margin-left: 90px;
width: 200px;
}
</style>
<!-- http://www.jqueryscript.net/form/jQuery-Plugin-For-Beautifying-Checkboxes-Radio-Buttons-iCheck.html -->
<script src="js/icheck.js"></script>
<script>
//oud $(document).ready(function(){
//$('input').iCheck({
//checkboxClass: 'icheckbox_polaris',
//radioClass: 'iradio_polaris',
//
//increaseArea: '20%' optional
//});
//});
$(document).ready(function(){
$('input').each(function(){
var self = $(this),
label = self.next(),
label_text = label.text();
label.remove();
self.iCheck({
checkboxClass: 'icheckbox_line-blue',
radioClass: 'iradio_line-blue',
insert: '<div class="icheck_line-icon"></div>' + label_text
});
});
});
</script>
<link href="skins/line/blue.css" rel="stylesheet">
</head>
<BODY>
<br /><br />
<table HSPACE="50" CELLPADDING="20">
<tr HSPACE=50 CELLPADDING="30">
<td>
<?php
$a=array("red","blue","black","orange","green");
$random_keys=array_rand($a,5);
$textcolours=array('red','blue','black','orange','green');
shuffle($textcolours);
echo "<right><font size=6 color='$textcolours[0]' >".$a[$random_keys[0]]."<br><br></font></right>";
echo "<right><font size=6 color='$textcolours[1]' >".$a[$random_keys[1]]."<br><br></font></right>";
echo "<right><font size=6 color='$textcolours[2]' >".$a[$random_keys[2]]."<br><br></font></right>";
echo "<right><font size=6 color='$textcolours[3]' >".$a[$random_keys[3]]."<br><br></font></rightr>";
echo "<right><font size=6 color='$textcolours[4]' >".$a[$random_keys[4]]."<br><br></font></right>";
?>
</td>
<td>
<div class="left">
<form class="span4" action="" method="post">
<fieldset>
<legend>Left X Right BrainGame</legend>
<p halign="right" margin="10px">Name: <input type="text" name="naam" ></p>
<p halign="right" margin="10px">Date: <input type="text" name="date" id="datepicker" ></p>
<!--
<label>Type<span class="required">*</span></label>
<select name="type">
<option value="Nauwkeurig">Nauwkeurig</option>
<option value="Pragmatisch">Pragmatisch</option>
</select>-->
<!--
<label>Core gericht: Functioneel / Technisch<span class="required">*</span></label>
<!--<input type="text" name="fname" placeholder="PORTEFEUILLE">
<!-- <select name="core">
<option value="Functioneel">Functioneel</option>
<option value="Technisch">Technisch</option>
</select>
-->
<!--
<label>Management<span class="required">*</span></label>
<select name="management">
<option value="0">0</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
</select> -->
<!-- <label>Aantal<span class="required">*</span></label>
<input type="text" name="mi" placeholder="Middle Name"> -->
<!--
<label>Tools<span class="required">*</span></label>
<input type="text" name="tools" class="input-small" placeholder="Describe tools...."> -->
<br>
<!--
<br>
<script>$('#widget').slider-vertical();</script>
<p>
<label for="amount">Analytical:</label>
<input name="analytisch" type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-vertical" style="height:10px; width:90%;"></div>
<br>
-->
<!--
<label>Analytisch</label>
<label class="radio">
<input type="radio" name="analytisch" id="optionsRadios1" value="Ja" checked>
Ja
</label>
<label class="radio">
<input type="radio" name="analytisch" id="optionsRadios2" value="Nee">
Nee
</label> -->
<!--
<p>
<label for="amount2">Management experience:</label>
<input name="management" type="text" id="amount2" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-vertical2" style="height:10px; width:90%;"></div>
-->
<br>
<!-- <label>Eneagram<span class="required">*</span></label>
<select name="eneagram">
<option value="1 de Perfectionist">de Perfectionist</option>
<option value="2 de Helper">de Helper</option>
<option value="3 de Winnaar">de Winnaar</option>
<option value="4 de Romanticus">de Romanticus</option>
<option value="5 de Waarnemer">de Waarnemer</option>
<option value="6 de Loyalist">de Loyalist</option>
<option value="7 de Plannenmaker">de Plannenmaker</option>
<option value="8 de Leider">de Leider</option>
<option value="9 de Vredestichter">de Vredestichter</option>
</select> -->
<?php
if(isset($_POST['getdata'])){
$conn=mysql_connect('localhost','t','w');
mysql_select_db("test",$conn);
$regexp = "/^[^0-9][A-z0-9_]+([.][A-z0-9_]+)*[#][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/";
$naam=$_POST['naam'];
$date=$_POST['date'];
//$type=$_POST['type'];
//$core=$_POST['core'];
//$management=$_POST['management'];
//$names = $tools;
//$output = preg_grep('/(Andrew|John)/i', $names);
//print_r( $output );
//
//http://webcheatsheet.com/php/regular_expressions.php#match
$test = $_POST['tools'];
$result = preg_replace('/({|:|true|}|")/', '', $test);
$test2 = preg_grep('/(^RED|^BLACK|^BLUE|^ORANGE|^GREEN|^red|^black|^blue|^orange|^green)/i', $result);
$tools = json_encode($test2);
//$tools = $_POST['tools'];
//$tools = json_encode(preg_grep('/(RED|BLACK|BLUE|ORANGE|GREEN)/i', $_POST['tools']));
//$tools = json_encode($_POST['tools']);
//$analytisch=$_POST['analytisch'];
//$eneagram=$_POST['eneagram'];
if(true == false ){
echo "<label class='err'>All fields are required</label>";
}
else{
$insert="Insert into kandidaat(naam,date,tools)
values('".$naam."','".$date."','".$tools."')";
$rs=mysql_query($insert) or die(mysql_error());
?>
<script>
<?php echo "$test2"; ?>
alert('Stop the timer!');
</script>";
<?php }
}
?>
</fieldset>
<div id="accordion" style="width:90%;">
<h3>Start...</h3>
<div>
<p class="label_checkbox_pair">
<!--<div style="font-family: arial; font-size: 6px; color: #0B1DE0; vertical-align: middle;"><input style="vertical-align: middle" type="checkbox" name="iCheck" value="true"><label for="certs">ISTQB2</label></div>-->
<div style="font-family: arial; font-size: 6px; color: #0B1DE0; vertical-align: middle;"><input style="vertical-align: middle" type="checkbox" name="certs[RED]" value="true"><label>RED</label></div>
<div style="font-family: arial; font-size: 6px; color: #0B1DE0; vertical-align: middle;"><input style="vertical-align: middle" type="checkbox" name="certs[BLUE]" value="true"><label>BLUE</label></div>
<div style="font-family: arial; font-size: 6px; color: #0B1DE0; vertical-align: middle;"><input style="vertical-align: middle" type="checkbox" name="certs[BLACK]" value="true"><label>BLACK</label></div>
<div style="font-family: arial; font-size: 6px; color: #0B1DE0; vertical-align: middle;"><input style="vertical-align: middle" type="checkbox" name="certs[ORANGE]" value="true"><label>ORANGE</label></div>
<div style="font-family: arial; font-size: 6px; color: #0B1DE0; vertical-align: middle;"><input style="vertical-align: middle" type="checkbox" name="certs[GREEN]" value="true"><label>GREEN</label></div>
</p>
</div>
<h3>Part 2</h3>
<div>
<p>
<!-- zie content website https://select2.github.io/examples.html -->
<fieldset>
<div><input type="checkbox" name="tools[RED]" value="true"><label>RED</label></div>
<div><input type="checkbox" name="tools[BLUE]" value="true"><label>BLUE</label></div>
<div><input type="checkbox" name="tools[BLACK]" value="true"><label>BLACK</label></div>
<div><input type="checkbox" name="tools[ORANGE]" value="true"><label>ORANGE</label></div>
<div><input type="checkbox" name="tools[GREEN]" value="true"><label>GREEN</label></div>
</fieldset>
</p>
</div>
</div>
<br/> <button type="submit" name="getdata" class="btn">Submit</button>
Highscores
</form>
</div>
<?php
function save(){
}
?>
<?php
function make_links_clickable($text){
return preg_replace('!(((f|ht)tp(s)?://)[-a-zA-Zа-яА-Я()0-9#:%_+.~#?&;//=]+)!i', '$1', $text);
}
?>
</td>
</tr>
</table>
</body>
</html>
Related
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.
There is a form filling in my website, and i included virtual keyboard there, when user click in textarea, then virtual keyboard will appear, and in some forms user needs to fill numbers, so i want to include numeric pad in forms where should fill the numbers. I found one, but i cant include it.
I included scripts and css in my tpl file, first 3 of numpad, the rest of keyboard:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.keypad.js"></script>
<link type="text/css" href="jquery.keypad.css" rel="stylesheet">
<script type="text/javascript" src="keyboard.user.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="keyboard.css">
<main class="main" style="padding:0; overflow-x:initial">
<div class="container">
{include file="engine/modules/products/eogpo.php"}
</div>
</main>
<div id="isTerminal"></div>
$(function () {
$('#defaultKeypad').keypad();
});
<div id="modalError" class="modal info__modal" data-modal>
<button data-izimodal-close="" class="modal__close">
<svg class="icon icon-close"><use xlink:href="/images/sprite.svg#icon-close"></use></svg>
</button>
<div class="modalStyle">
<h3 class="info__title" id="errorTitle"><?php echo _("Ошибка"); ?></h3>
<div id="textError"></div>
</div>
</div>
<div id="modalInfo" class="modal info__modal" data-modal>
<button data-izimodal-close="" class="modal__close">
<svg class="icon icon-close"><use xlink:href="/images/sprite.svg#icon-close"></use></svg>
</button>
<div class="modalStyle">
<div id="textInfo"></div>
</div>
</div>
<div id="overLoader" style="display: none"><img src="/templates/assets/images/loading.gif" alt="Loading..." /></div>
In tutorial written that I should write:
$(function () {
$('#defaultKeypad').keypad();
});
to call the plugin with default options, so i wrote it in tpl file
so finally i include the numpad id in:
<fieldset class="field-set col col--4-12" style="false">
<label for="orderIIN" class="field-set__label checkList">
<?php echo _("IIN");?>
</label>
<input class=" field iin-masked datas" id="IIN0 defaultKeypad" type="text" name="IIN[]" maxlength="12" />
<span class="small col" id="textKBM0"></span>
<span class="small col" id="loadingIIN0"></span>
<input class="datas" id="KBM0" type="hidden" name="KBM[]" value="" />
<input class="datas" id="clientID0" type="hidden" name="clientID[]" value="" />
<input class="datas" id="clientISN0" type="hidden" name="clientISN[]" value="" />
<input class="datas" id="clientNation0" type="hidden" name="clientNation[]" value="Kazakhstan" />
</fieldset>
Keyboard js works fine, but numpad js still doesn't turn on, where am i doing wrong?
You are probably missing jquery-ui assets
STEP 1 - INCLUDE JQUERY
Append the below script tag on top of your page and delete the previous jquery script tags.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
open the page with chrome, open the developer tools by pressing f12 and make sure that you have the following files under Sources tab:
jquery.min.js
jquery-ui.min.js
jquery-ui.css
STEP 2 - INCLUDE JQUERY KEYPAD CSS AND JS
Download jquery.keypad.css, jquery.plugin.js and jquery.keypad.js from here
Unzip the file jquery.keypad.package-2.2.1 and move them to the respective js and css folder of your project.
Add on top of your page, after the jquery script tag the following script.
<link type="text/css" href="css/jquery.keypad.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.plugin.js"></script>
<script type="text/javascript" src="js/jquery.keypad.js"></script>
As explained above, refresh and verify that the assets are included in your application
STEP 3 - INCLUDE JQUERY KEYPAD CSS AND JS
Open your chrome developer console to run the following commands:
$(selector).keypad();
where selector is replaced from the #id or .class of your div. In your case should be:
$('#defaultKeypad').keypad();
I selected a div from the page as in the below picture
[
then I run .keypad() and the .keypad() show in the page
you can find all the instruction and you can also test the functionality on this page
I don't know about the JQ version but I just made this one up.
Each textbox will have it own id and onclick event:
showKeyPad(x, y, this.id):
x = margin-left
y = margin-top
You can set x and y to null to ignore.
Even if it is not what you would like, I enjoyed making it and anyone is welcome to improve it in anyway. Totally free without ads :)
Copy Paste the following to give it a trial.
<html>
<head>
<style>
#keypad{
position: absolute;
background-color: lightblue;
margin-left: 20vw;
margin-top: 20vh;
width: 14vw;
height: 30vh;
border-color: grey;
border-width: 1px;
border-style: solid;
border-radius: 2%;
}
.keypads{
display: inline;
width: 28%;
height: 19%;
margin-top: 5%;
margin-left: 3%;
border-color: grey;
border-width: 1px;
border-style: solid;
border-radius: 2%;
}
</style>
<script type="text/javascript">
var focused;
function showKeypad(x, y, tBox){
var keypad = document.getElementById("keypad");
if(x != null && y != null){
keypad.style.marginLeft = x + "vw"; //Setting x and y are optional but it can be
keypad.style.marginTop = y + "vh"; // set to render near textboxes // Set x & y to 0 to ignore
}
keypad.style.display = "block";
window.focused = document.getElementById(tBox);
}
function hideKeyPad(){
var keypad = document.getElementById("keypad");
keypad.style.display = "none";
}
function SendInputs(input){
if(focused){
if(input != "CE"){
var oldText = focused.value;
oldText += input;
focused.value = oldText;
}else
{
focused.value = "";
}
}else hideKeyPad();
}
</script>
</head>
<body>
<div id="keypad" style="display: none;">
<input type="button" class="keypads" value="1" onclick="SendInputs('1')">
<input type="button" class="keypads" value="2" onclick="SendInputs('2')">
<input type="button" class="keypads" value="3" onclick="SendInputs('3')"><br>
<input type="button" class="keypads" value="4" onclick="SendInputs('4')">
<input type="button" class="keypads" value="5" onclick="SendInputs('5')">
<input type="button" class="keypads" value="6" onclick="SendInputs('6')"><br>
<input type="button" class="keypads" value="7" onclick="SendInputs('7')">
<input type="button" class="keypads" value="8" onclick="SendInputs('8')">
<input type="button" class="keypads" value="9" onclick="SendInputs('9')"><br>
<input type="button" class="keypads" value="CE" style="color:red;" onclick="SendInputs('CE')">
<input type="button" class="keypads" value="0" onclick="SendInputs('0')">
<input type="button" class="keypads" value="X" style="color:red;" onclick="hideKeyPad()">
</div>
<div>
<input id="Phone" type="text" onclick="showKeypad(5, 10, this.id)">
<input type="text" >
<input type="text" >
<input type="text" >
<input id="ID" type="text" onclick="showKeypad(50, 10, this.id)">
<input type="text" >
<input type="text" >
<input id="DOB" type="text" onclick="showKeypad(80, 10, this.id)">
</div>
</body>
</html>
i have created a simple php registration form using ajax, i have few issue in my code that when i click register button without filling any of the field
then it should throw error message saying name is required username is required like this, instead its throwing error message for each field. i.e.,
say if i simply click register button without filing any of the field then i first throw only error message saying enter name. my requirement is to throw error message at a single time for all the fields
index.php
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="script.js"></script>
<style>
.error {
color:red;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.div1 {
margin-top: -19px;
margin-bottom: -25px;
margin-left: -19px;
}
.copy {
border-radius: 4px;
padding: 6px 20px;
border-style: ridge;
}
.copy1{
border-radius: 4px;
padding: 6px 28px;
border-style: ridge;
}
.copy2{
border-radius: 4px;
padding: 4px 2px;
}
</style>
</head>
<body style="background-color:#1affff">
<div style="padding-left: 250px; padding-top:50px" class="div1">
<h2 style="color:#009999">Registration Form :</h2>
<p><span class="error">All fields are required </span></p>
<form action="" method="post" enctype="multipart/form-data">
<span style="color:#0099ff">Name: </span>
<input type="text" name="name" class= "name copy" style="margin-left: 52px" value ="">
<span class="namee error"> </span>
<br><br>
<span style="color:#0099ff"> E-mail: </span>
<input type="text" name="email" class= "email copy" style="margin-left: 48px" value ="">
<span class="emaile error"></span>
<br><br>
<span style="color:#0099ff"> Username: </span>
<input type="text" name="username" class= "username copy" style="margin-left:26px" value ="">
<span class="usernamee error"></span>
<br><br>
<span style="color:#0099ff"> Password: </span>
<input type="password" name="password" class= "password copy" style="margin-left:30px">
<span class="passworde error"> </span>
<br><br>
<span style="color:#0099ff"> Age : </span>
<input type="number" name="age" class= "age copy" style="margin-left:62px" value ="">
<span class="agee error"> </span>
<br><br>
<span style="color:#0099ff"> Date Of Birth : </span>
<input type="date" name="date_of_birth" class= "date_of_birth copy" style="margin-left:14px" value ="">
<span class="date_of_birthe error"> </span>
<br><br>
<span style="color:#0099ff"> Department : </span>
<select name="department" class= "department copy" style="margin-left:14px" value ="">
<option disabled selected value> -- select an option -- </option>
<option value="EE">Electrical & Electronics</option>
<option value="EC">Electronics & Communication</option>
<option value="ME">Mechanical</option>
<option value="CS">Computer Science</option>
<option value="CV">Civil</option>
<option value="IS">Information Science</option>
</select>
<span class="departmente error"> </span>
<br><br>
<input type="button" class="submit" name="submit" value="Register">
</form>
</div>
</body>
<script>
$(document).ready(function(){
$(".submit").click(function(){
var name = $(".name").val();
var email = $(".email").val();
var username = $(".username").val();
var password = $(".password").val();
var age = $(".age").val();
var date_of_birth = $(".date_of_birth").val();
var department = $(".department").val();
if(name==''){$('.namee').text('Enter name'); return false}
if(email==''){$('.emaile').text('Enter email'); return false}
if(username==''){$('.usernamee').text('Enter username'); return false}
if(password==''){$('.passworde').text('Enter password'); return false}
if(age==''){$('.agee').text('Enter age'); return false}
if(date_of_birth==''){$('.date_of_birthe').text('Enter date_of_birth'); return false}
if(department==''){$('.departmente').text('Enter department'); return false}
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'name='+ name + '&email='+ email + '&username='+ username + '&password='+ password + '&age='+ age + '&date_of_birth='+ date_of_birth + '&department='+ department;
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "gethint.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
});
});
</script>
</html>
gethint.php
<?php
$mysqli = mysqli_connect("localhost","root","","ajax");
$username =$_POST["username"];
$password=$_POST["password"];
$hashed_password = password_hash($password, PASSWORD_DEFAULT);
$email=$_POST["email"];
$name=$_POST["name"];
$age=$_POST["age"];
$date_of_birth=$_POST["date_of_birth"];
$department=$_POST["department"];
$check="SELECT * FROM users WHERE username = '$_POST[username]'";
$rs = mysqli_query($mysqli,$check);
$da = mysqli_fetch_array($rs, MYSQLI_NUM);
if($da[0] > 0) {
echo "Username Already in Exists<br/>";
}
else
{
$sql = "INSERT INTO users(`userid`,`username`, `password`, `email` , `name` , `age` , `date_of_birth` , `department`)
VALUES ('','".$username."', '".$hashed_password."', '".$email."' , '".$name."' , '".$age."' , '".$date_of_birth."' , '".$department."')";
if (mysqli_query($mysqli, $sql)) {
echo "Registered successfully";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($mysqli);
}
mysqli_close($mysqli);
}
?>
I've done quite a lot of fixes in your code. They include:
Set the HTML charset
Properly closing each HTML element
Fixed code indentation
Removed unnecessary spaces
Turned multiple classes into unique IDs
Changes made to your code:
Implemented FormData() object for easier form handling
Moved each error into its HTML element
Used CSS to hide each error HTML element
Changes that you still need to do:
Implement MySQLi Prepared Statements to prevent SQL injection
Implement Regular Expressions in your PHP code to verify the form data
You'll find comments in the code below explaining what's happening:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="script.js"></script>
<style>
.error {
color: red;
display: none;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.div1 {
margin-top: -19px;
margin-bottom: -25px;
margin-left: -19px;
}
.copy {
border-radius: 4px;
padding: 6px 20px;
border-style: ridge;
}
.copy1 {
border-radius: 4px;
padding: 6px 28px;
border-style: ridge;
}
.copy2 {
border-radius: 4px;
padding: 4px 2px;
}
</style>
</head>
<body style="background-color:#1affff">
<div style="padding-left: 250px; padding-top:50px" class="div1">
<h2 style="color:#009999">Registration Form :</h2>
<p><span class="error">All fields are required </span></p>
<form action="" method="post" id="regForm" enctype="multipart/form-data">
<span style="color:#0099ff">Name: </span>
<input type="text" name="name" id="name" class="copy" style="margin-left: 52px" value ="" />
<span class="namee error">Enter name</span>
<br/><br/>
<span style="color:#0099ff"> E-mail: </span>
<input type="text" name="email" id="email" class="copy" style="margin-left: 48px" value ="" />
<span class="emaile error">Enter email</span>
<br/><br/>
<span style="color:#0099ff"> Username: </span>
<input type="text" name="username" id="username" class="copy" style="margin-left:26px" value ="" />
<span class="usernamee error">Enter username</span>
<br/><br/>
<span style="color:#0099ff"> Password: </span>
<input type="password" name="password" id="password" class="copy" style="margin-left:30px" />
<span class="passworde error">Enter password</span>
<br/><br/>
<span style="color:#0099ff"> Age : </span>
<input type="number" name="age" id="age" class=" copy" style="margin-left:62px" value ="" />
<span class="agee error">Enter age</span>
<br/><br/>
<span style="color:#0099ff"> Date Of Birth : </span>
<input type="date" name="date_of_birth" id="date_of_birth" class="copy" style="margin-left:14px" value ="" />
<span class="date_of_birthe error">Enter date_of_birth</span>
<br/><br/>
<span style="color:#0099ff"> Department : </span>
<select name="department" id="department" class="copy" style="margin-left:14px" value ="">
<option disabled selected value> -- select an option -- </option>
<option value="EE">Electrical & Electronics</option>
<option value="EC">Electronics & Communication</option>
<option value="ME">Mechanical</option>
<option value="CS">Computer Science</option>
<option value="CV">Civil</option>
<option value="IS">Information Science</option>
</select>
<span class="departmente error">Enter department</span>
<br/><br/>
<input type="button" id="submit" class="submit" name="submit" value="Register" />
</form>
</div>
</body>
<script>
$(document).ready(function(){
$("#submit").click(function(){
var error = false;
var form = document.getElementById('regForm');
var formData = new FormData(form);
// Loop through the form data
for(var p of formData){
// Check if the form data is empty
if(p[1] === ''){
// Show the error
$('.'+p[0]+'e').show();
error = true;
}
}
// Boolean to prevent AJAX from running in case of an error
if(error){
return false;
}
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "gethint.php",
data: formData,
processData: false,
contentType: false,
cache: false,
success: function(result){
alert(result);
}
});
});
});
</script>
</html>
<?php
//You should concatenate all error in one variable and print it error message containing div.
$mysqli = mysqli_connect("localhost","root","","ajax");
$err="";
$username =$_POST["username"];
if($username==""){
$err.="User name should not empty<br/>";
}
$password=$_POST["password"];
if($password==""){
$err.="Password should not empty<br/>";
}
$hashed_password = password_hash($password, PASSWORD_DEFAULT);
$email=$_POST["email"];
$name=$_POST["name"];
$age=$_POST["age"];
$date_of_birth=$_POST["date_of_birth"];
$department=$_POST["department"];
$check="SELECT * FROM users WHERE username = '$_POST[username]'";
$rs = mysqli_query($mysqli,$check);
$da = mysqli_fetch_array($rs, MYSQLI_NUM);
if($da[0] > 0) {
$err.="Username Already in Exists<br/>";
}
else
{
$sql = "INSERT INTO users(`userid`,`username`, `password`, `email` , `name` , `age` , `date_of_birth` , `department`)
VALUES ('','".$username."', '".$hashed_password."', '".$email."' , '".$name."' , '".$age."' , '".$date_of_birth."' , '".$department."')";
if (mysqli_query($mysqli, $sql)) {
echo "Registered successfully";
} else {
$err.="Error: " . $sql . "<br>" . mysqli_error($mysqli);
}
mysqli_close($mysqli);
}
if($err!=""){
echo $err;
}
?>
This question already has answers here:
Retrieve latitude and longitude of a draggable pin via Google Maps API V3
(8 answers)
Closed 9 years ago.
I use Google Maps example for Draggable markers. Now i want to display Lat and Lng inside separate TextFields, and when I dragging the marker inside TextField that are displayed changed values for Lat and Lng (when user stop dragging the marker, he be able to insert Lat and Lng inside MySQL - this inserting part is not a problem for me).
I know that I can separate Lat and Lng values.
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
//latLng.lng()
].join(', ');
document.getElementById('info2').innerHTML = [
//latLng.lat(),
latLng.lng()
].join(', ');
}
And to displayed this values inside div by id.
<div align="center" id="info"></div>
<div align="center" id="info2"></div>
But I do not know how to display this values inside TextFields so it is dynamically changing when I dragging the marker.
Best,
Darko
I edit code by geocodezip sugestion (Retrieve latitude and longitude of a draggable pin via Google Maps API V3), and now work like I want to. The entire code is shown below.
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link href="Free-Camping/free_camping_style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Free Camping</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
<!--
//<![CDATA[
var customIcons = {
"1": {
icon: 'Free-Camping/markers/BeachCampingSite.png',
},
"2": {
icon: 'Free-Camping/markers/BushCampingSite.png',
},
"3": {
icon: 'Free-Camping/markers/ParkForestReserve.png',
},
"4": {
icon: 'Free-Camping/markers/PrivateCampingSite.png',
},
"5": {
icon: 'Free-Camping/markers/RoadsideRestArea.png',
},
"6": {
icon: 'Free-Camping/markers/NewLocationMarker.png',
}
};
//*** Dragable Marker 1/3 - Start *** //
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').value = [
latLng.lat(),
//latLng.lng()
].join(', ');
document.getElementById('info2').value = [
//latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
//*** Dragable Marker 1/3 - End *** //
function load() {
var latLng = new google.maps.LatLng(-25.878994,134.018553);
geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById("map"), {
center: latLng,
zoom: 4,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("free_camping_phpsql.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var category = markers[i].getAttribute("category");
var name = markers[i].getAttribute("name");
var street = markers[i].getAttribute("street");
var locality = markers[i].getAttribute("locality");
var description = markers[i].getAttribute("description");
var image = markers[i].getAttribute("image");
var toilet = markers[i].getAttribute("toilet");
var bbq = markers[i].getAttribute("bbq");
var able = markers[i].getAttribute("able");
var tentok = markers[i].getAttribute("tentok");
var caravanok = markers[i].getAttribute("caravanok");
var dumppoint = markers[i].getAttribute("dumppoint");
var shade = markers[i].getAttribute("shade");
var water = markers[i].getAttribute("water");
var swimming = markers[i].getAttribute("swimming");
var fishing = markers[i].getAttribute("fishing");
var hiking = markers[i].getAttribute("hiking");
var mobileok = markers[i].getAttribute("mobileok");
var name2 = markers[i].getAttribute("name2");
var email = markers[i].getAttribute("email");
var lat = markers[i].getAttribute("lat");
var lng = markers[i].getAttribute("lng");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = '<p style="font-family: calibri, corbel, verdana; color: #621c11; font-size: 18px; font-weight: bold; text-align: left">' + name + '</p>'
+ '<p style="font-family: calibri, corbel, verdana; color: #621c11; font-size: 14px; text-align: left">' + street + '</br>'
+ locality + '</br>'
+ lat + ', ' + lng + '</p>'
+ '<img src="Free-Camping/images/'+image+'" width=150; height=150;>' + '</br>'
+ '(enlarge image)' + ''
+ '<p style="font-family: calibri, corbel, verdana; color: #0f0f0f; font-size: 13px; text-align: left">' + description + '</p>'
// Checkbox
+ '<p style="font-family: calibri, corbel, verdana; color: #0f0f0f; font-size: 12px; text-align: left;"> Toilet: ' + toilet + '<br>'
+ 'BBQ: ' + bbq + '<br>'
+ 'Table: ' + able + '<br>'
+ 'Tent: ' + tentok + '<br>'
+ 'Caravan: ' + caravanok + '<br>'
+ 'Dumppoint: ' + dumppoint + '<br>'
+ 'Shade: ' + shade + '<br>'
+ 'Water: ' + water + '<br>'
+ 'Swimming: ' + swimming + '<br>'
+ 'Fishing: ' + fishing + '<br>'
+ 'Hiking: ' + hiking + '<br>'
+ 'Mobile: ' + mobileok + '</p>';
var icon = customIcons[category] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
});
bindInfoWindow(marker, map, infoWindow, html);
}
//*** Dragable Marker 2/3 - Start *** //
var marker2 = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker2, 'dragstart', function() {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener(marker2, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker2.getPosition());
});
google.maps.event.addListener(marker2, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker2.getPosition());
});
//*** Dragable Marker 2/3 - End *** //
});
}
//*** Dragable Marker 3/3 - Start *** //
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', load);
//*** Dragable Marker 3/3 - End *** //
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#submit').hover(
function(){ // Change the input image's source when we "roll on"
$(this).attr({ src : 'Free-Camping/images2/SubmitCampsiteButton_2.png'});
},
function(){ // Change the input image's source back to the default on "roll off"
$(this).attr({ src : 'Free-Camping/images2/SubmitCampsiteButton_1.png'}); }
);
});
</script>
</head>
<body onload="load();MM_preloadImages('Free-Camping/images2/MapCentreIcon_2.png','Free-Camping/images2/SubmitCampsiteButton_2.png')">
<div id="main_layer" style="position:absolute; left:50%; top:25px; width:788px; height:1800px; margin-left: -390px;">
<div id="map_layer" style="position:absolute; left:0px; top:0px; width:780px; height:595px;" class="map_frame">
<div id="map_centre_icon" style="position:absolute; top:11px; width:25px; height:25px; margin-left: 715px; "><img src="Free-Camping/images2/MapCentreIcon_1.png" name="Image7" width="24" height="24" border="0" onclick="load();" ></div>
<div id="map" style="position:absolute; top:45px; width:760px; height:500px; margin-left: 10px; "></div>
<div id="legend" style="position:absolute; top:550px; width:760px; height:45px; margin-left: 10px;">
<div id="image Beach Camping Site" style="position:absolute; top:0px; width:32px; height:37px; margin-left: 10px;"><img src="Free-Camping/markers/BeachCampingSite.png" width="32" height="37">
</div>
<div id="text Beach Camping Site" style="position:absolute; top:7px; width:100px; height:15px; margin-left: 42px;"><span class="legend_text">Beach Camping Site</span>
</div>
<div id="image Bush Camping Site" style="position:absolute; top:0px; width:32px; height:37px; margin-left: 160px;"><img src="Free-Camping/markers/BushCampingSite.png" width="32" height="37">
</div>
<div id="text Bush Camping Site" style="position:absolute; top:7px; width:100px; height:15px; margin-left: 192px;"><span class="legend_text">Bush Camping Site</span>
</div>
<div id="image Park Forest Reserve" style="position:absolute; top:0px; width:32px; height:37px; margin-left: 310px;"><img src="Free-Camping/markers/ParkForestReserve.png" width="32" height="37">
</div>
<div id="text Park Forest Reserve" style="position:absolute; top:7px; width:100px; height:15px; margin-left: 342px;"><span class="legend_text">Park Forest Reserve</span>
</div>
<div id="image Private CampingS Site" style="position:absolute; top:0px; width:32px; height:37px; margin-left: 460px;"><img src="Free-Camping/markers/PrivateCampingSite.png" width="32" height="37">
</div>
<div id="text Private CampingS Site" style="position:absolute; top:7px; width:100px; height:15px; margin-left: 492px;"><span class="legend_text">PrivateCampingSite</span>
</div>
<div id="image Roadside Rest Area" style="position:absolute; top:0px; width:32px; height:37px; margin-left: 610px;"><img src="Free-Camping/markers/RoadsideRestArea.png" width="32" height="37">
</div>
<div id="text Roadside Rest Area" style="position:absolute; top:7px; width:100px; height:15px; margin-left: 642px;"><span class="legend_text">Roadside Rest Area</span>
</div>
</div>
<div id="form" style="position:absolute; left:0px; margin-left: 0px; top:603px; width:788px; height:1180px; background-color: #f4f4f4; layer-background-color: #f4f4f4; border: 1px none #000000;" class="form">
<form action="free_camping_insert.php" method="post" enctype="multipart/form-data">
<div id="form" style="position:absolute; left:14; top:0px; width:760px; height:335px;" class="form2">
<p align="center" class="headers">Add a New Free Camping Site</p>
<p align="center"><span class="text">Your Name:</span> <input type="text" name="name2" />
<br>
<br>
<span class="text">Your Email:</span>
<input type="text" name="email" />
<br>
<br>
<span class="text">Campsite name*:</span>
<input type="text" name="name" />
<br>
<br>
<span class="text">Campsite Street:</span>
<input name="street" type="text" size="26" />
<br>
<br>
<span class="text">Campsite Locality:</span>
<input name="locality" type="text" size="25" />
<br>
<br>
<span class="text">Type of Campsite*:</span>
<select name="category">
<option value="1">Beach Camping Site</option>
<option value="2">Bush Camping Site</option>
<option value="3">Park Forest Reserve</option>
<option value="4">Private Camping Site</option>
<option value="5">Roadside Rest Area</option>
</select>
<p align="center" class="text">
<label>Upload Picture</label>
<input type="file" name="image" /><br>
</div>
<div id="form" style="position:absolute; left:14; top:335px; width:760px; height:150px;" class="form2">
<p align="center" class="headers">Select Campsite Amenities</p>
<p align="center"><img src="Free-Camping/images2/AmenitiesIcons.png" width="682" height="44"> </p>
<div id="checkbox1" style="position:absolute; left:50px; top:102px; width:25px; height:25px;">
<input type="hidden" name="toilet" value="No">
<input type="checkbox" name="toilet" value="Yes">
</div>
<div id="checkbox2" style="position:absolute; left:108px; top:102px; width:25px; height:25px;">
<input type="hidden" name="bbq" value="No">
<input type="checkbox" name="bbq" value="Yes">
</div>
<div id="checkbox3" style="position:absolute; left:165px; top:102px; width:25px; height:25px;">
<input type="hidden" name="able" value="No">
<input type="checkbox" name="able" value="Yes">
</div>
<div id="checkbox4" style="position:absolute; left:223px; top:102px; width:25px; height:25px;">
<input type="hidden" name="tentok" value="No">
<input type="checkbox" name="tentok" value="Yes">
</div>
<div id="checkbox5" style="position:absolute; left:281px; top:102px; width:25px; height:25px;">
<input type="hidden" name="caravanok" value="No">
<input type="checkbox" name="caravanok" value="Yes">
</div>
<div id="checkbox6" style="position:absolute; left:338px; top:102px; width:25px; height:25px;">
<input type="hidden" name="dumppoint" value="No">
<input type="checkbox" name="dumppoint" value="Yes">
</div>
<div id="checkbox7" style="position:absolute; left:398px; top:102px; width:25px; height:25px;">
<input type="hidden" name="shade" value="No">
<input type="checkbox" name="shade" value="Yes">
</div>
<div id="checkbox8" style="position:absolute; left:454px; top:102px; width:25px; height:25px;">
<input type="hidden" name="water" value="No">
<input type="checkbox" name="water" value="Yes">
</div>
<div id="checkbox9" style="position:absolute; left:512px; top:102px; width:25px; height:25px;">
<input type="hidden" name="swimming" value="No">
<input type="checkbox" name="swimming" value="Yes">
</div>
<div id="checkbox10" style="position:absolute; left:570px; top:102px; width:25px; height:25px;">
<input type="hidden" name="fishing" value="No">
<input type="checkbox" name="fishing" value="Yes">
</div>
<div id="checkbox11" style="position:absolute; left:629px; top:102px; width:25px; height:25px;">
<input type="hidden" name="hiking" value="No">
<input type="checkbox" name="hiking" value="Yes">
</div>
<div id="checkbox12" style="position:absolute; left:687px; top:102px; width:25px; height:25px;">
<input type="hidden" name="mobileok" value="No">
<input type="checkbox" name="mobileok" value="Yes">
</div>
<p align="center"><br>
</div>
<div id="form" style="position:absolute; left:14; top:485px; width:760px; height:625px;" class="form2">
<div align="center"><span class="headers">Description of the Campsite </span><span class="text">(tell as a bit about the site)</span> </p>
</div>
<p align="center"> <textarea name="description" cols="85" rows="7" class="borders_around_form_boxes"></textarea>
<br>
</p>
<p align="center" class="headers">Location of the Free Campsite</p>
<p align="center" class="text">Enter the GPS coordinates in the boxes to create a new marker.</p>
<div align="center"><br align="center" class="text">
<span class="text">You can be oriented by red marker that are displayed in the map centar, which you can drag and drop on the map.</span> </br>
</div>
<div class="text" id="infoPanel">
<div align="center"><b>Marker status:</b>
</div>
<div align="center" id="markerStatus">
<div align="center"><i>Click and drag the marker.</i></div>
</div>
<div align="center"><b>Closest matching address:</b>
</div>
<div align="center" id="address"></div>
</div>
<p align="center"><span class="text">Latitude*:</span>
<input size="20" type="text" align="center" id="info" name="lat" /><br>
<br>
<span class="text">Longitude*:</span>
<input size="20" type="text" align="center" id="info2" name="lng"/><br>
<br>
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
<input type="image" name="submit" id="submit" src="Free-Camping/images2/SubmitCampsiteButton_1.png"/>
</p>
<p align="left"><span class="text"><em> * - Mandatory Fields </em></span> </p>
</div>
</div>
</div>
</body>
</html>
Best, Darko
Hello i have the following code, it works i mean it validates captcha good but it doesnt POST values in the sign_form.php
<script>
$(document).ready(function() {
$('#Send').click(function() {
$.post("sign_form.php?"+$("#sign_form").serialize(), {
}, function(response){
if(response==1)
{
$("#after_submit").html('');
$("#Send").after('<div id="after_submit">Your message has been submitted.</div>');
change_captcha();
clear_form();
}
else
{
$("#after_submit").html('');
$("#Send").after('<div id="after_submit">Error ! invalid captcha code .</div>');
}
});
return false;
});
// refresh captcha
$('img#refresh').click(function() {
change_captcha();
});
function change_captcha()
{
document.getElementById('captcha').src="get_captcha.php?rnd=" + Math.random();
}
function clear_form()
{
$("#name").val('');
$("#email").val('');
$("#message").val('');
}
});
form code
<form id="sign_form" name="sign_form" method="POST" action="#">
<fieldset class="step">
<legend>Podepsat tuto petici</legend>
<p>
<label for="first_name">Křestní jméno:</label>
<input type="text" name="first_name" id="first_name">
</p>
<p>
<label for="last_name">Příjmení:</label>
<input type="text" name="last_name" id="last_name">
</p>
<p>
<label for="email">Email:</label>
<input type="text" name="email" id="email">
</p>
<p>
<label for="email">Mesto:</label>
<input type="text" name="city" id="city">
</p>
<p>
<div id="wrap" align="center">
<img src="get_captcha.php" alt="" id="captcha" />
<br clear="all" />
<input name="code" type="text" id="code">
</div>
<img src="refresh.jpg" width="25" alt="" id="refresh" />
</p>
<p>
<input type="hidden" value="'.$id.'" name="id" id="id">
</p>
<p>
Emailová adresa nebude zveřejněna a nebude <br>předána žádné třetí straně.
</p>
<p>
<button type="submit" value="send" id="Send"></button>
<div id="status"></div>
</p>
</form>
sign_form.php code
session_start();
require_once('engine/db.php');
mysql_query("SET NAMES utf8");
if(($_REQUEST['code'] == $_SESSION['random_number']) || #strtolower($_REQUEST['code']) == strtolower($_SESSION['random_number']) )
{
$first_name=$_POST['first_name'];
$last_name=$_POST['last_name'];
$email=$_POST['email'];
$city=$_POST['city'];
$id=$_POST['id'];
$insert = "INSERT INTO petition_vote
(id_petition,first_name,last_name,email,city)
VALUES ('".$id."','".mysql_real_escape_string($first_name)."','".mysql_real_escape_string($last_name)."','".mysql_real_escape_string($email)."','".mysql_real_escape_string($city)."')";
//$add_member = mysql_query($insert);
$result = mysql_query($insert)
or die("query failed: " . mysql_error());
echo 1;
}
else
{
echo 0;
}
I came with an update to the code but then it refreshes my page
if(response==1)
{
submitform();
}
else
…
function submitform()
{
document.forms.sign_form.submit();
}
Replace your index.php to
<?php
session_start();
?>
<!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" src="jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function() {
$('#Send').click(function() {
serializedData=$("#MYFORM").serialize();
$.ajax({
url: "post.php",
type: "post",
data: serializedData,
// callback handler that will be called on success
success: function(response){
alert(response);
if(response==1)
{
$("#after_submit").html('');
$("#Send").after('<label class="success" id="after_submit">Your message has been submitted.</label>');
change_captcha();
clear_form();
}
else
{
$("#after_submit").html('');
$("#Send").after('<label class="error" id="after_submit">Error ! invalid captcha code .</label>');
}
}
});
return false;
});
// refresh captcha
$('img#refresh').click(function() {
change_captcha();
});
function change_captcha()
{
document.getElementById('captcha').src="get_captcha.php?rnd=" + Math.random();
}
function clear_form()
{
$("#name").val('');
$("#email").val('');
$("#message").val('');
}
});
</script>
<style>
body{ font-family:Georgia, "Times New Roman", Times, serif; font-size:14px}
#wrap{
border:solid #CCCCCC 1px;
width:203px;
-webkit-border-radius: 10px;
float:left;
-moz-border-radius: 10px;
border-radius: 10px;
padding:3px;
margin-top:3px;
margin-left:80px;
}
.error{ color:#CC0000; font-size:12px; margin:4px; font-style:italic; width:200px;}
.success{ color:#009900; font-size:12px; margin:4px; font-style:italic; width:200px;}
img#refresh{
float:left;
margin-top:30px;
margin-left:4px;
cursor:pointer;
}
#name,#email{float:left;margin-bottom:3px; height:20px; border:#CCCCCC 1px solid;}
#message{ width:260px; height:100px;float:left;margin-bottom:3px; border:#CCCCCC 1px solid;}
label{ float:left; color:#666666; width:80px;}
#Send{ border:#CC0000 solid 1px; float:left; background:#CC0000; color:#FFFFFF; padding:5px;}
</style>
</head>
<body>
<br clear="all" />
<br clear="all" />
<br clear="all" />
<div align="left" style="padding:30px;">
<form action="#" name="MYFORM" id="MYFORM">
<label>Name</label>
<input name="name" size="30" type="text" id="name">
<br clear="all" />
<label>Email</label>
<input name="email" size="30" type="text" id="email">
<br clear="all" />
<label>Message</label>
<textarea id="message" name="message"></textarea>
<br clear="all" />
<div id="wrap" align="center">
<img src="get_captcha.php" alt="" id="captcha" />
<br clear="all" />
<input name="code" type="text" id="code">
</div>
<img src="refresh.jpg" width="25" alt="" id="refresh" />
<br clear="all" /><br clear="all" />
<label> </label>
<input value="Send" type="submit" id="Send">
</form>
</div>
<br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" />
<br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" />
<br clear="all" /><br clear="all" />
</body>
</html>
and post.php as
<?php
session_start();
//print_r($_SESSION);
if(($_REQUEST['code'] == $_SESSION['random_number']) || #strtolower($_REQUEST['code']) == strtolower($_SESSION['random_number']) )
{
//$email=$_REQUEST['email'];
$first_name=$_POST['first_name'];
$last_name=$_POST['last_name'];
$email=$_POST['email'];
$city=$_POST['city'];
$id=$_POST['id'];
echo $insert = "INSERT INTO petition_vote
(id_petition,first_name,last_name,email,city)
VALUES ('".$id."','".mysql_real_escape_string($first_name)."','".mysql_real_escape_string($last_name)."','".mysql_real_escape_string($email)."','".mysql_real_escape_string($city)."')";
//$add_member = mysql_query($insert);
$result = mysql_query($insert)or die("query failed: " . mysql_error());
echo 1;
echo 1;// submitted
//echo''.$email.'';
}
else
{
echo 0; // invalid code
}
?>
I have tested it as:
form page as:
<?php
session_start();
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#Send').click(function() {
$.post("sign_form.php?"+$("#sign_form").serialize(), {
}, function(response){
alert(response);
if(response==1)
{
$("#after_submit").html('');
$("#Send").after('<div id="after_submit">Your message has been submitted.</div>');
change_captcha();
clear_form();
}
else
{
$("#after_submit").html('');
$("#Send").after('<div id="after_submit">Error ! invalid captcha code .</div>');
}
});
return false;
});
// refresh captcha
$('img#refresh').click(function() {
change_captcha();
});
function change_captcha()
{
document.getElementById('captcha').src="get_captcha.php?rnd=" + Math.random();
}
function clear_form()
{
$("#name").val('');
$("#email").val('');
$("#message").val('');
}
});
</script>
<form id="sign_form" name="sign_form" method="POST" action="#">
<fieldset class="step">
<legend>Podepsat tuto petici</legend>
<p>
<label for="first_name">K?estní jméno:</label>
<input type="text" name="first_name" id="first_name">
</p>
<p>
<label for="last_name">P?íjmení:</label>
<input type="text" name="last_name" id="last_name">
</p>
<p>
<label for="email">Email:</label>
<input type="text" name="email" id="email">
</p>
<p>
<label for="email">Mesto:</label>
<input type="text" name="city" id="city">
</p>
<p>
<div id="wrap" align="center">
<img src="get_captcha.php" alt="" id="captcha" />
<br clear="all" />
<input name="code" type="text" id="code">
</div>
<img src="refresh.jpg" width="25" alt="" id="refresh" />
</p>
<p>
<input type="hidden" value="'.$id.'" name="id" id="id">
</p>
<p>
Emailová adresa nebude zve?ejn?na a nebude <br>p?edána žádné t?etí stran?.
</p>
<p>
<button type="submit" value="send" id="Send"></button>
<div id="status"></div>
</p>
</form>
php page sign_form.php
<?php
session_start();
//require_once('engine/db.php');
//mysql_query("SET NAMES utf8");
echo print_r($_REQUEST);
if(($_REQUEST['code'] == $_SESSION['random_number']) || #strtolower($_REQUEST['code']) == strtolower($_SESSION['random_number']) )
{
$first_name=$_POST['first_name'];
$last_name=$_POST['last_name'];
$email=$_POST['email'];
$city=$_POST['city'];
$id=$_POST['id'];
$insert = "INSERT INTO petition_vote
(id_petition,first_name,last_name,email,city)
VALUES ('".$id."','".mysql_real_escape_string($first_name)."','".mysql_real_escape_string($last_name)."','".mysql_real_escape_string($email)."','".mysql_real_escape_string($city)."')";
//$add_member = mysql_query($insert);
$result = mysql_query($insert)
or die("query failed: " . mysql_error());
echo 1;
}
else
{
echo 0;
}
?>
On submit it is alerting all the values.then what is your problem?