Question

我无法将复选框的值从复选框发送到Firebase。

如何从每一行的每个框中获取每个值？

表格：

复选框：

$("#table_body_Test").append("<tr><td>" + AgentEmail + "</td><td><INPUT TYPE=\"Checkbox\" Name=\"Browser\" Value =\"Agent\"></Input></td></tr>");

表

 <div class="AgentDetailsRequest">

                  <table id="testTable"  align="center">
                    <thead>
                      <tr style="color: #D2002E; background: #FFCC01; height:32px;">
                        <td>Agents</td>
                        <td>Select</td>
                      </tr>
                    </thead>
                    <tbody id="table_body_Test">
                    </tbody>
                  </table>

            </div>

完整表格

<div class="form-popup" id="myFormDetails">

      <div class="shipDetailsRequest">
      <form action="" method="post" class="form-container" >

              <button type="button" onclick="closeForm()" id="close">x</button>
              <input name="RR" type="RRField" id="date" disabled>
              <input name="RR" type="RRField" id="RRField" placeholder="RR Field" disabled>
              <p>Customer Details</p>
              <input onclick="sampleFunction()" type="number1" placeholder="Customer Account Number" name="customerAccountField" id="customerAccountField" required>
              <input  type="number1" placeholder="Customer Name" name="customerNameField" id="customerNameField" disabled>
              <p>Shipper Details</p>
              <input type="number1" placeholder="Shipper Name" name="senderName" id="shipperName" required>
              <textarea name="collectionAddress" placeholder="Collection Address...?" id="collectionAddress"></textarea>
              <p>Shipment Details</p>
              <input type="text" placeholder="Enter Origin" name="shptOrigin" id="shipmentOrigin" maxlength = "3" required>
              <input type="text" placeholder="Enter Destination" name="shptDest" id="shipmentDest" maxlength = "3" required>
              <input type="number" placeholder="Enter Weight" name="shptWeight" id="shptWeight" required>
              <input type="number" placeholder="Enter Pieces" name="shptPieces" id="shptPieces" required>
              <input type="number1" placeholder="Enter Dimensions" name="shptDimensions" id="shipmentDimensions" >
              <select placeholder="Choose Type" name="shptStack" id="shptStack" required>
                  <option value="Stackable">Stackable</option>
                  <option value="Nonstackable">Nonstackable</option>
                  </select>
              <select placeholder="Choose Desk" name="Desk" id="ChooseDesk" required>
                  <option value="KSA">KSA Desk</option>
                  <option value="DHA">DHA Desk</option>
                  <option value="RUH">RUH Desk</option>
                  <option value="JED">JED Desk</option>
                  </select>
              <p>Comment</p>
              <textarea name="comment" placeholder="Other Details...?" id="commentField"></textarea>

              <div class="mainDiv" align="center" >
                <input type="file" id="fileButton" />
                <progress  id="uploader" value="0" max="100" style="max-width: 128px;">0%</progress>  
              </div>

             <!-- <button id="submitBtn" onclick="ActionData()">Next</button> -->

             <button id="submitBtn" onclick="ActionData()">Next</button>
            </form>
          </div>
            <div class="AgentDetailsRequest">

                  <table id="testTable"  align="center">
                    <thead>
                      <tr style="color: #D2002E; background: #FFCC01; height:32px;">
                        <td>Agents</td>
                        <td>Select</td>
                      </tr>
                    </thead>
                    <tbody id="table_body_Test">
                    </tbody>
                  </table>

            </div>

完整的JavaScript

var DateText = document.getElementById("date");
var RRText = document.getElementById("RRField");
var CustAccText = document.getElementById("customerAccountField");
var CustNameText = document.getElementById("customerNameField");
var ShipperNameText = document.getElementById("shipperName");
var CollectionAddressText = document.getElementById("collectionAddress");
var ShipmentOrgText = document.getElementById("shipmentOrigin");
var ShipmentDestText = document.getElementById("shipmentDest");
var ShipmentweightText = document.getElementById("shptWeight");
var ShipmentPiecesText = document.getElementById("shptPieces");
var ShipmentDimensionsText = document.getElementById("shipmentDimensions");
var ShptStackText = document.getElementById("shptStack");
var ChooseDeskText = document.getElementById("ChooseDesk");
var CommentText = document.getElementById("commentField");

