how to call ajax based on js variable

Question

I have a table with three fields. Two are dropdown and one is input field. I have to compare value of input field and stock quantity based on dropdown field.

How to do with ajax?

function compareData() {

    var quantity = document.getElementsByName('quantity[]');
    var stockName = document.getElementsByName('stockName[]');
    var oldQnt = [];

    $.ajax({
        url: 'php_action/fetchStockas.php',
        type: 'post',
        async: true,
        data: { stock: stockName },
        dataType: 'json',
        success: function(data) {
            oldQnt.push(data);

        }

    });
    for (var x = 0; x < quantity.length; x++) {
        alert(quantity[x].value);
        // alert(oldQnt[x].value);

    }
}

PHP code:

<?php 
    require_once 'core.php'; 

    $stock=$_POST['stockNmame']; 

    $sql = "SELECT st_id, st_item_name, st_price, st_quantity FROM stock WHERE st_item_name='$stock'"; 
    $result = $connect->query($sql); 
    $output = array('data' => array()); 
    if($result->num_rows > 0) { 
        while($row = $result->fetch_array()) { 
            $stockId = $row[0]; 
            $stockName=$row[1]; 
            $stockPrice=$row[2]; 
            $stockQuantity=$row[3]; 
            $output['data'][] = array( $stockName, $stockPrice, $stockQuantity, ); 
        } 
    } 
    $connect->close(); 
    echo json_encode($output);

Answer 1

I have tried to figure out what you want to achieve, but still not clear if you want to get all options from the drop downs or only the selected option. I have created a code snippet which uses both of them, and explains the difference. The return data you get on success in the AJAX request I have mocked, but you need to add that yourself.

var mockData = {
    stockName: null,
    stockPrice: 0,
    stockQuantity: 0
}

function setMockData() {
    mockData = {
        stockName: $('#stockNameMock').val(),
        stockPrice: parseInt($('#stockPriceMock').val(), 10) || 0,
        stockQuantity: parseInt($('#stockQuantityMock').val(), 10) || 0
    }
}

function compareData() {
    var siteName = $('#siteName').val(), // Get the selected site name
        stockName = $('#stockName').val(), // Get the selected stock name
        quantity = parseInt($('#quantity').val(), 10) || 0; // Get the selected quantity
    
    setMockData(); // Set mock data

    $.ajax({
        url: '/echo/json/', // Replaced for mocking
        type: 'post',
        async: true,
        data: {
            json: JSON.stringify(mockData) // Added for mocking
        },
        dataType: 'json',
        success: function(data) {
            if(data.stockName === stockName) {
                if(data.stockQuantity < quantity) {
                    $('#statusMessage').text('Stock quatity to low');
                } else {
                    $('#statusMessage').text('-');
                }
            } else {
                $('#statusMessage').text('Stock name mismatch');
            }
        }

    });
}

$('#submit').on('click', compareData);

setMockData();

#statusMessage {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>MOCK DATA</h2>
Stock name: <input id="stockNameMock" type="text" value="stock1" /><br/>
Stock price: <input id="stockPriceMock" type="number" value="10" /><br/>
Stock quantity: <input id="stockQuantityMock" type="number" value="5" /><br/>

<h2>INPUT</h2>
Site Name:
<select name="siteName" id="siteName">
    <option value="site1">site1</option>
    <option value="site2">site2</option>
    <option value="site3">site3</option>
</select><br/>
Stock name:
<select name="stockName" id="stockName">
    <option value="stock1">stock1</option>
    <option value="stock2">stock2</option>
    <option value="stock3">stock3</option>
</select><br/>
Quantity:
<input type="number" name="quantity" id="quantity" value="0" /><br/>
<button type="button" id="submit">Submit</button>
<br/>
<br/>
<div>Status: <span id="statusMessage">-</span></div>

You can experiment with this code here: https://jsfiddle.net/knfnaouy/2/

It seems like the mocking is not working here on SO, so look at the fiddle.