动态替换href答案

【问题标题】：Dynamically replace href动态替换href
【发布时间】：2016-01-26 20:36:38
【问题描述】：

我的网站中有以下代码行 - CodePen。

我想做的是让用户在下载项目之前必须先填写表格：

  <div class="container">
    <!-- Trigger the modal with a button -->
    <a href="#example1" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#myModal">Download Item #1</a>

    <a href="#example2" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Download Item #2</a>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">
            <form role="form">
              <div class="form-group">
                <label for="email">Email address:</label>
                <input type="email" class="form-control" id="email">
              </div>
              <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd">
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox"> Remember me</label>
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>

我怎样才能使当用户选择页面上的第一个或第二个按钮时，它会将此信息发送到提交按钮？

【问题讨论】：

感谢对这个问题进行评分的人。我不太确定为什么或你的推理是什么，但无论哪种方式你都不是很有帮助。
投反对票可能有几个原因 - 您的问题对于您想要做什么有点不清楚。其次，downvote 按钮工具提示说“这个问题没有显示任何研究工作” - 你的问题没有显示到目前为止你可能如何考虑解决这个问题。
@JamesThorpe ：他可能不知道如何开始......这就是为什么我试图帮助他开始回答我的问题。从那里，他应该能够弄清楚如何自己进行验证......

标签： javascript jquery html css

【解决方案1】：

您可以将链接存储在变量中。然后，当单击按钮时，检查字段是否为空（并应用任何验证规则）。如果不为空，请将提交应用到表单。

$link = 'example.com/download.pdf';

$('.button').click(function(){
    // CHECK THE FIELDS ARE NOT EMPTY
    // APPLY YOUR OWN VALIDATION

    if($field1 = $('.field1').val() != '' && $('.field2').val() != ''){
       // DO WHAT YOU NEED TO DO WITH THE LINK
       $('form').submit();
    } 
})

附带说明，您可能因为没有向我们提供解决您自己问题的尝试而被否决（不是我自己）。您向我们提供了您的 html，但没有提供任何经过测试的逻辑。

【讨论】：

【解决方案2】：

你在 JavaScript 中为你的按钮添加一个点击处理程序：

var fieldsAreReadyToBeSent = function() {
    // Validation code goes here
    // return true if valid & false if invalid
};

document.querySelector("[type=submit]").addEventListener("click", function() {
    if(!fieldsAreReadyToBeSent()) {
        event.preventDefault();
    }
});

event.preventDefault() 方法会阻止您的表单在被认为无效时被提交！

演示：

var fieldsAreReadyToBeSent = function() {
    return false; // FOR THIS DEMO, ALWAYS RETURN FALSE
};

document.querySelector("[type=submit]").addEventListener("click", function() {
    if(!fieldsAreReadyToBeSent()) { // FOR THIS DEMO, THIS IS ALWAYS TRUE
        event.preventDefault();
    }
});

 <div class="container">
<!-- Trigger the modal with a button -->
<a href="#example1" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#myModal">Download Item #1</a>

<a href="#example2" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Download Item #2</a>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <form role="form">
          <div class="form-group">
            <label for="email">Email address:</label>
            <input type="email" class="form-control" id="email">
          </div>
          <div class="form-group">
            <label for="pwd">Password:</label>
            <input type="password" class="form-control" id="pwd">
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me</label>
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
  </div>

【讨论】：