CODEWITHSUNDEEP
javascriptphpjqueryjsonajax
Leonardo Cló
Leonardo Cló

Reputation: 306

How build an array with html ids, and then send it as JSON with ajax in Javascript Button onClick?

I am tying to use Post functions to send data from one php file to another, this is how my html code looks like (send.php):

    <!DOCTYPE html>
    <html>
    <head></head>
    <body>
    <p>operator:<input type="text" , id="operator"></p>
    <p>column:<input type="text" , id="columnName"></p>
    <button id="Btn">Click</button>
    <script src="js/jquery.min.js"></script>
    <script src="js/actions.js"></script>
    </body>
    </html>

This is how my JavaScript looks like (actions.js):

    $('#Btn').on('click', function () {
        var array = {'operator': $('#operator'), 'columnName': 
    $('#columnName')};
        $.ajax({
             url: 'receive.php',
             dataType: 'json',
             type: 'post',
             data: array,
             success: function (data) {
                if(data.success){
                     alert(data.operator);
                 } else {
                    alert("error");
                 }
             }

         });
     });

And this is what my receive.php code looks like:

    <?php
    header('Content-type: text/javascript');
    $json = array(
    'operator' => "",
    'columnName' => "",
     );
    if (isset($_POST['operator'],$_POST['columnName'])){
        $operator = $_POST['operator'];
        $columnName = $_POST['columnName'];

        $json['operator'] = $operator;
        $json['columnName'] = $columnName;
     }
     echo json_encode($json);
     ?>

When I fill both fields (column and operator) and I click on the button nothing happens! Any suggestions?

Upvotes: 0

Views: 33

Answers (1)

Alam Darji
Alam Darji

Reputation: 275

firstly your html inputs are wrong it should be like 

<p>operator:<input type="text" id="operator"></p>
<p>column:<input type="text" id="columnName"></p>

should be separated by space only no comma(,).

In JS use 

 var array = {'operator': $('#operator').val(), 'columnName': 
$('#columnName').val()};

.val() to read the value of the input field

also some changes in your php code the if() loop where you are checking for isset() only one input can be checked in isset() for another value you need to add && operator and another isset() to check for another input. here is the code

if (isset($_POST['operator']) && isset($_POST['columnName'])){
    $operator = $_POST['operator'];
    $columnName = $_POST['columnName'];

    $json['operator'] = $operator;
    $json['columnName'] = $columnName;
    $json['success'] = TRUE;
 }

Upvotes: 1

Related Questions