Member Avatar for dashawk

Hi guys, I have a problem on my php code and url passing.

What it should do: There are 3 forms of the php file, the "email", "item1" and "item2". The email form is hidden by default on page load, it will only be visible if any of the item1 or item2 submit buttons is clicked and the two other forms will become hidden. The user will choose which item to click, then the email form will display, then the user will enter their email address, when they click the button, they should be redirected to the page that they clicked, example if they click Item 2, they will be redirected to item2.php after they entered their email address and click the button of the email form.

Problem: I have my code here, but it seems that it's not working when I click on the Get It button from the email form, it will not do anything.

Any help would be appreciated, Thanks.

Here is my code:

<!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>Untitled Document</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
</head>

<body>
	<div id="email" style="display: none;">
		<form method="post" action="<?=$url?>" id="email">
        	<label>E-Mail: 
            	<input type="text" name="email" />
                <input type="submit" value="Email" />
			</label>
        </form>
    </div>
    <div id="offers">
        <div id="items">
            <form id="item1">
                <label><input type="submit" name="getit" value="Item 1" /></label>
            </form>
        </div>
        <div id="gifts2">
            <form id="item2">
                <label><input type="submit" name="getit" value="Item 2" /></label>
            </form>
        </div>
    </div>
	<script type="text/javascript">
    	$('#item1').submit(function(event){
			event.preventDefault();
			$('#offers').css('display','none');
			$('#email').css('display','block');
			<?=$url='item1.php'?>
		});
		$('#item2').submit(function(event){
			event.preventDefault();
			$('#offers').css('display','none');
			$('#email').css('display','block');
			<?=$url='item2.php'?>
		});
    </script>
</body>
</html>
  • 2 Contributors
  • 7 Replies
  • 417 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by cereal
Member Avatar for cereal

To me the wrong part are on line 35 an 42: <?=$url='item1.php'?>
Once the page is loaded, PHP won't change the value echoed on line 11: action="<?=$url?>"

Instead of using two different urls, you should send everything to the same script and use the value that you get: item1/item2 to make a conditional statement.

Other than this, the forms item1 and item2 are missing of action and method attributes. When you send a form you are requesting a connection with the server, but you are using this only to display an hidden element by CSS. What you need here is not onSubmit but onClick: $('#item1').click(function(event)

Bye :)

Member Avatar for dashawk

hi cereal, what i am trying to do is that when a user clicks an item, they should be redirected to the page of that item. i don't know why $url is not echoed. I am a beginner in php though..

Member Avatar for cereal

If I'm understanding good and you want to redirect, then just change forms for item1 and item2:

<form method="get" action="item1.php">
<input type="submit" name="getit" value="Item 1" />
</form>

<form method="get" action="item2.php">
<input type="submit" name="getit" value="Item 2" />
</form>

But, you still need to set the email field, so it's easier to redirect everything to a single script. I suggest you to simplify, sending a single form:

<form method="post" action="items.php">
<label for="item">Select your item</label><br />
<input type="radio" name="item" value="1" /> item 1 <br />
<input type="radio" name="item" value="2" /> item 2 <br />

<label for="email">e-mail</label><br />
<input type="text" name="email" /><br />

<input type="submit" name="getit" value="Get Item" />
</form>

items.php can do this operation:

<?php
if($_POST['item'] == '1')
{
    echo 'item 1'; # do your action here
}

if($_POST['item'] == '2')
{
    echo 'item 2'; # do your action here
}
?>

you can also hide the email fields if you want:

<form method="post" action="items.php">
<label for="item">Select your item</label><br />
<input type="radio" id="item1" name="item" value="1" /> item 1 <br />
<input type="radio" id="item2" name="item" value="2" /> item 2 <br />

<div id="email" style="display: none;">
   <label for="email">e-mail</label><br />
   <input type="text" name="email" /><br />
</div>

<input type="submit" name="getit" value="Get Item" />
</form>

<script type="text/javascript">
$('#item1').click(function(event){
	event.preventDefault();
	$('#email').css('display','block');
});
$('#item2').click(function(event){
	event.preventDefault();
	$('#email').css('display','block');
</script>

I don't know jquery so I'm not sure .click event will work, I usually use dojo. Hope it's useful :)

Member Avatar for dashawk

Hi cereal,

Thanks for the quick reply. your code works fine, but i am required to use submit buttons and not radio buttons.

Also this code, I must be able to get their action values. If item1 is clicked, MAINFORM action will then be equal to ITEM1 action, that way the user will be redirected to item1.php when they click on the send button after entering email.:

<form method="get" action="item1.php">
<input type="submit" name="getit" value="Item 1" />
</form>

<form method="get" action="item2.php">
<input type="submit" name="getit" value="Item 2" />
</form>

Thanks

Member Avatar for cereal

Then you can use button tag. Here's an example:

<!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>
<title>test</title>
</head>
<body>

<div id="offers">
	<label for="item">Select your item</label><br />
	<button type="button" id="item1" name="item">item1</button>
	<button type="button" id="item2" name="item">item2</button>
</div>

<div id="form"></div>

<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#item1').click(function(){
	event.preventDefault();
	$('#offers').css('display','none');
	$('#form').append('<form method="post" action="item1.php"><label for="email">e-mail</label><br /><input type="text" name="email" /><br /><input type="submit" name="getit" value="Get Item" /></form>');
});
$('#item2').click(function(event){
	event.preventDefault();
	$('#offers').css('display','none');
	$('#form').append('<form method="post" action="item2.php"><label for="email">e-mail</label><br /><input type="text" name="email" /><br /><input type="submit" name="getit" value="Get Item" /></form>');
});
</script>
</body>
</html>

Note that due to my limited knowledge of jquery I'm writing all the email form through javascript, but I'm sure someone else can suggest a better & cleaner solution.

Member Avatar for dashawk

Hi cereal, this revision works perfectly of what i want.. Thank you...

Member Avatar for cereal

You're welcome, bye :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.