如何根据jquery中另一个输入字段上的用户输入生成输入字段及其值

Question

我有一个输入字段，用户将根据输入数字输入isbn编号，我需要填充两个输入字段，即书名和书名。我在onblur输入上调用了javscript函数，但我得到了正确的值，但是我的问题是是，如果用户不将光标从输入字段中移出并单击提交按钮，那么在这些情况下我将如何填充这两个输入字段onblur无法正常工作

<form name="post" id="post" method="post" action="#">
   <input type="text" name="price" id="price">
   <input type="text" name="isbn_number" id="isbn_number" onblur="getdetail()">
</form>

Answer 1

选择您喜欢的解决方案并将其适应您的网站：

1）如果您的浏览器支持，最简单的方法就是将所有字段都设为必填字段，并使用onchange而不是onblur。 这将迫使用户输入一个isbn，这将触发包含更多需要输入的onchange。

<form name="post" id="post" method="post" action="#">
   <input type="text" name="price" id="price" required>
   <input type="text" name="isbn_number" id="isbn_number" onchange="getdetail()" required>
</form>

2）检查字段后，请手动提交。

<form name="post" id="post" method="post" action="#">
   <input type="text" name="price" id="price">
   <input type="text" name="isbn_number" id="isbn_number" onblur="getdetail()">
   <input type="submit">
</form>
<script>
    document.querySelector('input[type="submit"]').addEventListener('click', function ( event ) {
        var valid = false;
        event.preventDefault();
        // ...
        // add validation code here.
        // ...
        if (valid) document.querySelector('#post').submit();
    });
</script>

3）仅在所有内容有效的情况下激活提交。

<form name="post" id="post" method="post" action="#">
   <input type="text" name="price" id="price">
   <input type="text" name="isbn_number" id="isbn_number">
   <input type="submit" disabled="disabled">
</form>
<script>
    var valid = false;
    document.querySelector('#post').addEventListener('change', function ( event ) {
        if (event.target.name === 'isbn_number') getdetail();
        // ...
        // add validation code
        // if (stuff && stuff && stuff) valid = true;
        if (valid) document.querySelector('input[type="submit"]').removeAttribute('disabled');
    });
</script>