jQuery PHP Ajax根据过程保存多个选定的框

时间:2019-02-18 06:28:49

标签: php jquery 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的选择框的每个值的值。

示例我仅选择进程2,然后将其存储为Process 2: P2到PHP。

在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填充到表列?

2 个答案:

答案 0 :(得分:0)

您可以做的是仅使用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>

答案 1 :(得分:0)

它是PHP,因此属性名称也很重要。

name="process" . $i . "[]"