如何在弹出窗口中发送所选的下拉值

Question

我的表单中有8-12个以上的字段。我有一个名为status的选择下拉字段。默认情况下，它将显示从数据库中选择的值。

例如，默认情况下，下拉菜单为Create。

<select class="select_control" name="o_order_status" id="o_order_status">
    <option value="1" <?php echo ($post->o_order_status == '1') ? 'selected':''; ?>>Create</option>
    <option value="-1" <?php echo ($post->o_order_status == '-1') ? 'selected':''; ?>>Pending</option>
    <option value="2" <?php echo ($post->o_order_status == '2') ? 'selected':''; ?>>Verified</option>
</select>

现在，我必须将状态从Create更改为Pending or Verified。因此，我正在使用更改事件，并在警报下获得了价值。另外，我正在显示弹出窗口，以写出正在显示的消息。

$(function() {
    $("#o_order_status").change(function() {
          alert( this.value );// here I am getting the onchange value
        $('#popup_verify').show();// display the popup
    });
});

到现在一切正常，我的问题是，我必须在弹出表单中传递select drop-down-value来更新数据库中的信息。还是有其他方法可以解决此问题？

我的弹出窗口是

<div class="popup" id="popup_verify" style="display:none;">
    <form action="process.php" method="post">
    <textarea placeholder="message" name="message"></textarea>
    <input type="submit" name="update" value="update">
    </form>
</div>

完整代码

$(function() {
  $("#o_order_status").change(function() {
    alert(this.value);
    $('#popup_verify').show();
  });
});

.popup {
  width: 300px;
  margin: auto;
  background-color: #f9f9f9;
  color: #000;
}

<select class="select_control" name="o_order_status" id="o_order_status">
  <option value="1" <?php echo ($post->o_order_status == '1') ? 'selected':''; ?>>Create</option>
  <option value="-1" <?php echo ($post->o_order_status == '-1') ? 'selected':''; ?>>Pending</option>
  <option value="2" <?php echo ($post->o_order_status == '2') ? 'selected':''; ?>>Verified</option>
</select>

<div class="popup" id="popup_verify" style="display:none;">
  <form action="process.php" method="post">
    <textarea placeholder="message" name="message"></textarea>
    <input type="submit" name="update" value="update">
  </form>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

使用选择更改处理程序

$(".select_control").change(function() {
    var selectedValue = this.value;
    $("[name='update']").val(selectedValue);
    alert('new input value: ' + $("[name='update']").val()); 
});

...或使用Ajax：

$(document).on('submit','form',function(event){ //handle the submission of your form from popup
    event.preventDefault(); //prevents form default action
    var selectedValue = $('.select_control').val(); // get the selected value from dropdown
    $.ajax({ //do ajax to do update
        type: "POST",
        url: 'process.php', // url to your .php file
        data: {'post_data':selectedValue}, // use $_POST['post_data'] to access in php
        success: function(dataReturned){ //callback function if request success. dataReturned is what you echoed out in php
            alert('data updated');
        }
    });
});

Answer 2

香草Javascript：

document.getElementById('form_input_id').value = 'your value';

使用jQuery：

$("#form_input_id").val("your value");