Use HTML variable inside JavaScript

Question

Possible Duplicate:
Pass a PHP string to a Javascript variable (including escaping newlines)

Let's say there is some PHP file called as scheduler.php. It contains a script

<script>
window.setInterval(function(){
    find_opt_schedule();
}, 60000);
</script>

... and some PHP code:

<form action="scheduler.php" method="post">
    <select name="refresh" id="refresh">
            <option value="30000">30000</option>
            <option value="60000" selected>60000</option>
            <option value="120000">120000</option>
    </select>
</form>

How do I use the value selected by the user from refresh select list inside the script? In particular, I want to replace 60000 by the variable that must be selected by the user from the list. I tried this, but the refresh rate is very high instead of 60000 miliseconds.

window.setInterval(function(){
    find_opt_schedule();
    alert(<?php echo (int)$_POST['refresh']; ?>);
}, <?php echo (int)$_POST['refresh']; ?>);

Of course the value is high... You set it to either 0, 1, or 2 milliseconds in your select. You need the value attributes to actually contain the number of milliseconds you want to use: , etc. — Major Productions, Aug 29 '12 at 17:58
Do you have a submitbutton or so? Or do you expect the form to submit itself? See my [edit](http://stackoverflow.com/a/12183749/1319787) — Green Black, Aug 29 '12 at 18:13

score 5 · Answer 1 · answered Aug 29 '12 at 17:58

5

Your values should be (30000, 60000, 120000), not (0, 1, 2). The POST field contains the value of the selected option, not the text.

Note: You should have been able to figure this out by checking the source of the resulting HTML document. The "1" ought to stick out like a sore thumb.

answered Aug 29 '12 at 17:58

lc.

113,939
20
158
187

Thanks. Please see my updated post. But the problem is still the same. Have I missed something else? – You Kuper Aug 29 '12 at 18:03
@YouKuper Yes, you've now got a new alert but you aren't setting an interval anymore? Again, what's the resulting HTML look like (do a view source or stare at FireBug's HTML pane)? Otherwise are you using POST, is it really called "refresh", is the select in the same form as your submit button, ...? – lc. Aug 29 '12 at 18:05
Firebug does not provide any error messages. My HTML pane contains a lot of DIV elements,it's difficult to follow it. I can clearly see that the function find_opt_schedule() is executed every milisecond. – You Kuper Aug 29 '12 at 18:17
Maybe I do not need to write
, because it's the same file?
– You Kuper Aug 29 '12 at 18:18
Yes, you have a different problem now. Look at @Stephen305's answer. Or add a submit button. PHP is only run on the server at the time the page is first generated. – lc. Aug 29 '12 at 18:19

Green Black · Accepted Answer · 2012-08-29T18:28:23.180

3

<select name="refresh" id="refresh">
    <option value="30000">30000</option>
    <option value="60000" selected>60000</option>
    <option value="120000">120000</option>
</select>   


window.setInterval(function(){
    find_opt_schedule();
}, <?php echo (int)$_POST['refresh']; ?>);

And make sure you use:

<form action="yourscript.php" method="post" name="form" id="form">

And a submitbutton, or javascript:

<select name="refresh" id="refresh" onchange="form.submit()">

<input type="submit" value="Set refresh"/>

All together, with session storage:

<?php 
 session_start();
 if( isset( $_POST['refresh']) ){
   $_SESSION['refresh'] = (int) $_POST['refresh'];
 }
 ?>

<script type="text/javascript">
 window.setInterval(function(){
    find_opt_schedule();
}, <?php echo isset($_SESSION['refresh'])?$_SESSION['refresh']:120000; ?>);
</script>

<form action="scheduler.php" method="post" name="form" id="form">
  <select name="refresh" id="refresh" onchange="form.submit()">
    <option value="30000">30000</option>
    <option value="60000" selected="selected">60000</option>
    <option value="120000">120000</option>
 </select>  
 <input type="submit" value="Set refresh"/>
</form>

edited Aug 29 '12 at 18:28

answered Aug 29 '12 at 17:55

Green Black

5,037
1
17
29

I tried your update. Alert() says 0, although 60000 is selected. Also, alert message appears every second instead of every minute. – You Kuper Aug 29 '12 at 17:58
@YouKuper You *are* submitting the form, right? – lc. Aug 29 '12 at 18:13
@John: Do I need to write
, if it's the same file?
– You Kuper Aug 29 '12 at 18:18
Yes, that would be correct. And you need to submit the form, as I explain in my last edit. – Green Black Aug 29 '12 at 18:19
I edited my post again, this time with a thingy that stores your setting... – Green Black Aug 29 '12 at 18:27
@John: Now Zend Server's Log says: PHP Notice: Undefined index: refresh in C:\Program Files (x86)\Zend\Apache2\htdocs\test\modules\mod_scheduler\scheduler.php on line 47 – You Kuper Aug 29 '12 at 18:30
what is on line 47? Are you sure you copied my code correctly? It should not give that error with the code provided. – Green Black Aug 29 '12 at 18:32
@John: I copied once again your updated code. Now Firebug says nothing, but Zend Log generates this "[29-Aug-2012 20:39:14] TimeStamp Hoy: 1346191200 Time stam Acrtual: 1346265554". And the function find_opt_schedule is not executed. – You Kuper Aug 29 '12 at 18:42
It's fine now. Thanks. There was another little problem in my code. – You Kuper Aug 29 '12 at 18:50

Stephen305 · Answer 3 · 2012-08-29T18:07:04.220

0

Use JQuery:

<html>
<body>

<select name="refresh" id="refresh">
    <option value="30000">30000</option>
    <option value="60000" selected>60000</option>
    <option value="120000">120000</option>
</select>


<script type="text/javascript" src="jquery.js"></script>          
<script type="text/javascript">                                         
    function setInterval(refresh_rate)
    {
        window.setInterval(function(){
          find_opt_schedule();
        }, refresh_rate);
    }

    $(function(){
         $('#refresh').change(function () {setInterval($(this).val());});
    }
</script>  

</body>
</html>

edited Aug 29 '12 at 18:07

answered Aug 29 '12 at 18:01

Stephen305

1,077
3
22
30

You know what, +1. I'm probably reading between the lines in your post but I think you're actually on to something here. Maybe the OP isn't *submitting* the form, they're trying to use the result on the same page. The point isn't really "use jQuery", it's "use JavaScript to find out the selected option and act on it - PHP only works at the moment the page is generated" though...jQuery just makes getting the selected refresh element *slightly* easier. – lc. Aug 29 '12 at 18:08
Blindly answering "Use JQuery" doesn't help. We don't know enough about what he's doing to even suggest something more dynamic like this, regardless of whether it's JQuery, Prototype, mooTools, or plain Javascript. – Izkata Aug 29 '12 at 18:08

score -1 · Answer 4 · answered Aug 29 '12 at 17:57

Erm... that's just plain HTML. All you need is to read it and adjust the timeout as needed:

<script>
  (function() {
    var start = new Date().getTime(),
        selector = document.getElementById('refresh');
    setInterval(function() {
      // check if timer has run out
      var now = new Date().getTime();
      if( now-start > selector.value) {
        find_opt_schedule();
        start = now;
      }
    },1000);
  })();
</script>

Use HTML variable inside JavaScript

4 Answers4