CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
ADT
ADT

Reputation: 141

Passing a javascript variable to php and then back to html

I have an html page with a form where I'd like to submit a value and send it, using javascript (w/jquery & ajax), to a php page where a certain process occurs, which I'd like to keep track of on the html page by sending back a variable multiple times to the original html page, perhaps into the empty div (id=txtHint). Below is what I have so far...

me.html

<html>
<head>
    <title>Generator</title>
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="howdy.js" type="text/javascript"></script>
</head>

<body>
    <div id="form_container">
        <h1>Generator</h1>
        <form id="myForm" name="myForm">
            <input id="myStr" type="text">
            <input id="regrForm" type="button" name="submit" value="Submit">
            </center>
        </form> 
    </div>
    <div id="txtHint"></div>
</body>
</html>

howdy.js

$(document).ready(function() {

    $("#regrForm").click(function(){

        var myText = $("#myStr").val();

        $.ajax({
            url: 'tracker.php',
            type: 'POST',
            data: {
                newStr: myText},
            dataType: "text",
            success: function(data){
                console.log("It went through!");
                $('#txtHint').html(data);
            }
        });
    });
});

tracker.php

<?php
    $myName = $_POST['newStr'];
    echo "<p> My string is: " . $myName . "</p>";

    for ($i=0; $i<1000000; $i++){

        //analyze stuff

        if ($i % 100000 === 0){
            echo "Total number of things analyzed: " . $i . " from " . $myName;
        }
    }
?>

The problem is, I'm not entirely sure my variables are getting passed appropriately from javascript to php and also how exactly to pass the php updates (which iteration I'm on via $i) back to the html page...any thoughts? If I'm not providing enough information, please let me know. I appreciate any constructive help you can offer.

Upvotes: 0

Views: 499

Answers (3)

Jordan Davis
Jordan Davis

Reputation: 1520

For development purposes with AJAX.

  1. console.log(data) from the ajax->success() method so you can see the response output from the PHP.
  2. If you want to see how it's being sent just var_dump($_POST);
  3. View your web-server error log file if you using APACHE/Linux it will be in your /var/log/httpd/error_log run this cmd in linux so you can't view the errors ---- tail -f /var/log/httpd/error_log

Looking at your PHP code it looks like your going to crash the browser your running a for loop one million times... and then every 10-thousand times your printing "Total number of things analyzed..."

What specifically are you trying to accomplish?

Upvotes: 2

Omran Fadel
Omran Fadel

Reputation: 77

Your variable is are getting passed from javascript to php. Just Update the success function to become like this

success: function(data)
{
    $('#txtHint').html(data);

    console.log("It went through!");
}

The results will be printed in "#txtHint" node.

Upvotes: 1

jperelli
jperelli

Reputation: 7197

A few things to note:

  • You have a </center> that should not be there in html

  • I'm not sure about dataType: "text", try removing that

  • To see the php data in html

    instead of 

    console.log("It went through!");

    do this

    $('#txtHint').html(data);

Upvotes: -1

Related Questions