I am trying to create dynamic search (I erased some of the code that was irrelevant ).
Creating new fields in form is working but I would like to have different output
right now I have 2 arrays with numerated array, but since I want to use this for creating SQL query I would like to store search-values array with key, value pairs where key would be selectedValue variable and value is input field value
<select id="add-new-field">
<option value="media-title">Title</option>
<option value="media-description">description</option>
<option value="media-source">source</option>
<option value="media-keywords">keywords</option>
<option value="media-type">type</option>
<option value="media-language">language</option>
<option value="media-eurovoc">eurovoc</option>
<option value="media-category">category</option>
</select>
<button type="button" onclick="addNewField()">Add field</button>
<form method="post" class="advanced-search-form" id="advanced-search-form">
<label for="media-context">Sadržaj</label>
<input type="text" name="media-context" id="media-context" />
<br />
<div id="additional-fields"></div>
<br />
<input type="submit" name="search" value="Pretraži" />
</form>
<?php
if (isset($_POST['search'])) {
echo '<pre>' . var_dump($_POST) . '</pre>';
// search logic
$searchMediaContext = $_POST['media-context'];
$searchMediaTitle = $_POST['media-title'];
$searchMediaDescription = $_POST['media-description'];
$searchMediaSource = $_POST['media-source'];
$searchMediaKeywords = $_POST['media-keywords'];
$searchMediaType = $_POST['media-type'];
$searchMediaLanguage = $_POST['media-language'];
$searchMediaEurovoc = $_POST['media-eurovoc'];
$searchMediaCategory = $_POST['media-category'];
// irrelevant
$advancedSearchQuery = "";
foreach ($_POST['logical-operators'] as $key => $value) {
echo 1;
}
if (!empty($results)) {
echo 'RESULTS:';
foreach ($results as $result) {
$postTitle = $result->title;
$postURL = $documentBaseURL . $result->post_name;
echo '<br /><hr />';
echo '<a href="' . $postURL . '">' . $postTitle . '</a>';
echo '<br /><hr />';
}
} else {
echo "No data";
}
}
?>
<script type='text/javascript'>
var additionalFieldsArray = [];
function addNewField() {
var form = document.getElementById('advanced-search-form');
var select = document.getElementById('add-new-field');
var selectedValue = select.value;
var selectedInnerText = select.innerText;
var additionalFieldsContainer = document.getElementById('additional-fields');
if (selectedValue) {
var newField = document.createElement('div');
newField.className = 'additional-field';
// Dropdown for Logical operatos
var logicalOperatorDropdown = document.createElement('select');
logicalOperatorDropdown.name = 'logical-operators[]';
var optionAnd = document.createElement('option');
optionAnd.value = 'AND';
optionAnd.text = 'I';
var optionOr = document.createElement('option');
optionOr.value = 'OR';
optionOr.text = 'ILI';
logicalOperatorDropdown.add(optionAnd);
logicalOperatorDropdown.add(optionOr);
newField.appendChild(logicalOperatorDropdown);
var label = document.createElement('span');
// Create additional field
if (selectedValue === 'media-category' || selectedValue === 'media-language' || selectedValue === 'media-type' || selectedValue === 'media-eurovoc') {
// Create dropdown
var dropdown = document.createElement('select');
dropdown.name = 'search-values[]';
// create option for category
if (selectedValue === 'media-category') {
label.innerText = " Kategorija ";
<?php foreach ($acfMediaCategory['choices'] as $value => $label): ?>
var option = document.createElement('option');
option.value = "<?php echo $value ?>";
option.text = "<?php echo $label ?>";
dropdown.add(option);
<?php endforeach; ?>
}
// create options for language
else if (selectedValue === 'media-language') {
label.innerText = " Jezik ";
<?php foreach ($acfMediaLanguage['choices'] as $value => $label): ?>
var option = document.createElement('option');
option.value = "<?php echo $value ?>";
option.text = "<?php echo $label ?>";
dropdown.add(option);
<?php endforeach; ?>
}
newField.appendChild(label);
newField.appendChild(dropdown);
} else {
// Variables
var displayText = '';
if (selectedValue === 'media-title') {
displayText = ' title ';
}
else if (selectedValue === 'media-description') {
displayText = ' description ';
}
else if (selectedValue === 'media-source') {
displayText = ' source ';
}
else if (selectedValue === 'media-keywords') {
displayText = ' keywords ';
}
var input = document.createElement('input');
input.type = 'text';
input.name = 'search-values[]';
input.placeholder = displayText;
label.innerText = displayText;
newField.appendChild(label);
newField.appendChild(input);
}
additionalFieldsContainer.appendChild(newField);
// Push new field to array
additionalFieldsArray.push(newField);
// Remove from dropdown
select.remove(select.selectedIndex);
}
}
window.additionalFieldsArray = additionalFieldsArray;
</script>