Question

我正在使用多个选择元素处理此表单，其中包含选项“是”，“否”或“不适用”选项。需要每当用户选择“是”选项时，旁边会显示单独的日期字段。我在这个日期字段中使用了HTML DOM document.getElementById（“id”）。innerHTML。一切顺利，但我无法使用POST方法将date的值传递给表单操作页面。检查此代码：

    <!-- javascript code -->  
  <script type="text/javascript">

function credit_check(name){
  if(name=='YES')document.getElementById('div2').innerHTML='Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />';
  else document.getElementById('div2').innerHTML='';
}
function employment_check(name){
  if(name=='YES')document.getElementById('div3').innerHTML='Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />';
  else document.getElementById('div3').innerHTML='';
}

</script>



</head>

<body>
<?php include("menu.inc"); ?>  
  <div id="main">

 <table>
<form method="post" action="checkinfo.php">  
       <tr><td colspan=2><hr/><input type="hidden" name="consultant_id" value="<?php echo $consult_id; ?>"> </td>

       </tr>

    <tr align="center">
    <td><b>Credit Check </b></td>
    <td>  
            <select name="2" onchange="credit_check(this.options[this.selectedIndex].value)">
            <option selected="selected">Please select ...</option>
                <option value="YES">Yes</option>
                <option value="NO">No</option>
                <option value="NA">Not Applicable</option>
            </select>
        </td>
        <td> <div id ="div2"> </div></td>
  </tr>

 <tr align="center">
    <td><b>Employment Check :<font color='red'>*</font></b></td>
    <td>  
            <select name="3" onchange="employment_check(this.options[this.selectedIndex].value)">
                <option selected="selected">Please select ...</option>
                <option value="YES">Yes</option>
                <option value="NO">No</option>
                <option value="NA">Not Applicable</option>
            </select>
        </td>
        <td> <div id ="div3"> </div></td>
    </tr>

    </form>
</table>

Answer 1

Demo - 将function credit_check(name)更改为window.credit_check = function(name)

window.credit_check = function(name){
    if(name=='YES') document.getElementById('div2').innerHTML='Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />';
    else document.getElementById('div2').innerHTML='';
}

window.employment_check = function (name){
    if(name=='YES') document.getElementById('div3').innerHTML='Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />';
    else document.getElementById('div3').innerHTML='';
}

你的脚本没有正确加载，

控制台中的

Uncaught ReferenceError: credit_check is not defined显示错误。功能没有定义。您可以设置上述功能或重新定位代码。

Answer 2

在加载时将输入放入HTML中，然后只需隐藏/显示它们。

    <!-- javascript code -->  
  <script type="text/javascript">

function credit_check(name){
  if(name=='YES')document.getElementById('div2').style.display = 'block';
  else document.getElementById('div2').style.display = 'none';
}
function employment_check(name){
  if(name=='YES')document.getElementById('div3').style.display = 'block';
  else document.getElementById('div3').style.display = 'none';
}

</script>



</head>

<body>
<?php include("menu.inc"); ?>  
  <div id="main">

 <table>
<form method="post" action="checkinfo.php">  
       <tr><td colspan=2><hr/><input type="hidden" name="consultant_id" value="<?php echo $consult_id; ?>"> </td>

       </tr>

    <tr align="center">
    <td><b>Credit Check </b></td>
    <td>  
            <select name="2" onchange="credit_check(this.options[this.selectedIndex].value)">
            <option selected="selected">Please select ...</option>
                <option value="YES">Yes</option>
                <option value="NO">No</option>
                <option value="NA">Not Applicable</option>
            </select>
        </td>
        <td> <div id ="div2" style="display: none;"> 
            Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />
        </div></td>
  </tr>

 <tr align="center">
    <td><b>Employment Check :<font color='red'>*</font></b></td>
    <td>  
            <select name="3" onchange="employment_check(this.options[this.selectedIndex].value)">
                <option selected="selected">Please select ...</option>
                <option value="YES">Yes</option>
                <option value="NO">No</option>
                <option value="NA">Not Applicable</option>
            </select>
        </td>
        <td> <div id ="div3" style="display: none;"> 
            Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />
        </div></td>
    </tr>

    </form>
</table>

查看jQuery也是一个好主意，它使这类事情变得更容易。

Answer 3

您的代码已经正常运行。见http://jsfiddle.net/2wg4u6ut/

确保您的JavaScript位于文档的主题部分。您的格式设置中存在一些小问题，其中<form>标记属于表格。

你也错过了提交按钮，但它已经在工作了。

无法发布通过document.getElementById（'div'）。innerHTML返回的标记

3 个答案: