Develop Reference

Saving form data into dynamic form when hitting back or refreshing page

Right now I have code to dynamically add input fields to my form. I want to be able to submit the data and go to the next page but if someone decides to go back, the newly made input fields would still be there with the data. The way I have it set up now is to echo onto the input fields which works with the first two but not the third.
When I hit back, I get this:
Here is my code:
<h2>Enter Beneficiaries for Tangible Personal Property:</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div class="input_fields_container">
<tr>
<td>Name:<input type="text" name="ben[]" value="<?php echo $_SESSION['ben']['0'];?>" class="form-control name_list" /></td>
<td>Percentage of tangible personal property:<input type="number" min="0" max="100" value="<?php echo $_SESSION['percent']['0'];?>" style="width: 40px" name="percent[]" class="form-control name_list" /></td>
<td><input type="button" name="add" id="add" class="add_more_button" value= "Add Another" ></input></td>
</tr>
</table>
</div>
<p style="color:red;"></p>
<h3>Enter Contingent Beneficiary: </h3>
Name:<input type="text" name="conben" value="<?php echo $_SESSION['conben'];?>" >
<br><br>
<button type="button" name="back" value="back" onclick="location.href='county.php'">Back</button>
<input type="submit" name="submitform" value="Next"></input>
<button type="button" name="download" onclick="location.href='downloadAdd.php'">Download will</button>
</form>
<script>
//script to add/remove fields
$(document).ready(function () {
var getControl=getCookie("countControls1");
var max_fields_limit = 2; // Set limit for maximum input fields
var x = 0; // Initialize counter for text box
for(var i=1; i<=getControl; i++) {
console.log(i);
addControls();
}
$('.add_more_button').click(function (e) { // Click event to add more fields
addControls();
});
function addControls()
{
console.log(x);
if (x < max_fields_limit ) {
x++; // Increment counter
setCookie("countControls1",x,100);
$('.input_fields_container').append('<div><tr id="row'+x+'"><td> Name:<input type="text" name="ben[]" value="<?php echo $_SESSION['ben']['1'];?>" class="form-control name_list" /></td><td>&nbspPercentage of tangible personal property:<input type="number" min="0" max="100" style="width: 40px" name="percent[]" value="<?php echo $_SESSION['percent']['1'];?>" class="form-control name_list" /></td><td>Remove</td></tr>');; // Add input field
}
else if (x==2){
$("p").text("*Only 3 tangible beneficiaries are allowed.");
}
}
$('.input_fields_container').on("click", ".remove_field", function (e) { // User click on remove text links
$(this).parent('div').remove();
x--;
$("p").text("");
setCookie("countControls1",x,100);
});
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
$("#div1").html("Add cookie = ",getCookie(cname));
}
function getCookie(cname)
{
console.clear();
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
//console.log(cname);
//console.log(decodedCookie);
console.log(ca);
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
console.log(c.substring(name.length, c.length));
return (c.substring(name.length, c.length));
}
}
return "";
}
});
</script>
Is there anyway to achieve this in this way or do I need to implement something else?

You can just write the fields back using a loop because presumably you have the two arrays in your session. You should also use empty() or isset() to check if the session arrays exist first otherwise you will end up with warnings about undefined keys and such:
<tr>
<td>Name:<input type="text" name="ben[]" value="<?php echo $_SESSION['ben']['0'];?>" class="form-control name_list" /></td>
<td>Percentage of tangible personal property:<input type="number" min="0" max="100" value="<?php echo $_SESSION['percent']['0'];?>" style="width: 40px" name="percent[]" class="form-control name_list" /></td>
<td><input type="button" name="add" id="add" class="add_more_button" value= "Add Another" /></td>
</tr>
<?php
# Remove the first keys since you already used them above
unset($_SESSION['percent'][0],$_SESSION['ben'][0]);
# Just do a normal loop to create any remaining values
foreach($_SESSION['percent'] as $key => $value): ?>
<tr>
<td>Name:<input type="text" name="ben[]" value="<?php echo $_SESSION['ben'][$key];?>" class="form-control name_list" /></td>
<td>Percentage of tangible personal property:<input type="number" min="0" max="100" value="<?php echo $value; ?>" style="width: 40px" name="percent[]" class="form-control name_list" /></td>
</tr>
<?php endforeach ?>

Error in cropping function in php

