0

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.

user1647423
  • 3
  • 3

1 Answers1

1

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>
Nelson
  • 49,283
  • 8
  • 68
  • 81
  • Thanks very much. I have actually tried that one, but it doesn't seem to do a thing. Maybe it is because it is a local site I'm working on? (sorry I should have said that, but all other local sites work fine). I use Wampserver. In my contact.html page I have placed this in the head: and this in body:
    I tried the physical address "file:///C:/wamp/www/support/open.php" but nothing. Any ideas?     – user1647423 Oct 15 '12 at 19:42
  • You must put the code of my answer in the BODY not the HEAD, also in de .ready handler, see the update of my answer. – Nelson Oct 15 '12 at 19:51
  • Thanks again. Strange, I tested the code on another site that is online and it worked after I inserted in the head. BUT it still doesn't work on my local testsite and that is a problem for me - firebug gives me this error "TypeError: $ is not a function" for the line with "$(document).ready(function() {". What is wrong? Website is on "file:///C:/....." and osTicket is on "http://localhost/" - same computer but... is it something about the same-origin policy or is it the wampserver?? – user1647423 Oct 16 '12 at 01:51
  • It seems you don't have internet access in your local testsite, that's why it can't retrieve ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js and so the error you get, just download from a pc with internet access and put it in the same directory as your html file and include it in HEAD as – Nelson Oct 16 '12 at 09:08
  • My computer has internet access so that isn't the problem. I found out what the problem is, and it was the problem I suggested - the same-origin policy. I inserted this in my php file "header('Access-Control-Allow-Origin: *');" right after " – user1647423 Oct 16 '12 at 22:29
  • I found out that the load function doesn't pass the information back when a user presses the "send" button. It only shows the form. I thought it worked like an iframe... it doesn't! I need another solution. – user1647423 Oct 17 '12 at 16:58