increase number automatically in the text field after clicking save button - javascript

i had a text field named as bill no ,My problem is to increase value in the text field automatically , like initially the bill no will be 1 , after clicking save button it should save with 1 after saving the bill no should automatically increase to 2 ,
any advice ?
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sales</title>
<link href="css/module.css" rel="stylesheet" type="text/css">
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/date.js"></script>
<script>
$(document).ready(function() {
$(".datepicker").datepicker({dateFormat:"yy-mm-dd"});
});
</script>
</head>
<body>
<div class="reg-form">
<form method="post" name="sales" action="sales">
<table class="main">
<thead>
<tr>
<th>SALES
</th>
</tr>
</thead>
</table>
<table class="in-sec-small">
<tbody>
<tr>
<td class="label">
<label for="patient-type">PATIENT TYPE
</label>
</td>
<td>
<select id="patient_type" class="textfield-form-req-select" type="text" name="patient_type" required>
<option value="member">IP</option>
<option value="non-member">OP</option>
<option value="non-member">WIP</option>
</select>
</td>
<td class="label">
<label for="reg-type">REG TYPE
</label>
</td>
<td>
<select id="reg_type" class="textfield-form-req-select" type="text" name="reg_type" required>
<option value="member">Member</option>
<option value="non-member">Non Member</option>
</select>
</td>
<td class="label">
<label for="bill-no">BILL NO
</label>
</td>
<td>
<input id="bill_no" class="textfield-form-date-req" type="text" name="bill_no" required>
</td>
</tr>

Try code below, if you save your bill no through ajax, increase number in your ajax success callback.
$("#your-save-button-id").click(function(){
... do your save action here ...
$("#bill_no").val(parseInt($('#bill_no').val()) + 1);
})

Related

How can I multiply the value of a drop down menu (Quantity) with the price next to it, and then add the total price

My code creates five columns. From those five columns, I have one column under the name "Quantity" has a drop down menu at each row set with the value of 0. Next to the column "Quantity" I have another column named "Price" which has set values.
What I am trying to do, is that if a value is added to a row of "quantity", that value should be multiplied by its price on that same row.
Then I have a 'check out' button, which should display the sum of all of the individual row values.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Beverages</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="stylesheets/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- Navbar -->
<div class="wa-top">
<div class="wa-bar wa-blue wa-card wa-right-align wa-large">
<a class="wa-bar-item wa-button wa-hide-medium wa-hide-large wa-right wa-padding-large wa-hover-white wa-large wa-blue" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
Home
Beverages
Data Analysis
Link 3
Link 4
<div class="logo"><img src="images/17GLogo.png" alt="17g Webapp" /></div>
<!-- Navbar on small screens -->
<div id="navDemo" class="wa-bar-block wa-white wa-hide wa-hide-large wa-hide-medium wa-large">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
<div class="container mt-5">
<% if (messages.success) { %>
<p class="alert alert-success mt-4"><%- messages.success %></p>
<% } %>
<br />
<table class="table">
<thead>
<tr>
<th scope="col">#Id</th>
<th scope="col">Name</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
<th scope="col">Milk</th>
</tr>
</thead>
<tbody>
<% if(data.length){ for(var i = 0; i< data.length; i++) {%>
<tr>
<th scope="row"><%= (i+1) %></th>
<td><%= data[i].name%></td>
<td>$ <%= data[i].price%></td>
<td>
<form action="insertlabel.php" id="privtelabel" method="POST">
<label for="quantity"></label>
<select name="quantity" id="quantity">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<td>
<select name='milk' id='milk'>
<option value="Regular Milk">Regular Milk</option>
<option value="Oat Milk">Oat Milk</option>
<option value="Light Milk">Light Milk</option>
</select>
</td>
</form>
</td>
</tr>
<% } }else{ %>
<tr>
<td>No record found</td>
</tr>
<% } %>
<tr>
<td>Total Price: <span id="totalCost"></span></td>
</tr>
</tbody>
</table>
<script>
function myFunction() {
var x = document.getElementById("btn");
x.disabled = true;
}
$(document).ready(function(){
total_cost = 0;
$('#quantity option').each(function(){
total_cost = total_cost + parseInt($(this).val())
})
alert(total_cost)
})
</script>
<button type="button" id="btn" onclick="sum(tal_cost)">Check Out</button>
<script src=".ready(function())"></script>
</div>
</body>
</html>

