How to share variables between PHP and JS?

Question

I have a form which takes a single input, and ideally processes it in a shell command in PHP and then returns an array.

The form is submitted in JS by myform.submit(); after it runs onChange="onChange();".

How can I prevent the page from refreshing after the form is submitted?
How to pass the array back to the JS?

CODE UPDATE:

The AJAX code I kinda got here, but I am not sure how to implement it.

My PHP/HTML:

<form action="test.php" method="post" id="CONFIRM">
<input class="txt" value="myVal" type="text" size="12" maxlength="9" name="myName" id="myID" onKeyUp="checkUpdate();" onChange="checkUpdate();" onFocus="" />
</form>

My JS:

function checkUpdate(){
    var form = document.getElementById('CONFIRM');
    form.submit();
}

This question will be closed if you don't demonstrate some effort - what have you tried? Where is your code? — random_user_name, May 06 '14 at 15:51
It sounds like you're looking for an introductory tutorial into AJAX, of which there are many to be found on the internet. Essentially with AJAX you make a request to a URL in your JavaScript code and receive a response. That response can be a "page" but it's better if it's just JSON data (which your PHP code can just echo to the output). The JavaScript code would then receive that response and handle it however you want. — David, May 06 '14 at 15:52
you can make ajax calls and get back array in javascript http://stackoverflow.com/questions/11254884/html-form-submission-via-an-ajax-request — Always Sunny, May 06 '14 at 16:00

score 1 · Answer 1 · edited May 23 '17 at 12:25

1

There are two questions (with answers) that can help you:

edited May 23 '17 at 12:25

Community

1
1

answered May 06 '14 at 15:52

Jms

109
9

score 1 · Accepted Answer · edited May 23 '17 at 11:54

You need to use some sort of AJAX request to prevent the browser's default action.

HTML:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="path-to-scripts.js"></script>
</head>
<body>
<form id="myform" method="post" action="">
<fieldset>
<legend for="info">Some Info</legend>
<input type="text" id="info" name="info" placeholder="some info" />
</fieldset>
<filedset>
<input type="submit" value="Submit" />
</fieldset>
</form>
</body>

JavaScript:

(function($) {
$('#myform').submit(function(event) {
    event.preventDefault();

    $.ajax({
        type: 'post',
        url: 'path-to-your-php-file.php',
        data: $('#myform').serialize(),
        timeout: 50000
    }).done(function(responseData) {
        // Do something with the response data.
    }).fail(function(error) {
        // Not good.
    });
});
})(jQuery);

Now, let's say you want to call a php function with the responseData. You will also need to think about how to return responseData. Is it an object? This could determine how you handle making the next request. Depending on how you have things set up, you could do it as easily as:

JavaScript:

...
}).done(function(responseData) {
    if (responseData)
    {
        $.ajax({
            type: 'post',
            data: responseData,
            url: 'path-to-your-next-php-file.php',
            timeout: 50000
        }).done(function(responseData) {
            // Do something with the response data.
        }).fail(function(error) {
            // Not good.
        });
    }
}).fail(function(error) {
...

However, doing it this way, you are going to start getting into a lot of nested ajax calls which can result in "callback hell". You might want to look at Using a promise to make your life a lot easier.

How do I add the JS code? Just to the JS file as is given here? Or put it in a function? — KingsInnerSoul, May 06 '14 at 16:00
Now, lets say I want to take the responseData and use it to call a PHP function, and then take the response from the PHP function and pass to JS? How would I go about doing that? — KingsInnerSoul, May 06 '14 at 16:03
#1: Yep. I would make a seperate js file. Call it "scripts.js" or something like that. I updated my example to show. — Damon, May 06 '14 at 16:45

How to share variables between PHP and JS?

2 Answers2