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

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

Why don't you want to use ajax? its great! jquery makes it so simple... — Nibb
– Nibb, Commented Oct 26, 2015 at 15:27
See How to make an AJAX call without jQuery? Maybe this would be a better one to consider this question a duplicate of actually. — developerwjk
– developerwjk, Commented Oct 26, 2015 at 15:29
@VikasKandari Look at the comments, you can't do it without Ajax. — Rudie Visser
– Rudie Visser, Commented Oct 26, 2015 at 15:39

Mulan · Accepted Answer · 2015-10-26 15:37:57Z

1

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.

edited Oct 26, 2015 at 15:37

answered Oct 26, 2015 at 15:31

Mulan

136k35 gold badges240 silver badges276 bronze badges

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

Comments

allicarn · Accepted Answer · 2015-10-26 16:39:37Z

1

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

edited Oct 26, 2015 at 16:39

answered Oct 26, 2015 at 16:32

allicarn

2,9292 gold badges30 silver badges47 bronze badges

Comments

Ben · Accepted Answer · 2015-10-26 15:24:57Z

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, 2015 at 15:24

Ben

8,9519 gold badges48 silver badges82 bronze badges

9 Comments

Vikas Kandari Over a year ago

and javascript please give js code too

Mulan Over a year ago

Stop lying. jQuery is not the only solution.

Vikas Kandari Over a year ago

i want to use java script and php not jq an ajax on my page please give javascript code

Ben Over a year ago

@naomik I'm not lying, I'm just not going to write his code for him.

developerwjk Over a year ago

@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)?

|

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

9 Comments

Linked

Related