从模态字段构建PHP动态URL

Question

我一直在绞尽脑汁，认为这超出了我的范围，所以我在寻求你的帮助。

我有一个生成表的PHP脚本，每行都有一个按钮。

<?php echo ($v['divert_enabled']) ? 'Yes' : 'No' ; ?><br>
    <?php if(!$v['divert_enabled']) : ?>

    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal<?php echo $v['id']; ?>">Enable</button>

    <!-- Modal For HOSPITAL DIVERT -->
    <div id="myModal<?php echo $v['id']; ?>" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <h4 class="modal-title" id="myModalLabel">Apply Hospital Divert</h4>
  </div>

  <div class="modal-body">

      <p>Setting hospital divert for <strong><?php echo $v['name']; ?></strong></p><br>

            <!-- Date time picker -->
            <div id="datetimepicker<?php echo $v['id']; ?>" class="input-append date">
              <input type="text"></input>
              <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span>
            </div>
            <script type="text/javascript">
              $('#datetimepicker' + <?php echo $v['id']; ?>).datetimepicker({
                format: 'dd/MM/yyyy hh:mm',
                language: 'en-GB',
                pickSeconds: false,
                pick12HourFormat: false
              });
              </script>  

            <div class="form-group">
              <label for="sel1">Divert Type:</label>
              <select class="form-control" id="divert_type_<?php echo $v['id']; ?>">
                <option>GP Defelection</option>
                <option>Borderline Deflection</option>
                <option>Full Divert</option>
              </select>
            </div>

            <div class="form-group">
              <label for="sel2">Divert To:</label>
              <select class="form-control" id="divert_to_">
                <option>Somewhere Else</option>
                <option>Even Further</option>
              </select>
          </div>

  </div>
  <div class="modal-footer">
      <a href='?
      action=add_divert&amp;&id=<?php echo $v['id']; ?>&amp;&
      to=LONDON&amp;&
      type=TEST&search=<?php if(isset($_REQUEST['search'])) { echo $_REQUEST['search']; } ?><?php if(isset($_REQUEST['page'])) { echo "&page=".$_REQUEST['page']; } ?><?php if(isset($_REQUEST['sort'])) { echo "&sort=".$_REQUEST['sort']; } ?><?php if(isset($_REQUEST['filter'])) { echo "&filter=".$_REQUEST['filter']; } ?>' class="btn btn-default" role="button">Continue</a>    
  </div>
    </div>

    </div>
    </div>
    <?php endif; ?>

PHP代码将生成一个带有唯一ID和唯一datetimepicker控件的模式框。

我需要将模态的三个字段的值包含在按钮的HREF中。

目前，HREF变量使用ID，TO和TYPE。 ID工作正常，但我需要在单击按钮之前获取TO和TYPE的值（显示为LONDON和TEST）。显然，这些值在页面加载时不可用，因为它们在显示模态时被填充。

**更新：这是我最终使用的 - 感谢帮助**

        <script>
        $(document).on('click','#WarningModal<?php echo $v['id']; ?> .modal-footer a', function(e)
            {
                e.preventDefault();

                //current timestamp for timing when divert applied.
                var currentdate = new Date(); 
                var datetime = currentdate.getFullYear() + "/"
                        + (currentdate.getMonth()+1)  + "/" 
                        + currentdate.getDate() + " @ "  
                        + currentdate.getHours() + ":"  
                        + currentdate.getMinutes() + ":"
                        + currentdate.getSeconds();
                var uri_date = encodeURI(datetime);

                window.location.href= $(this).attr('href') + '&warn_text=' + $('#warning_<?php echo $v['id']; ?>').val() + '&stamp=' + uri_date + '&target=<?php echo $v['name']; ?>';

            });

      </script>

谢谢， 尼克

Answer 1

我在下面有一个解决方案。它可能不是最美丽或优雅的方式，但我认为它将满足您的需求。

