Question

每当我点击发送按钮时，都会弹出一个下拉菜单。我该怎么做？那是我现在的代码。这个片段有什么问题？

<?php if(isset($_POST["driver_number"]))?>
<form action="#" method="post">
<select name="driver_number">
  <option value="Driver Number">Driver Number</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
 <button type="submit" input style="background-color:#FFFF00;color:black" name="submitSent" class="btn btn-primary"onclick="if(!confirm('+ document.getElementById('driver_number').value')){return false;}" >Send</button> </form>

更新：谢谢你们！你所有的答案都对我有帮助。

Answer 1

您必须进行以下更改：

1）您正在按ID选择元素，因此需要为您的选择框提供ID

2）您的点击事件的转义错误地更改了您的代码，如下所示

<form action="#" method="post">
<select name="driver_number" id="driver_number">
  <option value="Driver Number">Driver Number</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
 <button type="submit" input style="background-color:#FFFF00;color:black" name="submitSent" class="btn btn-primary"onclick="if(!confirm(document.getElementById('driver_number').value)){return false;}" >Send</button> </form>

Answer 2

请参阅我的完整可运行代码。我希望它会对你有所帮助。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<div class="container">
<?php if(isset($_POST["driver_number"]))
print_r($_POST);
?>
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->

  <button type="button"  style="background-color:#FFFF00;color:black" name="submitSent" class="btn btn-primary" data-toggle="modal" data-target="#myDropdown">Send dropdown value</button>

  <!-- Modal -->
  <div class="modal fade" id="myDropdown" 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 action="#" method="post">
<select name="driver_number">
 <option value="Driver Number">Driver Number</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>
    <button type="submit" input style="background-color:#FFFF00;color:black" name="submitSent" class="btn btn-primary"onclick="if(!confirm('+ document.getElementById('driver_number').value')){return false;}" >Send</button>
   </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
   </div>
  </div>
 </div>

</div>

</body>
</html>

Answer 3

首先，您必须将按钮type="submit"更改为type="button"，否则无需评估onclick事件即可提交表单。

其次，要使用document.getElementById('driver_'number')，您必须在select元素上有一个id。

第三（这主要是为了优雅）{return false;} if条件中的confirm可能是不必要的，您可以在函数中实现提交，如代码中的建议下面：

<?php if(isset($_POST["driver_number"])) { print_r($_POST); }// to test what has been posted?>
<form id="myform" action="#" method="post">
<select id="driver_number" name="driver_number">
  <option value="Driver Number">Driver Number</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
 <button type="button" input style="background-color:#FFFF00;color:black" name="submitSent" class="btn btn-primary"onclick="send();" >Send</button> </form>

<script>
function send(){ if(confirm(document.getElementById('driver_number').value)){ document.getElementById('myform').submit(); }
}

</script>

最后，'+条件中有两个拼写错误'和if(!confirm('+ document.getElementById('driver_number').value'))，应该是if(!confirm(document.getElementById('driver_number').value))

如何使用下拉列表创建按钮

3 个答案: