An issue when passing a PHP parameter to a JavaScript function

Question

I the following code, I have a form that consists of three fields and two buttons. In the Review button, I would like to show any word in Arabic randomly and let the user show its translation in English by ticking the Show translation button.

<html>
<body>

<script>
    function myFun1(var) {
        document.getElementById("demo").innerHTML = "The translation in English is  " + var;
    }        
</script>

<?php
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        $english = $_POST["english"];
        $arabic = $_POST["arabic"];
        $example = $_POST["example"];
    }
?>

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
    <textarea name="english" rows="4" cols="70" placeholder="English">English</textarea>
    <br>
    <textarea name="arabic" rows="4" cols="70" placeholder="Arabic">Arabic</textarea>
    <br>
    <textarea name="example" rows="4" cols="70" placeholder="Example">Example</textarea>

    <br><br>

    <input type="submit" name="add" value="Add new">
    <input type="submit" name="review" value="Review">

    <br>

    <p id="demo"></p>
</form>

<?php

$servername = "localhost";
$username = "xxx";
$password = "yyy";
$dbname = "vdb";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

if (isset($_POST['add'])) {
    $sql = "INSERT INTO Vocabulary (English, Arabic, Example)
    VALUES ('$english', '$arabic', '$example')";

    if ($conn->query($sql) === TRUE) {
        echo "New record created successfully";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }
}
elseif (isset($_POST['review'])) {
    $sql = "SELECT COUNT(ID) as total FROM Vocabulary";
    $result = $conn->query($sql);
    $row = $result->fetch_assoc();
    #echo $row['total'];

    $generated = rand(1,$row['total']);

    $sql1 = "SELECT * FROM Vocabulary where ID = $generated";
    $result1 = $conn->query($sql1);
    $row1 = $result1->fetch_assoc();

    echo "<br>";
    echo $row1['Arabic'];

    echo "<br><br>";

    $eng = $row1['English'];

    echo '<button onClick = "myFun('.$eng.')">Show translation</button>';

}

$conn->close();
?>

</body>
</html>

In the code, the following line creates the button and trigger the myFun1() function:

echo '<button onClick = "myFun('.$eng.')">Show translation</button>';

The problem is when the button is clicked, nothing happens (the message is not shown at all). Any ideas how to fix it?

You have function myFun1(var) but call onClick = "myFun('.$eng.')"? — Sean
– Sean, Commented Oct 14, 2017 at 20:24
var is a reserved word in javascript. Name the argument something else — charlietfl
– charlietfl, Commented Oct 14, 2017 at 20:40

Ashish Kularia · Accepted Answer · 2017-10-14 21:09:02Z

2

Firstly change the argument var to some another argument name as var is a keyword in javascript

 <script type="text/javascript">
        function myFun(as) {
            document.getElementById("demo").innerHTML = "The translation in English is  " + as;
        }        
 </script>

Secondly, you have to pass the string value in single or double quotes for that use inverted slash \ and rectify the function name from myFun() to myFun1()

echo '<button onClick = "myFun1(\''.$eng.'\')">Show translation</button>';

Rest your code is perfect.

answered Oct 14, 2017 at 21:09

Ashish Kularia

507 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Richard Gewissler · Accepted Answer · 2017-10-14 20:48:00Z

0

You have definition of function myFun1(var), but you are calling myFun(). I guess this is the problem why there is nothing after clicking on button.

answered Oct 14, 2017 at 20:48

Richard Gewissler

11 bronze badge

1 Comment

Adam Amin Over a year ago

I fixed it but the issue is still there

user8776728 · Accepted Answer · 2017-10-14 20:23:02Z

-1

Add this to the top before

< html > tag

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $english = $_POST["english"];
    $arabic = $_POST["arabic"];
    $example = $_POST["example"];
}
?>

answered Oct 14, 2017 at 20:23

user8776728

3 Comments

Sean Over a year ago

Why does it need to be moved before the <html> tag? php is parsed before the html is output, so it doesn't make a difference

user8776728 Over a year ago

@Sean Is just a header check is before any output that the reason why when you use header location or session you got some error "... sending by ouput", and this check isn't a php parse i don't see any echo inside the IF. Is also a bad pratice...

user8776728 Over a year ago

function myFun1(change_this_param_name_with_no_reserved_name) as @charlietfl just tell you is 100% your error cos using reserved name.

Collectives™ on Stack Overflow

An issue when passing a PHP parameter to a JavaScript function

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related