在javascript和php之间传递值-弹出PHP Javascript HTML

Question

I am trying to incorporate a popup into my project. It works up until I try and pass a value from javascript to the php script. I have included a link to the example I used and link to the original script. There were slight changes made to the original script. The area I am having an issue with is marked with a ---->

full script can be found here: http://www.webdeveloper.com/forum/showthread.php?279111-Contact-form-popup-window

working example can be found here: http://ilolo.ru/wd/contact_form/

I have the following in hello.html

<form id='form1' style='width: 1100px'>
    <table>
        <th>Email</th>
        <th>Options</th>
        <tr>
            <td>
                <input type='text' id='email1' size='25' value='bob@mail.com'>
            </td>
            <td><a id='1' href='#null' class='contactus'><img src= 'images/emailbutton.jpg'    title='Email' border='0' height='24' width='24'></img></a>

        </tr>
    </table>
</form>

The following js is in a .js that I reference in my html. I use the following since I have more than one form. Just showed one form in my example. The alert below works....shows the correct email address when I click on the image link in the html.

    function findCenter(obj) {
        var deltaX = parseInt(obj.css('padding-left')),
            deltaY = parseInt(obj.css('padding-top'));
        obj.css('left', $(window).width() / 2 - obj.width() / 2 - deltaX + 'px').css('top',  $(window).height() / 2 - obj.height() / 2 - deltaY + 'px');
    }

    $(document).ready(function () {
        $('.contactus').click(function () {
    var element = $(this);
    var J = element.attr('id');
    var email = document.getElementById('email'+J).value;
        alert(email);
        $('#result').html('<h3>Loading</h3>').css('display', 'block');
        findCenter($('#result'));
        $.get('email.php', function (data) {
            $('#result').html(data);
            findCenter($('#result'));
            $('#snd').click(function () {
                var subject = document.getElementById('subject').value;
                var addy = document.getElementById('addy').value;
                var comments = document.getElementById('comments').value;
                     $('#result').append('<br /><br /><div><i>Sending...</i></div>');
                     $.post('lbi_email.php',{mode: 'snd', subject: subject, addy: addy, comments: comments},function(data){
                $('#result').html(data);
                findCenter($('#result'));
    });
    });
    });
    });
    });

email.php

This value below is not getting sent by the javascript and the input value=$email is not written correctly (I think)

<?php 
include( 'connection.php'); 
function showForm(){ 
$email=$_POST[ 'email'];  
echo '<form name="mf" id="mf" action="" method="post">
    <h2>Send Email To Customer</h2><br />
    <p><label>Address :</label><input type="text" size="35" name="addy" id="addy" value="'.$email.'"/></p>
    <p><label>Subject :  </label><input type="text" size="35" name="subject" id="subject" value=""/></p>
    <label>Message:</label><textarea style="width: 100%;" cols="20" rows="10" id="comments" name="comments"></textarea>
    <p><a href="#" class="btn" id="snd" name="snd"><img src="submitbutton.jpg" title="Submit Email" border="0" height="25" width="75"></img></a></p></form>';
   } 

function sndForm(){ 
/* here goes checking data and so on... then sending if everything 's good and sending done show message to the user*/
    echo '<h3>Everything\'s cool.
    <br />
    <br />Viva Cuba!</h3>
    <script type="text/javascript">
        setTimeout(\'$("#result").fadeOut("fast")\',3000);
    </script>'; 
} 
/*---------------------------------------------------------------------*/    
 $mode=(!empty($_GET['mode']))?$_GET['mode']:$_POST['mode']; 
switch($mode)
{ 
case 'snd':sndForm();break; 
default: showForm();break; 
} 
?> 

Answer 1

In your javascript you are sending literal email instead of your email value -

$.post('email.php',{mode: 'snd', email: 'email'},function(data){

Change this to -

$.post('email.php',{mode: 'snd', email: email},function(data){

In your php code you have a variable scope issue - $email is outside the scope of your function

$email=$_POST[ 'email']; 
function showForm(){ 
echo $email;

Try setting it inside

function showForm(){ 
$email=$_POST[ 'email']; 
echo $email;

Finally, you have $email inside single quotes-

echo '<form name="mf" id="mf" action="" method="post">
    <h2>Send Email To Customer</h2><br />
    <input type='text ' value='$email '/> 
    ...

Need to update to

echo '<form name="mf" id="mf" action="" method="post">
    <h2>Send Email To Customer</h2><br />
    <input type="text" value="'.$email.'"/>
    ...

---

Additionally, it looks like when you are submitting the for you are not sending the comments textarea, so you probably need to add that as well.

$('#snd').click(function () {
        $('#result').append('<br /><br /><div><i>Sending...</i></div>');
        var comments = document.getElementById('comments').value;
        $.post('email.php',{mode: 'snd', email: email, comments: comments},function(data){
                $('#result').html(data);
                findCenter($('#result'));
        });
});

---

Edit

You need to add the email value to your $.get() -

$.get('email.php', email: email, function (data) {

and then change it to $_GET['email'] in your php -

function showForm(){ 
$email=$_GET[ 'email'];