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.
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.
Share Improve this question edited Apr 29, 2013 at 11:07 John Conde 220k99 gold badges463 silver badges502 bronze badges asked Apr 29, 2013 at 11:05 Stephan-vStephan-v 20.4k32 gold badges124 silver badges211 bronze badges3 Answers
Reset to default 3This 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);
});
});
});
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.
- add onclick or onchange action to inputs sending ajax request with proper parameter
- recive request, validate data
- insert/update row