Question

我正在尝试根据内部输入的数字和表单的输入文本动态显示html行列表。表单将被提交并使用PHP将信息保存到mySQL数据库中，但我希望（在此之前）使用另一个按钮，而不是提交的按钮，使用javascript动态显示项目列表。

但它不起作用（这里是fiddle）。

这是我的html表单：

<form name="configurarCursoForm" method="POST" action="guardarConfigCurso.php">
  <div class="form-group">
    <label for="sumarioCurso">Cuántas clases para el Cronograma?</label>
    <input type="text" name="cantClases">
    <input id='generarCronograma' type='button' onclick='return generarCronograma()' value='Generar Cronograma'>
  </div>                      
<div id="output"></div>

这是我的javascript函数：

function generarCronograma() {
  var cant = document.forms["configurarCursoForm"]["cantClases"].value;
  if (cant && !isNaN(cant)) { 
    for ($i=0; $i<cant; $i++) { 
      var e = 0;
      var fecha = " Fecha <input style='width:20%;' type='text' name='fecha"+($i+1)+"'> ";
      var bolilla = " Bolilla <input style='width:20%;' type='text' name='bolilla"+($i+1)+"'> ";
      var docente = " Docente <input style='width:20%;' type='text' name='docente"+($i+1)+"'> ";
      var link = " Link <input style='width:20%;' type='text' name='link"+($i+1)+"'> <br>";
      $('#output').append(fecha, bolilla, docente, link); //agregamos las celdas necesarias
    } 
  }
}

我确定这里有一些明显的错误，但找不到它。

Answer 1

为什么小提琴中的代码不起作用有三个原因：

JS具有包含在onload处理程序中的默认小提琴选项，这意味着您的函数不是全局的，无法从内联onclick=属性访问。单击JS窗口右上角的JavaScript选项按钮，然后更改＆＃34;加载类型＆＃34;来自＆＃34; onLoad＆＃34;的选项to＆＃34;没有包装头＃34;。
您正在尝试使用jQuery函数，但未在小提琴中包含jQuery。在JS选项中选择您喜欢的jQuery版本。
您的输入元素具有id='generarCronograma'，其名称与该函数相同。元素ID也可以作为全局变量访问，因此使用相同的名称会混淆事物。你会在浏览器的控制台中看到这个错误，＆＃34;未捕获的TypeError：generarCronograma不是一个函数＆＃34;。更改ID（或删除它，因为您似乎没有使用它）。

这三项更改有效：https://jsfiddle.net/Lb1prL4k/4/

在提交表单之前使用JS动态显示行：不打印任何内容

1 个答案: