时间戳

首页 > 解决方案 > jQuery PHP Ajax基于进程保存多个选中框

php - jQuery PHP Ajax基于进程保存多个选中框

问题描述

我的表单上有多个选择框。

<form id="form">
    <?php
    for($i = 1; $i<=9; $i++)
    {
    ?>
        <input type="hidden" name="modelID" value="1"/>
        <div>
        Process <?php echo $i; ?>
        <select class="process" name="process[]" id="Process<?php echo $i; ?>">
            <option value="">Choose One</option>
            <option value="P1">Process 1</option>
            <option value="P2">Process 2</option>
            <option value="P3">Process 3</option>
        </select>
        </div>
    <?php
    }
</form>

现在我需要获取仅填充到 PHP 的选择框的每个值的值。

示例我只选择Process 2，然后将其存储到PHP 为Process 2: P2.

在 PHP 上，我需要将其保存到表中。

//maybe using foreach?
$insert = oci_parse($c1, "INSERT INTO tbl_process(MODELID, PROCESS1, PROCESS2, PROCESS3) VALUES('1', '', '', '')");
//ONLY insert filled select box, on my example PROCESS2 will be filled P2 to table column.

和 JS

$('#btnSave').on('click', function()
{
    var modelID = $("#modelID").val();
    var form_data = $("#form").serialize();

    alert(form_data);

    $.ajax(
    {
        'type': 'post',
        'url': 'saveProcess',
        'data': {
            'form_data': form_data
        },
        'success': function(response)
        {

        }
    });
});

我的问题，如何只插入填充的选择框，在我的示例 PROCESS2 将填充 P2 到表列？

标签： phpjqueryajax

解决方案

您可以做的只是使用 ajax 调用传递 modelID 和 processID。每当用户更改流程时，您都会通过 ajax 调用保存数据。

<form id="form">
  <?php for($i = 1; $i<=9; $i++) { ?>
    Process <?php echo $i; ?>
    <select class="process" modelID="<?php echo $i; ?>">
      <option value="P1">Process 1</option>
      <option value="P2">Process 2</option>
      <option value="P3">Process 3</option>
    </select>
    <br>
  <?php } ?>
</form>


<script type="text/javascript">
$(document).ready(function(){
  $('.process').change(function(){
    var modelID = $(this).attr('modelID');
    var processID = $(this).val();
    $.ajax({
      url: 'saveProcess.php',
      dataType: 'json',
      type: 'post',
      data: {'modelID':modelID, 'processID':processID},
      success: function( data, textStatus, jQxhr ){
          console.log(data);
      },
      error: function( jqXhr, textStatus, errorThrown ){
          console.log( errorThrown );
      }
    });
  });
});
</script>

推荐阅读