Jump to content

How to set dropdown value from onClick command?

marmite

By marmite
in Javascript Help

 Share

Recommended Posts

marmite Regular Member

marmite

Posted
Posted

Hi,

 

Complete newbie, struggling with form elements in php. Have decided javascript is the way forwards but know nothing about it.

 

I have three dropdowns plus button in a form. When the button is clicked, I want to store the user choices in the code (to perform a DB query), and maintain the user choices on display in the dropdowns - currently they reset to "All".

 

In the example below, I am just trying to set the "purpose" dropdown to "wholesale" regardless of what the user clicks, to get the principle. Any help really appreciated!

 

Question 1: do i need to use JS or is there a way in PHP?

Question 2: where/how do I place the JS code within the onclick command - or is my code completely wrong?

 

		<form name = "filters" method="post" action="<?=$_SERVER['PHP_SELF']?>">
		<table width="100%">
			<tr>
				<td colspan="2" width="100%"><img src = "buttons/apply_filters.gif" ></td>
			</tr>
			  <tr>
				<td width="51" scope="row">Theme</td>
				<td scope="row"><select name="theme" id="theme1">
				  <option value="1" selected="selected">All</option>
				  <option value="2">Animal</option>
				  <option value="3">Floral</option>
				  <option value="4">Leisure</option>
				  <option value="5">Travel</option>
				</select></td>
			  </tr>
			  <tr>
				<td width="51" scope="row">Message</td>
				<td scope="row"><select name="message" id="message1">
				  <option value="1" selected="selected">All</option>
				  <option value="2">Blank</option>
				  <option value="3">Birthday</option>
				  <option value="4">Congrats</option>
				  <option value="5">Get Well</option>
				  <option value="6">Thankyou</option>
				  <option value="7">Christmas</option>
				</select>
				</td>
			  </tr>
			  <tr>
				<td width="51" scope="row">Purpose</td>
				<td width="97" scope="row"><select name="purpose" id="purpose1">
				  <option value="All" selected="selected">All</option>
				  <option value="Personal">Personal</option>
				  <option value="Invitations">Invitations</option>
				  <option value="Business">Business</option>
				  <option value="Retail">Retail</option>
				  <option value="Wholesale">Wholesale</option>
				</select></td>
			  </tr>
			  <tr ><td colspan="2" scope="row" align="right"><[b]input type="submit" name="submit2" value="Apply" onclick="document.form1.purpose.value=Wholesale">[/b]</td></tr>
		</table>
	</form>

 

Ultimately I want to keep all the choices as variables in the code, and set the dropdowns to be whatever the user has selected. I'm struggling.

 

Thanks for any help...  ???

 

Link to comment
Share on other sites
marmite Regular Member

marmite

Posted
  • Author
Posted

I don't know what "save" functionality you mean...

 

OK, I sell cards, > 80 designs of them. When someone chooses options from this dropdown, e.g. "Birthday", I want to return a page to them which only displays the Birthday cards.

 

So, (1) I need to store their choices, "purpose", "theme" and "message" in a variable in the code, and use it in an SQL statement. I haven't even begun tackling this yet.

(2) I need their choices to stay showing in the dropdowns.

 

I am tackling (2) right now. Currently when I press "apply" all the options reset to "All". I don't know why.

 

I found one bug in the code ("form1" instead of "filters"). Now when I click "apply", I see the choice I made for a fraction of a second before it resets to "All".

 

The problem seems to be some sort of reset elsewhere in the code...?

 

Once I've got the choice to stay showing, I will need to pass in a variable instead of hardcoding "Wholesale", and pass in other dropdown-setting scripts for the "theme" and "message" dropdowns.

 

Does this make sense?

It's 8pm over here and I've been working on this all day. I must be missing something stupid!

 

Thaks for your help

Emma

Link to comment
Share on other sites
anatak Advanced Member

anatak

Posted
Posted

hey Emma,

 

I think I know what you want to do.

I did something similar in php. I don't see the point of using javascript for this one.

 

I did something like that with one dropdown here is my code

