Question

我想如果你在第一个id =“benodigheden”中做了某些特定事情，那么第二个规则就是id =“benodigheden”我在互联网上找不到任何东西。我认为你需要有java但这里我的知识仍然太小了。我希望有人可以帮助我。

这是我的HTML：

    <form action="" method="post">
<legend>Neem contact op</legend>
<table>
    <tr>
        <td>
            <label for="Naam">Naam: </label>
        </td>
        <td>
            <input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
        </td> 
    </tr>
    <tr>
        <td>
            <label for="Email">Email :</label>
        </td>
        <td>
            <input type="email" id="Email"name="Email" placeholder="Email" required="required" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="Seizoen">Seizoen: </label>
        </td>
        <td>                                                                  
            <select name="Seizoen" id="Seizoen" required>
            <option value="">Kies hier je seizoen</option>
                <option value="Lente">Lente</option>
                <option value="Zomer">Zomer</option>
                <option value="Herfst">Herfst</option>
                <option value="Winter">Winter</option>
            </select>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <hr />  
        </td>
    </tr>
    <tr>
        <td>
            <label for="benodigheden1">Benodigheden:</label>
        </td>
        <td>
            <input type="text" id="benodigheden1"name="benodigheden1" placeholder="Benodigheden" required="required" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="ingrediënten1">Ingrediënten:</label>
        </td>
        <td>
            <input type="text" id="ingrediënten1"name="ingrediënten1" placeholder="Ingrediënten" required="required" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="stappenplan">Stappenplanm:</label>
        </td>
        <td>
            <textarea name="stappenplan" id="stappenplan" cols="40" rows="5" placeholder="Stappenplan" required="required" /></textarea>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <hr />
        </td>
    </tr>
    <tr>
        <td>
            <label for="Opmerking">Opmerking:</label>
            </td>
        <td>
            <textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
            </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            <div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
        </td>
    </tr>
</table>

以下是JSFiddle的链接。

Answer 1

如果我理解正确，您需要在其中输入文本后出现额外的行（规则？），并且对于那些序列号在id中的输入应该会出现这种情况。

为此，我建议您添加jQuery并添加一个检测输入更改的脚本，并根据需要添加新输入，并使用下一个可用序列号：

$(document).on('keyup change input', 'input, textarea', function() {
    if (!$(this).val().replace(/\s/g, '').length) {
        // no text entered, so don't add line
        return;
    }
    var id = $(this).attr('id');
    // Extract name and linenumber from id
    var res = id.split(/(\d+$)/);
    if (res.length < 2) {
        // No line number, so don't add line
        return;
    }
    var newId = res[0] + (parseInt(res[1]) + 1);
    if ($('#' + newId).length) {
        // Not the last line, so don't add line
        return;
    }
    // Add a line, and make it non-mandatory
    $(this).clone()
        .attr('id', newId).removeAttr('required')
        .val('')
        .insertAfter(this)
        .before($('<br>'));
});

虽然上述内容可以在纯javascript中完成，但它更麻烦，更难以处理跨浏览器问题。

您可以在此fiddle中看到它的工作原理。

自动重新启动新输入

1 个答案: