Solved

Pass PHP Variables to JavaScript

Posted on 2011-09-21
29
347 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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Test ddwrt:UserLookup 1 24
PHP string issue 5 18
WampServer not functioning remotely on port 80 10 23
showing numeric numbers 2 11
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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…

747 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

12 Experts available now in Live!

Get 1:1 Help Now