I have some checkboxes in my php page.when ever i check some of them,some divs get hidden,some get visible.but when i refresh the page,checkboxes get unchecked.and all div s are visible then.
How to keep checkboxes checked even after refreshing the page..?
I tried code as below
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/qunit/qunit-1.10.0.js"></script>
<script src=".jquery.cookie.js"></script>
<script src="tests.js"></script>
<script type="text/javascript">
$(function(){
var cookieChecked = $.cookie("cookieChecked");
if(cookieChecked){
$(cookieChecked).trigger("click");
}
})
</script>
</head>
<body>
<label for="sitecheck">
<span style="font-weight:bold;">close site temp:</span>
</label>
<input name="" type="checkbox" id="sitecheck" onclick="validateSitec()" /><span style="font-weight:bold;">close site and add message</span><br>
<input type="text" name="closedmsg" id="closedmsg" style="width:440px;height:120px;display:none;" value="<?php echo $data['csitemsg']; ?>" />
<script type="text/javascript">
function validateSitec(){
if (document.getElementById('sitecheck').checked){
$('#sitecheck').prop('checked', true);
$('#closedmsg').slideDown();
$.cookie("cookieChecked", "#sitecheck");
}else if(document.getElementById('closedmsg').checked){
$('#closedmsg').slideUp();
$("#sitecheck").removeProp("checked").checkboxradio("refresh");
$.cookie("cookieChecked", "#closedmsg");
} else {
$.cookie("cookieChecked","");
}
}
</script>
</body>
</html>
checboxes wont stay ticked on page refresh by default but you can check out the jquery cookie plugin or check out keep checkbox ticked page
Use this Sample code from there
javascript
function validateSitec(){
if (document.getElementById('sitecheck').checked){
$('#sitecheck').prop('checked', true);
$('#closedmsg').slideDown();
$.cookie("cookieChecked", "#sitecheck");
}else if(document.getElementById('closedmsg').checked){
$('#closedmsg').slideUp();
$("#sitecheck").removeProp("checked").checkboxradio("refresh");
$.cookie("cookieChecked", "#closedmsg");
} else {
$.cookie("cookieChecked","");
}
}
and on page load
$(function(){
var cookieChecked = $.cookie("cookieChecked");
if(cookieChecked){
$(cookieChecked).trigger("click");
}
})
well as you are not showing any of your code we actually shouldn't post any answer cause everything is just a guess.
If you don't want to save it in a cookie you could save it in a session, which is better cause it is server side.
So with this solution you have to check the checkboxes and click on the submit button. If you don't like that you could change that to an ajax call. Also you have to change some stuff if you wan't to have it work if your user is leaving your page and coming back....
So this is just to give you an idea how your PHP could be looking:
-lets say your checkboxes come from an array. in the example the array is called $valuesForInput[]
<?php
session_start();
if(isset($_POST['check'])) {
$_SESSION['check'] = $_POST['check'];
} else {
unset($_SESSION['check']);
session_destroy();
}
$valuesForInput[] = "one";
$valuesForInput[] = "two";
$valuesForInput[] = "three";
$html = '
<form action="test.php" method="post">
<div>';
foreach($valuesForInput as $k => $v) {
if(is_array($_SESSION['check'])) {
$check = in_array($v, $_SESSION['check']) ? ' checked' : '';
}
$html.='
<input type="checkbox" name="check[]" value="'.$v.'"'.$check.'>
<label for="check1">'.$v.'</label>
';
} $html.='
</div>
<input type="submit" value="submit" />
</form>
';
echo $html;
?>
have fun coding
Try this one i think this one will work.we can keep the check box after refreshing the page also
<?php
$val= $_POST['checkbox1'];
?>
<li> <input type="checkbox" name="checkbox1[]" value="sradha" <?php if (strpos($val, "sradha") !== false) { ?> checked="checked" <?php } ?> />
<label>sradha</label></li>
It should work
Related
So today i worked on to create emoji picker in jQuery, PHP and HTML.
The problem is that jQuery is not inserting emojis into the input type, here is my code
<input class="form-control" name="message" placeholder="Enter your message..." maxlength="150" id="shout" required>
<button type="button" onclick="toggleEmojiDrawer()" class="btn btn-primary btn-block mg-b-10">Emojis </button>
</div>
<div class="body hidden" id="emojis">
<center>
<?php
$result = mysqli_query($con, "SELECT * FROM `emojis` ") or die(mysqli_error($con));
while($row = mysqli_fetch_assoc($result)) {
echo "
<img class='icon' onclick='addEmoji(this.innerHTML)' src='".$row['url'] ."' alt='".$row['Wut'] ."' height='20' width='20' />
<script>
function addEmoji(icon) {
let inputEle = document.getElementById('shout');
input.value += icon;
}
function toggleEmojiDrawer() {
let drawer = document.getElementById('emojis');
if (drawer.classList.contains('hidden')) {
drawer.classList.remove('hidden');
} else {
drawer.classList.add('hidden');
}
}
</script>
";
}
?>
Not sure where to start, but here are some things:
center tag is deprecated, just FYI
you are looping the tag that has a function in it, so you're inserting the same function into DOM multiple times... Take it out of the loop, it should be one function that handles all calls
this is not a PHP question, most likely it's a jquery one, but since we can't see the output of your query because we don't have your tables, I would recommend to click "view source" on your page and paste in the source here so we can see what you're actually trying to do... but first, remove the functions from the loop. :)
I've looked over many threads and can't seem to find a working solution for my problem. I am new to javascript and am looking for assistance in allowing my page to run javascript and submit a form by clicking one submit button.
I am using codeigniter, and am calling a javascript function called uploadEx(); to submit a canvas to a directory. Submitting to the directory works by itself but not as the same button as the submit for the form. If someone could help me make the button share both actions that would be great.
<div>
</div>
<form method="post" accept-charset="utf-8" name="form1">
<input name="hidden_data" id='hidden_data' type="hidden"/>
</form>
<script>
function uploadEx() {
var canvas = document.getElementById("canvasSignature");
var dataURL = canvas.toDataURL("image/png");
document.getElementById('hidden_data').value = dataURL;
var fd = new FormData(document.forms["form1"]);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/inc/img/inspection/upload_data.php', true);
document.forms["form"].submit();
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
console.log(percentComplete + '% uploaded');
//alert('Succesfully uploaded');
}
};
xhr.onload = function() {
};
xhr.send(fd);
};
</script
<div align="center">
<?php if( !function_exists('form_open')): ?>
<?php $this->load->helper('form'); ?>
<?php endif;?>
<form id="form" onClick="uploadEx(); return true;" method="post">
<?php echo form_label('Trailer Number','trlr_num'); ?>
<?php echo form_input(array('name'=>'trlr_num','type'=>'text')); ?>
<?php echo form_label('Seal','seal'); ?>
<?php echo form_input(array('name'=>'serial_num','type'=>'text')); ?>
<?php echo form_fieldset_close(); ?>
<br />
<input type="submit" name="submit" value="submit" content="submit"/>
<?php echo form_close(); ?>
I was able to resolve my problem by using Imran Qarner's suggestion by moving the onsubmit event out of the php code that calls codeigniter.
Have u tried onsubmit event instead of onclick? i think so it will work for you.
moreover what is the functionality of your first <form>.......</form> ?
Hello: I am using signaturePad [http://thomasjbradley.ca/lab/signature-pad/]and have created a short web form in codeIgniter 2, located here: [http://gentest.lfwebz.com/crd/open_form3], that requires the users to actually sign the form.
I have also installed mPDF and domPDF and I have them working, sort of, but not quite the way I want it to.
The functionality I want is this: User opens web form, fills it out, signs it,
using signPad mentioned above. I then want to click a button that runs mPDF/domPDF and
captures the page and of course the embedded signature.
When I run mpdf/domPDF and pass it the view that houses the form, I think I have figured out it is just grabbing a fresh view, one without the signature, but several parts
of the form are missing. So after digging around, I think I have determined that I have to use image conversion of the signaturePad - this is where I am stuck. I have the code in, using the reference here: Signature pad and dompdf, but it does not work.
If you go to my page here: http://gentest.lfwebz.com/crd/open_form3, sign the page, click the "I accept" button
Here is my view
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../assets/jquery.signaturepad.css" media="screen">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.signaturepad.min.js"></script>
</head>
<body>
<?php echo base_url(); ?>
<form method="post" action="<?php echo base_url(); ?>pdf.php" class="sigPad">
<label for="name">Print your name</label>
<input type="text" name="name" id="name" class="name">
<p class="typeItDesc">Review your signature</p>
<p class="drawItDesc">Draw your signature</p>
<ul class="sigNav">
<li class="typeIt">Type It</li>
<li class="drawIt">Draw It</li>
<li class="clearButton">Clear</li>
</ul>
<div class="sig sigWrapper">
<div class="typed"></div>
<canvas class="pad" width="198" height="55"></canvas>
<input type="text" name="output" class="output">
<input type="text" name="imgOutput" class="imgOutput">
</div>
<br /><br /><br />
<button type="submit">I accept the terms of this agreement.</button>
</form>
<script>
var sig;
$( document ).ready( function ( ) {
sig = $('.sigPad').signaturePad({defaultAction:'drawIt'});
} );
$( '.sigPad' ).submit( function ( evt ) {
$( '.imgOutput' ).val( sig.getSignatureImage( ) );
} );
</script>
</body>
</html>
here is the controller or the pdf.php mentioned above:
<?php
if(isset($_POST['imgOutput'])){$img_output = $_POST['imgOutput'];}
echo "position 1";
$bse = preg_replace('#^data:image/[^;]+;base64,#', '', $img_output );
echo "position 2";
echo $bse;
if ( base64_encode( base64_decode( $bse) ) === $bse ) {
require_once 'dompdf/dompdf_config.inc.php';
$html = '<!DOCTYPE html><html><head></head><body><p>Your signature:</p><br /><img src="'. $img_output .'"></body></html>';
$dompdf = new DOMPDF;
$dompdf->load_html( $html );
$dompdf->render( );
$dompdf->stream("test.pdf");
}
else{
echo ("ERROR !");
}
?>
What am I missing here? Please could some one point me in the right direction?
Let me know if you need more info.
Thank you in advance.
I have a fairly basic email form
<form name="contactform" method="post" action="send_email.php" id="email_form">
<div class="ContactHeaders">Name</div>
<input type="text" name="Name" class="ContactBoxes" id="name"/><br/><br/>
<div class="ContactHeaders">Email</div>
<input type="email" name="Email" class="ContactBoxes"/><br/><br/>
<div class="ContactHeaders">Message</div>
<div style="width:100%">
<textarea name="Message" maxlength="1000"></textarea><br/>
</div>
<div style="width: 100%">
<input type="submit" class="Submitbtn" value="Submit">
</div>
</form>
Here's 'send_email.php'
<?php
ob_start();
include 'navbar.php';
ob_end_clean();
if(isset($_POST['Email'])) {
//declare variables
$Name = $_POST['Name'];
$Email = $_POST['Email'];
$Message = $_POST['Message'];
$complete = 0;
$email_to = "someone#example.com";
$email_subject = "Website Contact";
//check all forms are filled in correctly
$email_exp = '/^[A-Za-z0-9._%-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(preg_match($email_exp,$Email)) {
$complete++;
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(preg_match($string_exp,$Name)) {
$complete++;
}
if(strlen($Message) > 20) {
$complete++;
}
//send email if $complete = 4
if ($complete == 3){
if (get_magic_quotes_gpc()) {
$Message = stripslashes($Message);
}
$Message = $Message . "\n\n" . "From " . $Name;
$headers = 'From: '.$Email."\r\n".
'Reply-To: '.$Email."\r\n" .
'X-Mailer: PHP/' . phpversion();
#mail($email_to, $email_subject, $Message, $headers);
echo '<script>
alert("Thank you for contacting me. I will be in touch shortly");
top.location="index.php";
</script>';
}
else {
echo '<script>
alert("The form you submitted is invalid. Please ensure the following: \n You have provided a valid email address. \n Your phone number is entered correctly. \n The message box contains at least 20 characters.")
history.go(-1)
</script>';
}
}
?>
So my problem is that when the form submits to the php file, the browser loads the php file, runs the code and returns the result (It's not really a problem but it's something I don't want) It is then up to java to display the alert and go back one (in my code anyway). Is there a way to make it run the code in the background so the form runs the php file without having to go to it (if that makes sense) and return the result in the same window. I've obviously looked around and found loads of things about AJAX but I didn't really understand it and couldn't get it to work for me.
The reason for doing this is a little complicated but would make things much easier as far as user-friendliness goes for my site, as well as looking cleaner (going to a blank page and displaying an alert doesn't look very good).
Thanks in advance for any help you can offer me:)
$('.Submitbtn').click(function(e) {
e.preventDefault();
// do some form validation here
if form is valid { // from validation above
var formData = $('#email_form').serialize();
$.post('send_email.php',{data:formData});
} else {
alert('Form no good - fix it!');
return false;
}
});
Here's something you can start with. This is very basic but supplies the necessary foundation for beginning your AJAX adventure.
50 Excellent AJAX Tutorials
I am using the Wufoo API V3 to submit data from a form hosted on my website to my Wufoo account. I followed the example on the [Entries POST API][1] page, and I was able to successfully the data to my account.
I was wondering how I am able to check for error messages, and display the ErrorText for each text input field using PHP?
For example, if someone does not provide their email address in a required email field.
Here is the code I have so far:
<?
function submit() {
$ref = curl_init('https://myname.wufoo.com/api/v3/forms/xxxxxx/entries.json');
curl_setopt($ref, CURLOPT_HTTPHEADER, array('Content-type: multipart/form-data'));
curl_setopt($ref, CURLOPT_POST, true);
curl_setopt($ref, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ref, CURLOPT_POSTFIELDS, getPostParams());
curl_setopt($ref, CURLOPT_USERPWD, 'XXXX-XXXX-XXXX-XXXX');
curl_setopt($ref, CURLOPT_HTTPAUTH, CURLAUTH_ANY);
curl_setopt($ref, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ref, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($ref, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ref, CURLOPT_USERAGENT, 'Wufoo.com');
$response = curl_exec($ref);
echo $response;
}
function getPostParams() {
return array( 'Field4' => "you#company.com");
}
submit();
?>
UPDATE (Nov 12, 2011):
MinisterOfPower,
Thanks for [the reply and advice][2] about the Wufoo PHP API Wrapper. I am now using the API Wrapper and it rocks. I am having some challenges integrating the code you provided with my form.
For example, if I have a form on index.php (see below) with an email required field. How would I be able to set up the API wrapper to display an error next to the appropriate input field after the form is submitted?
Here's the code for index.php:
<? require_once('my-wrapper.php'); ?>
<html>
<head>
<title>Form</title>
</head>
<body>
<form id="form1" name="form1" autocomplete="off" enctype="multipart/form-data" method="post" action="">
<div>
<label id="email" class="icons" for="Field4">Email</label>
<input id="Field4" name="Field4" type="text" class="formreg"/>
</div>
<div>
<label id="name" class="icons" for="Field6">Name</label>
<input id="Field6" name="Field6" type="text" class="formreg"/>
</div>
<input type="submit" name="saveForm" value="Submit" id="submit" class="submit" />
<input type="hidden" id="idstamp" name="idstamp" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx=" />
</form>
</body>
</html>
Here's the code for my-wrapper.php:
$wrapper = new WufooApiWrapper('XXXX-XXXX-XXXX-XXXX', 'mysubdomain','wufoo.com');
$postArray = array();
foreach ($this->postValues as $value => $key) {
$postArray[] = new WufooSubmitField($key, $value);
}
try {
$result = $wrapper->entryPost('XXXXXX', $postArray);
if (!$result->Success) {
foreach ($result->FieldErrors as $key => $value) {
echo "Error on $key. Error Text: $value <br />";
}
}
} catch (Exception $e) {
//Read the error message.
}
UPDATE (Nov 20, 2011):
I am now able to display the error messages with the help of MinisterofPower's code and the Wufoo API wrapper. I have a couple of follow up questions:
I was wondering how I do set up the form below with PHP so that it posts the entries upon pressing the submit button?
Is it possible to do this using AJAX so the page does not refresh?
Here's the code:
<?
// API
require_once('WufooApiExamples.php');
// Wufoo
$wrapper = new WufooApiWrapper('XXXX-XXXX-XXXX-XXXX', 'mysubdomain','wufoo.com');
// Post Entries
$postArray = array();
foreach ($this->postValues as $key => $value) {
$postArray[] = new WufooSubmitField($key, $value);
}
try {
$result = $wrapper->entryPost('xxxxxx', $postArray);
if (!$result->Success) {
foreach ($result->FieldErrors as $key => $value) {
$fieldError[$value->ID] = $value->ErrorText;
}
}
} catch (Exception $e) {
//Read the error message.
}
// Add Errors
function addErrors($fieldName, $fieldError, $add){
if($fieldError[$fieldName] != ''){
if ($add == 'message') return '<p class="errors">'.$fieldError[$fieldName].'</p>';
else if ($add == 'class') return 'class ="errors"';
}
}
?>
<!--Begin Form-->
<div <? echo addErrors('Field4', $fieldError, 'class') ?>>
<label id="profile" class="icons" for="Field4">Email</label>
<input id="Field4" name="Field4" type="text" class="formreg" tabindex="1"/>
<? echo addErrors('Field4', $fieldError, 'message')?>
</div>
<div <? echo addErrors('Field6', $fieldError, 'class') ?>>
<label id="profile" class="icons" for="Field6">Name</label>
<input id="Field6" name="Field6" type="text" class="formreg" tabindex="1"/>
<? echo addErrors('Field6', $fieldError, 'message')?>
</div>
<!--End Form-->
The process of retrieving the response is outlined in the API docs. Also, the markup for field errors in found the Dealing With Failure section.
Is is worth nothing that Wufoo offers API Wrappers for PHP and many other languages. I highly suggest using one of those since they make the process so much easier.
Using the Wufoo API, you'd search for a Success value of 0 in the response object and then parse the Field Errors node, as shown here:
$wrapper = new WufooApiWrapper($this->apiKey, $this->subdomain, 'wufoo.com');
$postArray = array();
foreach ($this->postValues as $value => $key) {
$postArray[] = new WufooSubmitField($key, $value);
}
try {
$result = $wrapper->entryPost($this->formHash, $postArray);
if (!$result->Success) {
foreach ($result->FieldErros as $key => $value) {
echo "Error on $key. Error Text: $value <br />";
}
}
} catch (Exception $e) {
//Read the error message.
}
A followup question was posted above, so I'll add my answer here.
You asked how to display an error next to the form in question. You could do this with either javascript or php. I'll show you the PHP way only.
Using PHP, you could redirect back to the form with a value in the GET param of the URL, enumerating the error fields and messages. So, for example, you could do this:
for($result->FieldErrors as $name => $value) {
$str.="$name=$value&";
}
if($str) {
$str = '?errors=true&'.$str;
$host = $_SERVER['HTTP_HOST'];
$uri = rtrim(dirname($_SERVER['PHP_SELF']), '/\\');
header("Location: http://$host$uri/$str");
exit;
}
Then, you'd wrap the above code in this if statement to check for error values on postback, like so:
if($_GET['errors']) {
require_once('my-wrapper.php');
else
//Your HTML HERE
endif
After that, add some PHP conditions which append class names to your fields if they contain errors. For example:
<label id="Field4" class="icons <?php if ($_GET['Field4']) echo 'error'; ?>" for="Field4">Email</label>
Finally, add some CSS to call out the error fields with a color or other indicator.
The other way to do this is with javascript.
Use the same logic as above, but add the following script to your page (grabbed from here and here.)
<script type="text/javascript" charset="utf-8">
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return 'error';
}
}
}
function changeClass (elementID, newClass) {
var element = document.getElementById(elementID);
element.setAttribute("class", newClass); //For Most Browsers
element.setAttribute("className", newClass); //For IE; harmless to other browsers.
}
changeClass('Field4', 'error');
</script>
Then use this markup instead:
<label id="Field4" class="icons" for="Field4">Email</label>
Good luck.
PS: This code was written here in SO, so it will probably contain syntax errors. But you can get the point...