It's my full code for cropping image function.Its works.But it crops wrongly. I can't able to find out the mistake.Functionally work,but wrongly. My cropped photo
<img style="padding-top:5%;" src="<?php echo $rowquerycat2[KEY_NAME]; ?>" id="rrr" alt="" class="img-responsive" /></div>
<form style="display: none;" id="croptype">
<input type="text" id="x" name="x" />
<input type="text" id="y" name="y" />
<input type="text" id="w" name="w" />
<input type="text" id="h" name="h" />
<input type="button" value="Crop Image" id="crop_btn" onclick="crop_photo()" />
</form>
<div id="photo_container"> </div>
javascript code for passing the co-ordinates values through ajax function
function crop_photo() {
//alert("hi");
var x_ = $('#x').val();
var y_ = $('#y').val();
var w_ = $('#w').val();
var h_ = $('#h').val();
$.ajax({
url: 'crop_photo.php',
type: 'POST',
data: {x:x_, y:y_, w:w_, h:h_, targ_w:TARGET_W, targ_h:TARGET_H},
success:function(data){
alert("sucess");
$('#photo_container').html(data);
}
});
}
crop_photo.php.
<?php
$targ_w = $_POST['w'];
$targ_h = $_POST['h'];
$jpeg_quality = 90;
$src = $_POST['photo_url'];
$src1 = basename($src);
$ext = pathinfo($src1, PATHINFO_EXTENSION);
if($ext == 'jpg'){
$imagesrori = imagecreatefromjpeg($src);
}
//$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$imagesrori,0,0,$_POST['x'],$_POST['y'], $targ_w,$targ_h,$_POST['w'],$_POST['h']);
// create the physical photo
imagejpeg($dst_r, 'cropimage/' . $src1);
echo '<img src="'.'cropimage/'. $src1.'?'.time().'">';
exit;
?>

Validation for textfield to restrict for 6 digits

we need to set validation in textfield : "zip code" under checkout process in magento site.
i need to restrict this textfield for maximum 6 digits.
i am using following code for this :
<input type="text" title="<?php echo $this->__('Zip/Postal Code') ?>"
name="billing[postcode]" id="billing:postcode"
value="<?php echo $this->escapeHtml($this->getAddress()->getPostcode()) ?>"
class="input-text validate-zip-international
<?php echo $this->helper('customer/address')->getAttributeValidationClass('postcode') ?>" placeholder="Postal code"/>
please help me to give validation for Restricting only for 6 digits

try this
function limit(element)
{
var max_chars = 6;
if(element.value.length > max_chars) {
element.value = element.value.substr(0, max_chars);
}
}
<input type="text" onkeydown="limit(this);" onkeyup="limit(this); "title="<?php echo $this->__('Zip/Postal Code') ?>"
name="billing[postcode]" id="billing:postcode"
value="<?php echo $this->escapeHtml($this->getAddress()->getPostcode()) ?>"
class="input-text validate-zip-international
<?php echo $this->helper('customer/address')->getAttributeValidationClass('postcode') ?>" placeholder="Postal code"/>

The better way is use the pattern attribute:
<input type="number" maxlength="6" pattern="[0-9]{6,}" placeholder="Zip code" required>

This is an example for validating phone number of 10 digits:
Html :
<input type="text" id="phone" name="phone" onkeypress="phoneno()" maxlength="10">
Script file:
<script>
function phoneno(){
$('#phone').keypress(function(e) {
var a = [];
var k = e.which;
for (i = 48; i < 58; i++)
a.push(i);
if (!(a.indexOf(k)>=0))
e.preventDefault();
});
}
</script>

get the product automatically from dynamic textbox using javascript

I'd been searching for 2 days now and i cant find the solution for my problem.
I wanted to automatically multiplied two numbers from dynamically generated textbox with the use of PHP coming from mysql
FROM THIS
<input name="qty<?php echo $x ?>" type="text" id="qty<?php echo $x ?>" size="6" maxlength="10" onfocus="startCalc();" onblur="stopCalc();">
<td><label>
<input name="unit<?php echo $x ?>" type="text" id="unit<?php echo $x ?>" size="9" maxlength="12" onfocus="startCalc();" onblur="stopCalc();">
</label></td>
<td><input name="total<?php echo $x ?>" type="text" id="total<?php echo $x ?>" size="9" maxlength="12" style="background-color:#FFCC33" readonly></td>
</tr>
heres my javascript
function startCalc(){
interval = setInterval("Unit()",1);
}
function Unit()
{
var cost = document.getElementsByName('unit');
for(var i=1; i<cost.length; i++)
{
unit[i] = document.getElementById('unit' + i).value;
srr_qty[i]= document.getElementById('qty' + i).value;
total[i]=(unit[i] * 1)*(qty[i]* 1);
document.getElementById('srr_total'+ i).value = total[i];
totalAmount[i]=document.getElementById('total' + i).value;
return (totalAmount[i])
}
}
function stopCalc(){
clearInterval(interval);
}
Hope you can understand what i wanted to do.. thanks and hoping for your quick response :)