<FORM method="POST" action="<?php echo $_SERVER['PHP_SELF'] . "?page=list_review"?>" >
<TABLE>
<TR>
<TD colspan="2">Select the reviews you would like to read and click the show review button</TD
</TR>
<TR>
<TD>
<SELECT NAME="ReviewType">
<OPTION SELECTED value="<?php if(isset($_POST['ReviewType'])){ echo $_POST['ReviewType']; } else{ echo "all";} ?>">
<?php if(isset($_POST['ReviewType'])){ echo $_POST['ReviewType']; }else { echo "all";} ?></OPTION>
<OPTION value="all">all</OPTION>
<OPTION value="book">book</OPTION>
<OPTION value="event">event</OPTION>
<OPTION value="movie">movie</OPTION>
<OPTION value="music">music</OPTION>
<OPTION value="nightlife">nightlife</OPTION>
<OPTION value="restaurant">restaurant</OPTION>
</SELECT>
<input type="submit" name="submit" value="Show review">
</td>

</TR>
</TABLE>
</FORM>
<?php
/*
review page is public everybody can see all information
no check for login is needed
*/
echo "<H2>reviews</H2>";
//Queryparameters
$TableName1 = "review";
$TableName2 = "user";

//check to see if something is send
if(!isset($_GET['select']))
{
if(!isset($_REQUEST['submit']))
{
	$reviewtype = 'all';
	$where='';
	$order_by=" ORDER BY ReviewPostDate DESC";
	$QueryCountReview = "SELECT COUNT(*) FROM $TableName1;";
}
else
{
	if($_POST['ReviewType'] == 'all')
	{
		$reviewtype = 'all';
		$where='';
		$order_by=' ORDER BY ReviewPostDate DESC';
		$QueryCountReview = "SELECT COUNT(*) FROM $TableName1;";
	}
	else
	{
		$reviewtype = $_POST['ReviewType'];
		$QueryCountReview = "SELECT COUNT(*) FROM $TableName1 WHERE ReviewType = '$reviewtype'";
		$where=" WHERE ReviewType = '$reviewtype'";
		$order_by=" ORDER BY ReviewPostDate DESC";
		$QueryCountReview = "SELECT COUNT(*) FROM $TableName1" . $where .";";
	}
}
}
else
{
if($_GET['select']=='all')
{
	$reviewtype = 'all';
	$where='';
	$order_by=" ORDER BY ReviewPostDate DESC";
	$QueryCountReview = "SELECT COUNT(*) FROM $TableName1;";
}
else
{	
	$reviewtype = $_GET['select'];
	$QueryCountReview = "SELECT COUNT(*) FROM $TableName1 WHERE ReviewType = '$reviewtype'";
	$where=" WHERE ReviewType = '$reviewtype'";
	$order_by=" ORDER BY ReviewPostDate DESC";
	$QueryCountReview = "SELECT COUNT(*) FROM $TableName1" . $where .";";
}
}

//Queryparameters
$w=50; //number of words of the article to be displayed in the article listing
//SUBSTRING_INDEX(str,delim,count)
$QuerySelectReview = "SELECT $TableName1.ReviewId, $TableName1.ReviewType, $TableName1.ReviewTitle, 
					date_format($TableName1.ReviewUpdateDate, '%M %D, %Y') as updatedate, 
					date_format($TableName1.ReviewPostDate, '%M %D, %Y') as postdate, 
					SUBSTRING_INDEX($TableName1.ReviewReview, ' ', '$w'),
                       $TableName2.UserId, $TableName2.UserHandle 
				   FROM $TableName1 LEFT JOIN $TableName2 ON $TableName1.ReviewAuthor = $TableName2.UserId" . $where . $order_by ;
//echo $QuerySelectReview;
//open db connection READ user
$n=5; //number of reviews per page
read_connection();
$Result=pagination($QuerySelectReview, $QueryCountReview, $n, 'list_review', $reviewtype);
$Count=mysql_result(mysql_query($QueryCountReview),0);
read_close();
if($Count==0)
{
?>
<TABLE>
	<TR>
	<TD>
	You requested <?php echo $reviewtype ?> reviews.<BR>
	We are sorry we do not have any reviews of the requested type. Please check back later.
	Or volunteer to become a reviewer and write your own reviews and articles.
	</TD>
	</TR>
</TABLE>
<?php
}
else
{
//close db connection READ user
show_review_table($Result, $w, true, null, null);
}
read_connection();
pagination($QuerySelectReview, $QueryCountReview, $n, 'list_review', $reviewtype);
read_close();
?>

