Question

我有一个网页，上面有一个表格，用于输入患者信息（当然所有虚拟数据）。我设置了表单和表格来显示提交的信息。我似乎无法弄清楚当用户点击“添加病人”时数据未存储在数组中的原因。按钮。我试图多次提交数据，然后使用＆＃34; console.log（patientArray）＆＃34;检查数组，它说我试图存储的信息是未定义的。

这是我的网页：

@using OnboardingProject.App_Code
@using OnboardingProject.Controllers

@{
    ViewBag.Title = "Patients";
}

<div class="title">
    <div>
        <h1 style="float: left">@ViewBag.Title</h1>
    </div>
    <div class="rmm" style="float: right; display: inline-block">
        <ul>
            <li><button id="NewPatient">New Patient</button></li>
        </ul>
    </div>
</div>
<div id="modal_content">
    <div id="modal_window" title="Complete the form below to add a new patient:">
        <div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>

        <form id="add_patient" method="POST" action="#" accept-charset="UTF-8">
        <p><label>First Name<strong>*</strong><br>
        <input type="text" autofocus required size="48" id="fname" value=""></label></p>
        <p><label>Last Name<strong>*</strong><br>
        <input type="text" autofocus required size="48" id="lname" value=""></label></p>
        <p><label>Birthdate (mm/dd/yyyy)<strong>*</strong><br>
        <input type="text" autofocus required size="48" id="bday" value=""></label></p>
        <p><label>Site Name<strong>*</strong><br>
        <input type="text" autofocus required size="48" id="location" value=""></label></p>
        <p><label>SSN<strong>*</strong><br>
        <input type="text" autofocus required size="48" id="pat_ssn" value=""></label></p>
        <p><input type="button" value="Add Patient" onclick="addPatient()"></p>
        </form>
    </div>
</div>
<div class="content">
    <div id="patient_table">
        <table id="patients">
            <tr>
                <th id="p_name">Patient Name</th>
                <th id="p_site">Site</th>
                <th id="dob">Date of Birth</th>
                <th id="ssn">SSN</th>
                <th id="edits"></th>
            </tr>
        </table>
    </div>
</div>
<script src="@Url.Content("~/Scripts/PatientInfo.js")" type="text/javascript></script>

这是我的javascript文件：

//Display the modal when New Patient button is clicked
$("#NewPatient").click(function () {
    $("#modal_window").show();
});

//Hide the modal when close is clicked
$("#modal_close").click(function () {
    $("#modal_window").hide();
});

//Create an array to store Patient Information
var patientArray = [];

var fName = document.getElementById("fname").value;
var lName = document.getElementById("lname").value;
var bDate = document.getElementById("bday").value;
var sName = document.getElementById("location").value;
var SSN = document.getElementById("pat_ssn").value;

function addPatient( fName, lName, bDate, sName, SSN ) {
    patientArray.push(fName, lName, bDate, sName, SSN);
    $("#modal_window").hide();
}

//Create a table from the array
var table = document.getElementById("patients");

var tbody = document.createElement("tbody");
table.appendChild(tbody);
patientArray.forEach(function (items) {
    var row = document.createElement("tr");
    items.forEach(function (item) {
        var cell = document.createElement("td");
        cell.textContent = item;
        row.appendChild(cell);
    });
    tbody.appendChild(row);
});

Answer 1

html按钮调用addPatient（）函数。请注意，调用addPatient函数与执行前五行（函数外部）无关，这是将值拾取到变量中的位置。这就是为什么在调用函数时没有任何反应的原因。此外，该函数在其定义中需要5个参数。然后你必须用5个参数调用该函数。或者在函数内部调用值，并在没有参数的情况下调用。

换句话说，这里有两种方式： 选项1：

将此代码移到addPatient函数中。删除该函数的参数定义，并使其成为没有参数的函数。

var fName = document.getElementById("fname").value;
var lName = document.getElementById("lname").value;
var bDate = document.getElementById("bday").value;
var sName = document.getElementById("location").value;
var SSN = document.getElementById("pat_ssn").value;

选项2：

保持addPatient功能不变。但是，创建另一个函数，比如Fetch_And_Add_Patient（），它具有以下代码：

function Fetch_Add_Patient() {
    var fName = document.getElementById("fname").value;
    var lName = document.getElementById("lname").value;
    var bDate = document.getElementById("bday").value;
    var sName = document.getElementById("location").value;
    var SSN = document.getElementById("pat_ssn").value;
    addPatient(fName, lName, bDate, sName, SSN);
}

然后在HTML按钮中，调用上面的函数，不带任何参数，而不是在没有任何参数的情况下调用addPatient。

<p><input type="button" value="Add Patient" onclick="addPatient()"></p>

我无法将表单数据放入数组中以显示在表格中

1 个答案: