Question

我正在使用PHP和AJAX来编写一个非常简单的CRUD，我想展示一个表单和三个按钮：Grabar，Modificar和Eliminar，我的问题是我无法在代码中确定要执行哪些操作根据点击的按钮，例如：如果客户点击Grabar按钮，它必须重定向到registro.php，如果客户点击modificar按钮，它必须重定向到modificar.php和Eliminar按钮的相同逻辑（重定向） to eliminar.php）。

如何在javascript中实现这一目标？到目前为止我有这个：

function enviarDatosEmpleado(){

  //div donde se mostrará lo resultados
  divResultado = document.getElementById('resultado');
  //recogemos los valores de los inputs
  nom=document.nuevo_empleado.nombre.value;
  ape=document.nuevo_empleado.apellido.value;
  web=document.nuevo_empleado.web.value;
  valor=document.nuevo_empleado.Submit.value;

  alert(valor);
}
  /* 
  ajax=objetoAjax();

  ajax.open("POST", "registro.php",true); */

我的表格是：

<form name="nuevo_empleado" action="" onsubmit="enviarDatosEmpleado(); return false">
            <h2>Nuevo empleado</h2>
                <table>
                <tr>
                    <td>Nombres</td><td><label><input name="nombre" type="text" /></label></td>
                </tr>
                <tr>
                    <td>Apellido</td><td><label><input type="text" name="apellido"></label></td>
                </tr>
                <tr>
                    <td>Web</td><td><label><input name="web" type="text" /></label></td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td><label><input type="submit" name="Submit" value="Grabar" /></label></td>
                    <td><label><input type="submit" name="submit" value="Modificar" /></label></td>
                    <td><label><input type="submit" name="submit" value="Eliminar" /></label>
                    </td>
                </tr>
                </table>
        </form>

请你帮我解决if声明吗？

Answer 1

修改表单上的action属性。

switch (valor) {
  case 'Grabar':
    document.nuevo_empleado.action = 'registro.php';
    break;
  case 'Modificar':
    document.nuevo_empleado.action = 'modificar.php';
    break;
  case 'Eliminar':
    document.nuevo_empleado.action  = 'eliminar.php';
    break;
}

这不是＆＃34;对＆＃34;但是，要做你想做的事。如果为每个按钮的点击事件安装单独的处理程序，它会更加清晰，以便为每个按钮调用不同的处理程序。

<form ...>
  ...
  <input type='submit' value='Grabar' onclick='this.form.action = "registro.php";'>
  <input type='submit' value='Modificar' onclick='this.form.action = "modificar.php";'>
  ...
</form>

要使用示例代码底部的注释掉的Javascript，您必须做两件事。首先，您已修改事件处理程序以接受event参数。您需要此参数来阻止浏览器自己提交表单。

然后，根据所选按钮的不同，您可以使用第一个示例中的switch按钮。

function enviarDatosEmpleado(event) {
  event.preventDefault(); // this stops the browser from submitting the form
  ...
  var ajax = objectoAjax();
  switch (valor) {
    case 'Grabar':
      ajax.open('POST', 'registro.php', true);
      break;
    case 'Modificar:
      ajax.open('POST', 'modficar.php', true);
      break;
    case 'Eliminar:
      ajax.open('POST', 'eliminar.php', true);
      break;
  }

Answer 2

试试这个。

  document.getElementsByName('nuevo_empleado')[0].onclick = function(e) {
    e.preventDefault();

    var redirectHash = {
        grabar: 'registro.php',
        modificar: 'modificar.php',
        eliminar: 'eliminar.php'
    };

    if (e.target.type === 'submit') {
        window.location.href = redirectHash[e.target.value.toLowerCase()]; 
    }
  };

JSBin演示：http://jsbin.com/kefapofato/1/edit?html,js,output

在Javascript中选择多个值

2 个答案: