I've spend a week on this issue and it is probably real simple...
I am using osTicket (open source support ticket system) on my site. I want to use the ticketform as a contact form on one of my pages. I only want to show the form id="ticketForm" (see code below) because I don't want all the rest of the code (menu with Support Center Home, Open New Ticket, Check Ticket Status buttons etc.) from the open.php file - I tried to use an iframe, but too many problems and iframe is not a good way to do it.
I want to use this part (I don't show all the code because I think there is some sensitive information in the code - hope that is okay):
<form id="ticketForm" enctype="multipart/form-data" action="open.php" method="post">
<input type="hidden" value=......... etc. code for name, email, attachment fields, captcha etc.</form>
from:
www.mysite.com...../support/open.php
and show it on:
www.mysite.com...../contact.html
so that I get a contact form that blends in with the text I have on that page.
Any simple way to do this? Please be gentle (don't assume that I know things that you take for granted) - I'm no coder :o) Thanks.
In contact.html do the following:
$('#result').load('/path/to/open.php #ticketForm');
that will retrieve the form with id ticketForm from open.php and place it inside the div with id result in your contact.html page.
See the Loading page fragments section of .load() jquery method.
UPDATE:
You should put the above code in the document.ready handler inside the <body> of your contact.html, like so:
<script type="text/javascript">
$(document).ready(function() {
$('#result').load('/path/to/open.php #ticketForm');
});
</script>
Related
I want to create a button with press & release actions, so, for example, when i press it, it shows some text and when i release it it hides the text. Can anybody help?
What i have already tried:
<form action="forwardon.php" method="get">
<input type="submit" value="Forward">
</form>
This just creates a button which redirects to a page which is running the desired action: but you cant create press & release actions with this..
And i cant find any way how to do this.. Or is it just not possible with php?
Well, yes. It's not possible with php, you need to use javascript for that.
Every button has events: onmousedown and onmouseup. You can see the list of events here
Basically, you need to create functions, that will be fired in javascript while pressing/releasing. It would look like this
<html>
<-- your html here -->
</html>
<script>
document.getElementById('id-of-your-button')
.addEventListener('mousedown', function() {
//change the text you need here with pure javascript
});
</script>
The same goes with onmouseup event too.
To know more about javascript visit w3schools
Like James already said. In PHP it isn't possible to make something like button events, because PHP is a ServerSideLanguage.
As he also mentioned, you have to use for example JavaScript.
With the following script you are able to change the text with mouse events
<input type="button" value="Forward" onmousedown="getElementById('text').innerHTML = 'pressed';" onmouseup="getElementById('text').innerHTML = '';">
<p id="text"></p>
PHP won't be able to do this without refreshing the page/going to a new page.
JavaScript can give you what you are looking for.
see w3schools first example for showing text.
Hope this helps
Im trying to create a grid on my page in each cell there will be a simple one line form. If a person enters data into lets say FieldA I would like the php to perform actionA but if the data was entered in FieldF I would like actionF performed. Is this possible without having to create a php for each cell and upload all those php files?
Or is there a way to perform the GET method in each form to append the data to the end of the action url without the field name showing (ie sample.com/somestuff/fieldA instead of sample.com/somestuff/fieldname=fieldA) thus not needing php at all?
Did you try anything. Please try to write some code. If you get struck paste the code here, somebody will help you out..
In my opinion, why you need different forms. Just have a form which has n text boxes and perform the task that you need.
Your problem is a little ambiguous to me. I'll give it a shot though.
On the form I would set:
`method="post" action="<?php echo $PHP_SELF ?>"`
This will cause the form to submit back to itself. Then at the top of the page you could do something like the following:
<?php
if (isset($_POST["fieldA"]){
performActionA();
} else if (isset($_POST["fieldB"]){
performActionB();
}
etc...
?>
Is that what you are trying to do? Keep in mind php is executed server side before any interaction with the user.
otherwise you could use javascript to change the action field of the form. (Untested)
<script type="text/javascript">
function setAction(elt){
var page = document.getElementById(elt).value;
document.myform.action="sample.com/somestuff/"+page;
}
</script>
<form id="myform" action="sample.com/somestuff/">
<input type="text" name="text1" onchange="setAction('text1')" />
</form>
Here's my problem: I'm trying to set up a simple mobile contact form with a captcha built in. The page I'm working on can be found here: http://m.lancasterpainting.com/contact.php
I'm using the following php contact form: http://www.html-form-guide.com/contact-form/php-email-contact-form.html
I want to first say that I'm not the only one to run into this problem. After googling the issue, I've found multiple people struggling with this, but no-one seems to have an answer.
Now for the problem...
As you can see if you visit the page, each time the page is accessed, an error appears that says "Error: couldnot get Form object contact_form".
I cannot--for the life of me--figure out why the javascript can't find the form I pass it.
I call the function that generates this error at the top of the page:
var frmvalidator = new Validator("contact_form");
The form I'm referencing is as follows in the HTML code:
<div data-role="page" data-theme="e" id="contact_form" name="contact_form" data-position="inline">
...
And the function that is called that generates the error can be found in an external .js file here: http://m.lancasterpainting.com/scripts/gen_validatorv31.js
Is there something that I am simply not seeing? Why can't the javascript locate the form?
Thanks so much to anyone that helps with this.
There's no form named contact_form, but one with id=sendEmail. You may wonder, but div is not a form: <div id="contact_form"
Javascript code is run too early, document isn't ready and document.forms collection is even not available when form validator code is called.
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.
My problem is, that the browsers' (IE&FF) autocomplete does not work for my login form.
I have a webapp with CakePHP & jQuery. To allow visitors to login/register unobtrusively. The login form is inside a div, which is loaded via AJAX. (This enables logging in without a page reload.)
The browsers do recognize it as a login field, as they prompt me to save the credentials when clicking login. And they really do save the username/password, as they appear between the saved ones in the browser settings. But the saved username/password is never entered automatically. They do not appear pre-entered when the page loads. When I start typing in the username, the username appears as a suggestion, but even when you select it, the password is not entered next to it. Why? How can I get this working?
That you can test it yourself, here is a simple AJAX login form:
http://gablog.eu/test/ajaxlogin.html
It loads the following login form, if you go to the url below, autocomplete will work for just the plain form, so it is not a problem with the form itself, but rather that it is AJAX loaded:
http://gablog.eu/test/loginform.html
The layout:
<div id="user-bar">
<script type="text/javascript">
$(function() {
$("#user-bar").load('loginform.html').html();
});
</script>
</div>
The view loaded (when not logged in):
<form id="form-login" action="" onsubmit="login(); return false;">
<input type="text" id="username" name="username"/>
<input type="password" id="password" name="password"/>
<input type="submit" value="Login"/>
<div id="login-error" class="error-message"></div>
</form>
<script type="text/javascript">
function login() {
$.post('/ajax/login', $("#form-login").serialize(), function(data) {
if (data.success) {
$("#user-bar").load('userbar.html').html();
} else {
$("#login-error").html(data.message);
}
}, "json");
}
</script>
To clarify: I do not want to use AJAX autocomplete, I want the browser's autocomplete to work for my login form. This is an issue between my form and the browser. jQuery submission seems to play a minor role, as the usernames/passwords are saved. They are just not auto-entered for ajax loaded HTML elements! (The test site does not use jQuery submission.) Related question: browser autocomplete/saved form not work in ajax request
Autocomplete, in Firefox at least, triggers during page load. Adding the content afterwards would miss the window of opportunity.
A login form is tiny. I'd include it in the page from the outset and consider hiding it with CSS until it is wanted.
In case it helps, msdn says (towards the bottom of the page):
Note: if both of the following
conditions are true:
The page was delivered over HTTPS
The page was delivered with headers or a META tag that prevents
caching
...the Autocomplete feature is
disabled, regardless of the existence
or value of the Autocomplete
attribute. This remark applies to IE5,
IE6, IE7, and IE8.
I've emboldened the interesting bit.
.
I don't think you can get the form autocomplete to work if you load the form via ajax (security-wise I don't know if it can be really be abused or not, but the fact that a script could start loading fields into the page to see what data gets inserted doesn't look too good to me).
If you can, the best option would be to add a conditional block to the php file and include the form or not depending on whether the user is logged or not. If for some reason you can't do that, you might want to try to do a document.write() instead of the ajax call (and yes, using document.write is ugly :)
I see case when login form has to be pulled with ajax - if rest of the website loads as static html (cache). Login form (or authed user info) cant be displayed statically.
So your solution is to pull the form right after declaration (end tag) of the DOM element that serves as parent element for ajax-pulled loginform's html, ex:
<div id="loginforms_parent"></div>
<script language="javascript">
/* ajax request and insert into DOM */
</script>
And browser has the form in DOM onLoad. Tested, firefox does autocomplete in that case.
I'm not happy with loading the login form into my page at load time so I filed a issue with Chrome instead;
http://code.google.com/p/chromium/issues/detail?id=123955&thanks=123955&ts=1334713139
there is answer given : http://www.webmasterworld.com/javascript/4532397.htm . it does something with submit method and then uses click method. as i know values are not saved if form is not submitted. i think author of that solution just makes it submitted though submit button is not clicked by user.