提交复选框 ID 和文本字段值而不使用 Ajax 刷新浏览器

Question

我是编程新手。我需要开发一个带有复选框和文本字段的评分系统，用户可以在其中单击列表中的主题并在文本字段中添加他的评分/经验，如下图所示。

这是我的 HTML 代码。

<form action="" method="post">

    <input type="checkbox" id="1" name="cb[1]" value="" onclick="document.getElementById('t1').disabled=!this.checked;" />
    <label for="1">Checkbox No. 1</label>
    <input type="number" max="5" min="1" id="t1" name="t[1]" value="" disabled="disabled" /><br /><br />

    <input type="checkbox" id="2" name="cb[2]" value="" onclick="document.getElementById('t2').disabled=!this.checked;"/>
    <label for="2">Checkbox No. 2</label>
    <input type="number" max="5" min="1"id="t2" name="t[2]" value="" disabled="disabled" /><br /><br />

    <input type="checkbox" id="3" name="cb[3]" value="" onclick="document.getElementById('t3').disabled=!this.checked;"/>
    <label for="3">Checkbox No. 3</label>
    <input type="number" max="5" min="1"id="t3" name="t[3]" value="" disabled="disabled" /><br /><br />

    <input type="checkbox" id="4" name="cb[4]" value="" onclick="document.getElementById('t4').disabled=!this.checked;"/>
    <label for="4">Checkbox No. 4</label>
    <input type="number" max="5" min="1"id="t4" name="t[4]" value="" disabled="disabled" /><br /><br />

    <input name="submit" type="submit" value="Submit" />

</form>

这是我的 php 函数。

global $usedTexts;
$usedTexts = array();

function postdata(){

    if ( isset($_POST['submit']) && array_key_exists("t", $_POST)  && is_array($_POST["t"]) && array_key_exists("cb", $_POST) && is_array($_POST["cb"])) {

        $usedTexts = array_intersect_key($_POST["t"], $_POST["cb"]);

        foreach($usedTexts as $subjectId=>$subjectExp){

            if($subjectExp!=null){

                echo "This is checkbox id = " . $subjectId . " and This is text field value = " . $subjectExp . "<br />";

            }
        }                
    }
}

我正在使用 wordpress，我想提交复选框 ID 和文本字段值，而无需使用 Ajax 刷新浏览器。而且我还想显示复选框 id 和值，如图所示。如果有人可以为此提供 ajax 代码，我将不胜感激。谢谢:)

Answer 1

您可以使用 XMLHttpRequest 对象对此进行编码，或者使用 JQuery 更简单但没有必要更好。 JQUERY AJAX API

然后你可以做这样的事情

$('form').submit(function(event) {  //make sure you give your form an ID
  event.preventDefault(); 
  $.ajax({   // Initiate an ajax call
    type: "POST", // You seem to want post HTTP call
    url: "URLPATH/youphpcode.php",
    dataType: "json",  // this is the data type to return usually JSON 
    data:  votes,//data to send USUALLY JSON or hashmap/array
    success: function(d) 
      {
        $('#displayMSG').HTML('Your Votes have been submitted') // Maybe display a message or error.
      }
  });

});

要找出他们启用了哪些字段并选择了值，我在此处添加了一个脚本。 http://jsfiddle.net/eMEYP/10/

var votes = {}; // initialize it globally
$('#form').submit(function (event) {
    event.preventDefault();
    var votes = {}; // reset and empty the votes
    $('input[type=number]:enabled').each(function (i) {  // Check inputs by type and which are enabled and run a for each 
        votes[$(this).attr('id')] = $(this).val();  // Add items to the hashmap
    });
    var json = JSON.stringify(votes);  //you can  send DATA as the HASH or stringify it.
});

完整代码 *

  $('form').submit(function(event) {  //make sure you give your form an ID
      event.preventDefault(); 
      var votes = {}; // reset and empty the votes
      $('input[type=number]:enabled').each(function (i) {  // Check inputs by type and which are enabled and run a for each 
            votes[$(this).attr('id')] = $(this).val();  // Add items to the hashmap
      });
      $.ajax({   // Initiate an ajax call
        type: "POST", // You seem to want post HTTP call
        url: "URLPATH/youphpcode.php",
        dataType: "json",  // this is the data type to return usually JSON 
        data:  votes,//data to send USUALLY JSON or hashmap/array
        success: function(d) 
          {
            $('#displayMSG').HTML('Your Votes have been submitted') // Maybe display a message or error.
          }
      });

    });

Answer 2

当您单击提交按钮时，使用 JQuery 防止表单的默认提交行为。是这样但不完整：

$('#form').submit(function(event){
    event.preventDefault(); //This line prevents the default submit action of the id #form

    //Put your AJAX code here that will submit your checkbox and textbox data
})

见http://api.jquery.com/submit/