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

Question

i'm new to programming. I need to develop a rating system with check boxes and text-fields where user clicks the subjects from the list and add his rating/experience in the text field as shown in below image.

This is my HTML code.

<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>

This is my php function.

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 />";

            }
        }                
    }
}

I'm using wordpress and I want to submit checkbox ID and text Field value without refreshing the browser using Ajax. And also I want to display check box id and value as shown in the picture. I would be very much appreciated if someone can provide ajax code for this. Thanks :)

Answer 1

You can code this using XMLHttpRequest Object or an easier not necessary better is using JQuery. JQUERY AJAX API

Then you can do something like this

$('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.
      }
  });

});

To find out what fields they enabled and selected the values I have added a script here. 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.
});

FULL CODE *

  $('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.
          }
      });

    });