I the below script does not work. I am trying to pass values generated using a jquery function to php. when I run this code it. The form slides to the right, but no values are encoded. I am thinking I am doing something simple wrong.
<!DOCTYPE html>
<html>
<head>
<title>Target Example</title>
<?php
$x = $_POST['total'];
echo $x;
?>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.js"></script>
<script>
$(document).ready(function() {
function compute() {
var a = $('#a').val();
var b = $('#b').val();
var total = a * b;
$('#total').val(total);
}
$('#a, #b').change(compute);
});
</script>
</head>
<body>
<form action="<?php echo $PHP_SELF;?>" method="post">
<div data-role="page" id="irr">
<div data-role="header">
<h1>Calculation</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="a">Diameter:</label>
<input type="number" name="a" id="a" value="" />
<label for="b">Diver:</label>
<input type="number" name="b" id="b" value="" />
<label for="total">Result:</label>
<input type="text" name="total" id="total" value="" />
<input type="submit">
</div>
What did we do here?
</div>
</div>
</form>
</body>
</html>
Your form action was not set correctly. Use $_SERVER['SCRIPT_NAME'] instead. Also, I used the short hand echo feature in case you are wondering. Hopefully that fixes it for you :)
<!DOCTYPE html>
<html>
<head>
<title>Target Example</title>
<?php
$x = $_POST['total'];
echo $x;
?>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.js"></script>
<script>
$(document).ready(function() {
function compute() {
var a = $('#a').val();
var b = $('#b').val();
var total = a * b;
$('#total').val(total);
}
$('#a, #b').change(compute);
});
</script>
</head>
<body>
<form action="<?=($_SERVER['SCRIPT_NAME'])?>" method="post">
<div data-role="page" id="irr">
<div data-role="header">
<h1>Calculation</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="a">Diameter:</label>
<input type="number" name="a" id="a" value="" />
<label for="b">Diver:</label>
<input type="number" name="b" id="b" value="" />
<label for="total">Result:</label>
<input type="text" name="total" id="total" value="" />
<input type="submit">
</div>
What did we do here?
</div>
</div>
</form>
</body>
</html>
Related
I'm using the script below to automatically add new lines in a form, but I do not see how to retrieve the values of each field under PHP with $_POST.
If someone has already had this problem with a table in a form, thank you for helping me!
what procedure to retrieve in test5.php the values of the fields.
I do not know how to get an array in a $_POST
thank you in advance
Here is my script
<html>
<head>
</head>
<body>
<form action="test5.php" method="post">
<div id="address">
<div id="1" name="address[]">
<input id="mail" type="text" />
<input id="type" type="text" />
<input id="comment" type="text" />
×
</div>
</div>
<input id="add_address" type="button" value="Ajouter" />
<input type="submit" value="Create PDF" />
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$('#add_address').click(function(event) {
var lastDiv = $('#address > div').last();
var id = parseInt(lastDiv.attr("id")) + 1;
(lastDiv.clone(true).attr("id", id)).insertAfter(lastDiv).find(".removeclass").show();
return false;
});
$('body').on('click', '.removeclass', function(event) {
$(this).parent().remove();
return false;
})
</script>
</body>
</html>
1.) Remove the name-attribute from the div-element
2.) Build your input-elements like:
<div id="..">
<input type="..." name="address[1][mail]" />
<input type="..." name="address[1][type]" />
<input type="..." name="address[1][comment]" />
</div>
<div id="..">
<input type="..." name="address[2][mail]" />
<input type="..." name="address[2][type]" />
<input type="..." name="address[2][comment]" />
</div>
I modified my script as below and in test5.php, I can view the data with this script.
<? Php
// print_r ($ _ POST);
echo $ _POST ['mail'] [2];
?>
Thanks
-------------test5.php-------------
<div id="address">
<div id="1">
<input type="text" name="mail[]" />
<input type="text" name="type[]" />
<input type="text" name="comment[]" />
</div>
</div>
I am using php and CodeIgniter. I am a novice at both of these (career VB.Net and C# developer). However, trying to create a basic registration form, I'm having a hard time getting jQuery validation to work.
header.php
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?><!DOCTYPE html>
<html>
<head>
<?php if(isset($title)) {?>
<title>Discuss Cards - <?php echo $title ?></title>
<?php } else { ?>
<title>Discuss Cards</title>
<?php } ?>
<link rel="stylesheet" href="<?php echo base_url();?>styles/forum.css" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script src="<?php echo base_url();?>js/jquery.validate.min.js"></script>
</head>
<body>
<?php if(isset($title)) {?>
<h1><?php echo $title?></h1>
<?php } ?>
<?php if (isset($page_description)) {?>
<p id="page_description"><?php echo $page_description?></p>
<?php } ?>
create.php
<script>
$("#createaccount").validate();
</script>
<?php $attributes = array('id'=>'createaccount');
echo form_open('user/create_account',$attributes); ?>
<?php echo form_label('Email','txtEmail');?>
<br />
<?php $data = array('type'=>'email','name'=>'txtEmail','id'=>'txtEmail','maxlength'=>'50','minlength'=>'2');
echo form_input($data); ?>
<br /><br />
<?php echo form_label('Username','txtUsername');?>
<br />
<?php $data = array('name'=>'txtUsername','id'=>'txtUsername','maxlength'=>'50','minlength'=>'5');
echo form_input($data); ?>
<br /><br />
<?php echo form_label('Password','pswPassword');?>
<br />
<?php $data = array('name'=>'pswPassword','id'=>'pswPassword');
echo form_password($data); ?>
<br /><br />
<?php echo form_label('Confirm Password','pswConfirmPassword');?>
<br />
<?php $data = array('name'=>'pswConfirmPassword','id'=>'pswConfirmPassword');
echo form_password($data); ?>
<br /><br />
<input type="submit" value="Register" name="Register" />
<?php echo form_close();?>
footer.php
<strong>© 2016</strong>
</body>
</html>
result...
<!DOCTYPE html>
<html>
<head>
<title>Discuss Cards - Create New Account</title>
<link rel="stylesheet" href="http://[::1]/forum/styles/forum.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://[::1]/forum/js/jquery.validate.min.js"></script>
</head>
<body>
<h1>Create New Account</h1>
<script>
$("#createaccount").validate();
</script>
<form action="http://[::1]/forum/index.php/user/create_account" id="createaccount" method="post" accept-charset="utf-8">
<label for="txtEmail">Email</label>
<br>
<input type="email" name="txtEmail" value id="txtEmail" maxlength="50" minlength="2">
<br>
<br>
<label for="txtUsername"></label>
<br>
<input type="text" name="txtUsername" value id="txtUsername" maxlength="50" minlength="5">
<br>
<br>
<label for="pswPassword">Password</label>
<br>
<input type="password" name="pswPassword" value id="pswPassword">
<br>
<br>
<label for="pswConfirmPassword">Confirm Password</label>
<br>
<input type="password" name="pswConfirmPassword" value id="pswConfirmPassword">
<br>
<br>
<input type="submit" value="Register" name="Register">
</form>
<strong>© 2016</strong>
</body>
</html>
Now, the links to the js and css files are correct. I used the example from http://jqueryvalidation.org/documentation/:
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
<script>
$("#commentForm").validate();
</script>
However, I feel that I'm missing something because it's not working. When I use their demo (http://jqueryvalidation.org/files/demo/), a new label is created under the input area which displays the error. However, when I test my code (Notepadd++, latest version of Google Chrome, WAMPServer 2.5), I only get Chrome validation. Could someone point out to me what I'm doing incorrect? Thanks.
A bit too long for a comment, but not sure if it is the only problem. The first thing I see is that the
<script>
$("#createaccount").validate();
</script>
is located before the form with id="createaccount". This means this javascript code is parsed and run before the element exists inside the DOM.
In order to run this JS when the DOM is loaded, you then need to wrap it into this specific jquery part :
$( document ).ready( function( ) {
$("#createaccount").validate();
}
(And ideally you put all JS at the end of the page, before the closing </body> tag)
I have the below form, and after the form the PHP requests a Curl which can take a while. Because of this they keep pressing the submit button thinking that nothing has happened. This causes multiple entries in the database. Could someone help me and let me know what to put in to stop this.
I tried the Javascript solution in the first answer but it stopped the PHP script that followed. Not what I wanted. Sorry
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css2/style.css" rel='stylesheet' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfonts-->
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text.css'/>
<!--//webfonts-->
<center><img class="displayed" src="images/logo.jpg" alt="Logo" style="width:128px;height:128px;"></center>
</head>
<body>
<div class="main">
<form action="" method="POST" enctype="multipart/form-data" id="contactform" >
<input type="hidden" name="action" value="submit">
<h1><span>Sign Up</span> <lable> The Brook on Sneydes</lable> </h1>
<div class="inset">
<p>
<center><label ><?php echo $text; ?></label></center>
<label for="first">First Name</label>
<input type="text" name="first" id="first" value="" placeholder="" required/>
</p>
<p>
<label for="last">Surname</label>
<input type="text" name="last" id="last" value="" placeholder="" required/>
</p>
<p>
<label for="mobile">Mobile Number</label>
<input type="text" name="mobile" id="mobile" value="" placeholder="" required/>
</p>
<p>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" value="" placeholder="" required/>
</p>
</div>
<p class="p-container">
<input type="submit" name="submit" id="submit" value="Submit">
</p>
</form>
</div>
<!-----start-copyright---->
<div class="copy-right">
<p> © 2016 Spearhead Digital. All rights reserved.</p>
</div>
<!-----//end-copyright---->
</body>
</html>
<?php
if(isset($_POST['submit']) && !empty($_POST) ){
$first = $_POST['first'];
$last = $_POST['last'];
$mobile = $_POST['mobile'];
$email = $_POST['email'];
// Other Code
}
You can disable the submit button when submitting the form.
An example using jQuery:
<script type="text/javascript">
$(document).ready(function() {
$('#contactform').submit(function() {
$('input[type=submit]', this).prop("disabled", true);
});
});
</script>
I have some PHP code in which is using codeigniter. How can I check validation on the filed that are marked check? My code is below.
Can you please let me know how can I check if item is checked and force the validation accordingly?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>/site.css"></link>
</head>
<body>
<script type="text/Javascript">
$(function () {
$('.checkall').click(function () {
$(this).parents('fieldset:eq(0)').
find(':checkbox').attr('checked', this.checked);
});
});
</script>
<? $attributes = array('class' => '', 'id' => ''); ?>
<? echo form_open('ShoppingListController', $attributes); ?>
<div class="divTable">
<fieldset>
<!-- these will be affected by check all -->
<div class="divRow">Product Name | Quantity | Packages</div>
<div class="divRow"><input type="checkbox" size="100" class="checkall"> Check all</div>
<br>
<?php foreach ($records as $rec) {
?>
<div class="divRow"><input type="checkbox">
<input size="5" type="hidden" value="<? echo $rec->id; ?>" name="id"></input>
<input size="20" type="text" value="<? echo $rec->name; ?>" name="name"></input>
<label for="quantity">Value <span class="required">*</span></label>
<span class="required"><?php echo form_error('quantity'); ?></span>
<input size="5" type="text" value="" name="quantity"></input>
<select name="package">
<option name="case">Case</option>
<option name="box">Box</option>
<option name="box">Single Bottle</option>
</select>
</div>
<br>
<?
}
?>
</fieldset>
</div>
<div><input type="submit" name="submit"/></div>
</form>
</body>
you can use code below:
var divRows = $('.divRow');
var count = divRows.length;
divRows.each(function() {
if ($(this).find('input[type=checkbox]').is(':checked')) {
count--;
}
});
if (count != 0) {
alert(count + ' checkboxes not checked');
}
http://jsfiddle.net/SKgA8/
I have function like this in my header
function bingframe() {
var iframe = document.getElementById('bframe');
iframe.src = 'http://www.bing.com/search?q=' + document.searchForm.search.value.replace(/ /g,'+') + '&go=&form=QBLH&filt=all&qs=n&sk=';
}
So now when i call this function it responds in Google Chrome,Firefox and the modern browsers but not Internet explorer.
Can any of you modify the code accordingly ?
Thanking You.
Works for me - IE8
<html>
<head>
<title></title>
<script>
function bingframe(theForm) {
var iframe = document.getElementById('bframe');
var url = 'http://www.bing.com/search?q=' + escape(theForm.search.value).replace(/ /g,'+') + '&go=&form=QBLH&filt=all&qs=n&sk=';
iframe.src = url;
return false
}
window.onload=function() {
document.forms[0].search.focus();
}
</script>
</head>
<body>
<form name="searchForm" onSubmit="return bingframe(this)">
<input type="text" name="search" value="" />
<input type="submit">
</form>
<iframe id="bframe" src="about:blank" width="100%" height="100%"></iframe>
</body>
</html>
however so does this - no script necessary:
<html>
<head>
<title></title>
<script>
window.onload=function() {
document.forms[0].q.focus();
}
</script>
</head>
<body>
<form name="searchForm" action="http://www.bing.com/search" target="bframe">
<input type="text" name="q" value="" />
<input type="hidden" name="go" value="" />
<input type="hidden" name="form" value="QBLH" />
<input type="hidden" name="filt" value="all" />
<input type="hidden" name="qs" value="n" />
<input type="hidden" name="sk" value="" />
<input type="submit">
</form>
<iframe name="bframe" src="about:blank" width="100%" height="100%"></iframe>
</body>
</html>