将文本字段值从php传递给javascript

时间:2017-04-26 11:36:15

标签: javascript php wordpress highcharts label

我创建了一个字段来为wordpress后台选择高清图标签,如下所示:

public static function sm_register_chart() {

    $charts = array();
    if( function_exists( 'wdt_get_all_charts_nonpaged')){
        foreach( wdt_get_all_charts_nonpaged() as $table ){

            $charts[$table['id']] = $table['title'];
        }
    }
    $captions = array();

    $fields = array(

        array(
            'label' => esc_html( 'Graphic' ),
            'description' => esc_html( 'Choose the graphic' ),
            'attr'    => 'chart',
            'type'    => 'select',
            'options' => $charts,
        ),
        array(
            'label' => esc_html( 'Footer label' ),
            'description' => esc_html( 'Choose the footer label' ),
            'attr' => 'footer_caption',
            'type' => 'text',
        ),

    );

我希望将footer_caption中输入的内容传递给我从这个小提琴中获取的js:http://jsfiddle.net/abenrob/ur02w4j5/

    Highcharts.setOptions({
  chart: {
          type: 'column',
          events: {
              load: function () {
                  var label = this.renderer.label("This text will adjust to chart resizing " +
                      "and redraws and will be visible on exported images.")
                  .css({
                      width: '400px',
                      fontSize: '9px'
                  })
                  .attr({
                      'r': 2,
                      'padding': 5
                  })
                  .add();

                  label.align(Highcharts.extend(label.getBBox(), {
                      align: 'center',
                      x: 0, // offset
                      verticalAlign: 'bottom',
                      y: 0 // offset
                  }), null, 'spacingBox');

              }
          },
          marginBottom: 120
      },
      legend: {
        align: 'center',
        verticalAlign: 'bottom',
        y: -30
    },

因此,var label = this.renderer.label("This text will adjust to chart resizing")取代footer_caption,而不是var labelText = document.querySelectorAll('[footer_caption]').text() var label = this.renderer.label(labelText)

我在考虑这样的事情:

createForm

但它不起作用,我甚至无法从footer_caption获取我输入的值

2 个答案:

答案 0 :(得分:0)

您可以通过执行以下操作来实现此目的;您可能需要根据自己的代码更改footer_caption的标识符;

<script type="text/javascript">

var footer_caption = <?= json_encode($arr['footer_caption']); ?>; 

</script>

然后在javascript代码中引用需要它的变量。

使用json_encode可确保正确处理非法字符等。上面的代码使用了PHP快速标记,可以找到更多参考here

答案 1 :(得分:0)

您可以使用json_encode执行此操作

<script>
  var footer_caption = <?php echo json_encode($fields); ?>;
</script>