-1

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();".

  1. How can I prevent the page from refreshing after the form is submitted?
  2. 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();
}
Improve this question
5
  • 2
    Do you mind posting the relevant markup?... Commented May 6, 2014 at 15:50
  • 2
    1. Use event.preventDefault(); 2. Use JSON? Commented May 6, 2014 at 15:50
  • This question will be closed if you don't demonstrate some effort - what have you tried? Where is your code? Commented May 6, 2014 at 15:51
  • 1
    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. Commented May 6, 2014 at 15:52
  • you can make ajax calls and get back array in javascript stackoverflow.com/questions/11254884/… Commented May 6, 2014 at 16:00

2 Answers 2

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

How do I add the JS code? Just to the JS file as is given here? Or put it in a function?
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?
#1: Yep. I would make a seperate js file. Call it "scripts.js" or something like that. I updated my example to show.
1

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.