Question

我在用户填写表单后弹出图片时遇到问题。我只需要在输入所有字段时在表单底部运行.png。当用户选择出席人数（最多5）时，出现该文本框的数量，以便可以用该人的姓名填写。一旦填写了姓氏并且用户按下回车，我想要出现一个图像（复选标记的图片 - 这是强制性的。）

这就是我所拥有的：

在HTML中：

<body>
    <form>
        <fieldset>
        <legend>Step 1</legend>
        How many people will be attending?
            <select name = step1 id="step1" onchange="showField()">
            <option value="0">Please Choose</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            </select>
        <br>
        <div id="divName"></div>
        <img id="check" src="check.png">
        </fieldset> 
    </form>

在Javascript中：

function showField() {
    var selectDropDown = $("#step1");
    var value = selectDropDown.val();
    var insertDiv = $("#divName");
    var innerHtmlString = "";
    if(value > 0){
        innerHtmlString = "<b>Please provide full names: </b> <br/>";
    }
    for(i = 0; i < value; i++) {
        innerHtmlString += "<i>Attendee " + (i+1) + " Name:</i> <input type='text' name='"+(i+1)+"' /> </br><br/>";
    }
    insertDiv.html(innerHtmlString);
};

Answer 1

如果您使用ajax通过javascript或jquery发送表单你可以用 documentaion page

$('#myForm').ajaxComplete(function() {});

你也可以使用绑定到表单的ajax：complete事件。

$('#myform').on('ajax:complete' , function() {});

Answer 2

删除select标签内的onChange，并在函数前面的javascript中插入一个eventlistener。

<form>
    <fieldset>
    <legend>Step 1</legend>
    How many people will be attending?
        <select name = step1 id="step1">
        <option value="0">Please Choose</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>
    <br>
    <div id="divImage"></div>
    <img id="check" src="check.png">
    </fieldset> 
</form>

<强>的Javascript

document.getElementById("step1").addEventListener("change", showField);

function showField(){
  var selectDropDown = $("#step1");
  var value = selectDropDown.val();
  var insertDiv = $("#divImage");
  var innerHtmlString = "";
  if(value > 0){
      innerHtmlString = "<b>Please provide full names: </b> <br/>";
  }
  for(i = 0; i < value; i++){
      innerHtmlString += "<i>Attendee " + (i+1) + " Name:</i> <input type='text' name='"+(i+1)+"' /> </br><br/>";
  }
  insertDiv.html(innerHtmlString);
};

https://jsfiddle.net/hmr8p7o4/5/

Answer 3

使用按键进行计算很好：

这是我的一个朋友。

    $(document).on("keypress", function (e) {
if (e.which == 13 || e.keyCode == 13){
    $("#check").show();
}

给.png（或其他）一个ID并使用“13”（输入代码）来激活它。

如何在完成表单后添加图像

3 个答案: