599 lines
33 KiB
PHP
599 lines
33 KiB
PHP
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title"><?= $page_name; ?></h4>
|
|
<p class="sub-header"></p>
|
|
<form id="myForm" class="needs-validation" novalidate method="POST" enctype="multipart/form-data" action="<?= base_url() . "insert_customer_group"; ?>" >
|
|
<div class="form-row">
|
|
<div class="form-group col-md-12">
|
|
<label for="groupname" class="col-form-label">Group Name<span class="text-danger"> *</span></label>
|
|
<input type="text" class="form-control" id="groupname" name="groupname" value="<?= isset($customer_group['groupname']) ? $customer_group['groupname'] : '' ?>" placeholder="Group Name" required />
|
|
<div class="invalid-feedback"> Please provide. </div>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<div class="form-row">
|
|
<div class="form-group col-md-12">
|
|
<h4 class="header-title">Select Criteria</h4>
|
|
|
|
<table class="table table-borderless" id="itemTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Field</th>
|
|
<th>Condition</th>
|
|
<th>Value</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php if(!empty($customer_group) && !empty($customer_group['column'])){ for ($i = 0; $i < count($customer_group['column']); $i++) { ?>
|
|
<tr>
|
|
<td style="width:30%;">
|
|
<select class="form-control" data-toggle="select2" id=<?= "column".$i; ?> name="column[]" >
|
|
<?php foreach ($field as $f) : ?>
|
|
<option value="<?= $f['value']; ?>"
|
|
fieldflag="<?= $f['fieldflag']; ?>"
|
|
<?php if ($f['disable']) echo 'disabled'; ?>
|
|
<?php if(isset($customer_group['column'][$i]) && $customer_group['column'][$i] == $f['value'] ){echo "selected";}?>>
|
|
<?= $f['text']; ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</td>
|
|
<td style="width:30%;">
|
|
<select class="form-control" data-toggle="select2" id=<?= "operator".$i; ?> name="operator[]" onchange="FieldChange(this,<?= $i; ?>)">
|
|
<?php foreach ($operator as $value => $label) { ?>
|
|
<option value="<?php echo $value; ?>" <?php if(isset($customer_group['operator'][$i]) && $customer_group['operator'][$i] == $value ){echo "selected";}?> >
|
|
<?php echo $label; ?>
|
|
</option>
|
|
<?php } ?>
|
|
</select>
|
|
</td>
|
|
<td style="width:30%;">
|
|
<?php if ($customer_group['operator'][$i] == 'greater than' || $customer_group['operator'][$i] == 'greater than or equal to' || $customer_group['operator'][$i] == 'less than' || $customer_group['operator'][$i] == 'less than or equal to') { ?>
|
|
<input type="date" class="form-control" id=<?= "values".$i; ?> name="values[]" placeholder="Enter the Date" value="<?= (isset($customer_group['values'][$i]) && $customer_group['values'][$i] != "" ) ? $customer_group['values'][$i] : '' ?>" />
|
|
<?php }else if($customer_group['operator'][$i] === 'between') {
|
|
$dates = (isset($customer_group['values'][$i]) && $customer_group['values'][$i] != "" ) ? explode(',', $customer_group['values'][$i]) : [] ;
|
|
?>
|
|
<div style="display: inline-flex;">
|
|
<input type="date" class="form-control" id=<?= "values".$i.'1'; ?> placeholder="Enter the Start Date" onchange="concatBetween(<?= $i ?>)" value="<?= (isset($dates[0]) && $dates[0] != "" ) ? str_replace(' ', '', $dates[0]) : '' ?>" />
|
|
<input type="date" class="form-control ml-1" id=<?= "values".$i.'2'; ?> placeholder="Enter the End Date" onchange="concatBetween(<?= $i ?>)" value="<?= (isset($dates[1]) && $dates[1] != "" ) ? str_replace(' ', '', $dates[1]) : '' ?>" />
|
|
</div>
|
|
<input type="hidden" class="form-control" id=<?= "values".$i; ?> name="values[]" placeholder="values" value="<?= (isset($customer_group['values'][$i]) && $customer_group['values'][$i] != "" ) ? $customer_group['values'][$i] : '' ?>" />
|
|
<?php } else if(($customer_group['operator'][$i] === 'contain' || $customer_group['operator'][$i] == 'not contain')) { ?>
|
|
<input type="text" class="form-control" id=<?= "values".$i; ?> name="values[]" placeholder="Enter the Multiple Values with comma Seprator" onkeypress="return restriction(event,'M')" value="<?= (isset($customer_group['values'][$i]) && $customer_group['values'][$i] != "" ) ? $customer_group['values'][$i] : '' ?>" />
|
|
<?php }else if($customer_group['operator'][$i] === 'is null' || $customer_group['operator'][$i] == 'is not null') { ?>
|
|
<input type="hidden" class="form-control" id=<?= "values".$i; ?> name="values[]" placeholder="Enter the Values" value="<?= (isset($customer_group['values'][$i]) && $customer_group['values'][$i] != "" ) ? $customer_group['values'][$i] : '' ?>" />
|
|
<?php }else if($customer_group['column'][$i] == 'C.mode' && ($customer_group['operator'][$i] === 'equal' || $customer_group['operator'][$i] == 'not equal' || $customer_group['operator'][$i] == 'like' )) { ?>
|
|
<select class="form-control" id=<?= "values".$i; ?> name="values[]">
|
|
<option value="">Choose the mode</option>
|
|
<option value="Online" <?= (isset($customer_group['values'][$i]) && $customer_group['values'][$i] == "Online") ? 'selected' : '' ?>>Online</option>
|
|
<option value="Offline" <?= (isset($customer_group['values'][$i]) && $customer_group['values'][$i] == "Offline") ? 'selected' : '' ?>>Offline</option>
|
|
</select>
|
|
<?php } else { ?>
|
|
<input type="text" class="form-control" id=<?= "values".$i; ?> name="values[]" placeholder="Enter the Values" onkeypress="return restriction(event,2)"
|
|
value="<?= (isset($customer_group['values'][$i]) && $customer_group['values'][$i] != "" ) ? $customer_group['values'][$i] : '' ?>" />
|
|
<?php } ?>
|
|
</td>
|
|
<td style="width:10%;">
|
|
<button type="button" class="btn btn-soft-danger btn-rounded waves-effect waves-light mr-1 remove-item "><i class="fa fa-trash"></i></button>
|
|
</td>
|
|
</tr>
|
|
<?php } }else{ ?>
|
|
<tr>
|
|
<td style="width:30%;">
|
|
<select class="form-control" data-toggle="select2" id="column0" name="column[]" >
|
|
<?php foreach ($field as $f) : ?>
|
|
<option value="<?= $f['value']; ?>"
|
|
fieldflag="<?= $f['fieldflag']; ?>"
|
|
<?php if ($f['disable']) echo 'disabled'; ?> >
|
|
<?= $f['text']; ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</td>
|
|
<td style="width:30%;">
|
|
<select class="form-control" data-toggle="select2" id="operator0" name="operator[]" onchange="FieldChange(this,0)">
|
|
<?php foreach ($operator as $value => $label) { ?>
|
|
<option value="<?php echo $value; ?>">
|
|
<?php echo $label; ?>
|
|
</option>
|
|
<?php } ?>
|
|
</select>
|
|
</td>
|
|
<td style="width:30%;">
|
|
<input type="text" class="form-control" id="values0" name="values[]" placeholder="Enter the Values" onkeypress="return restriction(event,1)" />
|
|
</td>
|
|
<td style="width:10%;">
|
|
<button type="button" class="btn btn-soft-danger btn-rounded waves-effect waves-light mr-1 remove-item "><i class="fa fa-trash"></i></button>
|
|
</td>
|
|
</tr>
|
|
<?php } ?>
|
|
|
|
</tbody>
|
|
</table>
|
|
<div class="form-group text-right m-b-0">
|
|
<button type="button" id="addItem" class="btn btn-soft-dark btn-rounded waves-effect waves-light mr-3 add-item"> + Add New Criteria</button>
|
|
</div>
|
|
<?php if (!empty($customer_group)) { ?>
|
|
<div class="form-group text-right checkbox checkbox-purple mr-3">
|
|
<input type="checkbox" id="isactive" name="isactive" class="form-control" <?= isset($customer_group) && $customer_group['isactive'] == 1 ? 'checked' : '' ?>>
|
|
<label for="isactive"> Is Active</label>
|
|
</div>
|
|
<?php } ?>
|
|
<input type="hidden" id="string_flag" name="string_flag" placeholder="hidden" value="preview" />
|
|
<input type="hidden" id="group_id" name="group_id" placeholder="hidden for primary id" value="<?= isset($customer_group['group_id']) ? $customer_group['group_id'] : '' ?>" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group text-right m-b-0">
|
|
<button type="button" class="btn btn-purple waves-effect mr-1" data-toggle="modal" data-target="#scrollable-modal">Save</button>
|
|
<button type="button" class="btn btn-primary waves-effect mr-1" onclick="refreshPage()">Reset</button>
|
|
<a href="<?= base_url() . "customer_group"; ?>" class="btn btn-secondary waves-effect mr-3">Cancel</a>
|
|
</div>
|
|
<div class="modal" id="scrollable-modal" tabindex="-1" role="dialog" aria-labelledby="scrollableModalTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="scrollableModalTitle">Customer list</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body" id="ajax-content">
|
|
<table class="table table-bordered" id="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:10%;">#</th>
|
|
<th style="width:30%;">Name</th>
|
|
<th style="width:30%;">Email</th>
|
|
<th style="width:30%;">Mobile</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Table rows will be populated here -->
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="save" class="btn btn-success waves-effect waves-light mr-1" type="submit" id="submitBtn"> Submit </button>
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div><!-- /.modal -->
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
|
|
<script>
|
|
const myArray = [];
|
|
document.getElementById("addItem").addEventListener("click", function() {
|
|
var fieldArray = <?php echo json_encode($field); ?>;
|
|
var operatorArray = <?php echo json_encode($operator); ?>;
|
|
|
|
var table = document.getElementById("itemTable").getElementsByTagName("tbody")[0];
|
|
var rows = table.getElementsByTagName("tr");
|
|
var hasValue = false;
|
|
var rowCounter = rows.length; // Get the current number of rows
|
|
|
|
// Check if any existing fields are empty
|
|
for (var i = 0; i < rows.length; i++) {
|
|
var cells = rows[i].getElementsByTagName("td");
|
|
for (var j = 0; j < cells.length; j++) {
|
|
var input = cells[j].querySelector('input, select');
|
|
if (input && input.value.trim() === "") {
|
|
alert("Field in row " + (i + 1) + " is empty.");
|
|
return; // Exit the loop after the first empty field is found.
|
|
} else {
|
|
hasValue = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!hasValue) {
|
|
alert("At least one row should contain a value.");
|
|
return; // Exit the function to prevent adding a new row.
|
|
}
|
|
|
|
var newRow = table.insertRow(rowCounter);
|
|
|
|
var cell1 = newRow.insertCell(0);
|
|
var cell2 = newRow.insertCell(1);
|
|
var cell3 = newRow.insertCell(2);
|
|
var cell4 = newRow.insertCell(3);
|
|
|
|
|
|
const select1 = document.createElement('select');
|
|
select1.className = 'form-control';
|
|
select1.name = 'column[]';
|
|
select1.setAttribute("data-toggle", "select2");
|
|
select1.id = 'column' + rowCounter; // Set a dynamic ID for the select input
|
|
// select1.onchange = function() {
|
|
// disableSelectedOptions(this,rowCounter);
|
|
// };
|
|
|
|
const select2 = document.createElement('select');
|
|
select2.className = 'form-control';
|
|
select2.name = 'operator[]';
|
|
select2.setAttribute("data-toggle", "select2");
|
|
select2.id = 'operator' + rowCounter; // Set a dynamic ID for the select input
|
|
select2.onchange = function() {
|
|
FieldChange(this, rowCounter);
|
|
};
|
|
|
|
exstingColumnId = 'column'+(rowCounter-1);
|
|
// if($('#' + exstingColumnId).val() != ""){
|
|
// myArray.push($('#' + exstingColumnId).val());
|
|
// }
|
|
// console.log(myArray);
|
|
|
|
fieldArray.forEach((option) => {
|
|
const fieldoption = document.createElement('option');
|
|
fieldoption.value = option.value;
|
|
fieldoption.setAttribute("fieldflag", option.fieldflag);
|
|
fieldoption.text = option.text;
|
|
// fieldoption.disabled = option.disable ? true : (option.disable == myArray[0] ? true : false);
|
|
// if (myArray.includes(option.value)) {
|
|
// fieldoption.disabled = true;
|
|
// }
|
|
// else{
|
|
// fieldoption.disabled = false;
|
|
// }
|
|
select1.appendChild(fieldoption);
|
|
});
|
|
|
|
for (const value in operatorArray) {
|
|
const optionElement = document.createElement('option');
|
|
optionElement.value = value;
|
|
optionElement.text = operatorArray[value];
|
|
select2.appendChild(optionElement);
|
|
}
|
|
|
|
const inputElement = document.createElement('input');
|
|
inputElement.type = 'text';
|
|
inputElement.className = 'form-control';
|
|
inputElement.name = 'values[]';
|
|
inputElement.placeholder = 'Enter the Values';
|
|
inputElement.id = 'values' + rowCounter; // Set a dynamic ID for the input field
|
|
|
|
cell1.appendChild(select1);
|
|
cell2.appendChild(select2);
|
|
cell3.appendChild(inputElement);
|
|
cell4.innerHTML = '<button type="button" class="btn btn-soft-danger btn-rounded waves-effect waves-light mr-1 remove-item"><i class="fa fa-trash"></i></button>';
|
|
|
|
$(select1).select2();
|
|
$(select2).select2();
|
|
});
|
|
|
|
|
|
// document.getElementById("addItemold").addEventListener("click", function() {
|
|
// var fieldArray = <?php echo json_encode($field); ?>;
|
|
// var operatorArray = <?php echo json_encode($operator); ?>;
|
|
|
|
// var table = document.getElementById("itemTable").getElementsByTagName("tbody")[0];
|
|
// var rows = table.getElementsByTagName("tr");
|
|
// var hasValue = false;
|
|
|
|
// // Check if any existing fields are empty
|
|
// for (var i = 0; i < rows.length; i++) {
|
|
// var cells = rows[i].getElementsByTagName("td");
|
|
// for (var j = 0; j < cells.length; j++) {
|
|
// var input = cells[j].querySelector('input, select');
|
|
// if (input && input.value.trim() === "") {
|
|
// alert("Field in row " + (i + 1) + " is empty.");
|
|
// return; // Exit the loop after the first empty field is found.
|
|
// }else {
|
|
// hasValue = true;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// if (!hasValue) {
|
|
// alert("At least one row should contain a value.");
|
|
// return; // Exit the function to prevent adding a new row.
|
|
// }
|
|
|
|
// var newRow = table.insertRow(table.rows.length);
|
|
|
|
// var cell1 = newRow.insertCell(0);
|
|
// var cell2 = newRow.insertCell(1);
|
|
// var cell3 = newRow.insertCell(2);
|
|
// var cell4 = newRow.insertCell(3);
|
|
|
|
// const select1 = document.createElement('select');
|
|
// select1.className = 'form-control';
|
|
// select1.name = 'column[]';
|
|
// select1.setAttribute("data-toggle", "select2");
|
|
|
|
|
|
// const select2 = document.createElement('select');
|
|
// select2.className = 'form-control';
|
|
// select2.name = 'operator[]';
|
|
// select2.setAttribute("data-toggle", "select2");
|
|
|
|
|
|
// for (const fieldvalue in fieldArray) {
|
|
// const fieldoption = document.createElement('option');
|
|
// fieldoption.value = fieldvalue;
|
|
// fieldoption.text = fieldArray[fieldvalue];
|
|
// select1.appendChild(fieldoption);
|
|
// }
|
|
|
|
// for (const value in operatorArray) {
|
|
// const optionElement = document.createElement('option');
|
|
// optionElement.value = value;
|
|
// optionElement.text = operatorArray[value];
|
|
// select2.appendChild(optionElement);
|
|
// }
|
|
|
|
// const inputElement = document.createElement('input');
|
|
// inputElement.type = 'text';
|
|
// inputElement.className = 'form-control';
|
|
// inputElement.name = 'values[]';
|
|
// inputElement.placeholder = 'Enter the Values';
|
|
|
|
// cell1.appendChild(select1);
|
|
// cell2.appendChild(select2);
|
|
// cell3.appendChild(inputElement);
|
|
// cell4.innerHTML = '<button type="button" class="btn btn-soft-danger btn-rounded waves-effect waves-light mr-1 remove-item"><i class="fa fa-trash"></i></button>';
|
|
|
|
// $(select1).select2();
|
|
// $(select2).select2();
|
|
// });
|
|
</script>
|
|
|
|
<script>
|
|
// Function to remove a row from the table
|
|
function removeItem(row) {
|
|
var table = document.getElementById("itemTable").getElementsByTagName("tbody")[0];
|
|
var rows = table.getElementsByTagName("tr");
|
|
if (rows.length > 1) {
|
|
var rowIndex = row.rowIndex; // Get the row index
|
|
console.log(rowIndex);
|
|
var exstingColumnId = 'column' + (rowIndex-1);
|
|
var valueToRemove = $('#' + exstingColumnId).val();
|
|
// var indexToRemove = myArray.indexOf(valueToRemove);
|
|
// if (indexToRemove !== -1) {
|
|
// myArray.splice(indexToRemove, 1); // Remove the element at the specified index
|
|
// }
|
|
// console.log('myArray',myArray);
|
|
table.removeChild(row);
|
|
} else {
|
|
alert('At least one row should contain a value.');
|
|
}
|
|
|
|
}
|
|
|
|
// Attach the removeItem function to the Remove buttons using event delegation
|
|
document.querySelector("#itemTable tbody").addEventListener("click", function(event) {
|
|
if (event.target.classList.contains("remove-item")) {
|
|
var row = event.target.closest("tr"); // Find the closest row to the clicked button
|
|
removeItem(row);
|
|
}
|
|
});
|
|
</script>
|
|
<!-- function removeItem(row) {
|
|
var table = document.getElementById("itemTable").getElementsByTagName("tbody")[0];
|
|
var rows = table.getElementsByTagName("tr");
|
|
var hasValue = false; // Flag to track if the row to be removed has a value.
|
|
|
|
// Check if the row to be removed has values
|
|
var cells = row.getElementsByTagName("td");
|
|
for (var j = 0; j < cells.length; j++) {
|
|
var input = cells[j].querySelector('input, select');
|
|
if (input && input.value.trim() !== "") {
|
|
hasValue = true;
|
|
break; // Exit the loop after the first value is found in the row.
|
|
}
|
|
}
|
|
|
|
if (hasValue || rows.length > 1) {
|
|
table.removeChild(row);
|
|
} else {
|
|
alert('At least one row should contain a value.');
|
|
}
|
|
} -->
|
|
|
|
<!-- <script>
|
|
document.getElementById('previewButton').addEventListener('click', function() {
|
|
const name = "sanjeev";
|
|
const email = "document.getElementById('email').value";
|
|
|
|
// Update the modal with the preview data
|
|
// document.getElementById('previewName').textContent = name;
|
|
// document.getElementById('previewEmail').textContent = email;
|
|
|
|
// Show the modal
|
|
const modal = document.getElementById('previewModal');
|
|
modal.style.display = 'block';
|
|
|
|
// Close the modal when the close button is clicked
|
|
document.getElementById('closeModal').addEventListener('click', function() {
|
|
modal.style.display = 'none';
|
|
});
|
|
|
|
// Close the modal when clicking outside of it
|
|
window.onclick = function(event) {
|
|
if (event.target === modal) {
|
|
modal.style.display = 'none';
|
|
}
|
|
};
|
|
});
|
|
</script> -->
|
|
<script>
|
|
$(document).ready(function() {
|
|
|
|
$('#scrollable-modal').on('show.bs.modal', function() {
|
|
var formData = $("#myForm").serialize();
|
|
var groupName = $("#groupname").val();
|
|
// Use AJAX to load content into the modal
|
|
// Get the table reference
|
|
var table = $("#data-table tbody");
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "<?= base_url() . 'insert_customer_group' ?>",
|
|
data: formData,
|
|
dataType: "json", // Expect JSON response
|
|
success: function(response) {
|
|
if (response.length > 0) {
|
|
$('#scrollableModalTitle').text(groupName + ' - Customer list');
|
|
// Clear existing rows
|
|
table.empty();
|
|
$x=0;
|
|
// Loop through the response and create table rows
|
|
$.each(response, function (index, item) {
|
|
var row = $("<tr>");
|
|
row.append($("<td style='width:10%;'>").text(++$x));
|
|
row.append($("<td style='width:30%;'>").text(item.customer_name));
|
|
row.append($("<td style='width:30%;'>").text(item.email));
|
|
row.append($("<td style='width:30%;'>").text(item.mobile_no));
|
|
table.append(row);
|
|
});
|
|
} else {
|
|
// Handle the case where there is no data
|
|
table.empty();
|
|
table.append("<tr><td colspan='4' style='width:100%; text-align: center; vertical-align: middle;'>No data available</td></tr>");
|
|
}
|
|
},
|
|
error: function () {
|
|
// alert("An error occurred.");
|
|
console.log("CG Preview Form - An error occurred.");
|
|
table.empty();
|
|
table.append("<tr><td colspan='4' style='width:100%; text-align: center; vertical-align: middle;'>No data available</td></tr>");
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
$("#save").on("click", function () {
|
|
$("#string_flag").val("save");
|
|
});
|
|
|
|
function FieldChange(selectElement, rowCounter) {
|
|
var id = selectElement.id;
|
|
var selectedOperator = selectElement.value;
|
|
var inputId = 'values' + rowCounter;
|
|
var column = $("#column"+rowCounter).find(':selected').attr('fieldflag');
|
|
if (column == 2 && (selectedOperator == 'greater than' || selectedOperator == 'greater than or equal to' || selectedOperator == 'less than' || selectedOperator == 'less than or equal to')) {
|
|
$('#' + inputId).parent().html('<input type="date" class="form-control" id="' + inputId + '" name="values[]" placeholder="Enter the Date" />');
|
|
}else if (column == 2 && selectedOperator === 'between') {
|
|
var newInput = '<div style="display: inline-flex;"><input type="date" class="form-control" id="' + inputId + '1" placeholder="Enter the Start Date" onchange="concatBetween(' + rowCounter + ')" />' +
|
|
'<input type="date" class="form-control ml-1" id="' + inputId + '2" placeholder="Enter the End Date" onchange="concatBetween(' + rowCounter + ')" /></div>' +
|
|
'<input type="hidden" class="form-control" id="' + inputId + '" name="values[]" placeholder="values" />';
|
|
$('#' + inputId).parent().html(newInput);
|
|
}
|
|
else if(column == 1 && (selectedOperator === 'contain' || selectedOperator == 'not contain')) {
|
|
// $('#' + inputId).replaceWith('<input type="text" class="form-control" id="' + inputId + '" name="values[]" placeholder="Enter the Multiple Values with comma Seprator" onkeypress="return restriction(event,2)" />');
|
|
$('#' + inputId).parent().html('<input type="text" class="form-control" id="' + inputId + '" name="values[]" placeholder="Enter the Multiple Values with comma Seprator" onkeypress="return restriction(event,2)" />');
|
|
}else if(selectedOperator === 'is null' || selectedOperator == 'is not null') {
|
|
$('#' + inputId).parent().html('<input type="hidden" class="form-control" id="' + inputId + '" name="values[]" placeholder="Enter the Values" value="0" />');
|
|
}else if(column == 3 && (selectedOperator === 'equal' || selectedOperator == 'not equal' || selectedOperator == 'like' )){
|
|
$('#' + inputId).parent().html('<select class="form-control" id="' + inputId + '" name="values[]" ><option value="">Choose the mode</option><option value="Online">Online</option><option value="Offline">Offline</option></select>');
|
|
}else{
|
|
$('#' + inputId).parent().html('<input type="text" class="form-control" id="' + inputId + '" name="values[]" placeholder="Enter the Values" onkeypress="return restriction(event,1)" />');
|
|
}
|
|
|
|
}
|
|
function concatBetween(Counter) {
|
|
// This function will be called when the date input changes
|
|
var Id = 'values' + Counter;
|
|
var started = $('#' +Id+'1').val();
|
|
var ended = $('#' +Id+'2').val();
|
|
if(started != "" && ended != ""){
|
|
$("#"+Id).val(started + ',' + ended);
|
|
}
|
|
// console.log("id: " + Id);
|
|
// console.log("counter: " + Counter);
|
|
// console.log("sv: " + started);
|
|
// console.log("ev: " + ended);
|
|
}
|
|
|
|
</script>
|
|
<script>
|
|
function restriction(event,temporary_flag) {
|
|
var charCode = event.which || event.keyCode;
|
|
if (Number(temporary_flag) == 2 &&
|
|
((charCode >= 65 && charCode <= 90) || // A-Z
|
|
(charCode >= 97 && charCode <= 122) || // a-z
|
|
(charCode >= 48 && charCode <= 57) || // 0-9
|
|
charCode == 44 // comma
|
|
)){
|
|
return true;
|
|
}
|
|
else if (Number(temporary_flag) == 1 &&
|
|
((charCode >= 48 && charCode <= 57) || // 0-9
|
|
(charCode >= 65 && charCode <= 90) || // A-Z
|
|
(charCode >= 97 && charCode <= 122) // a-z
|
|
)) {
|
|
return true;
|
|
} else {
|
|
event.preventDefault(); // Prevent the character from being entered
|
|
return false;
|
|
}
|
|
}
|
|
</script>
|
|
<script>
|
|
// // Function to disable options in the "Choose the Field" dropdowns
|
|
// function disableOptions(selectId) {
|
|
// console.log('inside');
|
|
// // Get all select elements with the specified name attribute
|
|
// var selectElements = document.querySelectorAll('select[name="column[]"]');
|
|
|
|
// // Iterate through the select elements
|
|
// selectElements.forEach(function (select) {
|
|
// console.log(select.id,selectId);
|
|
// if (select.id !== selectId) {
|
|
// console.log('if');
|
|
// // Find the "Choose the Field" option and disable it
|
|
// var chooseOption = select.querySelector('option[value=""]');
|
|
// if (chooseOption) {
|
|
// console.log('if-if');
|
|
// chooseOption.disabled = true;
|
|
// }
|
|
// }
|
|
// });
|
|
// }
|
|
|
|
// // Event listener for changes in the "Choose the Field" dropdowns
|
|
// document.addEventListener('change', function (e) {
|
|
// var target = e.target;
|
|
// console.log(target,'target');
|
|
// if (target.name === 'column[]' && target.value === '') {
|
|
// console.log('if');
|
|
// // Disable the "Choose the Field" option in other dropdowns
|
|
// disableOptions(target.id);
|
|
// }else{
|
|
// console.log('else');
|
|
// }
|
|
// });
|
|
|
|
// function disableSelectedOptions(selectElement, rowCounter) {
|
|
|
|
// var id = selectElement.id;
|
|
// var selectedOperator = selectElement.value;
|
|
// }
|
|
</script>
|
|
<script>
|
|
document.getElementById('myForm').addEventListener('submit', function(event) {
|
|
var form = event.target;
|
|
|
|
if (form.checkValidity() === false) {
|
|
|
|
form.reportValidity(); // Display validation error messages
|
|
event.preventDefault(); // Prevent form submission if it's not valid
|
|
$('#submitBtn').prop('disabled', false);
|
|
} else {
|
|
|
|
$('#submitBtn').prop('disabled', true);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
|