Pass PHP Variables to JavaScript

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

LVL 2
Ryan BayneWordPress DeveloperAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
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
 
Ryan BayneWordPress DeveloperAuthor Commented:
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
 
Ryan BayneWordPress DeveloperAuthor Commented:
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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
leakim971PluritechnicianCommented:
$('#' + form_id).submit(function(e){
0
 
leakim971PluritechnicianCommented:
line 34 : $("#<?PHP echo $formid ?>").submit();
0
 
Ryan BayneWordPress DeveloperAuthor Commented:
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
 
leakim971PluritechnicianCommented:
check back again ID:36577238
and check the line in question, update your code
0
 
Ryan BayneWordPress DeveloperAuthor Commented:
           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
 
leakim971PluritechnicianCommented:
replace your line 34 :                             document.form_name.submit();
by : $("#<?PHP echo $formid ?>").submit();

0
 
Ryan BayneWordPress DeveloperAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
Ryan BayneWordPress DeveloperAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
Ryan BayneWordPress DeveloperAuthor Commented:
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
 
Ryan BayneWordPress DeveloperAuthor Commented:
Oh and no errors in console when clicking the dialogue button
0
 
leakim971PluritechnicianCommented:
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
 
Ryan BayneWordPress DeveloperAuthor Commented:
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
 
Ryan BayneWordPress DeveloperAuthor Commented:
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
 
Ryan BayneWordPress DeveloperAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
leakim971PluritechnicianCommented:
$("#<?PHP echo $form_name ?>").submit();

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

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

it will work too
0
 
Ryan BayneWordPress DeveloperAuthor Commented:
Sorry I don't understand what you meant in your last comment.
0
 
leakim971PluritechnicianCommented:
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
 
Ryan BayneWordPress DeveloperAuthor Commented:
That comment was not about your very last comment, you must have added it when I was writing.
0
 
leakim971PluritechnicianCommented:
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
 
Ryan BayneWordPress DeveloperAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
Ryan BayneWordPress DeveloperAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.