How to send data from Java method to java script function?

Question

I have created a pop up window using Java script. I want to display a string on that pop up window which is returned from a Java method. I have created a controller and mapped the parameters. But the string is not displaying correctly.

Here is my java script function which displays the pop up window but string value is not showing up.

<script>

function myFunction() {

    alert(${random_number});
}
</script>

Here is the java method which I want to take the string generated.

public class VerificationCode {

final static int numOfDigits = 4;
String PINString = "";
int randomPIN = 0;

public  String RandomNumber() {

    for(int i = 0; i<numOfDigits; i++){
        randomPIN = (int)(Math.random() * 8) + 1;
        PINString = PINString+String.valueOf(randomPIN);
    }

    return PINString;
}

}

This is the controller I wrote. I wonder whether this is correct since I have less experience with this.

public class PopupController {

@RequestMapping(value = "/register-login", method = RequestMethod.POST)
public String viewUserRegistrationPage(ModelMap model) {
    VerificationCode vc = new VerificationCode();
    String print_val = vc.RandomNumber();
    model.addAttribute("random_number", print_val);
    //return "text";
    return "user-management";
}

}

What I want to do is display the string value "PINString" on the pop up window created using java script function "myFunction()". I use IntelliJ as my IDE and JBoss server.

edited: relevant HTML form

<div class="form-group">
<div class="col-sm-8 col-sm-offset-4 col-md-offset-4" onclick="myFunction()">
<input type="submit" value="Register"
class="btn btn-primary btn-flat w-min-120"
data-toggle="modal" data-target="#myModal"/>                                                          
</div>
 <input type="hidden" id="myInput" value="${random_number}">
 <script>

//When the user clicks on div, open the popup
function myFunction() {
//var str = VerificationCode.RandomNumber();
alert("myInput");
}
   </script>
</div>

Answer 1

I guess you need to update your JS function:

 <script type="text/javascript"> function myFunction(){ var number=document.getElementById("myInput").getAttribute("value"); alert(number); } </script> 

In html page should be included jstl tag and added expression:

<c:out value='${random_number}'/>

HTML code:

 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <div class="form-group"> <div class="col-sm-8 col-sm-offset-4 col-md-offset-4" onclick="myFunction()"> <input type="submit" value="Register" class="btn btn-primary btn-flat w-min-120" data-toggle="modal" data-target="#myModal"/> </div> <input type="hidden" id="myInput" value="<c:out value='${random_number}'/>"> <script> //When the user clicks on div, open the popup function myFunction() { //var str = VerificationCode.RandomNumber(); alert("myInput"); } </script> </div>