I want to put my select value as my form action + string(/index.php)
but it seems that I can't get the value of the select until I click my submit button.
<tr>
<td>Select Project: </td><td><select name="myproject" onchange="">
<option>Exam1</option>
</select></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="login" id="login" value="Submit"
formaction="<?php $myproject = $_POST['myproject']; echo $myproject."/index.php"; ?>"
formmethod="POST"/>
</td>
</tr>
That is correct. You are mixing server and client side.
After reading your comment I believe you want this (plain JS chosen)
<script>
window.onload=function() {
document.getElementsByName("myproject")[0].onchange=function() {
var path = this.value;
if (path) this.form.action=path+'/index.php';
}
}
</script>
with the HTML now this:
<form method="post" action="">
Select Project: <select name="myproject">
<option value="">Please select</option>
<option value="exam1">Exam1</option>
</select>
<input type="submit">
</form>
To do it on the server, have a look at Post to another page within a PHP script
$myproject = !empty($_POST['myproject']) ? $_POST['myproject'] : "defaultaction.php";
Related
I am generating forms based on the data from the database. so a set of data is basically a form with a button to select the data. Based on another radio button selection, I want to do different operations on the form data. Is it possible to do it?
<form action="">
<p>Please select user gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
<?php
// here I am generating a list of forms based on some information.
// $fetched_data is the returned array of data (data from db)
// how do I change the form action of the following forms based on the radio buttons above ???
if(!empty($fetched_data))
{
foreach ($fetched_data as $row)
{
?>
<form action = '??????' method =get>
<tr>
<td><?php echo $row["job_options"]; ?> </td>
<td><?php echo $row["salary_options"]; ?> </td>
<td><?php echo $row["place_options"]; ?> </td>
// buttons
<td><input type="hidden" name="getID" value=<?php echo $row["id"]; ?> /></td>
<td><input type=submit name=serialSubmit value=select id=button1 class = classSubmit /></td>
</tr>
</form>
<?php
}
}
?>
Ideally, I'll use a select rather than checkboxes
<form action="" id="form">
<p>Please select user gender:</p>
<select class="gender-select">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</form>
Then listen on changes of that select:
<script>
const selectElement = document.querySelector('.gender-select');
selectElement.addEventListener('change', (event) => {
const selectedGender = event.target.value;
// then we can change to form's action based on the selected value here
if (selectedGender == 'male') {
document.getElementById('form').action = 'http://action/for/male.php';
return;
}
if (selectedGender == 'female') {
document.getElementById('form').action = 'http://action/for/female.php';
return;
}
// if others
document.getElementById('form').action = 'http://action/for/others.php';
});
</script>
This script can be greatly optimized and compressed, I'm just gonna leave it this way so it is much more easier to understand
I am trying to update a session value by dropdown onchange event and use this session value to a second page. For this I have added following dropdown list and a submit button.On submit button press I am updating the session value.It is working sometime but most often it is giving the previous session value even after changing the dropdown list option.Whats wrong with it
<?php
session_start(); // start session before output
if( isset($_POST['submit']) ) { // some other page is posting to this page?
// save values from other page to session
$_SESSION['amount'] = $_POST['select_amount'];
}
?>
<form name="myForm" action="/thanks" method="POST">
<table> <tr> <td style="width:272px;">
<select name="select_amount" id="select_amount" onchange="submit()">
<option value="0">select a listing type</option>
<option value="10">Premium Listings </option>
<option value="20">Premium Blogs </option>
<option value="30">1 week sticky </option>
</select></td>
<td style="text-align:left;color:gray;"><span style="color:crimson;">*
</span>Select a listing type</td></tr> </table>
<table> <tr>
<input type="submit" name="submit" class="button_add" onsubmit="return
validateForm()">
</form>
if you want to change session value using on change then no need to form submit, use ajax then you can do it easily
Step1: create your main file like this
<?php
session_start(); // for show your session value
print_r($_SESSION); // remove this after check
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form name="myForm" action="/thanks" method="POST">
<table>
<tr>
<td style="width:272px;">
<select name="select_amount" id="select_amount" onchange="update_session_value(this.value)">
<option value="0">select a listing type</option>
<option value="10">Premium Listings</option>
<option value="20">Premium Blogs</option>
<option value="30">1 week sticky</option>
</select></td>
<td style="text-align:left;color:gray;">
<span style="color:crimson;">*
</span>Select a listing type
</td>
</tr>
</table>
<input type="submit" name="submit" class="button_add" onsubmit="return validateForm()">
</form>
<script>
function update_session_value(value) {
$.ajax({
type: "POST",
url: 'http://localhost/session.php', // change url as your
data: 'select_amount=' + value,
dataType: 'json',
success: function (data) {
}
});
}
</script>
then create simple session.php file
<?php
session_start();
if( isset($_POST['select_amount']) ) {
// save values from other page to session
$_SESSION['amount'] = $_POST['select_amount'];
}
?>
after on change refresh the page you can see this result
use the ajax call on change event
$("#select_amount").change(function(){
var select_amount = $("#select_amount option:selected").val();
$.post('change_session.php',{select_amount : 'store'},function(data){
if(data != ''){
alert(data);
}
});
});
put a php script on
change_session.php
I want to output the selected values from the right hand listbox. However I am not successful in getting the values of selected values. The error returns from the submit function of js. Can anyone tell me why does it return:
An object doesn't support this property
in the submit function? How can i get the values.. will i use ajax or just returned value in PHP?
<form name="frmListSubmit" method="post" id="myform" onsubmit="return submit()">
<table cellpadding="2" cellspacing="0" border="0" id="tblMain" class="edit">
<tr valign="top">
<td> </td>
<td>
<SELECT id="s" size="10" name="source" multiple>
<?php
while($row = mysql_fetch_assoc($getEmployeeList))
{
?>
<option name="list" value="<?php echo $row['id'];?>"><?php echo $row['name']; ?></option>
<?php
}
?>
</td>
</SELECT>
<td valign="center">
>>
<<
</td>
<td>
<SELECT id="d" size="10" name="destination" multiple>
<option name="list" value=""> </option>
</SELECT>
<input type="submit" name="submit" value="submit" />
</td>
</tr>
</table>
</form>
and here is the javascript code:
function listbox_moveacross(sourceID,destID)
{
var src=document.getElementById(sourceID);
var dest=document.getElementById(destID);
for(var count=0;count<src.options.length;count++)
{
if(src.options[count].selected==true)
{
var option=src.options[count];
var newOption=document.createElement("option");
newOption.value=option.value;
newOption.text=option.text;
newOption.selected=true;
try
{
dest.add(newOption,null);src.remove(count,null);
}
catch(error)
{
dest.add(newOption);src.remove(count);
}
count--;
}
}
}
function listbox_selectall(listID,isSelect)
{
var listbox=document.getElementById(listID);
for(var count=0;count<listbox.options.length;count++)
{
istbox.options[count].selected=isSelect;
}
}
function submit()
{
listbox_selectall('d', true);
return true;
}
I have something like this in PHP and it returns only one ID after submission.
if(isset($_POST['submit']))
{
echo $_POST['destination'];
}
This is the weird code:
function listbox_selectall(listID,isSelect)
{
var listbox=document.getElementById(listID);
for(var count=0;count<listbox.options.length;count++)
{
istbox.options[count].selected=isSelect;//<-- ?
}
}
Maybe, you wanted to say:
listbox.options[count].selected=isSelect;
You said, that only 1 value from "destination" is submitted to PHP. To allow multiple values to be submitted, add [] to the names of the <select>-s:
<SELECT id="s" size="10" name="source[]" multiple>
<SELECT id="d" size="10" name="destination[]" multiple>
Also, there is no need to use name attribute for options. You don't use it anywhere.
I need to show the item_id when I click one of the item_name list in the dropdown. And when I click submit, the item_name and item_id got by $_POST. Can javascript use to do that?
<?php
$brg="SELECT item_id, item_name FROM tblItem";
$b=mysql_query($brg);
?>
<td align="center">
<select name="item_name">
<?php while($br=mysql_fetch_array($b)){ ?>
<option value=<?echo $br[0].'_'.$br[1]?> selected>
<?php echo $br[1]; ?>
</option>
<?php } ?>
</select>
</td>
Jup, that's possible with Javascript.
Your HTML:
<select name="item_name">
<option value="1_Cheese">Cheese</option>
<option value="2_Cars">Cars</option>
<option value="3_Planes">Planes</option>
</select>
<input type="button" onclick="alert(getSelectedValue())" value="Get Select Id" />
And your Javascript, to access the ID from the options value:
function getSelectedValue()
{
var sel = document.getElementsByName('item_name')[0];
return sel.options[sel.selectedIndex].value.split("_")[0];
}
See this fiddle: http://jsfiddle.net/acz6Q/
It would be a little easier with jQuery (also appended an event handler):
$(document).ready(function()
{
$("select[name=item_name]").on("change", function()
{
alert("new item id = " + $(this).val().split("_")[0]);
});
});
And here is the jQuery version fiddle: http://jsfiddle.net/acz6Q/1/
Hope this helps!
Try this:
<form action="" method="post">
<input type="hidden" id="item_id" name="item_id" />
<input type="hidden" id="item_name" name="item_name" />
<select id="my_select" name="my_select">
<option value="item_id_1">item_name_1</option>
<option value="item_id_2">item_name_2</option>
<option value="item_id_3">item_name_3</option>
</select>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#my_select").change(function() {
$("#item_id").val($("#my_select").val());
$("#item_name").val($("#my_select option:selected").text());
});
});
</script>
Note that you need to include the jQuery library first. Also you can see how it works from here jsfiddle.net/2FsNP/3. And with this method you don't need to combine between value and text of the option tag with the underscore.
I need to populate the relevant text box with the results of a Select drop down.
My Javascript so far is
<script language="JavaScript">
var mytextbox = document.getElementById('error');
var mydropdown = document.getElementById('errormsg_id');
mydropdown.onchange = function(){
mytextbox.value = this.value;
}
</script>
My select box and text boxes are built as arrays from a query so there is nultiple of them.
I need to be able to populate the corresponding text box with the results from the Select next to it.
Any ideas?
Thanks
<td width="1%">
<select style="width:100%" name="errormsg_id[]" id="errormsg_id[]">
<?php do { ?>
<option value="<?php echo $row_rserrormsg['errormsg_id']?>"
<?php if ($row_rsdates['errormsg_id'] == $row_rserrormsg['errormsg_id']) { echo("selected='selected'"); } ; ?> >
<?php echo $row_rserrormsg['error_message']?></option>
<?php } while ($row_rserrormsg = mysql_fetch_assoc($rserrormsg)); ?>
<?php mysql_data_seek($rserrormsg, 0);
$row_rserrormsg = mysql_fetch_assoc($rserrormsg);?>
</select>
</td>
<TD align="center" class="adminuser">
<input style="width:96%;text-align:left;" autocomplete="on" title="Enter Error Message" type="text" name="error[]" id="error[]" value="<?php echo $row_rsdates['error_message']; ?>" maxlength="100"/>
</TD>
Assuming You will be using jQuery and Your HTML is like this:
<table>
<tr>
<td><select class="my_select" name="errormsg_id1[]" id="errormsg_id1">...</select></td>
<td><input name="errormsg_id1_txt" id="errormsg_id1_txt" title="..." />
</tr>
...
<tr>
<td><select class="my_select" name="errormsg_idX[]" id="errormsg_idX">...</select></td>
<td><input name="errormsg_idX_txt" id="errormsg_idX_txt" title="..." />
</tr>
</table>
this could be done using jQuery:
$(document).ready(function(){
$('.my_select').change(function(){
$('#'+$(this).attr('id')+'_txt').val($(this).val());
});
});
Hope it is correct, have no time to test it...
Here is a JSFiddle/DEMO on how to get it to work with sample selects:
I think this approach is a little better than #shadyyx since it removed the need for you to manually increment the input and select field names.
<table>
<tr>
<td><select class="select" name="errormsg_id[]">
<option val="test1">Test1</option>
<option val="test2">Test2</option>
<option val="test3">Test3</option>
</select></td>
<td><input class="error_text" name="errormsg_id_txt[]" title="..." />
</tr>
...
<tr>
<td><select class="select" name="errormsg_id[]">
<option val="test1">Test1</option>
<option val="test2">Test2</option>
<option val="test3">Test3</option>
</select></td>
<td><input class="error_text" name="errormsg_id_txt[]" title="..." />
</tr>
</table>
And the JQuery:
$(document).ready(function(){
$('.select').change(function(){
$(this).parent().parent().find('.error_text').val($(this).val());
});
});
NOTICE: If you are using plain Javascript, see this DEMO
<table>
<tr>
<td><select class="select" name="errormsg_id[]" id="errormsg_id1" onChange="update('errormsg_id1')">
<option val="test1">Test1</option>
<option val="test2">Test2</option>
<option val="test3">Test3</option>
</select></td>
<td><input class="error_text"name="errormsg_id_txt[]" id="errormsg_id_txt1" title="..." />
</tr>
...
<tr>
<td><select class="select" name="errormsg_id[]" id="errormsg_id2" onChange="update('errormsg_id2')">
<option val="test1">Test1</option>
<option val="test2">Test2</option>
<option val="test3">Test3</option>
</select></td>
<td><input class="error_text" name="errormsg_id_txt[]" id="errormsg_id_txt2" title="..." />
</tr>
</table>
And Javascript:
function update(element){
var e = document.getElementById(element);
var id = element.substring(element.length-1);
document.getElementById("errormsg_id_txt"+id).value = e.value;
}
You need to think of way to uniquely identify your corresponding set of elements. The most convenient way I would suggest would be to use the primary key value of the data row.
And example would be like
while($row = mysqli_fetch_assoc($result)) {
$id = $row['id']; //A primary key field
echo '<input type="text" name="text'.$id.'" id="text'.$id.'" />';
echo '<select name="select'.$id.'" id="select'.$id.'" />...</select>";
}
Next, call a function from the select menu, so that only the relevant text box is updated. Update the above select portion to read something similar to this.
echo '<select name="select'.$id.'" id="select'.$id.'" onchange="updateBox(\'text'.$id.'\', this.value)" />...</select>";
Now, create a very simple simple function to update the text box.
function updateBox(element, value) {
el = document.getElementById(element);
el.value = value;
}