在没有提交按钮的情况下更新单选按钮值

Question

我在更新单选值时遇到问题。当我使用提交按钮提交表单时，它可以正常工作，但是当我使用 javascript 时，数据库中的值不会更新。我正在使用jquery mobile。有人可以帮忙吗？谢谢！

更新的代码，现在只有前 3 个单选按钮有效

为每个任务动态生成 3 个单选按钮：

<?php
 include 'connection.php';

 $query = "SELECT*FROM plan";
 $result = mysql_query($query);
 $num = mysql_numrows($result);

  mysql_close();

  $i=0;
 while ($i < $num) {
    $id=mysql_result($result, $i, "id");
    $task=mysql_result($result, $i, "task");
 $state=mysql_result($result, $i, "state");
?>

<form id="formnobtn" action="nobtn.php" method="POST" data-ajax="false">
<input type="hidden" name="id" value="<? echo "$id";?>">
<input type="radio" name="r" id="rA" value="A" class='custom' data-theme="a" <?php if ($statE == 'A'): ?>checked='checked'<?php endif; ?>><label for="rA">&nbsp;</label>
<input type="radio" name="r" id="rB" value="B" class='custom' data-theme="c" <?php if ($statE == 'B'): ?>checked='checked'<?php endif; ?>><label for="rB">&nbsp;</label>
<input type="radio" name="r" id="rC" value="C" class='custom' data-theme="f" <?php if ($statE == 'C'): ?>checked='checked'<?php endif; ?>><label for="rC">&nbsp;</label>
<div data-role="collapsible" name="ud_c" value=" <?echo "$task";?> "><h3><?echo "$task";?></h3></div>
</form>

<?php
   $i++;
 }
?>

应在选中单选按钮时提交表单的javascript：

$(document).ready(function() {
$('input[type="radio"]').click(function(){
    if ($(this).is(":checked"))
    $('form#formnobtn').submit();
});
})

更新数据库：

<?php
$id = $_POST['id'];
if (isset($_POST['r'])){    
    $state = $_POST['r'];                
    echo $state;
    include 'connection.php';
    $query= "UPDATE plan SET state='$state' WHERE id='$id'";
            mysql_query($query);
            mysql_close();
            header('Location: nobtn.php');
}
?>

Answer 1

请试试这个：-

我为单选按钮检查值创建了一个隐藏值。它将在表单发布上发送单选按钮检查值。我不知道你为什么在这里使用 id 这就是为什么我在你的 php 代码中创建一个 $radio_checked_id 变量。我希望这会对你有所帮助。

为每个任务动态生成 3 个单选按钮：

<form id="formnobtn" action="nobtn.php" method="POST" data-ajax="false">
<input type="hidden" name="id" value="<?php echo $id =(isset($id)) ? $id : '';?>">
<input type="radio" name="r" id="rA" value="A" class='custom' data-theme="a" <?php if ($statE == 'A'): ?>checked='checked'<?php endif; ?>><label for="rA">&nbsp;</label>
<input type="radio" name="r" id="rB" value="B" class='custom' data-theme="c" <?php if ($statE == 'B'): ?>checked='checked'<?php endif; ?>><label for="rB">&nbsp;</label>
<input type="radio" name="r" id="rC" value="C" class='custom' data-theme="f" <?php if ($statE == 'C'): ?>checked='checked'<?php endif; ?>><label for="rC">&nbsp;</label>
<div data-role="collapsible" name="ud_c" value="<?php echo  $task =(isset($task)) ? $task : '';?>"><h3><?php echo  $task =(isset($task)) ? $task : '';?></h3></div>
<input type="hidden" name="checked_id" id="checked_id" value="">
</form>

应在选中单选按钮时提交表单的javascript：

$(document).ready(function() {
$('input[type="radio"]').click(function(){
  var checked_radio_id = $(this).val();
      $('#checked_id').val(checked_radio_id);
    }
$('form#formnobtn').submit();
});
})

更新数据库：

<?php
$submit = $_POST['submit'];
$id = $_POST['id'];
$radio_checked_id = $_POST['checked_id'];
if($submit){
if (isset($_POST['r'])){    
    $state = $_POST['r'];                
    echo $state;
    include 'connection.php';
    $query= "UPDATE plan SET state='$state' WHERE id='$id'";
            mysql_query($query);
            echo "Record Updated";
            mysql_close();
            header('Location: nobtn.php');
}

else {
    echo "Please select a radio button!";
}
}
?>

我不确定下面这行是否正确，'submit'实际上是有提交按钮时提交按钮的名称，但我不知道如何更正它..

$submit = $_POST['submit'];

Answer 2

好吧，使用单选按钮，您不需要将 id 添加到全部，只需确保名称相同即可。 像这样：

<form id="formnobtn" action="nobtn.php" method="POST" data-ajax="false">
 <input type="radio" name="r" id="id" value="A" class='custom' data-theme="a" <?php if ($statE == 'A'): ?>checked='checked'<?php endif; ?>><label for="rA">&nbsp;</label>
 <input type="radio" name="r" value="B" class='custom' data-theme="c" <?php if ($statE == 'B'): ?>checked='checked'<?php endif; ?>><label for="rB">&nbsp;</label>
 <input type="radio" name="r" value="C" class='custom' data-theme="f" <?php if ($statE == 'C'): ?>checked='checked'<?php endif; ?>><label for="rC">&nbsp;</label>
</form>

所以只需删除隐藏的输入，并在 javascript 中：

 $('input[type="radio"]').change(e=>{
  $('form').submit();
})

另一种选择是将单选按钮更改为常规按钮并创建一个活动类来显示选定的 CSS，如下所示：

<form ....>
   <input type="hidden" name="id" data-group="x" value="<? echo "$id";?>">
   <button <?php if ($statE == 'A'): ?>class='active'<?php endif; ?> data-value="A" data-group="x">A</button>
   <button <?php if ($statE == 'B'): ?>class='active'<?php endif; ?> data-value="B" data-group="x">B</button>
   <button <?php if ($statE == 'C'): ?>class='active'<?php endif; ?> data-value="C" data-group="x">C</button>
</form>

并在提交时：

$('button[data-value]').click(e=>{
  e.preventDefault();
  $(`input[data-group="${e.target.dataset.group}"]`).val(e.target.dataset.group);
 $('form').submit();
})