CODEWITHSUNDEEP
phpjavascriptjquerymysqlajax
Stephan-v
Stephan-v

Reputation: 20289

Radiobutton value to mysql without submit

I'm by no means a javascript programmer so it would be nice if somebody could help me out with this. If have multiple of these ratingsections like in the example down below that are on the same page.

Now I need to send the value of the radiobutton that has been clicked to my database without a submit button and preferably without a refresh.

<body>
    <section class="rating">
        <input type="radio" class="radio twenty" name="progress" value="twenty" id="twenty" <?php if($num === 1) { echo 'checked'; } ?>>
        <label for="twenty" class="label">1</label>

        <input type="radio" class="radio fourty" name="progress" value="fourty" id="fourty" <?php if($num === 2) { echo 'checked'; } ?>>
        <label for="fourty" class="label">2</label>

        <input type="radio" class="radio sixty" name="progress" value="sixty" id="sixty" <?php if($num === 3) { echo 'checked'; } ?>>
        <label for="sixty" class="label">3</label>

        <input type="radio" class="radio eighty" name="progress" value="eighty" id="eighty"<?php if($num === 4) { echo 'checked'; } ?>>
        <label for="eighty" class="label">4</label>

        <input type="radio" class="radio onehundred" name="progress" value="onehundred" id="onehundred" <?php if($num === 5) { echo 'checked'; } ?>>
        <label for="onehundred" class="label">5</label>

        <div class="progress">
            <div class="progress-bar"></div>
        </div>
    </section>
</body>

I've already set up the retrieval of checked radiobutton so that it corresponds with a rating of 1 to 5, so I'm currently using testdata to show a 1 to 5 rating.

I don't necessarily need all the details, an overview of steps that need to be done would already be really helful.

Upvotes: 1

Views: 3055

Answers (3)

mplungjan
mplungjan

Reputation: 177685

This should do it

DEMO

Add it to the head after the jQuery include And I changed the class to id of the progress bar 

$(function() { // when document has loaded
  $(".radio").on("click",function() { // all radios with class="radio ..." 
    // ajax get or post someserver.php?value=twenty/fourty...
    $.get("someserver.php", {value:this.value},function(data) { 
      // add the returned value to a container
      $("#progress-bar").append("Updated "+ data); 
    });
  });
});

Upvotes: 3

eyveer
eyveer

Reputation: 88

  • add onclick or onchange action to inputs sending ajax request with proper parameter
  • recive request, validate data
  • insert/update row

Upvotes: 2

chandresh_cool
chandresh_cool

Reputation: 11830

You can use AJAX for it. If you are using Jquery there are click handlers available which detects your element clicks and initiates a function call that in turn can call an AJAX function to interact with your server side code and send the values to insert in the database.

Upvotes: 2

Related Questions