jQuery Ajax passing input values from one modal to another

Question

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:\laragon\www\modals\modalConnectBuilding.php
Undefined index: address_user in
C:\laragon\www\modals\modalConnectBuilding.php
Undefined index: city_user in
C:\laragon\www\modals\modalConnectBuilding.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>

could you please add the code for the form that you are submitting ? — Amit Sharma, Dec 26 '19 at 10:22
@AmitSharma Sure, I've added it to the bottom of my question. — MarinHoozian, Dec 26 '19 at 10:39

hammer · Answer 1 · 2019-12-26T11:33:34.897

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'];

edited Dec 26 '19 at 11:33

answered Dec 26 '19 at 10:13

hammer

82
10

Path is correct and upon logging data, interestingly, I get the whole HTML code for the second modal (modalConnectBuilding.php) instead of only the passed data, but the error still persists. – MarinHoozian Dec 26 '19 at 10:31
**try this** `$name= implode("','", $_POST["name_user"]); echo $name;` – hammer Dec 26 '19 at 10:40
Nope, doesn't work. I get "Warning: implode(): Invalid arguments passed in ...modalConnectBuilding.php" – MarinHoozian Dec 26 '19 at 11:12
@MarinHoozian I test it (form and ajax just) and its working fine. What version you are using for jquery ? – hammer Dec 26 '19 at 11:28
I'm using jQuery 3.2.1. as a part of Revox Pages Dashboard UI kit. – MarinHoozian Dec 26 '19 at 11:32
@MarinHoozian Maybe the issue is your jquery script. Try to put it on Tag if you didn't put it already or before your script – hammer Dec 26 '19 at 11:40
Alert, as console.log() before it, shows the whole HTML for the modalConnectBuilding.php. What's interesting though is that I can see the variables within the HTML code so they must have been passed successfully, but upon dismissing alert, I still get PHP's Undefined index error. HTML is built via includes, I'll go ahead and put jQuery from the footer into the head and script before the form, and I'll get back to you. – MarinHoozian Dec 26 '19 at 11:49
see[link](https://snipboard.io/puxaQX.jpg), see[link](https://snipboard.io/OoixBt.jpg) check the links for output – hammer Dec 26 '19 at 12:03
Well, I'll try to do the same as you, example in isolation. If it works, I'll see about incorporating it into the project and try to find where it breaks. – MarinHoozian Dec 26 '19 at 12:15

Amit Sharma · Answer 2 · 2019-12-26T12:14:05.420

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);

edited Dec 26 '19 at 12:14

answered Dec 26 '19 at 11:15

Amit Sharma

1,775
3
11
20

Well, this seems rather logical and I was excited to try it out. Unfortunately, it still doesn't work for whatever reason even though the success callback is called. Would GET method be better suited for the task? I don't know how much difference it would make as am rather new to PHP. – MarinHoozian Dec 26 '19 at 11:35
try print_r($_POST); die; if it print something – Amit Sharma Dec 26 '19 at 11:49
With printr_r($_POST) I get an empty array or rather 'Array ()'. Bear in mind, please, that both modals are included into the file and called sequentially, I'm starting to think that the fact that both of them are included at the same time has something to do with this. – MarinHoozian Dec 26 '19 at 11:59
why do you need second modal box ? – Amit Sharma Dec 26 '19 at 12:01
basically you are sending values from one modal box to another using ajax post ? – Amit Sharma Dec 26 '19 at 12:03
Well, there's no good reason why I'm using a second modal, I may work out not to do so with my boss. Regarding the second question, yes, basically I'm sending values from the first one to the second one. – MarinHoozian Dec 26 '19 at 12:14
see the updated answer we need to send values like this. it does seems any solution to sending value using ajax – Amit Sharma Dec 26 '19 at 12:15
@AmithSharma I have to leave for some time now, will check it out later and report back to you. – MarinHoozian Dec 26 '19 at 12:17

jQuery Ajax passing input values from one modal to another

2 Answers2