Member Avatar for anirban1087

Hi, I am working on a form which is as follows -

+---------------+----------------+--------------+-----------------+---------------+
|Item_Code |Item_Name |Quantity |Rate |Amount |
|[ COMBO BOX ] |[ COMBO BOX ] |[ USER INPUT ]|[ Auto Fill after| [ CALCULATED ]|
|Generate Field2|Generate Field 1| |selecting f1/f2 | |
+---------------+----------------+--------------+-----------------+---------------+

The user can either chose combo 1 or combo 2, the other combo will be generated by the corresponding value. The user can add an item by pressing a button "ADD TO CART" or just press "TAB" after the last field (Quantity).


CART TABLE
WILL SHOW THE ITEMS SELECTED USING THE ABOVE INTERFACE.

I am trying to do this using PHP, MySQL, JS & Ajax. Can any one help me to do this?

  • 2 Contributors
  • 1 Reply
  • 94 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by petr.pavel

Dani AI

Generated

Practical, complete pattern for (and noting asked for specifics): use a single items table, AJAX endpoints that return JSON, client code to fill the other combo and rate, compute amount on quantity change, and a separate AJAX call to add the row to a server-side cart (session) or a client-side array.

Suggested DB (minimal):

CREATE TABLE items (
  item_code VARCHAR(50) PRIMARY KEY,
  item_name VARCHAR(255) NOT NULL,
  rate DECIMAL(10,2) NOT NULL
);

Client/server flow (high level):

  • Selecting code or name sends AJAX to get_item.php?code=... or get_item.php?name=.... Server returns JSON {item_code,item_name,rate}.
  • JS fills the other select/input and rate. On quantity input, compute amount = quantity * rate (use parseFloat and guard NaN).
  • "Add to cart" or the final-field key event posts the item to add_to_cart.php (POST JSON). Server appends to $_SESSION['cart'] and returns cart state (JSON or rendered HTML snippet) which updates the CART table.

Small JS sketch (modern browsers):

fetch('/get_item.php?code='+encodeURIComponent(code))
  .then(r=>r.json())
  .then(data=>{
    nameSelect.value = data.item_name;
    rateInput.value = data.rate;
    amountInput.value = (parseFloat(data.rate) * (+qtyInput.value || 0)).toFixed(2);
  });

Detecting the "TAB to add" behavior: capturing Tab is possible (keydown and e.key==='Tab' || e.keyCode===9) but intercepting Tab changes normal keyboard navigation and accessibility. Prefer Enter or provide a clear button. If Tab is required, preventDefault only after careful UX testing.

Key cautions and tips:

  • Use prepared statements and validate server-side inputs to avoid injection.
  • When programmatically changing a select, temporarily disable its change handler or use a guard flag to avoid infinite loops.
  • Return proper Content-Type: application/json for JSON endpoints and check the Network tab + console.log responses during debugging.
  • For large item lists prefer an autocomplete/typeahead instead of huge select elements.

This pattern addresses auto-fill, real-time calculation, and an AJAX-backed cart that persists in session.

Member Avatar for petr.pavel

Hi Anirban, please send a link to what you have already programmed and describe what issues you're having.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.