简体   繁体   English

无需提交的单选按钮值到mysql

[英]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. 我绝不是JavaScript程序员,所以如果有人可以帮助我,那将是很好的。 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. 我已经设置了选中的单选按钮的检索,以使其与1到5的等级相对应,因此我目前正在使用testdata显示1到5的等级。

I don't necessarily need all the details, an overview of steps that need to be done would already be really helful. 我并不一定需要所有的细节,需要完成的步骤概述已经非常有用。

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 将其添加到jQuery include之后的头部,然后将类更改为进度条的id

$(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. 您可以使用AJAX。 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. 如果您使用的是Jquery,则可以使用单击处理程序来检测元素单击并启动一个函数调用,而该函数调用又可以调用AJAX函数与服务器端代码进行交互并发送要插入数据库的值。

  • add onclick or onchange action to inputs sending ajax request with proper parameter 将onclick或onchange动作添加到使用适当参数发送ajax请求的输入中
  • recive request, validate data 接收请求,验证数据
  • insert/update row 插入/更新行

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM