Question

相当新的JS / JQuery程序员在这里请原谅任何疏忽/措辞不好的文本。同样，即使没有特别要求，也会感谢所有反馈。

我有一些下拉列表，这些列表由SQL表中的数据动态填充。我有一个设置，如果用户选择“其他”，DDL下方会出现一个文本字段，以允许输入自定义值。应将这些自定义值添加到数据库中，以便它们显示在DDL中。由于页面上有很多这些DDL，我希望数据库更新和DDL更新立即发生（在用户点击时），而不是在填写整个页面并在页面提交后进行（这也使得更容易debug因为有很多必需的字段。）

所以我的代码到目前为止看起来像这样：

<label for="IDIQs">Associated IDIQ/BPA:</label>
<select id="IDIQs" required>
</select>
<br>

<div id="IDIQs_other_div" class="other_field">
<label for="IDIQs_other">Other IDIQ/BPA:</label><br><input type="text"      name="IDIQs_other" id="IDIQs_other" size="50" required/><br>
<input type="submit" value="Add Contract Vehicle Type to Database" name="IDIQs_other_submit"  onClick='updateDB("IDIQs");'> 
</div>

这显然不起作用，因为浏览器会将此输入类型解释为表示整个表单的提交按钮。

实现这一目标的最简单/最佳实践方法是什么？

请注意，“很高兴”功能是在完成所有操作后，将新输入的值作为DDL中的选定值。

我在此页面中使用JQuery以及常规JavaScript。

Answer 1

您可以使用<input type="button" />或样式的锚点看起来像按钮或任何东西。

Answer 2

我建议使用按钮，而不是提交

<input type="button" value="Add Contract Vehicle Type to Database" name="IDIQs_other_submit"  onClick='updateDB("IDIQs");'>

总是当您点击此按钮时，将调用ajax功能

Answer 3

使用jQuery中的on函数来触发ajax。

$('.yourElement').on('click', function(e) {
    // Your Ajax code
});

Answer 4

你可以这样做：

1）在您想要即时提交的html标签上添加一个类

2）我们将提交用户在其他地方聚焦时所输入的内容（模糊事件）

$('.class').blur(function(){

    var $this = $(this);
    var val = $.thrim($this.val());

    if ($.thrim($this.val()) !== '') { // we dont want to submit blanks for no reason
        var request = $.ajax({
          url: "script.php",    // path of your php script
          type: "POST", 
          data: {key : val},
          dataType: "json"
        });

        request.done = function(reply) { // success get a reply maybe from server
            console.log(reply)
        }

        request.fail = function(err) {  some error occured
            console.log(err)
        }

    }

})

可点击组件使AJAX调用不是提交按钮？

4 个答案: