Getting Submit button before the looped form - javascript

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>

Related

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

pass all rows selected option values which is determined by user input from php

How can I pass selected option values if it's randomly generate by user?
How can I get the values of each selected option for each rows if I determined the values?
something like this.
Javascript
<script>
function submitForm(action)
{
document.getElementById('columnarForm').action = action;
document.getElementById('columnarForm').submit();
}
</script>
PHP
<form class="form-horizontal" action="" method="post" id="columnarForm">
<!-- some html tag -->
<?php
if ($_SERVER['REQUEST_METHOD'] =='POST' && isset($_POST['addButton1'])) {
$table = $_POST['selectTable'];
if($table == 'company')
{
$num = $_POST['num'];
for($j = 1; $j <= $num; $j++) {
?>
<tr id="row1">
<td align="right"><?php echo $j; ?></td>
<td id="name_row1" width="2px">
<input type="text" id="new_name" name="text<?php echo $j; ?>" value=""></td>
<td id="country_row1">
<select class="selectField" onChange="" id="selectcom" name="selectcom<?php echo $j; ?>">
<option value="">-- Select Field --</option>
<option value="comp_id<?php echo $j; ?>">comp_id</option>
<option value="comp_name<?php echo $j; ?>">comp_name</option>
</select>
</td>
<td><input type="text" name="default" size="10"></td>
<td id="data_row"><div id="new_text<?php echo $j;?>"></div></td>
<td id="size_row"><div id="size_row<?php echo $j;?>"></div></td>
<td>
<input type="button" value="Delete" class="delete btn btn-small btn-info" onclick="delete_row('row1')">
</td>
</tr>
<?php
}
}
?>
<button type="submit" class="btn btn-primary noty" name="next" onclick="submitForm('import.php')">Create Template</button>
How can I give variable at the next page (import.php)?
sorry for my english imperfections
$('#noc').change(function(e) {
$('.child').remove();
id = $(this).val();
for(var i=1; i<id; i++){
var thisRow = $('.dd').last(".dd");
var newid = parseInt(thisRow.attr('divid'))+1;
newRow = thisRow.clone(true).insertAfter(thisRow).find('input').val('').end().
find('.name').each(function(){
$(this).attr('id', 'name-'+newid);
$(this).attr('name','name-'+(newid));
$(this).attr('placeholder','Name '+(newid));
}).end().find('.drop').each(function(){
$(this).attr('id', 'dd-'+newid);
$(this).attr('name','dd-'+(newid));
}).end();
thisRow.next('.dd').attr("divid",newid).addClass("child");
}
});
div{ display: inline-table;}
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><section style="width:40%" align="center">
<form>
<div class="col-md-12"><input type="text" class="form-control" id="noc" /></div>
<div class="dd" divid="1" align="center">
<div class="col-md-6">Field Name</div>
<div class="col-md-6">Column Name</div>
<div class="col-md-6"><input type="text" placeholder="Name 1" class="name form-control" id="name-1" name="name-1" /></div>
<div class="col-md-6">
<select name="dd-1" id="dd-1" class="drop form-control">
<option>value 1</option>
<option>value 2</option>
<option>value 3</option>
<option>value 4</option>
</select>
</div>
</div>
</form>
</section>
Check this code

Unable to post tag returned through document.getElementById('div').innerHTML

I am working on this form with several select elements with options Yes, No or Not applicable. It was required that whenever the user select yes option a separate date field appears next to it. I used HTML DOM document.getElementById("id").innerHTML for this date field. Everything went well but I was not able to pass the value of date to the form action page using POST method. Check this code:
<!-- javascript code -->
<script type="text/javascript">
function credit_check(name){
if(name=='YES')document.getElementById('div2').innerHTML='Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div2').innerHTML='';
}
function employment_check(name){
if(name=='YES')document.getElementById('div3').innerHTML='Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div3').innerHTML='';
}
</script>
</head>
<body>
<?php include("menu.inc"); ?>
<div id="main">
<table>
<form method="post" action="checkinfo.php">
<tr><td colspan=2><hr/><input type="hidden" name="consultant_id" value="<?php echo $consult_id; ?>"> </td>
</tr>
<tr align="center">
<td><b>Credit Check </b></td>
<td>
<select name="2" onchange="credit_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div2"> </div></td>
</tr>
<tr align="center">
<td><b>Employment Check :<font color='red'>*</font></b></td>
<td>
<select name="3" onchange="employment_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div3"> </div></td>
</tr>
</form>
</table>
Demo - Change function credit_check(name) to window.credit_check = function(name)
window.credit_check = function(name){
if(name=='YES') document.getElementById('div2').innerHTML='Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div2').innerHTML='';
}
window.employment_check = function (name){
if(name=='YES') document.getElementById('div3').innerHTML='Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div3').innerHTML='';
}
You're script wasn't loading properly,
Uncaught ReferenceError: credit_check is not defined in your console shows the error. The functions were not being defined. You can set your functions like above or reposition your code.
Put the inputs into the HTML at loading, then simply hide/show them.
<!-- javascript code -->
<script type="text/javascript">
function credit_check(name){
if(name=='YES')document.getElementById('div2').style.display = 'block';
else document.getElementById('div2').style.display = 'none';
}
function employment_check(name){
if(name=='YES')document.getElementById('div3').style.display = 'block';
else document.getElementById('div3').style.display = 'none';
}
</script>
</head>
<body>
<?php include("menu.inc"); ?>
<div id="main">
<table>
<form method="post" action="checkinfo.php">
<tr><td colspan=2><hr/><input type="hidden" name="consultant_id" value="<?php echo $consult_id; ?>"> </td>
</tr>
<tr align="center">
<td><b>Credit Check </b></td>
<td>
<select name="2" onchange="credit_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div2" style="display: none;">
Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />
</div></td>
</tr>
<tr align="center">
<td><b>Employment Check :<font color='red'>*</font></b></td>
<td>
<select name="3" onchange="employment_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div3" style="display: none;">
Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />
</div></td>
</tr>
</form>
</table>
It's also a good idea to check out jQuery, it makes this kind of stuff a lot easier to do.
Your code is already working. See http://jsfiddle.net/2wg4u6ut/
Make sure your JavaScript is in the head section of your document.
There were some minor issues in your formatting where the <form> tag belongs around the table.
You also were missing the submit button, but then it's already working.

