I wont to create a pdf from a form on my page, but the Problem is, I need it excactly like the page with form, all entires.
So I have for example
2 Input Fields, 7 Radio, 2 Checkboxes, and as result i need a PDF with the same sructure, but if someone check the checkbox, it must be saved in pdf.
I have tryed to save the html content of the page on submit, and save it first in html file, but the problem is, my selections woundn't be saved.
The result must have the same as i would print my form.
I hope someone can help.
The Code i using to save the page content.
> $(document).ready(function(){
> $('input[type=submit]').click( function() {
> var formname = $("body").find("form").attr("name");
> var htmldata = $("form[name="+formname+"]").html();
> var enchtmldata = ncodeURIComponent(htmldata);
> $.ajax({
> type: "post",
> data: "data="+enchtmldata,
> url: "makepdf.php",
> success: function()
> {
> alert("success"); },
> error: function() {
> alert("error"); } });
>
> }); });
PS: I using PHP and jQuery
ADDED: I think it is better to try first of all to save the form page as html, but to keep the entries in it. After that to try to convert it. But the Problem is, to save it with all data.
ADDED: how can I add a attr selected to an option field?
Run this in your browser's javascript command line, copy-paste the result to text editor and save as html file.
$('body').text($('html').html())
Depending on your browser, this may also work when copy-pasted to address bar:
javascript:$('body').text($('html').html())
The output is "dynamic" page source, i.e. DOM tree rendered into text.
What do you use to convert the HTML to PDF? I can recommend TCPDF for that job: http://www.tecnick.com/public/code/cp_dpage.php?aiocp_dp=tcpdf
It can convert HTML with CSS to a PDF form. I haven't tested it myself but I am quite sure that it will even keep the checked option. But for sure you have to create the HTML with PHP to have the checkbox checked.
<input type="checkbox"<?php echo ($_REQUEST['checkbox_name'])? ' checked="checked"' : '' ?> />
You should than be able to create the correct PDF form with the TCPDF Class.
Ok, I think the problem ist, that checking a checkbox in the browser doesn't change the HTML source. So if you want to transfer the HTML via AJAX, you have to "convert" the checked state within the browser to a real source checked state.
I am not an jQuery expert, but you shoul select all input[type="checkbox"] and test if they are checked. If they are, add an attribute "checked" with the value "checked" to the checkbox. Otherwise remove the checked attribute if it is present.
The source HTML will than have all the correct checked states. Without this method you might get some the checkboxe that have been preselected with PHP but have been deselected by the user.
I hope my answer was clear enough, sorry for my english :)
Have you tried placing the page as a background with the variables as conditional overlays? I have achieved this in the past using FPDF. Radio buttons can be placed as an image ontop of the existing screen dump. You will have no problem putting the text in the right place also.
Is there any reason you can't just take the form data and send it to a sever process that will store the form data in a database? From there it should be a relatively simple process to populate the HTML form and generate a PDF form from the database.
Related
I've been looking around for solutions for this for quite sometime and sadly, haven't found a proper solution for it.
Here's the situation.
I have a Bootstrap modal that displays text ( let's call it 'header' ) depending on which button was clicked. The header value is picked up from the data-attribute of the button and using jQuery, I update the text for the respective modal. I hope I've been clear enough about this.
Now, I want to use the same header text in a PHP Script that queries my MySQL table with this 'header' value in the LIKE clause of my query as '%header%'.
Seems simple enough but I can't get my head around it.
Here are some issues that I face:
The header value is empty in the PHP script when I try to pass it to the script. I tried using script_tags to strip the tags around the HTML of the header and just extract the text and also tried PHP DOM but it did not work.
Here are the basic steps for further clarity:
I have a PHP script that needs to get a text value from the HTML on the same page.
This text value was picked up from a data-attribute of a button and updated via jQuery to the HTML.
This text value must be included in the LIKE clause of MySQL query in the PHP script for any updates to the table.
I can handle everything else except the extraction of text and sending it to the PHP script part.
Thank you.
Adding Code for reference:
This is the HTML code that houses the data-attribute:
The $project_title variable was set previously and appended to the button.
echo "<a class='delete_icon' data-project_title='$project_title'><i class='fa fa-trash'></i></a>";
This is the jQuery code:
$('#project_profile_modal').on('show.bs.modal', function (event) {
var del_icon = $(event.relatedTarget);
var project_title = del_icon.data('project_title');
modal.find('h4').text(project_title);
}
This is the excerpt of the PHP script that is relevant:
<?php
$result = "SELECT content FROM my_table WHERE content LIKE '%$project_title%';
?>
Question is: how do I get the text contained in h4 to $project_title/my LIKE clause.
Assuming button looks something like:
<button class="modal-button" data-text="..." data-row_id="...">
Then in click handler you gather all the data and send to server:
$('.modal-button').click(function(){
var data = $(this).data();
// send to server
$.post(url, data, function(response){
// update modal header and content
$('modal-header-selector').text(data.text);
$('modal-content-selector').html(response);
})
})
I'm trying to make smileys work, so I'm going to post the full problem, maybe someone knows a better solution. I have this chat system, where you can click on a smiley and it's value gets passed to the <textarea> much like Google hangouts. Value is "smile_n" where 20 > n > 0. I store it like that in the database, and I have PHP code that's in charge of displaying the proper <img src="smile_n"> tag when parsing data from SQL, but when I pick a smiley, it will write "smile_n" in the <textarea>. Is there ways to change this?
Here's how I drop smileys into the <textarea> element:
$(".smilepick").click(function(){
$('#chatty').val($('#chatty').val()+(' ')+$(this).attr('href')+(' '));
var el = $("#chatty").get(0);
var elemLen = el.value.length;
el.selectionStart = elemLen;
el.selectionEnd = elemLen;
el.focus();
});
Can I somehow make it parse "smile_n" words into images, but keep the value that gets inserted into database "smile_n" so PHP code won't fail?
If you could use div with contenteditable, you could start with something like this:
HTML
<div id="editable" contenteditable="true">
Everything contained within this div is editable in browsers that support.
</div>
Jquery
var smile_ha_img = '<img src="http://placehold.it/16x16"/>';
$('#editable').keyup(function() {
$(this).html(function(i, v) {
return v.replace('smile-ha', smile_ha_img);
});
});
It will replace every smile-ha with the given image.
Try it here: http://jsfiddle.net/tb8vQ/1/ Type smile-ha into paragraph on 4th panel.
Then you can make the content of the div be copied to a hidden textarea to be send by your form as usual.
To Do
You must optmize it for the amount of smiles to check and replace.
After the function replace the string with the html, the carret position is placed on beginning of string (at least in my browser). There are a lot of answers here in Stackoverflow about how to solve this.
The keyup trigger used here would not be useful for your system if users doesn't type the smile code themselves. But you can change your function to be executed right after the user chose the emoticon.
Another approach
There are some WYSIWYG editors that allow you to choose which features you want to offer to your users. So maybe you could find one that you could hide all options but emoticons.
I'm looking for some general advice on the code design of a form which has to generate an image when submitted. I'm new to this, and the data communication from the form to the image generator has me stumped. Any advice appreciated (I've got lots of C experience, a bit of JavaScript, no php).
Problem: a user has to fill in a form (in Joomla). The user sets a number of parameters, and hits submit. When I see the submission, I have to call a C program, passing it the form parameters. The C program then outputs JavaScript (which codes for an SVG image). This image must then appear (preferably in a modal) at the client's browser.
I haven't been able to find an existing Joomla extension which does anything like this, or which I can modify to do this.
I can write php to call the C code, but how do I get the form data to the php, and arrange for display inside the popup? I've got a general idea of how I can use jQuery to respond to a form submission and to generate a popup using data from a form (along the lines of http://www.sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/). However, I can't see that this is relevant. The main problem is that I have to generate the SVG JavaScript on the server, and I can't influence this from the client jQuery code (I think). The client code can't, I think, do much more than style the popup.
Any pointers appreciated.
Couldn't you do something like this...
HTML
<form id="svgGetter">
//form content
</form>
<div id="svgSetter"></div>
jQuery
$('form#svgGetter').submit(function() {
alert("Posting data...");
$.post("yoursvgcreater.php", $(this).serialize(), function(data) {
if (data)
{
alert("It worked.");
$('svgSetter').wrapInner('<svg />').append(data);
}
});
return false;
});
I have this form and I would like to read the uploaded file and then fill out the form using this read information without refreshing the page.
For example the first word might be "Bob" and so I would want that to go in my input text "First_name." I've been trying to searching online for a way to do this using JQuery or Ajax but I can't seem to find a solution.
Can this be done using the two methods previously mentioned? If so and if not can someone point me to a link or to where I can learn how to do this? The instances I have found include where one uses JQuery to upload the file and display the size without refresh (which is not exactly what I want).
I have also found how one can use an iFrame but this again is not what I want. I suppose I could always just submit the part of the page containing the textfile related information and show the same form but with the filled out information. But I feel as if this is kind of sloppy and I want to know if there is a better way.
Thanks.
Firefox has a method to do this, the File and FileList API provide a way to get at the files selected by a file input element and have a text retrieval method.
A very basic example:
NB. Not all browsers support this code.
[I think Chrome, Firefox and Opera do at time of writing.]
HTML:
<form>
<input type="file" name="thefile" id="thefile" />
</form>
<div id="text"></div>
JS (using jQuery):
$(document).ready(function() {
$('#thefile').change(function(e) {
if (e.target.files != undefined) {
var reader = new FileReader();
reader.onload = function(e) {
$('#text').text(e.target.result);
};
reader.readAsText(e.target.files.item(0));
}
return false;
});
});
Demo: http://jsfiddle.net/FSc8y/2/
If the selected file was a CSV file, you could then process it directly in javascript.
.split() will be useful in that case to split lines and then fields.
the only way I know would be to submit the form to a hidden iframe. this will upload teh file without refreshing the page. you can then use any returned info using javascript. this is what they use for fake ajax style image uploads that let you preview an image before uploading. the truth is it already has been uploaded via a hidden iframe. unfortunately however iframes are not xhtml 1.0 compliant.
something like this article may help:
http://djpate.com/2009/05/24/form-submit-via-hidden-iframe-aka-fake-ajax/
The question you might ask is :
why should I use this method instead of real ajax ?
Well they’re is numereous answer to that but one good reason it that
is doesnt require any type of ajax libs and you can start using it
even if you never used ajax before.
So here it goes.
<form method=”post” action=”formProcess.php” target=”hiddenIFrame”>
<input type=”text” name=”test” /> </form>
<iframe style=”width:0px;height:0px;border:0px;” name=hiddenIFrame />
This is just a normal form but you’ll notice the target in the form
tag, this tells the form to submit in the iframe instead of the
current page.
It’s works exactly as the target attribut on the A tag.
Also the iframe is hidden from the user using
style=”width:0px;height:0px;border:0px;”
now the file formProcess.php is not different from your normal form
processing file but if you want do something on the main page you have
to use JS like that :
window.parent.whatEverYouWannaDoInParentForm();
You can also upload file with this method !
Please checkout the formphp for full example.
Cheers !
Nb : You will see the status bar acts like the page is reloading but
it’s really not.
I am very new to javascript and JQuery but I managed to get my first ajax script almost working 100%. Maybe today will be my lucky day and I can finish this up. :)
Let me give you guys a sample of each file so you know what is what. I believe that my last try at figuring this out was not successful because I was confusing these files. They are all js and have the exact same syntax.
What I have are 2 javascript files. One is called ajax.js and has the folling syntax. it calls ajax.php.
$("#admEmpID").bind("change", function(e){
$.getJSON("ajax.php?e=" + $("#admEmpID").val(),
function(data)
{
$.each(data, function(i,item)
{
if (item.field == "admEmpStatus")
{
// ?? radio buttons
}
............. etc
The next file I have is this script and is called admEmp.js. I think that this one is for my form validation.
$(function() {
$('.error').hide();
$('input.text-input').css({backgroundColor:"#FFFFFF"});
$('input.text-input').focus(function(){
$(this).css({backgroundColor:"#FFDDAA"});
});
$('input.text-input').blur(function(){
$(this).css({backgroundColor:"#FFFFFF"});
});
$(".admEmpBtn").click(function() {
// validate and process form
// first hide any error messages
$('.error').hide();
var admEmpID = $("input#admEmpID").val();
var admEmpStatus = $("input[name='admEmpStatus']:checked").val();
$.ajax({
type: "POST",...............etc.
What I would like to do is toggle my checkboxes according to the database results. If the result from the database is = 1 then the checkbox should be checked otherwise it should be unchecked.
These scripts that I have in place now will populate my textboxes from the values in the database so for someone like myself who has no idea what is happening with JQuery and its innerworkings, it is only natural for me to assume that the checkboxes will also be filled with the on/off values. Maybe I am incorrect. The last time I posted on SO looking for help, a guy mentioned that I needed to toggle the results with server side code. Is this correct or will JQuery do it for me?
I also have radio buttons in addition to the checkboxes that I need to show the values for as well. Just as a side note, the checkboxes are not grouped; they each have their own value.
Thanks for any help you guys can provide.
OK. "dz" said that I should put ('#admCustRptDly').attr('checked', true); into my script to see if that will allow me to see the checked attribute but it doesn't. The database has a 0 for that checkbox so I sould be seeing no checkmark. I put that into the ajax.js file. Here is what it looks like now.
else if (item.field == "admCustRptDly" && item.value == "1")
{
// $("checkbox#admCustRptDly").attr("checked", "checked");
$('#admCustRptDly').attr('checked', true);
}
Here is what I did that makes me think that I may be making some progress. I put an alert inside of the condition and I do NOT get an alert. If I go to a customer that does have the db value set to 1, then I do get the alert. That's more than I was getting before. But again, I am still seeing the checkmark even though the data in the db = '0'
Checkboxes behave a little differently than other input fields. When you have <input type="text" name="field1" value="foo" /> for example, the text field is automatically populated with "foo".
However, if you have <input type="checkbox" name="field2" value="1" />, the checkbox doesn't have anything to populate. This is because the checkbox has a special "checked" attribute that determines whether or not it is checked by default. As such, it's very possible your script that populates your textboxes are putting in the correct value for the checkbox, but are not setting the checked attribute.
To do so with jQuery, you can do $('#checkboxid').attr('checked', true);.
If I understand correctly, you have a form that is updated asynchronously via an Ajax call when you change the value in the #admEmpID field (first js file).
The second js file contains code to post changes you made to the form back to the server. I don't think it's for form validation (at least not the part you're showing).
But I'm not sure what the problem is. The first js file gets data from the server when you change some text field (#admEmpId). Is that data not shown correctly? You mention that textboxes are filled with the correct data. Are the checkboxes and radiobuttons not selected when they should be? In that case, you must first make sure you understand what data is returned from the server (contained in the data variable in the first js file). Then you must verify that the script addresses the right elements on your page to be updated.
You may just need another else if clause in your javascript for the case when you want to uncheck a box:
else if (item.field == "admCustRptDly" && item.value == "0")
{
$('#admCustRptDly').attr('checked', false);
}
You could, however, simplify both cases into a single statement like so:
else if (item.field == "admCustRptDly")
{
$('#admCustRptDly').attr('checked', ((item.value == "1") ? true : false));
}