How to get radio button values and add it to the mysql table

1

I need to know how to get on click radio button values to be stored in MySQL table the table contains three column Item, quantity, price on-Click the item name should be stored in item column, price in the price column, and quantity in the quantity column

//HTML1  input data given by user

<form action="/data" method="post" class="mt-5">
            <div class="row mt-5">
                <div class="col-sm-4">
                    <img src="img/Taruproduct.png" alt="">
                  <bold><p>Black Rice</p></bold>
                    <input type="radio" name='item1' value='1 KG @ Rs.199' data-id="blackrice1kg" />1 KG @ Rs.199<br>
                    <input type="radio" name='item1' value='2 KG @ Rs.390' data-id="blackrice2kg" />2 KG @ Rs.390<br>
                    <input type="radio" name='item1' value='3 KG @ Rs.550' data-id="blackrice3kg" />3 KG @ Rs.550<br>
                </div>
                <div class="col-sm-4">
                        <img src="img/Taruproduct.png" alt="">
                    <bold><p>JaggeryPowder</p></bold>
                    <input type="radio" name='item1' value='100 Sachets @ Rs.199' data-id="JaggeryPowder1kg" />100 Sachets @ Rs.199<br>
                    <input type="radio" name='item1' value='200 Sachets @ Rs.390' data-id="JaggeryPowder2kg" />200 Sachets @ Rs.390<br>
                    <input type="radio" name='item1' value='300 Sachets @ Rs.550' data-id="JaggeryPowder3kg" />300 Sachets @ Rs.550<br>
                </div>
</from>

//javascript for selecting the item value and stored it in variable final

$(document).ready(function () {
   $("input[type='radio']").click(function(){
     var final = $("input[name='item1']:checked").val();
      $.ajax({  
        url:"index.js",  
        method:"POST",  
        data:{gender:gender},  
        success:function(){  
             $(".result").val(final);  
        }  
   });  

// connected to mysql created a table

con.connect(function(err) {
    if (err) throw err;
    console.log("Connected!");
    var sql = "CREATE TABLE groceries (Item VARCHAR(255), quantity VARCHAR(255), price VARCHAR(255))";
    con.query(sql, function (err, result) {
    if (err) throw err;
    console.log("Table created");
  });

  });
  app.get('/', function (req, res) {

    res.sendFile(__dirname + '/home.html');

});


app.post('/data', function(req, res){

    var username=req.body.idname;
    // console.log(username)
    var sql = "INSERT INTO groceries (Item,quantity,price) VALUES ('" + req.body.idname+"')";
    connection.query(sql , function(err, result){
        if(err) throw err;
        console.log("added");
    });

    res.send(data);

});

//connection.end();

app.listen(3000, function () {
console.log('App is running on port');
});

Question is how to get data and add them to the corresponding column in mysql? Thanks in advance

ps: Sorry if my question is not right Just a Beginner.

2

Hello and Welcome to the forum :slight_smile:!

There are various problems in Your code…

First, to send the data to the back end, You must specify the right URL using $.ajax. Here:

$(document).ready(function () {
   $("input[type='radio']").click(function(){
     var final = $("input[name='item1']:checked").val();
      $.ajax({  
        url:"index.js",  
        method:"POST",  
        data:{gender:gender},  
        success:function(){  
             $(".result").val(final);  
        }  
   }); // We will ignore the syntax errors for now

You’re specifying the index.js file, whereas You should specify the API endpoint that will handle the request. Assuming the endpoint that will handle the information is /data, then You should specify that as the URL:

// Another assumption is that the server runs on the same domain (localhost:some_port) as the client.
$.ajax({
  url: "/data",
  method: "POST",
  data: {
    gender: gender
  },
  success: function() {
    $(".result").val(final);
  }
});

Another problem You’ll face is that You’re sending only the gender, which in the context that You’ve shown is undefined (is not present on the HTML form nor in the code). If you’re trying to send only the radio button value on change, then You should write something like this:

$.ajax({
  url: "/data",
  method: "POST",
  data: {
    item: final
  },
  success: function() {
    $(".result").val(final);
  }
});

// You would retrieve the data at the server like this:
// const item = req.body.item

For the server there are various problems too. The most immediate one is that, without knowing what are You using to connect to the database, the connection is not alive for the /data endpoint (at least it’s not in the code You’ve shown). This means that You won’t be able to insert any data.

I would recommend that You start over and try to understand what the codes does, line by line :slight_smile:.

1 Like