使用AngularJS将查询字符串中的表单数据发送到url

时间:2015-04-28 16:12:41

标签: javascript angularjs forms

我正在尝试创建一个简单的,然后将数据传递给查询字符串。

即捕获: 名字 姓 电子邮件

当提交给soem之类的东西时:

http://www.url.com?FirstName=John&LastName=Smith&johnsmith@url.com

我以为我会尝试双向绑定并通过操作添加查询字符串,但显然这给了我一个错误。我不需要保存此数据信任,将其从小表单传输到主应用程序。

我还尝试在提交时执行此操作,但是当表单为空时,链接仍然可以点击。任何建议都会非常受欢迎。

<form class="form" name="appForm" novalidate action="https://www.url.com?FirstName={{firstname}}" method="Post">
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-11 flowuplabels">
          <div class="form-group has-feedback" show-errors="{ showSuccess: true }">
            <div class="fl_wrap">
              <label for="appfirstname" class="fieldLabel fl_label">
                First name<span class="text-danger">*</span>
              </label>
              <input type="text" name="appfirstname" id="appfirstname" class="form-control fl_input" data-ng-model="firstname" ng-required />
              <span class="form-bar"></span>
            </div>
          </div>
          <div class="form-group has-feedback" show-errors="{ showSuccess: true }">
            <div class="fl_wrap">
              <label for="applastname" class="fieldLabel fl_label">
                Last name<span class="text-danger">*</span>
              </label>
              <input type="text" name="applastname" id="applastname" class="form-control fl_input" data-ng-model="lastname" ng-required />
              <span class="form-bar"></span>
            </div>
          </div>
          <div class="form-group has-feedback" show-errors="{ showSuccess: true }">
            <div class="fl_wrap">
              <label for="appemail" class="fieldLabel fl_label">
                Email<span class="text-danger">*</span>
              </label>
              <input type="email" name="appemail" id="appemail" class="form-control fl_input" data-ng-model="email" ng-required />
              <span class="form-bar"></span>
              <p ng-show="appForm.appemail.$invalid && !appForm.appemail.$pristine" class="help-block">Enter a valid email.</p>
            </div>
          </div>
          <div class="form-group">
            <button id="btnSend" class="btn btn-red" ng-disabled="!firstname || !lastname || !email">Join us</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

1 个答案:

答案 0 :(得分:0)

我问我解决时的典型情况

应该使用get并且只需输入url即:

然后它会使用输入名称作为查询名称来帮助查询字符串,这比我尝试做的要简单得多