Question posted in
You can find the official documentation here.

Trigger AJAX single function for two buttons – Jquery ajax

I am using 2 buttons to open two separate php pages but I would like to use one function to trigger both the buttons. The AJAX function that gets triggered should check which button was pressed and then open the php page associated with it. Such that "Export Page 1" should open Page 1.php and "Export Page 2" should open Page 2.php.
I am able to open one php page with my AJAX function. Now how do I check which button was pressed so I could open the right php page. How do I achieve this?

<html>
 <body>
  <div> 
        <input type ="submit" name="login" id="login" style="float: right; margin-right: 5px;" class= "btn btn-primary" value="Export Page 1" data-toggle="modal" data-target="#loginModal"/>

        <input type ="submit" name="login" id="login" style="float: right; margin-right: 5px;" class= "btn btn-primary" value="Export Page 2" data-toggle="modal" data-target="#loginModal"/>

  </div>
 </body>
</html>

<div id="loginModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Login</h4>
            </div>
            <div class="modal-body">
                <label>Username</label>
                <input type="text" name="username" id="username" class="form-control" />
                <br/>
                <label>Password</label>
                <input type="password" name="password" id="password" class="form-control" />
                <br/>
                <button type="button" name="login_button" id="login_button" class="btn btn-primary">Login</button>

<script>
    $('#login_button').click(function(){
        var username = $('#username').val();
        var password = $('#password').val();
        if(username != '' && password != '')
        {
            $.ajax({
                url:"Login.php",
                method:"POST",
                data:{username:username, password:password},
                success:function(data){
                    if(data == 'No')
                    {
                        alert("Wrong Data");
                    }
                    else
                    {
                        $('#loginModal').hide();
                        window.open("Page 1.php"); //For page 1
                        // OR window.open("Page 2.php"); //For page 2
                    }
                }
            });
        }
        else
        {
            alert("Both fields are requried");
        }
        
    });

});
</script>
Tags:

3

Answers


  1. 0

    You can use functions for that:

    function openPage(page) {
    $.ajax({
        method:"POST",
        data:{
            username:username, password:password
        },
        success:function(data) {
            $('#loginModal').hide();
            
            window.open(page); 
        }   
    });
}

    In the html:

    <input type="submit" onclick="openPage('Page 1.php')" name="login" id="login" style="float: right; margin-right: 5px;" class= "btn btn-primary" value="Export Page 1" data-toggle="modal" data-target="#loginModal"  />
<input type="submit" onclick="openPage('Page 2.php')" name="login" id="login" style="float: right; margin-right: 5px;" class= "btn btn-primary" value="Export Page 2" data-toggle="modal" data-target="#loginModal" />
    Login or Signup to reply.
  2. 0

    Because IDs must be unique, give each button a different ID

    <input type="submit" id="login1" value="Export Page 1"...
<input type="submit" id="login2" value="Export Page 2"...

    you can then give both buttons the same event – this would also work if you gave them both the same class and did the event on that class.

    Within the event, store the button id somewhere where it can be picked up later by the modal’s login button.

    Because you’re auto-opening the modal, there’s a separation from open-dialog with button1/2 to click login on modal, so they’re not related. You’ll need to store on the modal/global/etc which button was used to open the modal when it’s opened so that you can use that value when you actually login.

    Let’s store it on the modal’s login_button:

    $("#login1,#login2").click(function() {
    $("#login_button").data("source_button", this.id);
});

    where this.id will be login1 or login2.

    Now when the login_button is clicked, we can see which button it was:

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

  $.ajax({
    method: "POST",
    data: { username: username, password: password },
    success: function(data) {

      $('#loginModal').hide();

      var source_button = $("#login_button").data("source_button");
      if (source_button == "login1")
        window.open("Page 1.php");
      else
        window.open("Page 2.php");
    }
  });
});

    To make this a little more usable (and less maintenance-heavy), you can make some small changes:

    • don’t use an ID on the page button
    • code the destination page onto the page button
    <input type="submit" class="pagelogin" data-page='page1.php' value="Export Page 1"...
<input type="submit" class="pagelogin" data-page='page2.php' value="Export Page 2"...

    then

    $(".pagelogin").click(function() {
    $("#login_button").data("page", $(this).data("page"));
});

    and in the callback

    success: function() {
  
  $('#loginModal').hide();
  window.open($("#login_button").data("page"))

}

    so when you want to add page3 etc you just add a new input with no code changes and keeps the separation of data (the page1.php) from the code (the js), which is always a goodthing(tm).

    Login or Signup to reply.
  3. 0

    you can use the dataset aswell
    make a single function for both buttons use the event parameter to extract the data-page out of the clicked element and pass through it

    function submitButtonHandler(e) {
  var targetPage = e.target.dataset.page;
  console.log('Target is ' + targetPage);
}

window.addEventListener('load', function() {
  document.getElementById('button1').addEventListener('click', submitButtonHandler);
  document.getElementById('button2').addEventListener('click', submitButtonHandler);
});
    <input type="submit" value="Login 1" data-page="Page 1" id="button1">
<input type="submit" value="Login 2" data-page="Page 2" id="button2">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search