it's my first post here and I so sorry if I wrong the place.
My difficulty is view the elements of the first select form to the other one if the first form is set as array.
The goal is to send the elements of a select form to another one and then record them on a db MySQL, that will show them on a html page.
I found in this forum the procedure how to create two select form and add 'n remove the items, then with the command .implode of MySQL can join the element and insert multiple items on db and view them on page.
But if I set the name's select form as array it doesn't work. I've used the following script to have two select form :
<script language="javascript">
function getOpt(select1,select2)
{
for (bCnt=0;bCnt<select1.length;bCnt++)
{
if (select1.options[bCnt].selected)
{
newOpt=new
Option(select1.options[bCnt].text,select1.options[bCnt].value,false,false);
select2.options[select2.length]=newOpt;
}
}
}
function remOpt(select2)
{
for (bCnt=0;bCnt<select2.length;bCnt++)
{
if (select2.options[bCnt].selected)
select2.options[bCnt]=null;
}
}
</script>
then the selects form:
<table border="0">
<tr>
<td>
<label for="id">List:<br></label>
<select name="oneS" id="select_role" size=20 required multiple="multiple"/>
<option value="101">101</option>
<option value="102">102</option>
<option value="103">103</option>
<option value="104">104</option>
<option value="105">105</option>
<option value="106">106</option>
</select>
</td>
<td>
<input type="button" value="Add"onClick="getOpt(this.form.oneS,this.for m.twoS)"><br>
<input type="button" value="Remove"onClick="remOpt(this.form.twoS)">
</td>
<td>
<label for="id">Members List:<br></label>
<select name="twoS" id="select_role" size=20 multiple="multiple"/>
</select>
</td>
</tr>
</table>
if comment the script,the part of the buttons, the second form and change the line:
<select name="oneS" id="select_role" size=20 required multiple="multiple"/>
in
<select name="oneS[]" id="select_role" size=20 required multiple="multiple"/>
I have any issue, can record the items of the first select form on db and view them on the page.
But it's not my goal, I've have to use 2 select form.
Is there some one can help me? thanks a lot.
I've you use jQuery, here it is:
$(document).ready(function()
{
$('.add').click(function(event)//this is your first form, with the id "select_role"
{
$('#select_role2).html($(this).html()+"add whatever html code you want to insert into here");
});
});
use the same idea for remove item.
then use an $.ajax or $.post to send the data to mysql or use a variable to store all the html that was added or removed from your second select.
Simply include the jQuery library and you are all sorted. I have not written raw JAvascript in a long long time, but this will work with the help of jQuery. don't use the same id for two elements again. The id must be unique.
Then assuming you insert a whole bunch of options, you can use $('#your_form_id).serialize() within an $.ajax call to get the array of elements then use the PHP technique for parsing name="insertedoption[]" />. I'm not completely sure I helped you too much, as you need to read up on a few things, but this is an idea on how to do what you need to do.
Related
I have a list pulled from a database that currently uses 2 submit buttons. one to refresh the page with a different set of data and the other to update the page.
the code is basically...
// this is a little bit pseudo so dont worry about spelling mistakes...
<?php
if($_POST['update']) {
// update database
}
if($_POST['filter']) {
// show different data
}
?>
<form type="post">
<button type="submit" name= "update" value="update">Update</button>
<select name="selectitem">
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type='submit' name='filter' value='filter'>Filter</button>
</form>
This works fine but I was thinking it would be better to have the select element do the refresh when changed using onChange but how do i get it to submit the right button (in this case the filter button). I am using jquery so suggestions using that would be fine too.
the form posts back to the same page so it can refresh or update the data based on the select element.
I guess i want to get rid of the filter button but perform its specific action onchange of the select element.
hope you can help
thanks
Set an event handler on the select element that will trigger a click to the button.
Like this:
$('select[name="selectitem"]').change(function(e) {
$('button[name="filter"]').click();
});
I hope that helps!
I have a page that I would like the following:
a <form action POST>
select List1 - with onchange set populate list 2
select List2 populated using JavaScript <div id="secondList"></div>
with an <input type="submit" value="Assign">
close the </form>
The second populates list fine. The problem seems to be (when checked in FireBug) that the /form tag is moved for some reason so that the order appears like this:
<form action POST> </form>
select list 1 - correct
list 2 - correctly populated
the <input type="submit" value="Assign">
Why does this happen and how can get around this problem?
HTML CODE
<tr>
<form action="webiste/assignToDepartment.php" method="post">
<td>
<select selected="All" name="firstItem" onchange="checkTeacherList(this.value)">
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>
</td>
<td>
<div id="secondList"></div>
</td>
<td>
<input type="submit" value="Assign">
</td>
</form>
</tr>
Your <form> element has to be placed inside the <td> item. <td> and <th> are the only valid children of <tr>. Alternatively, since your form spans several columns, you'll need to wrap the form around the containing <table>, something like:
<form>
<table>
</table>
</form>
your form element should be placed inside the tag or around the entire table
make your html proper like this
<form action="webiste/assignToDepartment.php" method="post">
<table>
<tr>
<td>
<select selected="All" name="firstItem" onchange="checkTeacherList(this.value)">
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>
</td>
<td>
<div id="secondList"></div>
</td>
<td>
<input type="submit" value="Assign">
</td>
</tr>
</table>
</form>
Firebug's HTML pane does not show the raw HTML sent by the server. Instead, it shows a nice tree graph with the structure of the document and that tree is built with the memory representation of the document nodes. It's not possible to build an invalid tree, thus invalid HTML needs to be fixed or ignored.
If you pass your HTML through the W3C HTML Validator (you might need to check the "Validate HTML fragment" option if you don't provide the complete document) you'll see it reports several errors about the document structure:
document type does not allow element "XXXX" here
end tag for "XXXX" which is not finished
You need to fix that to ensure proper rendering and, as a consequence, proper scripting.
P.S. While there're normally exact specs on how to process valid HTML, invalid HTML is often left to the browser's discretion. That's a good reason to avoid invalid tags: there can be drastic differences in the way they're rendered by different browsers.
I have a simple drop down box inside a form. When a search button is clicked the value that was selected in the box is posted. I need to get the value that is posted, back and put it in a variable so I can add that field to a DTO and then run a database search based on what the field was. I want to use jquery to post and get the data back but unsure how to do this so Im just using plaing javascript for the post.
Javascript:
<form name="values" method="POST" action="MainPage.jsp">
<tr>
<td>
<select name="searchDropDown" id="searchDropDown">
<option value="Volleyball">Volleyball</option>
<option value="Basketball">Basketball</option>
<option value="Hockey">Hockey</option>
<option value="Soccer">Soccer</option>
</select>
<input type="submit" value="Search Video">
</td>
</tr>
</form>
Jquery:
<script>
$(document).ready(function() {
SportsDTO dto = new SportsDTO();
SportsDAO dao = new SportsDAO();
var searchValue = $('#searchDropDown').val();
dto.setSport(searchValue);
dao.findBySport(dto.getSport);
});
</script>
I know the DAO and DTO work because I have a junit test written that passes
Just need to get the value back so I can run the database search and return the values into a table.
I have a javascript that shows and hides options from a html form. What I am trying to do is be able for the user to add a new category and then write that into the database as an option and add that subject to the option form.
Here is an example of the html code,
<select id="team1" name="team1" style="display:none">
<option value="subcat1">subcat1</option>
<option value="subcat2">subcat2</option>
<option value="subcat3">subcat3</option>
I then want them to be able to add another subcat4 via the website.
the javascript i'm using is an if statement with show and hides from different selects.
The user needs to be able to enter the category name and add it to the relevant select.
Currently im unsure on how to get this to add and save the new subcat4 to the database and to the html.
Any help would be appreciated.
When you first load the page you construct the select element by using the values stored in the database.
Then you can have a form that posts the filled info and stores subcategories into the database. This form may contain the identifier of your select for knowing in which select you are assigning the new option. It could be in a hidden input.
here comes a simple example of that form
<form method='post' action='/your/action/here' >
<input type='hidden' name='main_category' value='team1' />
Subcategory: <input type='text' name='subcategory' value='' />
<input type='submit' name='submit_btn' value='submit' />
</form>
You could also do it without page refresh by using an ajax post (this should be your next step, make it first work the simple way) to store the info and then by appending the option to your select using javascript. Check the jquery append or the appendChild() if you are not using jquery.
With jquery you can do this code to append new child in your select element.
$('#team1').append('<option value="subcat4">subcat4</option>');
I'm writing a page that basically manages a list of things. Each thing is allocated to a person, and the allocation is done by a select box with options for each user in the system. (So changing the select box re-allocates the thing).
So say I have 100 objects in my table, and 150 users in my system. If I just do plain HTML, I'm going to have 15,000 option tags
I'm assuming there must be a better way of doing this. My thoughts so far are to just render the first element, and then user jquery to copy the options to the other ones. Or the other option I guess would be to have the options be populated by AJAX, though that is slightly awkward (I don't have an obvious place that the AJAX could get a list of users in the system from).
Any thoughts would be most welcome :)
How about having some sort of popup for the selection. That way you would only need one instance of the select elemement along with its options tags.
So you would basically have each person in a list, a readonly input field and a small button next to it. If the user clicks this button, the popup appears and lets the user choose the "object". After closing the popup the selection is passed to the inputfield.
How about something like
<form …>
<table>
<thead>
<tr>
<th>col1</th><th>col2</th><th>col3</th>
</tr>
<tr id="editrow" style="display:none">
<td><input type="text"></td>
<td><input type="text"></td>
<td>
<select>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
</td>
</tr>
</thead>
<tbody>
<tr><td>col1</td><td>col2</td><td data-value="1">one</td></tr>
<tr><td>col1</td><td>col2</td><td data-value="2">two</td></tr>
<tr><td>col1</td><td>col2</td><td data-value="3">three</td></tr>
<tr><td>col1</td><td>col2</td><td data-value="1">one</td></tr>
<tr><td>col1</td><td>col2</td><td data-value="2">two</td></tr>
<tr><td>col1</td><td>col2</td><td data-value="3">three</td></tr>
</tbody>
</table>
</form>
bind a click event handler to tbody > tr > td in which you
hide that <tr>
pull the data from its <td> and data-value attributes to populate the input elements in #editrow
if #editrow is in <tbody> show its preceeding <tr>
insert #editrow after the <tr> and make it visible
.focus() the input element of the <td> that got the click-event
make sure changes made within #editrow are updated in your <tr>'s <td>s accordingly (you should use delegated events for this. then you only need to create and bind the handlers once)
bind a submit event handler to the <form> in which you
walk through tbody > tr to build a data map (javascript object…)
prevent the form from being sent with .preventDefault()
submit the data-map you built in (1) using jQuery.ajax
Or you create <input>s for your <td>s and have the form submit naturally. bulding the map and sending it via ajax is less painful, as you don't need to manipulate hundreds of DOM elements.
This solution will not work without javascript. If it must work without, you won't get around flooding your DOM with hundreds of ever-repeating <select>s.