时间戳

首页 > 解决方案 > 占位符文本更改按钮单击和引导验证单击提交时更改的占位符文本

bootstrap-4 - 占位符文本更改按钮单击和引导验证单击提交时更改的占位符文本

问题描述

我对 Web 开发非常陌生，可以在验证方面提供一些帮助。我目前正在为使用 Bootstrap 构建的网站设计一个表单。正如您从代码中看到的那样，您得到 3 个编号为 1、2 和 3、3 个输入的按钮，一个名称输入，最后还有一个提交按钮。目前，当您按 1、2 或 3 时，它只会更改“首选”输入框中的占位符文本。我需要帮助的是：按钮可用于 3 个占位符中的任何一个；

    1. If "First Choice" is already selected (placeholder text has changed) then select "Second Choice", if "Second Choice" is selected (placeholder text has changed) then select "Third Choice".
    
    or (not sure which one of these I'll use yet)
    
    2. Any button can be used again if already selected to change any of the 3 placeholder text inputs.
    
    3. How do I validate if all 3 inputs have been changed on clicking submit?
    
    4. How do I validate the name input has been filled in?
    
    5. How do I validate if all 4 inputs have been changed on submitting?
    
    6. Am I doing this correctly? Or is there a simpler way?

抱歉，如果这是很多问题，只是想弄清楚这一切。

    Hope you can help
    
    Daz

<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<style>

button {
    margin:50px 0 50px 0;
}
.container {
    border:solid black 1px;
    width:60%;
}
#f2, #f3, #f4, #f6 {
    text-align:center;
}

#f5 {
    background-color:black;
    color:white;
    text-align:center;
}

</style>
<body>
<div class="container">
    <button type="submit" class="btn btn-lg btn-primary" onclick="changePlaceholder1()">1</button>
    <button type="submit" class="btn btn-lg btn-secondary" onclick="changePlaceholder2()"> 2</button>
    <button type="submit" class="btn btn-lg btn-info" onclick="changePlaceholder3()">3</button>
    <br>    
    <input id="f2" readonly placeholder="First Choice">
    <input id="f3" readonly placeholder="Second Choice">
    <input id="f4" readonly placeholder="Third Choice"><br>
    <br>
    <input id="f6" type="name" placeholder="Name">
    <br>
    <button type="submit" class="btn btn-success">Submit</button>
    <br>
</div>
<script type="text/javascript"> 
    function changePlaceholder1() { 
        selectedTextarea = $('#f2')[0]; 

        selectedTextarea.placeholder = "1";
    }
</script>
<script>
    function changePlaceholder2() { 
        selectedTextarea = $('#f2')[0]; 

        selectedTextarea.placeholder = "2"; 
}
</script>
<script>
    function changePlaceholder3() { 
        selectedTextarea = $('#f2')[0]; 

        selectedTextarea.placeholder = "3";
}
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>```

标签： bootstrap-4

解决方案

推荐阅读