Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    19
    Thanks
    7
    Thanked 0 Times in 0 Posts

    how to embed ajax/jquery form in html template

    Hi guys
    I have been struggling with this for the past 2 days. I can't get it to work. I don't know much coding, but usually I do things by trial and error and get things to work. But this time, I give up. I need help.

    I have downloaded the template located here: http://www.sendspace.com/file/agsytv

    you see how on the homepage there are 3 tabs: flight, hotel, rental?

    I want this part to function as a quote request form.

    When someone fills out this form and presses submit, they should get a message in that same box saying "thank you for your message...blah blah"
    the page should not refresh.

    I have downloaded several ajax contact us forms, but I don't know how to integrate these into the html page.

    here is one cool form (there is demo and download)
    http://net.tutsplus.com/tutorials/ja...-using-jquery/

    here is another one: http://www.brightcherry.co.uk/scribb...th-validation/

    how do I do this?

    here is the result of my work if you want to see it (obviously form does not work)
    language (dot) comxa (dot) com

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,987
    Thanks
    4
    Thanked 2,660 Times in 2,629 Posts
    Despite the similar sounding names, Java is not the same as Javascript.
    Moving from Java forum to Javascript forum.

  • Users who have thanked Fou-Lu for this post:

    mike316 (05-04-2012)

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    At the very first you have to be clear about the fact that JS can be disabled so make sure that your form is working without JS before you go about AJAX and all that stuff. Then I guess the following is clear to you but I’m gonna say this anyway: it doesn’t help do not know what you’re doing when you wanna do something. Building a website properly requires more than just trial and error. That said, the tutorial you linked to actually explains everything pretty well, you just have to take the time to actually read stuff, not just copy and paste the demo code. I know, this requires discipline and takes a little time but honestly, that’s what I (and I guess every decent coder here) expect from someone who wants to implement advanced features in their website(s).

    Now, I’m not gonna do your work, that’s what people usually get hired and paid for by people that have no clue about the technical stuff and still want a fancy website. Assuming that this is not an option for you I’m gonna give you some hints to help you in your learning experience:

    1. Validate your code. Valid HTML is helping very much in having a properly functioning website.
    2. jQuery is a JavaScript framework that has pre-made functions that are reusable and facilitate writing your own scripts. jQuery plug-ins (one of which is this AjaxForm plugin) are other pre-made functions that are dependant on that core framework. That means if you want to use a jQuery plugin or you want to write your own jQuery code you need to include the core framework at first, before you write or include any additional jQuery, and you need to include it only once in your HTML document. Usually when you browse for jQuery scripts online they tell you to include something like this:
      Code:
      <script src="includes/jquery-x.x.x.min.js" type="text/javascript"></script>
      <script src="includes/jquery.pluginname.js" type="text/javascript"></script>
      <script type="text/javascript">
      $(document).ready(function() {
      	…some jQuery here…
      });
      </script>
      The first line includes the jQuery core framework (the x’s being the version number) and you only have to include this if you don’t have it included previously. You have to omit that if you’re using jQuery for something else on your page already, otherwise it will lead to conflicts. Looking at the source code of your page I see that jQuery is referenced in the head already, and in a much more recent version (although still somewhat outdated) than what the demo at nettuts provides.
      The second line of the code above is the jQuery plugin. You need to make sure the file path is correct, otherwise the browser can’t find it. And the rest is the script invoking the actual functionality of the plugin on your page.
    3. Your form has an action attribute with a reference to “submitemail.php”. If I submit the form, an error 404 comes up revealing that there is no such file (probably because that’s just the sample file name from the demo code you copied and pasted). As said earlier, you need to do the form processing on the server (i. e. without JavaScript). Not only to cater for the odd user with JS disabled but also because it’s not possible to send an e-mail just with JS and without some server side script (at least as far as I know).


    So, you’ve got a long way ahead of you and unless you’re really aiming to learn web development I’d suggest to hire someone to implement that for you.

  • Users who have thanked VIPStephan for this post:

    mike316 (05-04-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •