Pass Computed PHP Variable to jQuery/Ajax form

Question

My initial form computes the variables $finallowamount & $finalhighamount, but I can't seem to pass the values of those variables to my jQuery contact javascript file (code below). Any help would be greatly appreciated. Thanks.

    $(function() {
$('a.email').click(function(event) {
    event.preventDefault();

    $('body').append('<div id="popupshadow"></div><div id="popup"></div>');
    $('#popupshadow').css({opacity:0}).animate({opacity:0.7},1000);
    $('#popup').css({opacity:0}).delay(1200).animate({opacity:1},800);
    $('#popup').html('<form class="contact" action="#" method="post"><table class="contact"><tr><td class="input-name">Name:</td><td><input type="text" name="name" size="25" /></td></tr><tr><td class="input-email">Email:</td><td><input type="email" name="email" size="25" /></td></tr><tr><td class="input-phone">Phone:</td><td><input type="phone" name="phone" size="25" /></td></tr><tr><td></td><td><input type="submit" value="Send" /></td></tr></table><input type="hidden" name="to" value="[email protected]"></form>');
    $('form.contact').submit(function(event) {
        $('form.contact td').css('color','#000000');

        var name = $('form.contact input[name="name"]').val();
        var email = $('form.contact input[name="email"]').val();
        var phone = $('form.contact input[name="phone"]').val();
        var to = $('form.contact input[name="to"]').val();

        var valid = true;
        if(name == "") 

        {
            valid = false;
            $('td.input-name').css('color','#FF0000');
        }
        if(email == "" && phone == "")
            valid = false;
        if(email == "")
            $('td.input-email').css('color','#FF0000');
        if(phone == "")
            $('td.input-phone').css('color','#FF0000');

        var message = 'message';
        var paymentstreamtype = $("#ssq_rc_general input[type=radio]:checked").val();
        var finallowamount = $("#finallowamount").html();
        var finalhighamount = $("#finalhighamount").html();


        if(valid) {
            $.ajax({url : 'contact.php',
                    data : {name : name,
                            email : email,
                            phone : phone,
                            message : message,
                            paymentstreamtype : paymentstreamtype,
                            finallowamount : finallowamount,
                            finalhighamount : finalhighamount,
                            to : to},
                    type : 'post',
                    success : function(data) {
                        $('#popup').html('<p style="text-align:center;">Your message has been sent.</p>');
                        $('#popup, #popupshadow').delay(1000).animate({opacity:0},500).delay(500).queue(function() { $(this).remove(); });
                    }
            });
        }
        event.preventDefault();
        return false;
    });
    $('#popupshadow, a.cancel').click(function(event) {
        $('#popup, #popupshadow').animate({opacity:0},500).delay(500).queue(function() { $(this).remove(); });
    });
});

});

What elements are with those ids? It seems like those are not input elements. Right? How do you populate values to them? Any html snippets could help. — timidboy
– timidboy, Commented Sep 5, 2012 at 2:16
can you show html where finallowamount and finalhighamount values are stored — Sibu
– Sibu, Commented Sep 5, 2012 at 4:05
Thank you Onchie & Sibu! I just had the ids for those elements labeled incorrectly. It works perfectly now! How do I give you guys credit for pointing me in the right direction? — Red Knight 11
– Red Knight 11, Commented Sep 5, 2012 at 12:38

Jake1164 · Accepted Answer · 2012-09-05 11:08:26Z

1

First, javascript is running in web client while php is running on your server.

If you wan't use a php var, you must let source replace these var to real value.

You can use php include this file, if this is one js file:

//loadjs.php
public function loadJs()
{
    if(extension_loaded('zlib')) {
        //check gzib
        ob_start('ob_gzhandler');
    }

    header ("content-type: application/javascript; charset: UTF-8");
    header ("cache-control: must-revalidate");
    $offset = 60 * 60 * 24;
    $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
    header ($expire);
    ob_start("compress");
    $js = array(
        '0'=>array('/js/swf/swfupload.js'),
    );

    foreach($js as $key=>$value){
        foreach($value as $v){
            include $v;
        }
    }

    if(extension_loaded('zlib')){
        ob_end_flush();//flush all buffer content
    }
}
loadJs()

//then,load this js file in your html file:
<script src="loadjs.php" />

edited Sep 5, 2012 at 11:08

Jake1164

12.4k6 gold badges49 silver badges65 bronze badges

answered Sep 5, 2012 at 2:28

SamPeng

1871 gold badge1 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Red Knight 11 Over a year ago

Thanks for the info. There was a simpler answer, but I will keep this code around in case I need it in the future.

Collectives™ on Stack Overflow

Pass Computed PHP Variable to jQuery/Ajax form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related