www.webdeveloper.com
Results 1 to 2 of 2

Thread: Ajax does not pass data to php

Hybrid View

  1. #1
    Join Date
    Dec 2012
    Posts
    5

    Ajax does not pass data to php

    I need to get work the code where Ajax passes data to php.

    Below is script of file ___01.php
    There is drop down menu with variables No and Yes. Default value is No.
    If i do not change drop down menu variable, script works ok. When I change default value, script does not work (I press Submit and nothing happens).

    What is wrong with the code? I suppose problem is related with JavaScript... but do not understand where

    Code:
    <html>
    <head>
    <script language="JavaScript" type="text/javascript">
    function ajax_post(){
        // Create our XMLHttpRequest object
        if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    var hr = new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    var hr = new ActiveXObject("Microsoft.XMLHTTP");
    }
        // Create some variables we need to send to our PHP file
        var url = "___02.php";
        var fn = document.getElementById("first_name").value;
        var ln = document.getElementById("last_name").value;
    	var aphr = document.getElementById("apply_hourly_rate").value;
    	var sabt = document.getElementById("salary_before_taxes").value;
        var vars = "firstname="+fn+"&lastname="+ln+"&apply_hourly_rate="+aphr+"&salary_before_taxes="+sabt;
        hr.open("POST", url, true);
        // Set content type header information for sending url encoded variables in the request
        hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        // Access the onreadystatechange event for the XMLHttpRequest object
        hr.onreadystatechange = function() {
    	    if(hr.readyState == 4 && hr.status == 200) {
    		    var return_data = hr.responseText;
    			document.getElementById("status").innerHTML = return_data;
    	    }
        }
        // Send the data to PHP now... and wait for response to update the status div
        hr.send(vars); // Actually execute the request
        document.getElementById("status").innerHTML = "processing...";
    }
    </script>
    
    <script type="text/javascript">
    function hourly_rate(str)
    {
    if (str=="")
      {
      document.getElementById("hourly_rate").innerHTML="";
      return;
      }
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("hourly_rate").innerHTML=xmlhttp.responseText;
    	}
      }
    xmlhttp.open("GET","___02.php?hourly_rate="+str,true);
    xmlhttp.send();
    }
    </script>
    
    
    
    </head>
    <body>
    Your First Name: <input id="first_name" name="first_name" type="text" /> 
    <br /><br />
    Your Last Name: <input id="last_name" name="last_name" type="text" />
    <br /><br />
    
    
    <div id="calculator-left">Hourly rate?</div>
    <div id="calculator-middle">
    <select name="apply_hourly_rate" id="apply_hourly_rate" onChange="hourly_rate(this.value);" style="margin-bottom:3px; width:70px">
    <option value="1">No</option>
    <option value="2">Yes</option>
    </select>     
    </div>
    <div class="clear">&nbsp;</div>
    
    <div id="hourly_rate">
    Salary before taxes:
    
    <br>
    <input type = "text" name = "salary_before_taxes" id = "salary_before_taxes" value="<?php echo $_POST['salary_before_taxes']; ?>" maxlength = "15" size="9"></input>
    <br>
    
    
    <input name="myBtn" type="submit" value="Submit Data" onClick="javascript:ajax_post();">
    <br /><br />
    <div id="status"></div>
    
    
    
    </body>
    </html>
    second file ___02.php

    Code:
    <?php 
    
    echo $_POST['firstname'] . ' firstname<br> ' . $_POST['lastname'] . 'lastname <br>'  . $_POST['apply_hourly_rate'] . 'apply_hourly_rate<br>' . $_POST['salary_before_taxes'] . 'salary_before_taxes';
    
    
    if ($hourly_rate==1) {echo '
    Salary before taxes:
    <br>
    <input type = "text" name="salary_before_taxes" id="salary_before_taxes" maxlength = "15" onkeyup="this.value = this.value.replace(/,/g,'.')" size="9"></input>
    <br>
    <input name="myBtn" type="submit" value="Submit Data" onClick="javascript:ajax_post();">
    ';}
    if ($hourly_rate==2) {echo '
    <br>
    Number of hours 
    <br>
    <input type = "text" name="hours_one" id="hours_one" maxlength = "15" size="9"></input>
    <br>
    Payment for one hour
    <br>
    <input type = "text" name="pay_rate_one" id="pay_rate_one" maxlength = "15" size="9"></input>
    <br>
    <input name="myBtn" type="submit" value="Submit Data" onClick="javascript:ajax_post();">
    
    ';}
    
    
    ?>

  2. #2
    Join Date
    Feb 2010
    Posts
    16
    Well, I'm not much of a Javascript person so seeing that code makes me cringe. XD If you think the problem is in the Javascript, have you posted this in the Javascript forum?

    Otherwise, Javascript and PHP don't really talk to each other. Whenever I've had to do it, I've passed PHP variables through the URL. Or printed out data in invisible tables on the page and had my Javascript function read them.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles