Okay it seems the original request was confusing so let me try re-wording. I have a form, see below code, with two Selects, users move things from the Available Locations list (One) to the Selected Locations list (Two) and input some other fields (I included one text field as an example), I need to be able to see what values are in the first select (One) and which are in the second list (Two)
There will be a large number of values so having the user just click or ctrl+click on the values they want isnt practical.
<!DOCTYPE html>
<html xmlns="">
<head>
<title>Test for P1727410</title>
<script src="/ref-files/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function () {
function moveItems(origin, dest) {
$(origin).find(':selected').appendTo(dest);
}
function moveAllItems(origin, dest) {
$(origin).children().appendTo(dest);
}
$('#left').click(function () {
moveItems('#Two', '#One');
});
$('#right').on('click', function () {
moveItems('#One', '#Two');
});
$('#leftall').on('click', function () {
moveAllItems('#Two', '#One');
});
$('#rightall').on('click', function () {
moveAllItems('#One', '#Two');
});
});
</script>
</head>
<body>
<h2>Test for P1727410</h2>
Available Locations | Selected Locations
<form method="POST" action="#">
<select id="One" name="One" multiple="multiple">
<option value="1">Loc1</option>
<option value="2">Loc2</option>
<option value="3">Loc3</option>
</select>
<select id="Two" name="Two" multiple="multiple">
</select>
<br />
<input type="text" name="something" /><br />
<input type="hidden" name="form" value="1" />
<input type="button" id="leftall" value="<<" />
<input type="button" id="left" value="<" />
<input type="button" id="right" value=">" />
<input type="button" id="rightall" value=">>" />
<br />
<input type="Submit" name="Submit" value="Submit" />
</form>
<p>
<?php
if(isset($_POST['form'])) {
echo "<pre>";
print_r($_POST);
echo "</pre>";
}
?>
</p>
</body>
</html>
Okay it seems the original request was confusing so let me try re-wording. I have a form, see below code, with two Selects, users move things from the Available Locations list (One) to the Selected Locations list (Two) and input some other fields (I included one text field as an example), I need to be able to see what values are in the first select (One) and which are in the second list (Two)
There will be a large number of values so having the user just click or ctrl+click on the values they want isnt practical.
<!DOCTYPE html>
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title>Test for P1727410</title>
<script src="/ref-files/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function () {
function moveItems(origin, dest) {
$(origin).find(':selected').appendTo(dest);
}
function moveAllItems(origin, dest) {
$(origin).children().appendTo(dest);
}
$('#left').click(function () {
moveItems('#Two', '#One');
});
$('#right').on('click', function () {
moveItems('#One', '#Two');
});
$('#leftall').on('click', function () {
moveAllItems('#Two', '#One');
});
$('#rightall').on('click', function () {
moveAllItems('#One', '#Two');
});
});
</script>
</head>
<body>
<h2>Test for P1727410</h2>
Available Locations | Selected Locations
<form method="POST" action="#">
<select id="One" name="One" multiple="multiple">
<option value="1">Loc1</option>
<option value="2">Loc2</option>
<option value="3">Loc3</option>
</select>
<select id="Two" name="Two" multiple="multiple">
</select>
<br />
<input type="text" name="something" /><br />
<input type="hidden" name="form" value="1" />
<input type="button" id="leftall" value="<<" />
<input type="button" id="left" value="<" />
<input type="button" id="right" value=">" />
<input type="button" id="rightall" value=">>" />
<br />
<input type="Submit" name="Submit" value="Submit" />
</form>
<p>
<?php
if(isset($_POST['form'])) {
echo "<pre>";
print_r($_POST);
echo "</pre>";
}
?>
</p>
</body>
</html>
- Why not select all/none? What's exactly is the question? What are the options? – user5306470 Commented Sep 17, 2017 at 3:45
- @DaniSpringer I have a list of locations, potentially up to 892 of them, I'm looking to be able to select certain locations from the Available locations and add them to the Selected locations, on the back end we're updating the user with the locations, they could be selecting anything from 1 to 892 locations, select all is great if they want them all but in many cases they will want a subset – Aaron O Commented Sep 17, 2017 at 4:15
- So add a search box to filter out results. Or other filters. I don't understand what the question is. If it's "can you do this for me", then no. SO helps troubleshooting: minimal reproducible example – user5306470 Commented Sep 17, 2017 at 4:16
- @DaniSpringer I have simplified down the code shared, it works to allow users to select what they want into the second list, all I'm asking is how to take what the user selects into the second list and submit it to the back end, code is in the original post. I'm not looking for anybody to do this for me, just stuck on how to make this happen, we've been doing this in a client app and we're attempting to duplicate the functionality in a web app, but can't find a way to do this in HTML/PHP/AJAX – Aaron O Commented Sep 17, 2017 at 4:44
- 1 How about this: johnwbartlett./cf_tipsntricks/index.cfm?TopicID=86 – ADyson Commented Sep 17, 2017 at 4:53
1 Answer
Reset to default 3This question is confusing because we're not sure what you exactly want to show on the front-end (HTML + Javascript), what do you want to send to the back-end (PHP), and what do you want to insert/update/delete in the database.
The simplest solution I think of is the following:
You should have 3 tables in your database: users, locations, and user_locations. The user_locations should have at least 2 columns: "user_id" and "location_id".
HTML: Add a new html input hidden:
<input type="hidden" id="two_values" name="two_values" value="" />
Javascript: When user clicks submit button, take all values of the 2nd dropdown, and send them to the server. Like so:
<script>
$(document).ready(function() {
// on user clicks submit button, this code will be executed first
$('form').submit(function() {
// we'll take all values of the Two dropdown and put them in 1 string
var all_values = '';
$("#Two option").each(function() {
if(all_values === '') {
all_values += $(this).val();
} else {
all_values += ',' + $(this).val();
}
});
$('#two_values').val(all_values);
});
});
</script>
PHP: Get the two_values, and split them to array.
if(isset($_POST['form'])) {
$two_values_arr = explode(',', $_POST['two_values']);
// ...
}
PHP and MySQL: First, delete all previous user's locations:
$q = 'DELETE FROM `locations` WHERE `user_id` = ' . $user_id;
// run the $q ..
Then, do a loop to insert each value for this user
foreach($two_values_arr as $location_id) {
$q = 'INSERT INTO `user_locations` (user_id, location_id) VALUES (' . $user_id . ', ' . $location_id . ')';
// run the $q ..
}
Viewing HTML: When user views the page, you should fetch all user's locations, locations the user have should be printed to the Two dropdown, and ones he doesn't have in the One dropdown