beginner AJAX

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Justn226
    New Member
    • Apr 2008
    • 14

    beginner AJAX

    hi, I am a beginner with AJAX, i have an assignment where I have to pass a number to my php script and have it sent back converted into CELCIUS OR FARENHEIHT(spel led wrong). The problem is I dont know how to pass multiple arguments to my php script...

    Here is my stuff below if you can look at it and someone could help me i would appreciate it...

    HTML

    [HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <title>Ajax C-F conversion</title>

    <style>
    .NoNum {color:red; font-weight:bold;}

    </style>


    <script>[/html]
    [code=javascript]var http = createRequestOb ject();

    function createRequestOb ject() {
    var ro;
    var browser = navigator.appNa me;
    if(browser == "Microsoft Internet Explorer"){
    ro = new ActiveXObject(" Microsoft.XMLHT TP");
    }else{
    ro = new XMLHttpRequest( );
    }
    return ro;
    }

    function convertTemp(arg Temp) {

    http.open('get' , 'convert.php?te mp='+argTemp);
    http.onreadysta techange = handleResponse;
    http.send(null) ;

    }

    function handleResponse( ) {

    if(http.readySt ate == 4){

    document.getEle mentById("resul ts").innerHTM L = http.responseTe xt;
    }
    }[/code]

    [html]</script>
    </head>

    <body>

    <div>
    <form name="myForm" action="#">


    <h1>Enter Degrees Here:</h1>

    <input type="text" name="temp">

    <select name="type" id="type">
    <option value="CF">Cent igrade to Farenheit</option>
    <option value="FC">Fare nheit to Centigrade</option>
    </select>

    <input type="button" value="Submit" name="btnSubmit " onclick="conver tTemp(this.valu e);"/>

    </form>
    </div>

    <h1>Degrees Fahrenheit</h1>
    <div id="results">

    </div>
    </body>
    </html>[/html]


    PHP SCRIPT

    [PHP]<?php

    $type=$_GET["type"];

    $temp=$_GET["temp"];

    if ($type=="CF"){
    $convert=($temp *9/5)+32;

    print ($convert);
    }

    if ($type=="FC"){
    $convert=($temp-32)*(5/9);
    print ($convert);
    }


    ?>[/PHP]
    Last edited by acoder; Apr 3 '08, 08:16 AM. Reason: Added code tags
  • hkma08
    New Member
    • Mar 2008
    • 11

    #2
    Basically it is not that hard. You just need to add one more arg to your function, then continue your php link with &type= something, like this:

    Code:
    function convertTemp(argTemp,argType) {
    
    http.open('get', 'convert.php?ctype='+argType+'&temp='+argTemp);
    http.onreadystatechange = handleResponse;
    http.send(null);
    
    }
    The more serious problem is logical. You should get the values of the input and select dropdown, not the button itself, so 'this.value' never works. Instead you should get those values and pass to your onclick function:

    Code:
    <input type="button" value="Submit" name="btnSubmit" onclick="javascript:var temp=document.forms['myForm']['temp'].value;javascript:var ctype=document.forms['myForm']['type'].value;convertTemp(temp,ctype);"/>
    After these, you should be able to convert the numbers. And also, php doesn't use print ( except for arrays), instead it uses 'echo $convert;'.

    Got it?

    Comment

    • Justn226
      New Member
      • Apr 2008
      • 14

      #3
      Originally posted by hkma08
      Basically it is not that hard. You just need to add one more arg to your function, then continue your php link with &type= something, like this:

      Code:
      function convertTemp(argTemp,argType) {
      
      http.open('get', 'convert.php?ctype='+argType+'&temp='+argTemp);
      http.onreadystatechange = handleResponse;
      http.send(null);
      
      }
      The more serious problem is logical. You should get the values of the input and select dropdown, not the button itself, so 'this.value' never works. Instead you should get those values and pass to your onclick function:

      Code:
      <input type="button" value="Submit" name="btnSubmit" onclick="javascript:var temp=document.forms['myForm']['temp'].value;javascript:var ctype=document.forms['myForm']['type'].value;convertTemp(temp,ctype);"/>
      After these, you should be able to convert the numbers. And also, php doesn't use print ( except for arrays), instead it uses 'echo $convert;'.

      Got it?
      Thats not working tho...

      Comment

      • acoder
        Recognized Expert MVP
        • Nov 2006
        • 16032

        #4
        ctype should be type unless you change the PHP code.

        What's not working? Do you get errors?

        Note: there's no need for the "javascript :" protocol in event handlers.

        Comment

        • hkma08
          New Member
          • Mar 2008
          • 11

          #5
          Originally posted by Justn226
          Thats not working tho...
          well... its working for me.. take a look in my testing page.

          can you post ur new code here to see what's wrong?

          and question to acoder: when should i use 'javascript:' pre-fix for those inline js?
          sometimes it works but sometimes not w/o this pre-fix. What is it for?

          Comment

          • acoder
            Recognized Expert MVP
            • Nov 2006
            • 16032

            #6
            Originally posted by hkma08
            and question to acoder: when should i use 'javascript:' pre-fix for those inline js?
            sometimes it works but sometimes not w/o this pre-fix. What is it for?
            Mostly, it isn't needed. Can you give an example when it doesn't work without?

            Comment

            • hsriat
              Recognized Expert Top Contributor
              • Jan 2008
              • 1653

              #7
              @Justn226
              Something out of the flow, but do you really need to employ Ajax and PHP?

              If that's not a requirement, then do your calculations in JavaScript only and print the result.[html]Fahrenheit<inpu t id="f" type="text" onkeyup="docume nt.getElementBy Id('c').value=( this.value - 32) * 5 / 9"><br>
              Celsius<input id="c" type="text" onkeyup="docume nt.getElementBy Id('f').value=t his.value * 9 / 5 + 32">[/html]


              Harpreet

              Comment

              • acoder
                Recognized Expert MVP
                • Nov 2006
                • 16032

                #8
                Originally posted by Justn226 via PM
                that example i put on there, it doesnt do anything it just sits there, doesnt process doesnt do anything...
                Please read Do NOT PM questions to individual Experts, Moderators or Administrators. Thanks!

                You will often find errors by checking the error console of a decent browser.

                Comment

                • Justn226
                  New Member
                  • Apr 2008
                  • 14

                  #9
                  I dont know why it doesnt work, i took your code and compared them side by side then I just copied them over into IIS and tried it but they dont work...

                  Comment

                  • Justn226
                    New Member
                    • Apr 2008
                    • 14

                    #10
                    yeah this is a school assignment that uses strictly ajax and php, if it was a javascript assignment it woulda been done 2 days ago, unfortunately for me the professor wont help me out...

                    Comment

                    • hsriat
                      Recognized Expert Top Contributor
                      • Jan 2008
                      • 1653

                      #11
                      Code:
                      //-------------------LINE 14----------------------------
                      
                      function convertTemp(argTemp, argType) {
                      
                      //--------------------LINE 16---------------------------
                      
                      http.open('get', 'convert.php?temp='+argTemp+'&type='+argType);
                      
                      //---------------------LINE 19-------------------------
                      
                      <input type="button" value="Submit" name="btnSubmit" onclick="convertTemp(document.forms['myForm'].temp.value, document.forms['myForm'].type.value);"/>
                      Do these changes and try again.

                      And as this was a part of your assignment (thus I was not supposed to help you), I strongly recommend you to understand why I made these changes.

                      1. When you say this inside an HTML tag, it means you are referring to that particular tag. So on line 19, this.value didn't mean the value of the form fields, but the value of the submit button (ie. Submit).

                      2. Inside your PHP, you are using two GET parameters, but you passed only one in your JavaScript (line 16).

                      3. For second parameter, you had to give two arguments to the function. (line 14)

                      4. The parameters in the url (line 16) need to be same as the ones which you retrieve by GET method. That's why its $_GET['temp'] and $_GET['type'] and not $_GET['ctype']


                      Regards,
                      Harpreet

                      Comment

                      • Justn226
                        New Member
                        • Apr 2008
                        • 14

                        #12
                        THank you, I do understand the changes you have made...

                        I didnt think it was a good idea to go to a forum but I was seriously out of options, but I just learned what AJAX was and couldnt get help anywhere else, so i thank you greatly....

                        Justin Gayheart

                        Comment

                        • hsriat
                          Recognized Expert Top Contributor
                          • Jan 2008
                          • 1653

                          #13
                          You are welcome :)

                          Harpreet

                          Comment

                          Working...