Solved

Pass PHP Variables to JavaScript

Posted on 2011-09-21
29
348 Views
Last Modified: 2012-05-12
I'm trying to pass an array to a php function, use extract, then within that function I have Javascript. I need to populate some of the script with php variable values but so far I've not managed to make it work.

My PHP function with Javascript is pasted.

My forms name and the form ID changes dynamically.

document.wtgpt_form_name.submit();

I need wtgpt_form_name to be a variable and also...

$('form#wtgpt_form_id').submit(function(e){e.preventDefault();

wtgpt_form_id within that line to be a variable.

Thanks for any help.

function wtgpt_jquery_opendialog_confirmformaction($jqueryform_settings){

        extract( shortcode_atts( array(
        'has_options' => false,
        'pageid' => 0,
        'panelnumber' => 0,
        'panel_name' => 'nopanelname',
        'panel_title' => 'No Panel Name',
        'dialoguebox_content' => '$dialoguebox_content has not been set',
        'dialoguebox_title' => '$dialoguebox_title has not been set',
        'dialoguebox_height' => 200,
        'dialoguebox_width' => 300,
        'noticebox_content' => '$dialoguebox_content has not been set',
        'noticebox_type' => 'question',
        'noticebox_size' => 'Small',
        'form_id' => WTG_ABB.'_form_id_default',
        'form_name' => WTG_ABB.'_form_name_default',
        ), $jqueryform_settings ) );
        ?>
        <script>
        $(function(){
                // jQuery UI Dialog
                var form_name = "<?php echo $form_name; ?>";

                $('#dialog').dialog({
                    autoOpen: false,
                    width: 500,
                    height: 300,
                    modal: true,
                    resizable: false,
                    buttons: {
                        "Submit Form": function() {
                            document.wtgpt_form_name.submit();
                        },
                        "Cancel": function() {
                            $(this).dialog("close");
                        }
                    }
                });

                $('form#wtgpt_form_id').submit(function(e){
                    e.preventDefault();

                    $("p#dialog-wtgpt_hidden_panel_name").html($("input#wtgpt_hidden_panel_name").val());

                    $('#dialog').dialog('open');
                });
        });
        </script>

Open in new window

0
Comment
Question by:Ryan Bayne
  • 15
  • 14
29 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36574891
put this part in the head section before any other javascript :

<?PHP

var form_name = "<?PHP echo $formname ?>";
var form_id = "<?PHP echo $formid ?>";

?>

Now, with javascript, everywhere you need the name or the id use form_name and form_id
0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36577212
I did try that, maybe never used variables properly.


document.form_name.submit();

$('form#form_id').submit(function(e){

That is what I done which causes the contents of the dialogue box to become visible, not the dialogue itself just a html styled div within it.

Thank you for help so far, points bump.
0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36577218
Changed to 200 points.
function wtgpt_jquery_opendialog_confirmformaction($jqueryform_settings){

        extract( shortcode_atts( array(
        'has_options' => false,
        'pageid' => 0,
        'panelnumber' => 0,
        'panel_name' => 'nopanelname',
        'panel_title' => 'No Panel Name',
        'dialoguebox_content' => '$dialoguebox_content has not been set',
        'dialoguebox_title' => '$dialoguebox_title has not been set',
        'dialoguebox_height' => 200,
        'dialoguebox_width' => 300,
        'noticebox_content' => '$dialoguebox_content has not been set',
        'noticebox_type' => 'question',
        'noticebox_size' => 'Small',
        'form_id' => WTG_ABB.'_form_id_default',
        'form_name' => WTG_ABB.'_form_name_default',
        ), $jqueryform_settings ) );
        ?>
        <script>
        $(function(){

                var form_name = "<?PHP echo $formname ?>";
                var form_id = "<?PHP echo $formid ?>";

                $('#dialog').dialog({
                    autoOpen: false,
                    width: 500,
                    height: 300,
                    modal: true,
                    resizable: false,
                    buttons: {
                        "Submit Form": function() {
                            document.form_name.submit();
                        },
                        "Cancel": function() {
                            $(this).dialog("close");
                        }
                    }
                });

                $('form#form_id').submit(function(e){
                    e.preventDefault();

                    $("p#dialog-wtgpt_hidden_panel_name").html($("input#wtgpt_hidden_panel_name").val());

                    $('#dialog').dialog('open');
                });
        });
        </script>
    <?php
    }

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36577227
$('#' + form_id).submit(function(e){
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36577238
line 34 : $("#<?PHP echo $formid ?>").submit();
0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36577591
Great.

Am I missing something here, I get...

document.form_name is undefined for the script below.

form_id is alright, I think. No errors on it anyway.

Points bump.
$(function(){
            
            var form_name = "wtgpt_form_name_exampleonly";
            var form_id = "wtgpt_form_id_exampleonly";

            $('#dialog').dialog({
                autoOpen: false,
                width: 500,
                height: 300,
                modal: true,
                resizable: false,
                buttons: {
                    "Submit Form": function() {
                        document.form_name.submit();
                    },
                    "Cancel": function() {
                        $(this).dialog("close");
                    }
                }
            });

            $('form#' + form_id).submit(function(e){
                e.preventDefault();

                $("p#dialog-wtgpt_hidden_panel_name").html($("input#wtgpt_hidden_panel_name").val());

                $('#dialog').dialog('open');
            });
        });

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36577606
check back again ID:36577238
and check the line in question, update your code
0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36577620
           var form_name = "<?PHP echo $form_name ?>";

the form form_name in this line is underlined as having an issue in my IDE. Tried declaring it first, same thing, the form_name is underlined...

            var form_name;
            var form_id;

            var form_name = "<?PHP echo $form_name ?>";
            var form_id = "<?PHP echo $form_id ?>";

Tried using any text at all and removing the first declaring, same thing happens. That is just strange...

            var form_id;

            var wwwwdsdss = "<?PHP echo $form_name ?>";
            var form_id = "<?PHP echo $form_id ?>";

To be clear, wwwwdsdss  is underlined in my IDE like form_name is. Late for me going to head to bed.

Really appreciate your fast help.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36577625
replace your line 34 :                             document.form_name.submit();
by : $("#<?PHP echo $formid ?>").submit();

0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36577629
Replace this...

with this...

$("#<?PHP echo $formid ?>").submit();

???

I'm not sure I understand. My line ends with a bracket and yours ;

Aso it contains "form", is that no required?

$('form#' + form_id).submit(function(e){

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36577634
ID:36577218 it's line 34
ID:36577591 it's line 14

>Aso it contains "form", is that no required?
no, ID attribute is (must/should be) unique in a page
0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36577641
OK get you now tried...

//document.form_name.submit();
$("#<?PHP echo $form_name ?>").submit();

and

//document.form_name.submit();
$("#<?PHP echo $formid ?>").submit();

Makes things worse makes the dialogue content show up pre button press. These lines also cause that to happen...

                        //document.form_name.submit();
                        document.$("#<?PHP echo $form_name ?>").submit();


                        //document.form_name.submit();
                        document.$("#<?PHP echo $form_id ?>").submit();
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36577648
this is a bad syntax : document.$("#<?PHP echo $form_name ?>").submit();

this is the right code : $("#<?PHP echo $formid ?>").submit(); // same as (with the right id) document.form_name.submit();

let me see your current code
did you check the generated html code?
0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36577651
Alright here is what I have now.

I press form button, I get the dialogue but the Submit Form button in the dialogue box does nothing. Parsed code below...
<form id="wtgpt_form_id_exampleonly" name="wtgpt_form_name_exampleonly" method="post">        <script>
        $(function(){
            var form_id = "wtgpt_form_id_exampleonly";
            var form_name = "wtgpt_form_name_exampleonly";

            $('#dialog').dialog({
                autoOpen: false,
                width: 500,
                height: 300,
                modal: true,
                resizable: false,
                buttons: {
                    "Submit Form": function() {
                        //document.form_name.submit();
                        $("#wtgpt_form_id_exampleonly").submit();
                    },
                    "Cancel": function() {
                        $(this).dialog("close");
                    }
                }
            });

            $('form#' + form_id).submit(function(e){
                e.preventDefault();

                $("p#dialog-wtgpt_hidden_panel_name").html($("input#wtgpt_hidden_panel_name").val());

                $('#dialog').dialog('open');
            });
        });
        </script>

Open in new window

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36577654
Oh and no errors in console when clicking the dialogue button
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36577675
I see the right form ID line 15
I see something right line 23 too


you open the dialog, you click on the Submit Form to submit your form.
line 23, you said : when someone is trying to submit the form :
- line 24 : stop submitting of the form
- line 26 : update content of a paragraphone (id dialog-wtgpt_hidden_panel_name) with value of the input input with  id wtgpt_hidden_panel_name
- line 28 : open the dialog

this is the way you design it.

want to be sure?
just place a significative alert inside each event, you will understand what happen

for example line 13 to 16 :
                    "Submit Form": function() {
                        alert("try to submit form");
                        $("#wtgpt_form_id_exampleonly").submit();
                    },

line 23 to 25 :
            $('form#' + form_id).submit(function(e){
                alert("just before submitting the form");
                e.preventDefault(); // STOP FORM SUBMISSIOn


0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36577689
I'm not sure about all that. This script worked how I wanted it, just fine, until I come to making the ID and form name variables.

But yes you have it right. No form submission is wanted on the first press, I want to display a confirmation box. That is being displayed fine.

What no longer works is the "try to submit form" part. I will add the alerts and see what it teaches.
0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36577697
Not sure if it is a big deal but I notice this alert...

alert("just before submitting the form");

happening a 2nd time when I click the button inside the dialogue box. Is that not because we're now using the ID instead of form name for the 2nd submission? Just guessing, new to this.

Enjoying it.
0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36577701
Changes too...

$("#<?PHP echo $form_name ?>").submit();

and I no longer get the very first alert happening a second time. I do get the second alert though, but no page refresh with a form submission happening.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36577702
no submit() fire submit event

and line 23 you want to be noticed (and run some code) each time this event is fired :             $('form#' + form_id).submit(function(e){

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36577706
$("#<?PHP echo $form_name ?>").submit();

is a bad syntax so javascript stop working, your form is submitted

# is for ID
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36577708
replace : $("#<?PHP echo $form_name ?>").submit();
by : a = a; // or any useless code

it will work too
0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36577712
Sorry I don't understand what you meant in your last comment.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36577725
this line : $("#<?PHP echo $form_name ?>").submit();

say to jQuery to find an unknown form an submit it.
it don't find it so it don't submit anything
this is a useless line of code (#+formname)
0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36577729
That comment was not about your very last comment, you must have added it when I was writing.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36577735
in fact my last comment is better because javascript don't stop run, it's just a useless line because the ID used (based on the name) is not the right one so nothing is submitted
0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36577750
This works...

           "Submit Form": function() {
                        //document.form_name.submit();
                        alert("try to submit form");
                        document.<?PHP echo $form_name ?>.submit();
                    },

You have  been a great help. Original question was on variables, you helped me understand some ways to use them so thanks a lot.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36577768
This works...

           "Submit Form": function() {
                        //document.form_name.submit();
                        alert("try to submit form");
                        document.<?PHP echo $form_name ?>.submit();
                    },

cool, should work too :

           "Submit Form": function() {
                        //document.form_name.submit();
                        alert("try to submit form");
                        document.getElementById("<?PHP echo $form_id ?>").submit();
                    },

0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36583827
Ah nice to know thanks. This thread was good education, making good progress but I'll be on again no doubt so see you later.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

937 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now