标签: forms

<div>
  <form [formGroup]="form">

    <div *ngFor="let question of questions" class="form-row">
      <label [attr.for]="question.key">{{question.label}}</label>

  <div [ngSwitch]="question.controlType">

    <input *ngSwitchCase="'textbox'" [formControlName]="question.key"
            [id]="question.key" [type]="question.type" [(ngModel)]="question.value">

    <select [id]="question.key" [(ngModel)]="question.value" *ngSwitchCase="'dropdown'" [formControlName]="question.key" >
      <option *ngFor="let opt of question.options" [ngValue]="opt.key" >{{opt.value}}</option>
    </select>

    <input *ngSwitchCase="'checkbox'"  [(ngModel)]="question.value"
            [id]="question.key" [type]="question.type" (change)="question.value = ck.checked" #ck [ngModelOptions]="{standalone: true}">

  </div> 
  <div class="errorMessage" *ngIf="!form.controls[question.key].valid">{{question.label}} is required</div>
    </div>

    <div class="form-row">
      <button type="submit" [disabled]="!form.valid" (click)="onSubmit()">Save</button>
      <button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
      <button type="button" class="btn btn-default" (click)="clear()">Clear</button>

    </div> …

Run Code Online (Sandbox Code Playgroud)

forms angular2-forms angular2-template angular

Var*_*run

2017 07-22

172
推荐指数

5
解决办法

19万
查看次数

当表单与AngularJS无效时,禁用提交按钮

我的表格是这样的:

<form name="myForm">
    <input name="myText" type="text" ng-model="mytext" required />
    <button disabled="{{ myForm.$invalid }}">Save</button>
</form>

Run Code Online (Sandbox Code Playgroud)

正如您所看到的,如果输入为空,则按钮被禁用但在包含文本时不会更改回启用状态.我怎样才能使它工作？

forms button disabled-control angularjs

ali*_*ali

2013 12-07

171
推荐指数

4
解决办法

23万
查看次数

单击按钮时禁用表单自动提交

我有一个HTML表单,我使用几个按钮.问题是无论我点击哪个按钮,即使按钮不是"提交"类型,表单也会被提交.例如:按钮<button>Click to do something</button>,导致表单提交.

e.preventDefault()为这些按钮中的每一个做一个是非常痛苦的.

我使用jQuery和jQuery UI,网站是HTML5.

有没有办法禁用这种自动行为？

html javascript forms button form-submit

Par*_*ris

2015 10-11

169
推荐指数

3
解决办法

14万
查看次数

JavaScript表单提交 - 确认或取消提交对话框

对于一个带有警告的简单表单,询问字段是否填写正确,我需要一个执行此操作的函数:

单击按钮时显示警告框,有两个选项:
- 如果单击"确定",则提交表单
- 如果单击取消,则会关闭警报框,并可以调整并重新提交表单

我认为JavaScript确认可行,但我似乎无法弄清楚如何.

我现在的代码是:

function show_alert() {
  alert("xxxxxx");
}

Run Code Online (Sandbox Code Playgroud)

html javascript forms confirm submit

mat*_*att

2019 04-26

168
推荐指数

4
解决办法

36万
查看次数

如何使用jQuery禁用/启用选择字段？

我想以类似的形式创建一个选项

[] I would like to order a [selectbox with pizza] pizza

Run Code Online (Sandbox Code Playgroud)

其中selectbox仅在选中复选框时启用,未选中时禁用.

我想出了这段代码:

<form>
<input type="checkbox" id="pizza" name="pizza" value="yes"> <label for="pizza">
I would like to order a</label>
<select name="pizza_kind">
    <option>(choose one)</option>
    <option value="margaritha">Margaritha</option>
    <option value="hawai">Hawai</option>
</select>
pizza.
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script>
var update_pizza = function () {
    if ($("#pizza").is(":checked")) {
        $("#pizza_kind").removeAttr("disabled");
    }
    else {
        $("#pizza_kind").prop('disabled', 'disabled');
    }
};

