Take variable from a PHP file using AJAX/JavaScript

Question

I have a form that uses AJAX and Javascript to submit itself.

HTML:

<h3>Sign Up Here</h3>
<form name="signupform" id="signupform" onsubmit="return false;">
<div>Username:</div>
<input id="username" type="text" onblur="checkusername()" onkeyup="restrict('username')" maxlength="16" />
<span id="unamestatus"></span>
<div>Email Address:</div>
<input id="email" type="text" onfocus="emptyElement('status')" onkeyup="restrict('email')" maxlength="88" />
<div>Create Password:</div>
<input id="pass1" type="password" onfocus="emptyElement('status')" />
<div>Confirm Password:</div>
<input id="pass2" type="password" onfocus="emptyElement('status')" />
<div>Gender:</div>
<select id="gender" onfocus="emptyElement('status')">
    <option value=""></option>
    <option value="m">Male</option>
    <option value="f">Female</option>
</select>
<div>Country:</div>
<select id="country" onfocus="emptyElement('status')">
    <option value="england">England</option>
</select>
<button id="signupbtn" onclick="signup()">Create Account</button>
<span id="status"></span>

Ajax/JS:

function signup(){
    var u = _("username").value;
    var e = _("email").value;
    var p1 = _("pass1").value;
    var p2 = _("pass2").value;
    var c = _("country").value;
    var g = _("gender").value;
    var status = _("status");

    if(u == "" || e == "" || p1 == "" || p2 == "" || c == "" || g == ""){
        status.innerHTML = "Message 1"; 
    } else if (p1 != p2){
        status.innerHTML = "Message 2!";
    } else {
        _("signupbtn").style.display = "none";  
        status.innerHTML = "please wait...";
        var ajax = ajaxObj("POST", "signup.php");
        ajax.onreadystatechange = function(){
            if(ajaxReturn(ajax) == true){
                if(ajax.responseText != "signup_success"){
                    status.innerHTML = ajax.responseText;
                    _("signupbtn").style.display = "block"; 
                } else {
                    _("signupform").innerHTML = "Message 3";
                }
            }
        }
        ajax.send("u="+u+"&e="+e+"&p="+p1+"&c="+c+"&g="+g);
    }
}

As you see, I have Message 1, Message 2 and Message 3 in my second code. Here is the part I'm in trouble: I will have multiple language files containing some variables associated with some texts. For example, in my french.php file I will have: $welcome = 'Bonjour!'. Then I will check the default language inside the a MySQL table and will determine wich is it. That's simple. But how can I make AJAX take the $welcome variable and use it instead of Message 1 for example?

For Sharikov:

<head>
<?= include_once("language.php"); ?>
<script type="text/javascript"> 
    window.onload = function() {
        function _(x){ 
            return document.getElementById(x); 
        } 
        var welcome = <?=json_encode($welcome);?>
        _("test").innerHTML = '<h2>Mesajul este: ' + welcome + '</h2>'; 
    }
</script>
</head>
<body>
   <div id="test"></div>
</body>

why not just handle generating `Message 1`, `Message 2`, `Message 3` strings in `signup.php` or a related function (e.g. generate the response messages server-side inside the PHP half of the AJAX call rather than doing it after the fact on the client side via JS). Then you can check for localization within the PHP script itself and return the translated `Message 1`, `Message 2` or `Message 3` as part of the AJAX response. — Ennui, Apr 16 '14 at 19:09
I've been thinking about this and `signup.php` would be overloaded if I put all of the messages inside the `signup.php`. I will have multiple php files containing same variables, but different values will be declared. For example: inside the `english.php` file, `$welcome` will be set to "Welcome", but in `french.php`, same variable will be set to "Bonjour". Before including the files, I will check inside SQL database to see what default language is set. If it is set to french, it will include `french.php`. The way I can display that messages is the only problem. — Sergiu Neagu, Apr 16 '14 at 19:43

score 0 · Accepted Answer · edited May 23 '17 at 12:27

0

NEW ANSWER FOR ADDED CODE

<?= include_once("language.php"); ?> — this is wrong. You can use <?= only when you outputting variable (<?=$welcome;?> == <?php echo $welcome; ?>). You have to remove = sign from this php tag. <? include_once("language.php"); ?> is correct.

Use console.log(welcome) or alert(welcome) to be sure, that welcome is assigned.

OLD ANSWER You output this js and html throw php, right?

You can use this:

// some php code
?>
<script type="text/javascript">
    var welcome = <?=json_encode($welcome); ?>
    // alert(welcome); // to make sure value is assigned in js
</script>
<?
//more php code or html output

You have to use <?=json_encode($welcome); ?> instead of simple <?=$welcome;?>. Explanation by Marc B:

Never dump arbitrary text from PHP into javascsript code. You are HIGHLY likely to introduce a JS syntax error and kill the entire script. ALWAYS use json_encode: <?= json_encode($welcome) ?>

Additional example:

// more php
include_once("language.php"); 
// var_dump($welcome); // to debug what value assigned to $welcome
?> 
<script type="text/javascript"> 
    window.onload = function() {
        function _(x){ 
        return document.getElementById(x); 
        } 
        var welcome = <?=json_encode($welcome);?>
        _("test").innerHTML = '<h2>Mesajul este: ' + welcome + '</h2>'; 
    }
</script>
<?
// more php

edited May 23 '17 at 12:27

Community

1
1

answered Apr 16 '14 at 18:28

Sharikov Vladislav

7,049
9
50
87

1

Never dump arbitrary text from PHP into javascsript code. You are HIGHLY likely to introduce a JS syntax error and kill the entire script. **ALWAYS** use json_encode: `= json_encode($welcome) ?>` – Marc B Apr 16 '14 at 18:35
Thank you. I edited my answer. Btw, I am going to edit my js files now :)) Thank you. I didn't now it. I checked variables, what I want to output in js, with php. – Sharikov Vladislav Apr 16 '14 at 18:38
Thank you, guys! It can't get it working, can you please help me with this? `= include_once("language.php"); ?> ` This is my code in the header of the file and it's printing 1 even if my variable is set to a text inside the language.php file. – Sergiu Neagu Apr 16 '14 at 18:41
My `#test` div still prints 1, even if my `$welcome` variable inside the `language.php` file is set to "Hello!"... – Sergiu Neagu Apr 16 '14 at 19:02
Where `$welcome` is assigned? try `var_dump($welcome);` and say me what it returns. Look edition. – Sharikov Vladislav Apr 16 '14 at 19:04
`var_dump` returns `string(6) "Hello!"`. $welcome is assigned inside the language.php file, it's just `$welcome = "Hello!";` The `include_once` and the javascript lines are both in the header of my page. The `#test` div is inside the body. – Sergiu Neagu Apr 16 '14 at 19:07
Try `alert(welcome);` in js code. I edited answer. What alert show? – Sharikov Vladislav Apr 16 '14 at 19:11
Btw. There was mistake: ``. Do you use firebug or same tool? Better to use when you work with html, css, js etc. I edited code again, but firstly try to remove 2nd `` from the code. If this will not solve the problem try onload function. – Sharikov Vladislav Apr 16 '14 at 19:18
Yes, I've seen that in the first place and I've removed it. I've just edited my question so you can see how my script looks like (simplified a little bit). – Sergiu Neagu Apr 16 '14 at 19:26
It looks like it works, there is a problem with my `innerHTML`. Anyway, winning answer. – Sergiu Neagu Apr 17 '14 at 14:38
`console.log(_("test").innerHTML)` – Sharikov Vladislav Apr 17 '14 at 15:13
@MarcB Can you eplain why I have to use `json_encode`? I tried it in my code in url and symbol `/` was converted into `%22` and url (was assumed to variable)had become broken – Sharikov Vladislav Apr 17 '14 at 18:05

Take variable from a PHP file using AJAX/JavaScript

1 Answers1