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;
});
Related
I am using a TinyMCE plugin inside my form.so that user can write a small
formatted blog about their job.but there is a trouble in
storing those data in a var using javascript.
processing and
transferring that file(.rtf) through a mail using PHP mail().
when the user submits the form.
so I need some suggestions. how I can do this thing for form.
so far I have tried retrieving the text using jquery but it's not working.
just have a look at my simplest code for retrieving those text.
<form>
<textarea id="tinymce"></textarea>
</form>
<button onclick="myfunctionforTinyMce()">hit me!</button>
<script>
function myfunctionforTinyMce(){
alert($("#tinymce").val());
}
</script>`
this is the output on clicking on that button
Thank you.
If you look at this question, you can see that the TinyMCE editor is not a normal TextArea. You need to call the TinyMCE object API methods for manipulating its content.
var content = tinymce.getContent('tinymce');
alert(content);
This should do the trick for your example. It will return the content in HTML format.
EDIT
To get the content as plain text, try the following:
var content = tinymce.get('tinymce').getContent({format:'text'})
EDIT #2
I added a CodePen below demonstrating a simple implementation with a button alerting the content to you. Just replace the alert with an AJAX-call ($.post(...) for example), or do a normal form submission where you post the content to your backend PHP server. Then let the server use the data to send the mail.
https://codepen.io/canis1980/pen/qYVKPW
I am having a problem using ajax in my code. How it is supposed to work is that index.php would pass values through to ajax.js, then go to further.php. In further.php a tree diagram will be generated and is supposed to be presented in a div in the index.php page. This should be done when I click "Go further" on index.php. However, when I try this, the output is now showing up. The div is was given a border, so I see that the div shows up empty, when it should have the tree diagram from further.php. Below are before and after images of the process, where I click "go further", to get the diagram from further.php.
Image 1: index.php before the link is click and the ajax function is called.
Image 2:The empty div screen shot.(Under the text:"Go further"). The partial diagram above the empty div is what the tree should look like. After ajax function is called. The empty div, that is that bordered area below the number 1, is where the tree diagram from further.js is supposed to show up.
The figure 1 seen in the image, that is under the text:Go further in image 2, is a test to see if the data is being passed successfully from index.html, through ajax.js to further.php. This figure appearing, says that data is being passed successfully. But the required output is not showing up, the div is coming up empty.
How do I fix this?
So why doesn't the tree diagram in the javascript code of further.php show up?
Where exactly is the problem? Just that the ajax isn't working? I would suggest you take some time to learn jQuery, it is much simpler for handling ajax and many other javascript functions. And develop a testing routine to test your ajax responses; create a and make sure that a simple string is passing there before trying to pass more complex function generated results. And fix the SQL injection issues.
One line of code that doesn't make sense: $row2['Pid']; what is this supposed to do?
Why ajax was not working in your code . A small bug in your code on handling ajax response .
function handleAjaxResponse()
{
if (xmlhttp.readyState==4)
{
document.getElementById("output").innerHTML = xmlhttp.responseText;
}else{
document.getElementById("main").innerHTML = "";
}
}
There is no xmlhttp variable should be resolved in handleAjaxResponse method this is the reason for error . Please refer the below code .
xmlhttp.onreadystatechange = handleAjaxResponse(xmlhttp);
function handleAjaxResponse(xhr){
console.log(xhr);
}
I need to make a form where client information can be added by people at the administration department. On the first form page, information like client name, address and contact details can be entered, as well as whether or not the client has children.
The form gets validated by PHP. If the client does not have children, the data is saved to the database. If the client does have children, the form data gets saved in hidden form fields, and a second form page is shown, where up to 10 children and can be added.
However, on initial page view, only one text input is visible. With a javascript button, more text input fields can dynamically be added (until the limit of 10 is reached).
The problem is the validation in PHP. If one of the text inputs contains a non-valid string, the form should be re-displayed with the right number of fields, and those containing errors in a special HTML class (in the CSS i give that class a red border for usability reasons, so the user can immediately see where the error resides). However, because the adding of fields happens with Javascript, the form gets re-displayed with only one field.
Any ideas on how to address this problem are very welcome. I'm proficient in PHP, but JavaScript is very new to me, so I'm not able to make big changes to the script i found to dynamically add fields.
I've dealt with something similar in the past. There are a couple of options that come to mind.
Since you have JS code to generate new fields at the click of the button, why not expand that JS function so it can also be called with some parameters passed. If there are parameters, it will populate the fields with existing data.
Then, if the form is being re-displayed due to errors, or for editing, from PHP, pass some information to Javascript so that when the page loads, you create the fields and populate them with data.
To illustrate, I assume you have something like this:
Add Another Child
And you have the function:
function addNewFormField() {
// create new HTML element to contain the field
// create new input, append to element container
// add container to DOM
}
Change it so it is like this:
function addNewFormField(data) {
// create new HTML element to contain the field
// create new input, append to element container
// add container to DOM
if (data != undefined) {
newFormElement.value = data.value;
newContainerElement.class = 'error';
}
}
And from PHP, add some code that runs onload:
<script type="text/javascript">
window.onload = function() { // replace me with jQuery ready() or something proper
<?php foreach($childInList as $child): ?>
addNewFormField({ value: '<?php echo $child['name'] ?>' });
<?php endforeach; ?>
}
</script>
Hope that helps, its a high level example without knowing exactly how your form works but I've used similar methods in the past to re-populate JS created fields with data from the server side.
EDIT: Another method you could use would be to create the HTML elements on the PHP side and pre-populate them from there, but that could end up with duplicate code, HTML generation from JS and HTML generation of the same stuff from PHP. As long as the JS side was smart enough to recognize the initial fields added by PHP you can go with whatever is easiest to implement. Personally I'd just extend your JS code to handle optional data like illustrated above.
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 want show Loader img with jQuery when you post by PHP Simple action="search.php" Not ajax post or jquery post
and Thanx for all
This problem is not solvable in a meaningful way without the use of AJAX. In other words, you need AJAX to show a "loading" image while the response from a form submission is handled by the server.
If I understand you correctly, then you have a form:
<form action="search.php" method="post">
...
</form>
And it is handled as a regular HTML form. The data is passed by the page to the server that uses PHP to handle it. Without AJAX, you have no good way of finding out when the response of the form, the search results, are ready.
Generally, what is done is that the form is submitted to the server with the use of AJAX. The form is handled by the server (PHP does its stuff). During this time, a "searching" image is shown. Then when the server responds, the image is removed and the search results are shown.
Using jQuery and AJAX on a page this could be done like this:
jsFiddle example
// The form has an id of "theForm".
// This function defines what happens when it is submitted.
$('#theForm').submit(function() {
// Replace the form w the search icon.
$("#theForm").html('Searching...<br/>' +
'<img src="http://i.stack.imgur.com/ZK0sq.gif" />');
// Make the search request to the PHP page.
// The 3 arguments are:
// 1 - The url. 2 - the data sent
// 3 - The function called when data is sent back
$.post("/ajax_html_echo/", $(this).serialize(), function(result){
// Here we replace the search image with the data
$("#page").html(response);
});
// Cancel the regular submission of the form.
// You have to do this, or the page will change and things won't work.
return false;
});
The nice thing about the above is that it degrades nicely if JS is off, since you still have the regular HTML form and its regular submit functionality to fall back on, and if JS is on, then it blocks this regular functionality with the return false and uses the AJAX.
Jquery used:
.submit()
.html()
.post()
.serialize()