set the value attribute for input tags <input type="text" value="<something here>" />

Calculating checkbox totals with jQuery

I am trying to create a page total based on options selected from checkboxes.
here is my HTML markup:
<input type="checkbox" id="option1" name="option1" value="<?= $add[0] ?>" />t1 + £<?= $add[0] ?><br />
<input type="checkbox" id="option2" name="option2" value="<?= $add[1] ?>" /t2 + £<?= $add[1] ?><br />
<input type="checkbox" id="option3" name="option3" value="<?= $add[2] ?>" />t3 + £<?= $add[2] ?><br />
<input type="checkbox" id="option4" name="option4" value="<?= $add[3] ?>" />t4 + £<?= $add[3] ?> <br />
This is my JavaScript that doesn't work:
var option1 = 0;
var option2 = 0;
var option3 = 0;
var option4 = 0;
var op = 0;
var extra = document.getElementById('extra');
$(":input").change(function()
{
option1 = $("input[name=option1]:checked").attr("value");
option2 = $("input[name=option2]:checked").attr("value");
option3 = $("input[name=option3]:checked").attr("value");
option4 = $("input[name=option4]:checked").attr("value");
op = parseInt(option1) + parseInt(option2) + parseInt(option3) + parseInt(option4) ;
extra.innerHTML = '<p>£'+op+'</p>';
});
Have I gone wrong somewhere?
I have other totals working, have removed from script so it's easier to read, just this one doesn't work!
EDITED:
<input id="option1" name="option1" value="20" type="checkbox">t1 + £20<br>
<input id="option2" name="option2" value="20" type="checkbox">t2 + £20<br>
<input id="option3" name="option3" value="20" type="checkbox">t3 + £20<br>
<input id="option4" name="option4" value="20" type="checkbox">t4 + £20 <br>
ADDED RADIO:
<input id="delivery" name="delivery" value="0" checked="checked" type="radio"> Standard (72hrs) - no addtional charges<br>
<input id="delivery" name="delivery" value="200" type="radio"> 45hrs - £200 per email templates<br>
<input id="delivery" name="delivery" value="250" type="radio"> 24hrs - £250 per email templates<br>

It would be easiest if you could select all your checkboxes together (and be sure you're not grabbing other checkboxes you don't want to grab:
<div id="checkSet">
<input type="checkbox" id="option1" name="option1" value="<?= $add[0] ?>" />t1 + £<?= $add[0] ?><br />
<input type="checkbox" id="option2" name="option2" value="<?= $add[1] ?>" /t2 + £<?= $add[1] ?><br />
<input type="checkbox" id="option3" name="option3" value="<?= $add[2] ?>" />t3 + £<?= $add[2] ?><br />
<input type="checkbox" id="option4" name="option4" value="<?= $add[3] ?>" />t4 + £<?= $add[3] ?> <br />
</div>
then select all of them, and iterate over them, summing their values:
var sum = 0;
$('#checkSet :checked').each(function(){
sum += parseInt($(this).val(), '10');
});

There is an error in your html:
<input type="checkbox" id="option2" name="option2" value="<?= $add[1] ?>" />t2 + £<?= $add[1] ?><br />
Then when you do parseInt it's always better to specify the base you are parsing:
parseInt(option1, '10')
Otherwise you might have odd problems with values like 09.
Can I see the generated HTML output? Maybe one of the values of the checkboxes is not a number and can't be parsed.
Parsing it returns NaN and this gives you a problem when you add up the values.
I used this code and works but of course could be written much better
var extra = document.getElementById('extra');
$(":input").change(function()
{
var option1;
var option2;
var option3;
var option4;
var op = 0;
option1 = $("input[name=option1]:checked").attr("value");
option2 = $("input[name=option2]:checked").attr("value");
option3 = $("input[name=option3]:checked").attr("value");
option4 = $("input[name=option4]:checked").attr("value");
if (option1){
op += parseInt(option1, '10');
}
if (option2){
op += parseInt(option2, '10');
}
if (option3){
op += parseInt(option3, '10');
}
if (option4){
op += parseInt(option4, '10');
}
if (op > 0){
extra.innerHTML = '<p>£'+op+'</p>';
}else{
extra.innerHTML = '';
}
});
Look at the fiddle here