还为divert_to_添加了ID，以便获得：

<select class="form-control" id="divert_to_<?php echo $v['id']; ?>">

删除to=和type=部分修改链接：

<a href='?
  action=add_divert&amp;&id=<?php echo $v['id']; ?>&search=<?php if(isset($_REQUEST['search'])) { echo $_REQUEST['search']; } ?><?php if(isset($_REQUEST['page'])) { echo "&page=".$_REQUEST['page']; } ?><?php if(isset($_REQUEST['sort'])) { echo "&sort=".$_REQUEST['sort']; } ?><?php if(isset($_REQUEST['filter'])) { echo "&filter=".$_REQUEST['filter']; } ?>' class="btn btn-default" role="button">Continue</a>    

然后创建一个jQuery监听器，它监听模态中的链接点击：

$(document).on('click','#myModal<?php echo $v['id']; ?> .modal-footer a', function(e)

您可以在此处阻止e.preventDefault()的默认操作并执行您想要的任何操作。这里可以获取当前链接并添加两个值。我假设现在设置了值，但是如果你添加一个额外的检查，那么它的方法会更好，因此值不会为空。当您将值添加到现有链接时，您可以通过javascript重定向到它。完整的代码可以是这样的：

<?php echo ($v['divert_enabled']) ? 'Yes' : 'No' ; ?><br>
    <?php if(!$v['divert_enabled']) : ?>

    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal<?php echo $v['id']; ?>">Enable</button>

    <!-- Modal For HOSPITAL DIVERT -->
    <div id="myModal<?php echo $v['id']; ?>" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <h4 class="modal-title" id="myModalLabel">Apply Hospital Divert</h4>
  </div>

  <div class="modal-body">

      <p>Setting hospital divert for <strong><?php echo $v['name']; ?></strong></p><br>

            <!-- Date time picker -->
            <div id="datetimepicker<?php echo $v['id']; ?>" class="input-append date">
              <input type="text"></input>
              <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span>
            </div>
            <script type="text/javascript">
              $('#datetimepicker' + <?php echo $v['id']; ?>).datetimepicker({
                format: 'dd/MM/yyyy hh:mm',
                language: 'en-GB',
                pickSeconds: false,
                pick12HourFormat: false
              });
              </script>  

            <div class="form-group">
              <label for="sel1">Divert Type:</label>
              <select class="form-control" id="divert_type_<?php echo $v['id']; ?>">
                <option>GP Defelection</option>
                <option>Borderline Deflection</option>
                <option>Full Divert</option>
              </select>
            </div>

            <div class="form-group">
              <label for="sel2">Divert To:</label>
              <select class="form-control" id="divert_to_<?php echo $v['id']; ?>">
                <option>Somewhere Else</option>
                <option>Even Further</option>
              </select>
          </div>

  </div>
  <div class="modal-footer">
      <a href='?
      action=add_divert&amp;&id=<?php echo $v['id']; ?>&search=<?php if(isset($_REQUEST['search'])) { echo $_REQUEST['search']; } ?><?php if(isset($_REQUEST['page'])) { echo "&page=".$_REQUEST['page']; } ?><?php if(isset($_REQUEST['sort'])) { echo "&sort=".$_REQUEST['sort']; } ?><?php if(isset($_REQUEST['filter'])) { echo "&filter=".$_REQUEST['filter']; } ?>' class="btn btn-default" role="button">Continue</a>    
  </div>
    </div>

    </div>

    <script>

        $(document).on('click','#myModal<?php echo $v['id']; ?> .modal-footer a', function(e)
        {
            e.preventDefault();

            window.location.href=   $(this).attr('href') + 
                                    '&to='      + $('#divert_to_<?php echo $v['id']; ?> option:selected').text() +
                                    '&type= '   + $('#divert_type_<?php echo $v['id']; ?> option:selected').text();

        });


    </script>

    </div>
    <?php endif; ?>