How could I handle a parent/child div issue with multiple dropdowns that hide and show divs?

Here is the issue:
<p>Choose Type of Request:</p>
<select class="typeOfRequest">
<option> Choose Type of Request</option>
<option value="fundscenter">Funds Center Request</option>
<option value="onlinestore">New Online Store and/or POS</option>
</select>
When "onlinestore" is selected, this dropdown pops up:
<p>Do you need equipment?</p>
<div class="onlinestore box">
<select id="equipmentQuestion" onchange="showDiv('hidden_div', this)">
<option selected>Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
**** This is where the issue is: When "Yes" is seleted on the above dropdown, I need this div to pop up:
<div id="hidden_div">
<tr>
<td>Equipment Needed:</td>
<td>
<input type="checkbox" id="ipad_checkbox"> iPad
<br>
<div id="ipadqty_div"> <!-- THIS DIV POPS UP WHEN CHECKBOX IS CHECKED -->
Qty: <input type="number" id="ipadqty" class="numberBoxes" size="35"
min="0"> </input>
</div>
<br>
<input type="checkbox" id="cct_checkbox"> Credit Card Terminal
<div id="cctqty_div"> <!-- THIS DIV POPS UP WHEN CHECKBOX IS CHECKED -->
Qty: <input type="number" id="cctqty" class="numberBoxes" size="35" min="0"> </input>
<br>
</div>
Yet, for some reason, "hidden_div" does not show up when I make the selection "Yes."
I have a feeling that it isn't working because of a parent/child div situation, because I have scoured the internet for solutions, and all of them seem to work on their own, but not in my application. But, I wasn't sure and so I was hoping someone could lead me in the right direction:
Currently, I am using javascript, but if there is a better way, that would be fine with me too.
Here is my complete code with my HTML and JS:
https://jsfiddle.net/audgepodge626/6qomenpw/2/
The issue is with your markup, It's not valid when div is used as a child of table. So I just rearranged some invalid markups to make it work.
/* This function is for the yes/no dropdown for the equipment question */
function showDiv(divId, element) {
document.getElementById(divId).style.display = element.value == "Yes" ? 'block' : 'none';
}
/* This function allows for the different types of requests to appear with select dropdown class "typeOfRequest*/
$(document).ready(function() {
$("select.typeOfRequest").change(function() {
$(this).find("option:selected").each(function() {
if ($(this).attr("value") == "fundscenter") {
$(".box").not(".fundscenter").hide();
$(".fundscenter").show();
} else if ($(this).attr("value") == "onlinestore") {
$(".box").not(".onlinestore").hide();
$(".onlinestore").show();
} else {
$(".box").hide();
}
});
}).change();
});
/* This section deals with the checkboxes next to "Equipment Needed"*/
$(function() {
$("#ipadqty_div").hide()
$("#ipad_checkbox").click(function() {
if ($(this).is(":checked")) {
$("#ipadqty_div").show();
} else {
$("#ipadqty_div").hide();
}
});
}).change();
$(function() {
$("#cctqty_div").hide();
$("#cct_checkbox").click(function() {
if ($(this).is(":checked")) {
$("#cctqty_div").show();
} else {
$("#cctqty_div").hide();
}
});
}).change();
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
<!--icon-->
<link rel="icon" type="" href="../images/favicon.png">
<!-- Bootstrap Core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../css/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!--JQuery UI CSS Files-->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<!--Fund Auto Complete CSS>
<link href="./vendor/bootstrap/css/auto.css"-->
<!--Custom CSS-->
<link href="../css/scustom.css" rel="stylesheet">
<!--Hide and show divs-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--This script is to Show/hide divs based on dropdown selection-->
<script src="dropdown.js"></script>
</head>
<body>
<!--HEADINGS, general page body-->
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" style="float:left">Accounting Services' Request</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<span style="text-align:center;">
Create New Request<!--for subheading, you type here-->
</span>
</div>
</div><br>
<form name="form1" action="nothing.php" method="GET" enctype="multipart/form-data">
<div class="general">
<strong style="float:left">Requester Information</strong>
<table style="float:left">
<select class="typeOfRequest">
<option> Choose Type of Request</option>
<option value="fundscenter">Funds Center Request</option>
<option value="onlinestore">New Online Store and/or POS</option>
</select>
</table>
</div>
<!-- ////////////////////////////// funds center request div //////////////////////////////////////////////// -->
<div class="fundscenter box">
Contents of fundscenter box
</div>
<div class="onlinestore box">
<h1 style="float:left">New Online Store Request</h1>
<table style="float:left">
<tr>
<td>Name of Store:</td>
<td><input name="Requester_Name" size="30" value="<?php echo $row['FIRST_NAME'];?> <?php echo $row['LAST_NAME'];?>" required></td>
</tr>
<tr>
<td>Logo:</td>
<td><input type="file" name="Requester_Phone" size="10"></td>
</tr>
<tr>
<td>Access to Reports?:</td>
<td>
<select name="accesstoReports">
<option>Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr>
<td>Would you like to recieve a notification email?:</td>
<td>
<select class="typeOfRequest">
<option> Select </option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr class="displayNotifEmail">
<td>Notification Email Address:</td>
<td><input name="Requester_Email" size="30"></td>
</tr>
<tr>
<td>Contact Us Email:</td>
<td><input readonly name="Requested_Date" size="15" value="<? echo $Created_Date; ?>"></td>
</tr>
<tr>
<td>Fund Center:</td>
<td><input id="datepicker" name="Requested_Needed" size="15" required> </td>
</tr>
<tr>
<td>GL (Not required):</td>
<td><input readonly name="Requested_Date" size="15" value="<? echo $Created_Date; ?>"></td>
</tr>
<tr>
<td>Product excel template:<br>
Template
</td>
<td><input type="file" name="Requester_Phone" size="10"></td>
</tr>
<tr>
<td>Product Images:</td>
<td><input type="file" name="Requester_Phone" size="10"></td>
</tr>
<tr>
<td>POS:</td>
<td>
<select id="posSelect">
<option>Select</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</td>
</tr>
<!-- ///////////////////////////////////////////////////////////////////////////////////////// -->
<tr>
<td>Do you need equipment?:</td>
<td>
<select id="equipmentQuestion" name="form_select" onchange="showDiv('hidden_div', this)">
<option selected>Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</tr>
<tr id="hidden_div">
<td>Equipment Needed:</td>
<td>
<input type="checkbox" id="ipad_checkbox"> iPad
<br>
<div id="ipadqty_div">
Qty: <input type="number" id="ipadqty" class="numberBoxes" size="35" min="0" />
</div>
<br>
<input type="checkbox" id="cct_checkbox"> Credit Card Terminal
<div id="cctqty_div">
Qty: <input type="number" id="cctqty" class="numberBoxes" size="35" min="0" />
<br>
</div>
</td>
</tr>
<!-- -->
<!-- /////////////////////////////////////////////////////////////////////////////////////// -->
<tr>
<td>Additional Notes:</td>
<td><textarea rows="4" cols="40"></textarea></td>
</tr>
</table>
</div>
<!--
<input type="submit"></input>
-->
</form>
</body>
</html>
FYI :
The tag can contain the following child elements (and in this order): (Taken from here )
optionally a tag
followed by zero or more tags
followed optionally by a tag
followed optionally by a tag
followed by either zero or more tags or one or more
tags
followed optionally by a tag (but there can only be one
tag child in total)
optionally intermixed with one or more script-supporting elements
(i.e. either tag or ) tag

