onChange JavaScript to a sql query

Question

So I know theres a 100% way to do this, but I don't think I'm doing it right. Pretty much this is what my goal for this code is.

I want the user to be able to select an amount of time in intervals of 30 minutes up to 5 hours. (theres 10 options then) Each 30 min interval adds another .5 to a variable lets call D.

Variable I, E, and T rely on Variable D.

I currently have a drop down that has a javascript on change. But after that I need to update a record in my MYSQL server with Variable D, I,E and T.

This is the code I have so far:

<form name="Tame" method="POST">
  <select id="VariableD" onchange="myFunction()">
    <option value=".5">30 mins
    <option value="1">1 hour
    <option value="1.5">1 hour 30 mins
    <option value="2">2 hours
    <option value="2.5">2 hour 30 mins
    <option value="3">3 hour
    <option value="3.5">3 hours 30 mins
    <option value="4">4 hours
    <option value="4.5">4 hours 30 mins
    <option value="5">5 hour     
  </select>
  <input type="hidden" name="VariableI" value="2">
  <input type="hidden" name="VariableT" value="4">
  <input type="hidden" name="VariableE" value="10">
  <input type="submit" name="TameSub" value="Tame">
</form>

Then I have my JavaScript:

<script>
  function myFunction() {
    var x = document.getElementById("VariableD").value;
    var TameEnergy = x * 10;
    var TameIntell = x * 2;
    var TameGain =   x * 4;

    var En = document.getElementById("VariableE");
    var Intell = document.getElementById("VariableI");
    var Tame = document.getElementById("VariableE");

    En.value = TameEnergy;
    Intell.value = TameIntell;
    Tame.value = TameGain;
  }
</script>

And after I have my script to determine all my variables I have this for PHP to update the record:

<?php
  $SubTame = $_POST['TameSub'];
  $I = $_POST['VariableI'];
  $E = $_POST['VariableE'];
  $T = $_POST['VariableT'];

  if($SubTame) {
    $sql = "UPDATE Horse SET Energy='$E', IntelligenceP='$I', Taming='$T' WHERE id='$colname_HorseInfo'";
    if ($con->query($sql) === TRUE) {
    ?>
      <script>location.reload();</script>
      <?php
    } else {}
  }
?>

When I do it this way I have the record updating but it only updates by the default values I have in the form, meaning that any of the change within the JavaScript doesn't get recognised when updating. I'm willing to do this with AJAX if someone could explain to me how I would do it in this situation.

"any of the change within the is meaningless" rewrite in understandable format — Shubham
– Shubham, Commented Oct 17, 2017 at 4:54
<select I'd="VariableD" onchange="myFunction()"> remove the \'\ between I & D above — Erik
– Erik, Commented Oct 17, 2017 at 4:56
@Erik sorry thats not in my real code, my computer must have autocorrected that — London O'Connell
– London O'Connell, Commented Oct 17, 2017 at 4:59

Shubham · Accepted Answer · 2017-10-17 05:01:27Z

1

Instead of adding js code, do manipulation directly in php.

Before anything error in html:

<select I'd="VariableD" onchange="myFunction()">
should be
<select id="VariableD" name="VariableD" onchange="myFunction()">

Now in php, This will not need js code

$val=$_POST['VariableD']; //see reference below for exact code
$I=$val*10;
//set other variables
//execute query

If php is changed like this, there is no need of onchange () as well in html.

For proper reference of how to select dropdown value in php Need to set variable = to dropdown selection in php/html

edited Oct 17, 2017 at 5:01

answered Oct 17, 2017 at 4:55

Shubham

1,3042 gold badges11 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shubham Over a year ago

@LondonO'Connell let me know if it helps/not

London O'Connell Over a year ago

You are a blessing, I hate going into the JS anyways and was hoping there would be to do this strictly in just PHP and you made my life 5000x better, thank you so much

Balwant · Accepted Answer · 2017-10-17 05:08:04Z

0

Onchange you need to submit the form by js

<form id="abc" name="Tame" method="POST">
.............
 </form>

<script>
        function myFunction() 
        {

.................
            document.getElementById("abc").submit();


        }
        </script>

answered Oct 17, 2017 at 5:08

Balwant

7551 gold badge7 silver badges13 bronze badges

Comments

Erik · Accepted Answer · 2017-10-17 05:11:32Z

Your <select> doesn't have a Name. But I would simplify this significantly and move the logic into php. onchange="submit()" will process the form as soon as someone selects something, at which point you immediately have all data in $_POST so you can skip the js function.

Consider the following:

<?php
if( isset( $_POST ) ) {

    $varD = $_POST["VariableD"];

    $TameEnergy = $varD * 10;
    $TameIntell = $varD * 2;
    $TameGain =   $varD * 4;

    $varE = $_POST["VariableE"];
    $Intell =  $_POST["VariableI"];
    $Tame =  $_POST["VariableE"];

    //do something else
}
?>

<h3>Make a selection: </h3>
<form name="Tame" method="POST">
        <select name="VariableD" onchange="submit()">
          <option value=".5">30 mins
          <option value="1">1 hour
          <option value="1.5">1 hour 30 mins
          <option value="2">2 hours
          <option value="2.5">2 hour 30 mins
          <option value="3">3 hour
          <option value="3.5">3 hours 30 mins
          <option value="4">4 hours
          <option value="4.5">4 hours 30 mins
          <option value="5">5 hour     
        </select>
        <input type="hidden" name="VariableI" value="2">
        <input type="hidden" name="VariableT" value="4">
        <input type="hidden" name="VariableE" value="10">
</form>

Collectives™ on Stack Overflow

onChange JavaScript to a sql query

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related