I have a tabbed menu on my page, the first tab is a data input form and the rest are datatables which colate the information.
<div class="tile" id="tile-1">
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
<div class="slider"></div>
<li class="nav-item adddetails-button">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true"><i class="fas fa-plus-square"></i> Add details</a>
</li>
<li class="nav-item Datatablea-button">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false"><i class="fas fa-folder"></i> Datatable A</a>
</li>
<li class="nav-item Datatableb-button">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false"><i class="fas fa-truck-moving"></i> Datatable B</a>
</li>
<li class="nav-item Datatablec-button">
<a class="nav-link" id="setting-tab" data-toggle="tab" href="#setting" role="tab" aria-controls="setting" aria-selected="false"><i class="fas fa-address-card"></i> Datatable C</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="adddetails tab-pane show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h2>Add Job</h2>
<form id="dataForm" name="dataform" method="POST" action="/">
/**form details**/
</form>
</div>
<div class="Datatablea tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<table>
/**Datatable A**/
</table>
</div>
<div class="Datatableb tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<table>
/**Datatable B**/
</table>
</div>
<div class="Datatablec tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<table>
/**Datatable C**/
</table>
</div>
</div>
</div>
I have a dropdown menu in my add details
input form which allows me to select a company from the companies table (to prevent duplicate entries)
<select id='clients' name='clients' class='limitedNumbChosen add-company' multiple='false'>
<?php
$sql = "SELECT * FROM `datatbasea`";
$query = mysqli_query($conn, $sql);
if (mysqli_num_rows($query) > 0) {
// output data of each row
while($result = mysqli_fetch_assoc($query)) {
$company_name = $result['company'];
echo "<option value='$company_name'>$company_name</option>";
}
} else {
echo "0 results";
}
mysqli_close($conn);
?>
</select>
<div id="add-company" class="fas fa-plus"> Add Company </div>
Also, at the bottom there is an option to add company.
What I want is:
If someone adds a a new company to the databse via the add company form... for the new company to then be pulled from the database table and automatically added to the select drop down
without having to refresh the page.
I will be looking to use a similar solution to the one given to also update datatables on the page without refresh
The add company code is:
JS
jQuery(document).ready(function () {
$("#sbmt").click(function(e) {
e.preventDefault();
e.stopPropagation();
var company_name = document.getElementById("addcompany_name").value;
var contact_one = document.getElementById("addcontact_one").value;
var contact_two = document.getElementById("addcontact_two").value;
var company_phone = document.getElementById("addcompany_phone").value;
var company_email = document.getElementById("addcompany_email").value;
var company_street = document.getElementById("companystreet").value;
var company_town = document.getElementById("companytown").value;
var company_postcode = document.getElementById("companypostcode").value;
// Returns successful data submission message when the entered information is stored in database.
var DataForm = 'company_name1=' + company_name + '&contact_one1=' + contact_one + '&contact_two1=' + contact_two + '&company_phone1=' + company_phone + '&company_email1=' + company_email + '&company_street1=' + company_street + '&company_town1=' + company_town + '&company_postcode1=' + company_postcode;
if (company_name == '' || contact_one == '' || company_phone == '' || company_email == '' || company_street == '' || company_town == '' || company_postcode == '') {
alert("Please Fill All Fields");
}
else {
// AJAX code to submit form.
jQuery.ajax({
type: "POST",
url: 'wp-content/themes/EazyFreight/databasecompany.php',
data: DataForm,
dataType:"json",
success:function(strMessage) {
$("#message").text(strMessage);
}
});
return false;
}
});
});
Then the PHP to add to the mysql database which the select menu pulls the information from:
<?php
//Register variables
$company_name = $_POST['company_name1'];
$contact_one = $_POST['contact_one1'];
$contact_two = $_POST['contact_two1'];
$company_phone = $_POST['company_phone1'];
$company_email = $_POST['company_email1'];
$company_street = $_POST['company_street1'];
$company_town = $_POST['company_town1'];
$company_postcode = $_POST['company_postcode1'];
$sql = "INSERT INTO `Company`(`id`, `company`, `contact1`, `contact2`, `phone`, `billingemail`, `street`, `town`, `postcode`)
VALUES (NULL, '$company_name', '$contact_one', '$contact_two', '$company_phone', '$company_email', '$company_street', '$company_town', '$company_postcode')";
if (mysqli_query($conn, $sql)) {
echo "New record created successfully";
}
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
die();
essentially, I think I need the select dropdown
to be refreshed when the form is submitted without refreshing the full page