Why does this code is not decreasing the value of hely?

So I want to make some checkboxes.
If I check one of them, that one's counter should decrease by one (it has a space variable, so if someone checks that checkbox, it should decrease by one)
Also if they uncheck that, I would like to increase the space, so increase the space (hely) variable by one.
Now my code keeps increasing only, but it does not decreases.
(Sorry for the format of the code, but since stackoverflow made a new question asking page it is not that easy to copy my code like before...)
var hely = 0;
function checkingFunction() {
if (checkbox.checked == true) {
hely--;
change.innerHTML = hely;
} else {
hely++;
change.innerHTML = hely;
}
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Piarista Kollégium - Stúdiumi jelentkezés</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="topnav">
<div class="topnav-centered">
Jelentkezés
</div>
Frissítések
<div class="topnav-right">
Bejelentkezés
</div>
</div>
<div id="head">
<img src="logo.png">
</div>
<h2>Üdvözöllek, XY!</h2>
</div>
<form class="checkbox" id="checkbox" action="">
<table>
<thead>
<tr>
<th></th>
<th>1.</th>
<th>2.</th>
<th>3.</th>
<th>4.</th>
<th>5.</th>
<th>6.</th>
</tr>
</thead>
<tbody>
<tr>
<th>Hétfő</th>
<td><input type="checkbox" id="he1" onclick="checkingFunction()" name="hetfo"><label id="change" for="he1">
</label></td>
<td><input type="checkbox" id="he2" onclick="checkingFunction()" name="hetfo"><label id="change" for="he2">
</label></td>
<td><input type="checkbox" id="he3" onclick="checkingFunction()" name="hetfo"><label id="change" for="he3">
</label></td>
<td><input type="checkbox" id="he4" onclick="checkingFunction()" name="hetfo"><label id="change" for="he4">
</label></td>
<td><input type="checkbox" id="he5" onclick="checkingFunction()" name="hetfo"><label id="change" for="he5"></label>
</td>
<td><input type="checkbox" id="he6" onclick="checkingFunction()" name="hetfo"><label id="change" for="he6">
</label></td>
</tr>
</tbody>
</table>
<input type="submit" class="button" value="Jelentkezés elküldése">
</form>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
If I check one checkbox, that one's counter should decrease by one (it has a space variable, so if someone checks that checkbox, it should decrease by one)
Also if they uncheck that, I would like to increase the space, so increase the space (hely) variable by one.
You have multiple id="change" labels. When you do that, the variable change contains a collection of all of them, and assigning to change.innerHTML doesn't update any of them.
The variable checkbox refers to the <form id="checkbox">. Since forms don't have a checked property, checkbox.checked == true is never true, so hely always increments.
If you want to check the value of the box that the user checked, you need to pass it as a parameter to the function, using onclick="checkingFunction(this)".
And if you want to update the label associated with that checkbox, you can use checkbox.nextSiblingElement to refer to it.
var hely = 0;
function checkingFunction(checkbox) {
var change = checkbox.nextElementSibling;
if (checkbox.checked) {
hely--;
} else {
hely++;
}
change.innerHTML = hely;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Piarista Kollégium - Stúdiumi jelentkezés</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="topnav">
<div class="topnav-centered">
Jelentkezés
</div>
Frissítések
<div class="topnav-right">
Bejelentkezés
</div>
</div>
<div id="head">
<img src="logo.png">
</div>
<h2>Üdvözöllek, XY!</h2>
</div>
<form class="checkbox" id="checkbox" action="">
<table>
<thead>
<tr>
<th></th>
<th>1.</th>
<th>2.</th>
<th>3.</th>
<th>4.</th>
<th>5.</th>
<th>6.</th>
</tr>
</thead>
<tbody>
<tr>
<th>Hétfő</th>
<td><input type="checkbox" id="he1" onclick="checkingFunction(this)" name="hetfo"><label id="change" for="he1">
</label></td>
<td><input type="checkbox" id="he2" onclick="checkingFunction(this)" name="hetfo"><label id="change" for="he2">
</label></td>
<td><input type="checkbox" id="he3" onclick="checkingFunction(this)" name="hetfo"><label id="change" for="he3">
</label></td>
<td><input type="checkbox" id="he4" onclick="checkingFunction(this)" name="hetfo"><label id="change" for="he4">
</label></td>
<td><input type="checkbox" id="he5" onclick="checkingFunction(this)" name="hetfo"><label id="change" for="he5"></label>
</td>
<td><input type="checkbox" id="he6" onclick="checkingFunction(this)" name="hetfo"><label id="change" for="he6">
</label></td>
</tr>
</tbody>
</table>
<input type="submit" class="button" value="Jelentkezés elküldése">
</form>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

Getting Submit button before the looped form

I have a form where I need to input data to store. I used a while loop because I need to use same code over 4/5 times. The problem is the submit button is coming before the form. It's working. I checked that. But, I need to place the submit button below the form.
I tried to change it up a few times. It still give me the same output.
How to solve this?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../sns/bootstrap.min.css">
<script type="text/javascript" src="../sns/jquery.min.js"></script>
<script type="text/javascript" src="../sns/bootstrap.min.js"></script>
</head>
<body>
<table>
<tr>
<th>Department:</th>
<th>Year:</th>
<th>Course:</th>
<th>Date(dd/mm/yyyy):</th>
<th>Time:</th>
<th>Roll:</th>
</tr>
<form method="post" style="width: auto;">
<?php
$i=0;
while ($i<5) {
echo '<tr id="c1">
<td>
<select name="dept'.$i.'" size="1">
<option value="EEE ">EEE</option>
<option value="CSE ">CSE</option>
<option value="CE ">CE</option>
<option value="ME ">ME</option>
<option value="IPE ">IPE</option>
<option value="GCE ">GCE</option>
<option value="ECE ">ECE</option>
<option value="ETE ">ETE</option>
<option value="MTE ">MTE</option>
<option value="URP ">URP</option>
<option value="Arch ">Architecture</option>
</select>
</td>
<td>
<select name="year'.$i.'" size="1">
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
<option value="4">4th</option>
</select>
</td>
<td>
<input type="text" name="course'.$i.'" size="10">
</td>
<td>
<input type="text" name="date'.$i.'" style="width: auto">
</td>
<td>
<select name="time'.$i.'" size="1">
<option>9:00</option>
<option>10:00</option>
<option>2:00</option>
</select>
</td>
<td>
<input type="text" name="Roll'.$i.'">
</td>
</tr>';
$i++;
}
?>
<input class="btn btn-default" type="Submit" value="Submit">
</form>
</table>
</body>
</html>
You need to put the submit button inside a td as well, I also recommend moving the form fully outside of the table as some browser (webkit/chrome mostly) will add or rearrange elements they think are incomplete:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../sns/bootstrap.min.css">
<script type="text/javascript" src="../sns/jquery.min.js"></script>
<script type="text/javascript" src="../sns/bootstrap.min.js"></script>
</head>
<body>
<form method="post" style="width: auto;">
<table>
<tr>
<th>Department:</th>
<th>Year:</th>
<th>Course:</th>
<th>Date(dd/mm/yyyy):</th>
<th>Time:</th>
<th>Roll:</th>
</tr>
<?php
$i=0;
while ($i<5) {
echo '<tr id="c1">
<td>
<select name="dept'.$i.'" size="1">
<option value="EEE ">EEE</option>
<option value="CSE ">CSE</option>
<option value="CE ">CE</option>
<option value="ME ">ME</option>
<option value="IPE ">IPE</option>
<option value="GCE ">GCE</option>
<option value="ECE ">ECE</option>
<option value="ETE ">ETE</option>
<option value="MTE ">MTE</option>
<option value="URP ">URP</option>
<option value="Arch ">Architecture</option>
</select>
</td>
<td>
<select name="year'.$i.'" size="1">
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
<option value="4">4th</option>
</select>
</td>
<td>
<input type="text" name="course'.$i.'" size="10">
</td>
<td>
<input type="text" name="date'.$i.'" style="width: auto">
</td>
<td>
<select name="time'.$i.'" size="1">
<option>9:00</option>
<option>10:00</option>
<option>2:00</option>
</select>
</td>
<td>
<input type="text" name="Roll'.$i.'">
</td>
</tr>';
$i++;
}
?>
<tr>
<td colspan="6" align="right">
<input class="btn btn-default" type="Submit" value="Submit">
</td>
</tr>
</table>
</form>
</body>
</html>
Renders:
<form method="post" style="width: auto;" action="">
<table>
<?php
$i = 0;
while ($i <= 5) {
#my form
if($i == 5)
echo '<button class="btn btn-default" type="Submit" style="margin-left: 18%; width: 14%">Submit0</button>';
$i++;
}
?>
<input class="btn btn-default" type="Submit" value="Submit1">
</table>
</form>

Move options between two select boxes, php jquery

hi guys pls help me with this i dont know how to start to send this function to the php database. pls help me i need to send the right box to the database tnx the function of the jquery is working but i cannot think of how do i insert this to the database pls help me with this:) tnx all move options(text) two the next box and insert to the php database.
select.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery move listbox items from left to right example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
function move_list_items(sourceid, destinationid)
{
$("#"+sourceid+" option:selected").appendTo("#"+destinationid);
}
//this will move all selected items from source list to destination list
function move_list_items_all(sourceid, destinationid)
{
$("#"+sourceid+" option").appendTo("#"+destinationid);
}
</script>
<style type="text/css">
select {
width:200px;
height:100px;
}
</style>
</head>
<body>
<form action="submit.php" method="post">
<table cellpadding="5" cellspacing="5">
<tbody>
<tr>
<td colspan="2">
<select id="from_select_list" multiple="multiple" name="from_select_list">
<option value="apple">Apple</option><option value="mango">Mango</option> <option value="bannana">Bannana</option> <option value="grapes">Grapes</option>
</select>
</td>
<td colspan="2">
<select id="to_select_list" multiple="multiple" name="to_select_list">
<option value="winder">Winter</option> <option value="summer">Summer</option> <option value="rainy">Rainy</option> <option value="Spring">Spring</option>
</select>
</td>
</tr>
<tr>
<td><input id="moveright" type="button" value="Move Right" onclick="move_list_items('from_select_list','to_select_list');" /></td>
<td><input id="moverightall" type="button" value="Move Right All" onclick="move_list_items_all('from_select_list','to_select_list');" /></td>
<td><input id="moveleft" type="button" value="Move Left" onclick="move_list_items('to_select_list','from_select_list');" /></td>
<td><input id="moveleftall" type="button" value="Move Left All" onclick="move_list_items_all('to_select_list','from_select_list');" /></td>
<input type="submit" name="submit" />
</tr>
</tbody>
</table>
</body>
</html>
connection.php
<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$db = "copy";
$conn = mysqli_connect($dbhost,$dbuser,$dbpass,$db);
?>
submit.php
<?php
include 'connection.php'
?>
change the select option name into array then only u can get all the selected items
<td colspan="2">
<select id="to_select_list" multiple="multiple" name="to_select_list[]">
<option value="winder">Winter</option> <option value="summer">Summer</option> <option value="rainy">Rainy</option> <option value="Spring">Spring</option>
</select>
</td>
in submit.php you can check like this
echo '<pre>';
print_r($_POST);

Categories