Execute php script from onclick insert to database

Question

I have created a working example that inserts the value of a radio button to a database using a submit button but now i'm looking at ways to insert without the use of a submit button.

I have a javascript function that when a radio button is clicked it should execute the php.

I have looked at why i can't get it to function but i'm unsure if its even possible or if there's a better way to do this. Below is my code

<html>
<head>
  <title>survey</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="test.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

</head>

<div class="cc-selector">
      <form class="cc-selector" id="form-id"  method="POST">
    <label><input id="happy" type="radio" name="radioAnswer" onclick="doSomething();"></label>
    <label class="drinkcard-cc happy" for="happy"></label>
    <label><input id="sad" type="radio" name="radioAnswer" onclick="doSomething();"></label>
    <label class="drinkcard-cc sad"for="sad"></label>
  </form>
        </div>
        <script type="text/javascript" src="jquery.min.js"></script> 

<script type="text/javascript"> 
function doSomething() { 
    $.get("sample2.php"); 
    return false; 
} 
</script>

</body>
</html>

And my php sample2.php

<?php
$con = mysqli_connect("localhost","root","","test");

// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

  if (isset($_POST['radioAnswer'])){
        $radioAnswer = $_POST['radioAnswer'];
        mysqli_query($con,"INSERT INTO survey (radioAnswer) VALUES ('$radioAnswer')");
    }
?>

In your javascript, you have $.get(). In your php, you have $_POST. See the problem? Protip: you always post forms. — Loek
– Loek, Commented Jul 9, 2018 at 11:11
Warning: You are wide open to SQL Injections and should really use parameterized Prepared Statements instead of manually building your queries like that. Specially since you're not escaping the user inputs at all! — M. Eriksson
– M. Eriksson, Commented Jul 9, 2018 at 11:11

EthanZone Coding · Accepted Answer · 2018-07-09 11:12:17Z

Use onchange. and an opening body tag.

<html>
<head>
  <title>survey</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="test.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

</head>
<body>
<div class="cc-selector">
      <form class="cc-selector" id="form-id"  method="POST">
    <label><input id="happy" type="radio" name="radioAnswer" onchange="doSomething();"></label>
    <label class="drinkcard-cc happy" for="happy"></label>
    <label><input id="sad" type="radio" name="radioAnswer" onchange="doSomething();"></label>
    <label class="drinkcard-cc sad"for="sad"></label>
  </form>
        </div>
        <script type="text/javascript" src="jquery.min.js"></script> 

<script type="text/javascript"> 
function doSomething() { 
    $.get("sample2.php"); 
    return false; 
} 
</script>

</body>
</html>

Jacob · Accepted Answer · 2018-07-09 11:12:26Z

0

You are preforming database insert in a GET request,

First, this is very bad practice.

Second, it won't work as expected because GET request could be cached by browser or proxies,

Btw, your PHP is reading $_POST

answered Jul 9, 2018 at 11:12

Jacob

1,96615 silver badges12 bronze badges

Comments

Meddah Abdallah · Accepted Answer · 2018-07-09 11:19:22Z

0

The $.get() method requests data from the server with an HTTP GET request. what you want to do is send data from the server using an HTTP POST request. i suggest you use :

    $.post("sample2.php",
{
    name: "Donald Duck",
    city: "Duckburg"
},
function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
});

or even better :

    $.ajax({
   url : 'sample2.php',
   type : 'POST', 
   data : 'email=' + email + 'content=' + content,
   dataType : 'html'
});

find more details about $.ajax in https://www.w3schools.com/jquery/ajax_ajax.asp

answered Jul 9, 2018 at 11:19

Meddah Abdallah

7061 gold badge7 silver badges28 bronze badges

Comments

noone · Accepted Answer · 2018-07-10 08:50:32Z

0

send requests using ajax javascript

function doSomething() { 
    $.ajax(
      {
        type: 'GET',
        data: {'radio1': $('#happy').is(':checked'), 'radio2': $('#sad').is(':checked')}
        url: '/your_php_file_name.php',
        success: function(data){
          console.log("here is the result : " + data);
        }
      }
    );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cc-selector">
      <form class="cc-selector" id="form-id"  method="GET>
    <label><input id="happy" type="radio" name="radioAnswer" onclick="doSomething();"></label>
    <label class="drinkcard-cc happy" for="happy"></label>
    <label><input id="sad" type="radio" name="radioAnswer" onclick="doSomething();"></label>
    <label class="drinkcard-cc sad"for="sad"></label>
  </form>
        </div>

in your your_php_file_name.php file

<?php
    // your javascript radio button 1 value;
    $happy = $_GET('radio1');
    // your javascipt radio button 2 value ;
    $sad = $_GET('radio2');
    echo 'success';
?>

edited Jul 10, 2018 at 8:50

answered Jul 9, 2018 at 11:18

noone

6,5782 gold badges48 silver badges54 bronze badges

2 Comments

James24 Over a year ago

Running the Snippet you get a error { "message": "Uncaught SyntaxError: Unexpected identifier", "filename": "stacksnippets.net/js", "lineno": 26, "colno": 9 }

noone Over a year ago

you should replace your_php_file_name.php from the file name of your php file

James24 · Accepted Answer · 2018-08-14 12:35:28Z

0

Figured out how to execute my Php using the onclick method to insert into sql database answer below.

 <form name="form" action="sample2.php" class="cc-selector" method="post" >

       <label class="label">
        <input type="image" name="Opinion" value="Positive" src="happy.png" onclick="document.getElementById('form').submit();"/>

       </label>

       <label class="label">
        <input type="image" name="Opinion" value="Negative" src="sad.png" onclick="document.getElementById('form').submit();"/>
       </label>
      </form>

answered Aug 14, 2018 at 12:35

James24

734 silver badges13 bronze badges

Collectives™ on Stack Overflow

Execute php script from onclick insert to database

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related