Solved

Pass PHP Variables to JavaScript

Posted on 2011-09-21
29
353 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 
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
 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to count occurrences of each item in an array.

726 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