var ShipmentOriginValues = ShipmentOrgText.value;
ShipmentOriginValues = "All";

var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');


if (ShipmentOrgText.value != null)
{

  var rootRefReAgents = firebase.database().ref().child("AgentsContact").child(ShipmentOriginValues);



  rootRefReAgents.on("child_added", snap =>{


    var AgentEmail = snap.child("Name").val();

    $("#table_body_Test").append("<tr><td>" + AgentEmail + "</td><td><INPUT TYPE=\"Checkbox\" Name=\"Browser\" Value =\"Agent\"></Input></td></tr>");

  });

}

function ActionData()
{
    //setting up values from Text Fields
    var DateValue = DateText.value;
    var RRValue = RRText.value;
    var CustAccountValue = CustAccText.value;
    var CustNameValue = CustNameText.value;
    var ShipperNameValue = ShipperNameText.value;
    var CollectionAddressValues = CollectionAddressText.value;
    ShipmentOriginValues = ShipmentOrgText.value;
    var ShipmentDestValues = ShipmentDestText.value;
    var ShipmentweightValues = ShipmentweightText.value;
    var ShipmentPiecesValues = ShipmentPiecesText.value;
    var ShipmentDimensionsValues = ShipmentDimensionsText.value;
    var ShptStackValues = ShptStackText.value;
    var ChooseDeskValues = ChooseDeskText.value;
    var CommentValues = CommentText.value;

    var FirebaseRef = firebase.database().ref("Requests").child(RRValue);


    if(RRValue && ShipmentOriginValues && ShipmentDestValues && CustAccountValue == null)
    {
        window.alert("Need More details to upload")
    }


   else
   {

   FirebaseRef.child("Date").set(DateValue);
   FirebaseRef.child("RR").set(RRValue);
   FirebaseRef.child("Customer Account").set(CustAccountValue);
   FirebaseRef.child("Customer Name").set(CustNameValue);
   FirebaseRef.child("Shipper Name").set(ShipperNameValue);
   FirebaseRef.child("Collection Address").set(CollectionAddressValues);
   FirebaseRef.child("Origin").set(ShipmentOriginValues);
   FirebaseRef.child("Destination").set(ShipmentDestValues);
   FirebaseRef.child("Weight").set(ShipmentweightValues);
   FirebaseRef.child("Pieces").set(ShipmentPiecesValues);
   FirebaseRef.child("Dimensions").set(ShipmentDimensionsValues);
   FirebaseRef.child("Stack").set(ShptStackValues);
   FirebaseRef.child("Desk").set(ChooseDeskValues);
   FirebaseRef.child("Comment").set(CommentValues);
   FirebaseRef.child("Status").set("Pending");
   //Uploading
   fileButton.addEventListener('change', function(e){
    var file = e.target.files[0];
    var storageRef = firebase.storage().ref('img/'+RRValue+'/'+file.name);
    var task = storageRef.put(file);
    task.on('state_changed', function progress(snapshot) {
      var percentage = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
      uploader.value = percentage;

    }, function error(err) {


    },function complete() {

    });
  }); 

   }

}

我需要选中表格中的复选框，并在提交表单时将其值返回给Firebase。

Answer 1

您可以为每个输入指定一个ID或名称，然后在提交表单时检索它们的值。

$("#table_body_Test").append("<tr><td>" + AgentEmail + "</td><td><input type=\"checkbox\" id=\""+AgentEmail+"\" Value =\"Agent\"></Input></td></tr>")

var agents = ... //Get your agents list from firebase
$form.on('submit', function(){
  agents.forEach(function(agent){
    if($('#'+agent.email).prop('checked'){
      //do something
    }
  })
})

Answer 2

如果您的代码有效，则可以检查是否选中了以下复选框：

/* jQuery */
if ($('#check_id').is(":checked"))
{
  // checkbox is checked
}

您还可以使用：

/* jQuery */
$("#idOfCurrentRow").children()."input[type='checkbox']") is(":checked")

如果您更喜欢纯JavaScript：

/* pure JavaScript*/
if(document.getElementById("idOfYourCheckbox").checked) {
   ...
} 
or
if (document.getElementByName("nameOfYourCheckbox").checked) {
   .....
}

无法从表中获取复选框值

2 个答案: