Question posted in
You can find the official documentation here.

jQuery Ajax passing input values from one modal to another

I have a modal for entering user information. A user should be linked to a building. After user information has been entered and submit button has been clicked, I am preventing the default action and am overlaying/showing a building modal over the user modal.
Code for doing so follows.

(function($) {
    $('#modalAddUser').modal('show');
    $('#formAddUser').on('submit', function(e) {
        e.preventDefault();
        let name_user = $('input[name="name"]').val();
        let address_user = $('input[name="address"]').val();
        let city_user = $('input[name="city"]').val();

        $.ajax({
            url: './modals/modalConnectBuilding.php',
            method: 'post',
            data: {
                "name_user": name_user,
                "address_user": address_user,
                "city_user": city_user
            },
            success: function() {
                console.log(name_user);
                console.log(address_user);
                console.log(city_user);
            }
        });

        $('#modalConnectBuilding').modal('show');
    });
})(window.jQuery);

console.log() logs the input information correctly, however in ‘modalConnectBuilding.php’ the following does not work:

<?php
    echo $_POST['name_user'];
    echo $_POST['address_user'];
    echo $_POST['city_user'];
?>

Producing the following errors:

Undefined index: name_user in
C:laragonwwwmodalsmodalConnectBuilding.php
Undefined index: address_user in
C:laragonwwwmodalsmodalConnectBuilding.php
Undefined index: city_user in
C:laragonwwwmodalsmodalConnectBuilding.php

My intent is to do a classic ‘form action=”./php/processConnectBuilding.php” method=”post”‘ but would need access to the three undefined variables as seen above. Adding users and buildings works in isolation but not when connected in this way. Any help would be greatly appreciated and if you need any more info, please ask. Thank you!

Code for the form (within the modal) I’m submitting follows (please note, default action is being suppressed by preventDefault() so action attribute is never “called”, also the form for connecting a building is basically the same, but the action attribute is not suppressed):

<form role="form" id="formAddUser" action="./php/processAddUser.php" method="post">
    <div class="form-group form-group-default required">
        <label>Name</label>
        <input type="text" name="name" class="form-control" required>
    </div>
    <div class="form-group form-group-default required">
        <label>Address</label>
        <input type="text" name="address" class="form-control" required>
    </div>
    <div class="form-group form-group-default required">
        <label>City</label>
        <input type="text" name="city" class="form-control" required>
    </div>
    <div style="margin-top: 25px">
        <button type="submit" class="btn btn-primary btn-lg btn-block"><i class="fa fa-plus-circle"></i> Add</button>
    </div>
</form>
Tags:

2

Answers


  1. 0 
    <html>
<head>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

</head>
<body>
<form role="form" id="formAddUser" action="" method="post">
    <div class="form-group form-group-default required">
        <label>Name</label>
        <input type="text" id="name" name="name" class="form-control" required>
    </div>
    <div class="form-group form-group-default required">
        <label>Address</label>
        <input type="text" name="address" class="form-control" required>
    </div>
    <div class="form-group form-group-default required">
        <label>City</label>
        <input type="text" name="city" class="form-control" required>
    </div>
    <div style="margin-top: 25px">
        <button type="submit" class="btn btn-primary btn-lg btn-block"><i class="fa fa-plus-circle"></i> Add</button>
    </div>
</form>
</body>
</html>

<script>
$('#formAddUser').on('submit', function(e) {
        e.preventDefault();
        let name_user = $('input[name="name"]').val();
        let address_user = $('input[name="address"]').val();
        let city_user = $('input[name="city"]').val();

        $.ajax({
            url: 'tariffdetaildata.php',
            method: 'post',
            data: {
                "name_user": name_user,
                "address_user": address_user,
                "city_user": city_user
            },
            success: function(data) {
                alert(data)
            }
        });
});

</script>

    tariffdetaildata.php

    <?php

    echo $_POST['name_user'];
    echo $_POST['address_user'];
    echo $_POST['city_user'];
    Login or Signup to reply.
  2. 0

    Try this way I think you need to open the modal popup once you get the response back from the ajax.

    (function($) {
$('#modalAddUser').modal('show');
$('#formAddUser').on('submit', function(e) {
    e.preventDefault();
    let name_user = $('input[name="name"]').val();
    let address_user = $('input[name="address"]').val();
    let city_user = $('input[name="city"]').val();

    $.ajax({
        url: './modals/modalConnectBuilding.php',
        method: 'post',
        data: {
            "name_user": name_user,
            "address_user": address_user,
            "city_user": city_user
        },
        success: function() {
            console.log(name_user);
            console.log(address_user);
            console.log(city_user);

            $('#modalConnectBuilding').modal('show');

           $("#modalConnectBuilding .modal-body #name_user").val( name_user);
           $("#modalConnectBuilding .modal-body #address_user").val( address_user);
           $("#modalConnectBuilding .modal-body #city_user").val( city_user);


        }
    });


});
})(window.jQuery);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search