jQuery PHP Ajax save multiple selected box based on process - php

Question

I have multiple select box on my form.
<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>
And now I need to get the value of each value for select box that only filled to PHP.
Example I only choose Process 2, then store it to PHP to be Process 2: P2.
And on the PHP I need to save it to table.
//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.
And the 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)
{
}
});
});
My question, how to ONLY insert filled select box, on my example PROCESS2 will be filled P2 to table column?

Answer 1

What you can do is only pass the modelID and processID using the ajax call.
Whenever the user changes the process you save the data through the ajax call.
<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>