$(update_pizza);
$("#pizza").change(update_pizza);
</script>

Run Code Online (Sandbox Code Playgroud)

我尝试了各种方法如何使用设置禁用属性.prop(),.attr()和.disabled=.然而,没有任何反应.当应用于<input type="checkbox">代替时<select>,代码完美地运行.

如何<select>使用jQuery 禁用/启用？

html forms jquery

izi*_*dor

lucky-day

168
推荐指数

7
解决办法

47万
查看次数

防止在jQuery中双重提交表单

我有一个表单,需要一段时间服务器来处理.我需要确保用户等待并且不再尝试通过再次单击该按钮重新提交表单.我尝试使用以下jQuery代码:

<script type="text/javascript">
$(document).ready(function() {
    $("form#my_form").submit(function() {
        $('input').attr('disabled', 'disabled');
        $('a').attr('disabled', 'disabled');
        return true;
    });
});
</script>

Run Code Online (Sandbox Code Playgroud)

当我在Firefox中尝试此操作时,所有内容都被禁用,但表单未提交任何它应包含的POST数据.我不能使用jQuery提交表单,因为我需要使用表单提交按钮,因为有多个提交按钮,我确定哪个用于POST中包含哪个值.我需要像往常一样提交表单,我需要在发生后立即禁用所有内容.

谢谢!

javascript forms jquery http-post double-submit-prevention

Ada*_*dam

2019 08-04

164
推荐指数

5
解决办法

18万
查看次数

HTML5 textarea占位符未显示

我无法弄清楚我的标记有什么问题,但文本区域的占位符不会出现.好像它可能被一些空格和标签覆盖.当您专注于文本区域并从光标放置的位置删除时,然后离开文本区域,然后会出现正确的占位符.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
    </head>

    <body>

    <form action="message.php" method="post" id="message_form">
        <fieldset>

            <input type="email" name="email" id="email" title="Email address"
                maxlength="40"
                placeholder="Email Address" 
                autocomplete="off" required />
            <br />
            <input type="text" 
                name="subject" 
                id="subject" title="Subject"
                maxlength="60" placeholder="Subject" autocomplete="off" required />
            <br />
            <textarea name="message" 
                id="message" 
                title="Message" 
                cols="30" 
                rows="5" 
                maxlength="100" 
                placeholder="Message" required>
            </textarea>
            <br />
            <input type="submit" value="Send" id="submit"/>

        </fieldset>
    </form>
</body>

<script>

$(document).ready(function() {        
    $('#message_form').html5form({
        allBrowsers : true,
        responseDiv : '#response',
        messages: 'en',
        messages: 'es',
        method : 'GET',
        colorOn …

Run Code Online (Sandbox Code Playgroud)

forms jquery html5 textarea placeholder

roj*_*alo

2012 06-06

164
推荐指数

4
解决办法

10万
查看次数

将星号添加到bootstrap 3中的必填字段？

我的HTML有一个被调用的类.required,它被分配给必需的字段.这是html:

<form action="/accounts/register/" method="post" role="form" class="form-horizontal">
    <input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' />
    <div class="form-group required">
       <label class="col-md-2 control-label">Username</label>
       <div class="col-md-4">
         <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" />
       </div>
    </div>
    <div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">Password</label><div class="col-md-4"><input class="form-control" id="id_password1" name="password1" placeholder="Password" required="required" title="" type="password" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">Password (again)</label><div class="col-md-4"><input class="form-control" id="id_password2" name="password2" placeholder="Password (again)" required="required" title="" type="password" /></div></div>
    <div class="form-group required"><label …

Run Code Online (Sandbox Code Playgroud)

css forms form-fields twitter-bootstrap-3

bra*_*orm

2019 05-23

162
推荐指数

4
解决办法

25万
查看次数