How to get a value to one php page to another without reload with Ajax and JavaScript

Question

 <html>
 <body>
 <div id="main_login_div">
    <form name="form1" id="main_form" method="post" target="_parent"   action="checklogin.php">
          <input name="myusername" type="text" id="myusername"  placeholder="User Name Here">
          <input name="mypassword" type="password" id="mypassword"  placeholder="Password Here">
          <input type="submit" name="Submit" id="gogogo" value="Login">
          <p id="msg" name="msg"><?php echo $_GET['msg']; ?></p>
    </form>
 </div>
</body>
</html>

So this is my login form, I use GET method to get message password is wrong or not, so problem is that when I click on submit page goes refresh, and I don't want my page to reload, is there any way to get results without reloading page with Ajax and JavaScript not JQuery

_"i have seen loots of tutorials but they uses Ajax and Jquery ,i don't want use them"_ is the wrong approach. you need to use ajax at least, which can be done without jquery tho. — Tanuel Mategi, Oct 26 '15 at 15:23
but i don't want use Ajax and jquery any other way to get value without refresh — Vikas Kandari, Oct 26 '15 at 15:26
Why don't you want to use ajax? its great! jquery makes it so simple... — Nibb, Oct 26 '15 at 15:27
because i want to use only my coding so i can make changes on future — Vikas Kandari, Oct 26 '15 at 15:29
See [How to make an AJAX call without jQuery?](http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery) Maybe this would be a better one to consider this question a duplicate of actually. — developerwjk, Oct 26 '15 at 15:29
no thats the different question i don't want ajax on my page please help — Vikas Kandari, Oct 26 '15 at 15:33
but you are the experts you can do it i don't know how that's why i came with this question — Vikas Kandari, Oct 26 '15 at 15:38
@VikasKandari Look at the comments, you **can't** do it without Ajax. — Rudie Visser, Oct 26 '15 at 15:39

Mulan · Accepted Answer · 2015-10-26T15:37:57.717

Here's a simple ajax request using simple vanilla JavaScript

function request(url, callback) {

  var req = new XMLHttpRequest();

  req.onreadystatechange = function() {
    if (req.readyState !== XMLHttpRequest.DONE) return;

    switch (req.status) {
      case 200:
        return callback(null, req.responseText);
      case 404:
        return callback(Error('Sorry, 404 error'));
      default:
        return callback(Error('Some other error happened'))
    }
  };

  req.open("GET", url, true);
  req.send();

  return req;
}

You can use it like this

var req = request('/some-data.json', function (err, res) {

  // check for error
  if (err) return console.error(err);

  // do something with the data
  console.log(JSON.parse(res));
});

Note, you'll have to do a little additional research to support this on older IE browsers.

allicarn · Answer 2 · 2015-10-26T16:39:37.400

As far as I know, there are 3 ways to get information passed between client and server:

Page Load
AJAX
Websockets

AJAX is normal JavaScript, and depending on your browser support, you may need to implement it several different ways to support older ones as well as newer ones. Most people use jQuery's $.ajax() functions because it makes it easier to write (and to read).

If you don't want AJAX or page reload, the only other option is using websockets, but there are a lot of dependencies on specific server-side and client-side software. It is relatively new, so there isn't a lot of "beginners guide"s out there. This might get you started, though: http://www.phpbuilder.com/articles/application-architecture/optimization/creating-real-time-applications-with-php-and-websockets.html

score 0 · Answer 3 · answered Oct 26 '15 at 15:24

0

The only way is with AJAX and it's much easier with JavaScript too. It gets REALLY easy with $.post() from the jQuery library.

Example (with jQuery):

<script type="text/javascript">
    $("form#main_form").submit(function(e){
        e.preventDefault(); //stops the form submitting normally
        var formData = $(this).serializeArray(); //make an array of the form data

        $.post("checklogin.php", formData, function(response){ //POST the form data to 'checklogin.php'
            console.log(response); //output PHP response to console
        });
    });
</script>

answered Oct 26 '15 at 15:24

Ben

8,894
7
44
80

and javascript please give js code too – Vikas Kandari Oct 26 '15 at 15:28
Stop lying. jQuery is not the *only* solution. – Mulan Oct 26 '15 at 15:31
i want to use java script and php not jq an ajax on my page please give javascript code – Vikas Kandari Oct 26 '15 at 15:31
@naomik I'm not lying, I'm just not going to write his code for him. – Ben Oct 26 '15 at 15:32
why you are here to help us – Vikas Kandari Oct 26 '15 at 15:34
@BenPearlKahan You had no problem writing jQuery for him/her. He/she already said they don't want jQuery. – Mulan Oct 26 '15 at 15:35
1

@VikasKandari I thought you didn't want to use Ajax so why are you demanding an example of Ajax with pure Javascript (an example I already gave you with a link to another question specifically on that)? – developerwjk Oct 26 '15 at 15:36
@VikasKandari: Brother, if you want to write an answer, go right ahead! I know how to do this with *jQuery* so I gave my solution. This isn't a website for people to get others to write their code, it's for people to find guidance on their own code. – Ben Oct 26 '15 at 15:37
sorry but i want this importent if u did't want to supply code just give some hints of java script – Vikas Kandari Oct 26 '15 at 15:40

How to get a value to one php page to another without reload with Ajax and JavaScript

3 Answers3