How Do I Pass Javascript Variables Into MYSQL Using PHP?

Question

I'm tring to send my variable to mysql database, but the database only show the variable by using the HTML input tag.

The result showed " Undefined index: rate & amount"

Requesting the resolution.

Thanks

 <?php if(isset($_POST['send'])){ $dayhour = $_POST['dayhour']; $wagetype = $_POST['wagetype']; $rate = $_POST['rate']; $amount = $_POST['amount']; $query = "INSERT INTO `result` ( `DaynHour`, `Wagetype`, `Rate`, `Amount`) VALUES ('$dayhour','$wagetype', '$rate', '$amount')"; }?>

 <form action="connection.php" method="post" class="form-signin"> <label for="hour">hour</label><input name="dayhour" type="text" id="dayhour" ><br> <label for="wagetype">type</label> <select name="wagetype" id="wagetype" onchange="calc()"> <option value="PublicHolidays" id="PHOT">PublicHolidays</option> <option value="Normaldays" id="NDOT">Normaldays</option> <option value="MorningShift" id="NDOT">MorningShift</option> </select><br><br> <script type="text/javascript"> function calc(){ var a = parseFloat(document.querySelector("#dayhour").value); var op = document.querySelector("#wagetype").value; var amount; if (op == "PublicHolidays") { rate = 37.5; amount = rate *a;} else if (op == "Normaldays") { rate = 2; amount = rate *a;} else if (op == "MorningShift") { rate = 6; amount = rate *a;} document.querySelector("#amount").innerHTML = amount; document.querySelector("#rate").innerHTML = rate; } </script> <label for="rate">rate:</label><output name="rate" id="rate" ></output><br> <label for="amount">amount:</label><output name="amount" id="amount" ></output><br> <button name="send" type="submit">Sign up</button>

Answer 1

Yes you can pass any value using your form. In a situation like this, make a hidden input filed and assign its value to the value of any tag you want. This can be done with javascript or easily JQuery by listening on change envents. And that's all. Submit the form and you have values.

Answer 2

Try to change <output name="rate" id="rate" ></output> to <input name="rate" id="rate" type="hidden"/> and <output name="amount" id="amount" ></output> to <input name="amount" id="amount" type="hidden"/>

And you may change your calc() function to this codes, I think it is a good idea to add default value of amount and rate just in case they don't meet IF conditional

function calc() {
    var a = parseFloat(document.querySelector("#dayhour").value);
    var op = document.querySelector("#wagetype").value; 
    var amount;
    var rate;
    if (op == "PublicHolidays") { 
        rate = 37.5; amount = rate *a;
    } else if (op == "Normaldays") { 
        rate = 2; amount = rate *a;
    } else if (op == "MorningShift") { 
rate = 6; amount = rate *a;
    }
    document.getElementById("amount").value = amount;
    document.getElementById("rate").value = rate;
}