IE showing two div instead of one

I made a button which is showing and hiding div on click by using jQuery. But IE showing another extra div and rest of the browsers showing it properly.
<div class="hide-search-button">
<div class="l-f-w" id="locate">
<h1> Location </h1>
<input type="hidden" value="" id="loc_hidden"/>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><h1>State</h1></td>
<td> <select onChange="selectCity(this.options[this.selectedIndex].value)" name="state_name" id="state_name">
<option value="Choose">Choose</option>
<?php
//connect with database
$sqlCountry="select DISTINCT state from sheet1
order by state asc ";
$resCountry=mysql_query($sqlCountry);
$checkCountry=mysql_num_rows($resCountry);
// fetch all country
while($rowCountry=mysql_fetch_array($resCountry)){
?>
<option value="<?php echo $rowCountry['state']?>">
<?php echo $rowCountry['state']?>
</option>
<?php
}
?>
</select></td>
</tr>
<tr>
<td><h1>Region</h1></td>
<td><select id="region_name" name="region_name"
onchange="selectState(this.options[this.selectedIndex].value)">
<option value="Choose">Choose</option>
</select>
</td>
</tr>
<!--<tr>
<td><h1>Suburb</h1></td>
<td><select id="suburb_name" name="suburb_name">
<option value="Choose">Choose</option>
</select></td>
</tr>-->
<tr>
<td><h1>Pin Code</h1></td>
<td> <input type="text"value=" " name="pin" id="pin"></td>
</tr>
</table>
<input type="hidden" value="2" name="searchform" />
<script>
function span_go()
{
//var locate = document.getElementById("menuSelection").innerHTML;
var service = document.getElementById("sertype").innerHTML;
//document.getElementById("locatetext").value = locate;
document.getElementById("servicetext").value = service;
//alert (service);
}
</script>
<input type="hidden" value="" id="servicetext" name="servicetext"/>
<?php /*?><a tabindex="0" href="menuContent.html" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout"><div class="arrow_wrap"><span class="ui-icon ui-icon-triangle-1-s"></span> </div> <span id="menuSelection"> <?php echo $location ?></span></a><?php */?>
</div> <!-- location field wrapper ends here -->
<div class="service_type_wrap s-t-w">
<h1> Service Type </h1>
<select multiple="multiple" label="choose" style="margin-left:8px;" name="tex_value" id="worktype">
<option value="Long Day Care">Long Day Care</option>
<option value="Occasional Care">Occasional Care</option>
<option value="In Home Care">In Home Care</option>
<option value="Before School Care">Before School Care</option>
<option value="After School Care">After School Care</option>
<option value="Vacation">Vacation Care</option>
<option value="Special Care">Special Care</option>
<option value="Permanent / Contract">Permanent / Contract</option>
<option value="Part time">Part time</option>
</select>
</div> <!-- service type wrapper ends here -->
<div class="f-r-w" style="margin-left:10px;">
<h1> Filter Results </h1>
<select data-placeholder="<?php echo $sorting; ?>" class="chzn-select" style="width:200px;" tabindex="2"name="q_state" id="jobsort">
<option value="title">Sort by job title</option>
<option value="date">Sort by date</option>
</select>
</div> <!-- filter results wrapper ends here -->
<div class="go_button_wrap">
<input name="submit" type="submit" value="Go" id="custum_button" onclick="span_go();">
</div> <!-- go button ends here -->
</form>
</div>
JS:
$(document).ready(function() {
$("#button").toggle(function() {
//$(this).text('Hide Advance Search');
}, function() {
//$(this).text('Show Advance Search');
}).click(function(){
$(".hide-search-button").slideToggle("slow");
event.preventDefault();
});
});
Screenshot shown below:
Try to change click part of your code. You need to pass event object into the handler. In IE actually there is window.event object. Maybe it causes the issue:
.click(function(event) {
$(".hide-search-button").slideToggle("slow");
event.preventDefault();
});

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