Link to comment
Share on other sites
marmite Regular Member

marmite

Posted
  • Author
Posted

Hey, thanks for this!

 

In the end I used what I've appended below, but I didn't know the syntax you used <OPTION SELECTED = <? ... etc> so I've stored it for future reference. It may be more elegant than my solution.

 

Cheers!

 

	<form name = "filters" method="get" action="http://localhost/New_CU/greetingscards.php">
		<table width="100%">
			<tr>
				<td colspan="2" width="100%"><img src = "buttons/apply_filters.gif" ></td>
			</tr>
			  <tr>
				<td width="51" scope="row">Theme</td>
				<td scope="row"><select name="theme" id="theme1">
				  <option value="All"<?php if($_GET['theme'] == "All") { echo ' selected="selected"'; } ?>>All</option>
				  <option value="Animal"<?php if($_GET['theme'] == "Animal") { echo ' selected="selected"'; } ?>>Animal</option>
				  <option value="Floral"<?php if($_GET['theme'] == "Floral") { echo ' selected="selected"'; } ?>>Floral</option>
				  <option value="Leisure"<?php if($_GET['theme'] == "Leisure") { echo ' selected="selected"'; } ?>>Leisure</option>
				  <option value="Travel"<?php if($_GET['theme'] == "Travel") { echo ' selected="selected"'; } ?>>Travel</option>
				</select></td>
			  </tr>
			  <tr>
				<td width="51" scope="row">Message</td>
				<td scope="row"><select name="message" id="message1">
				  <option value="All"<?php if($_GET['message'] == "All") { echo ' selected="selected"'; } ?>>All</option>
				  <option value="Blank"<?php if($_GET['message'] == "Blank") { echo ' selected="selected"'; } ?>>Blank</option>
				  <option value="Birthday"<?php if($_GET['message'] == "Birthday") { echo ' selected="selected"'; } ?>>Birthday</option>
				  <option value="Congrats"<?php if($_GET['message'] == "Congrats") { echo ' selected="selected"'; } ?>>Congrats</option>
				  <option value="GetWell"<?php if($_GET['message'] == "GetWell") { echo ' selected="selected"'; } ?>>GetWell</option>
				  <option value="Thankyou"<?php if($_GET['message'] == "Thankyou") { echo ' selected="selected"'; } ?>>Thankyou</option>
				  <option value="Christmas"<?php if($_GET['message'] == "Christmas") { echo ' selected="selected"'; } ?>>Christmas</option>
				</select>
				</td>
			  </tr>
			  <tr>
				<td width="51" scope="row">Purpose</td>
				<td width="97" scope="row"><select name="purpose" id="purpose">
				  <option value="All"<?php if($_GET['purpose'] == "All") { echo ' selected="selected"'; } ?>>All</option>
				  <option value="Personal"<?php if($_GET['purpose'] == "Personal") { echo ' selected="selected"'; } ?>>Personal</option>
				  <option value="Invitations"<?php if($_GET['purpose'] == "Invitations") { echo ' selected="selected"'; } ?>>Invitations</option>
				  <option value="Office"<?php if($_GET['purpose'] == "Office") { echo ' selected="selected"'; } ?>>Office</option>
				  <option value="Retail"<?php if($_GET['purpose'] == "Retail") { echo ' selected="selected"'; } ?>>Retail</option>
				  <option value="Wholesale"<?php if($_GET['purpose'] == "Wholesale") { echo ' selected="selected"'; } ?>>Wholesale</option>
				</select></td>
			  </tr>
			  <tr ><td colspan="2" scope="row" align="right"><input type="submit" name="submit2" value="Find cards"></td></tr>

		</table>
	</form>

Link to comment
Share on other sites
anatak Advanced Member

anatak

Posted
Posted

the option selected is just to show the value the user choose before.

you can look at how it works here.

warning: very ugly site

 

http://www.kyushuinfo.com/index.php?page=list_review

 

I tend to ignore design and only try new functions :D

 

Some day I hope to marry a designer so she can fix all the ugliness I create ;)

 

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.