隱藏並顯示div

Question

嗨我有一個表單，我想如果我點擊提交按鈕顯示圖我試圖把表放在一個div標籤，我不知道如何標記這個看不見，如果我點擊按鈕圖形的，可以請大家幫忙米

<form class="form-analyste" name="MyForm" action="{{ path('ConstruireGraph')}}" method="post" id="crs" > 
<input name="send_button" type="submit" value="Valider" class="cssbutton" /> 
</form> 
<div id="chartdiv" style="width: 100%; height: 400px;"> 
</div> 

顯示我有這樣的代碼加載一個圖：使用jquery

<script type="text/javascript"> 
var chart; 
var chartData = []; 


// generate some random data, quite different range 
function generateChartData() { 
    var firstDate = new Date(); 
    var i = 0; 
    firstDate.setDate(firstDate.getDate() - 50); 

    while (i < 50) { 
     var newDate = new Date(firstDate); 
     newDate.setDate(newDate.getDate() + i); 
{% for gra in gra %} 

     var HO_ATT_DL_LEVEL_RATE = {{gra.HO_ATT_DL_LEVEL_RATE}}; 
     var SDCCH_DROP_RATE = {{gra.SDCCH_DROP_RATE}}; 
     var HO_ATT_BETTER_CELL_RATE = {{gra.HO_ATT_BETTER_CELL_RATE}}; 

     chartData.push({ 
      date: newDate, 
      HO_ATT_DL_LEVEL_RATE: HO_ATT_DL_LEVEL_RATE, 
      SDCCH_DROP_RATE: SDCCH_DROP_RATE, 
      HO_ATT_BETTER_CELL_RATE: HO_ATT_BETTER_CELL_RATE, 
      HO_ATT_BETTER_CELL_RATE: HO_ATT_BETTER_CELL_RATE 
     });{% endfor %} 

     i++; 
    } 
} 

// this method is called when chart is first inited as we listen for "dataUpdated" event 
function zoomChart() { 
    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues 
    chart.zoomToIndexes(10, 20); 
} 

// create chart 
AmCharts.ready(function() { 
    // generate some random data first 
    generateChartData(); 

    // SERIAL CHART  
    chart = new AmCharts.AmSerialChart(); 
    chart.marginTop = 0; 
    chart.autoMarginOffset = 5; 
    chart.pathToImages = "http://www.amcharts.com/lib/images/"; 
    chart.zoomOutButton = { 
     backgroundColor: '#000000', 
     backgroundAlpha: 0.15 
    }; 
    chart.dataProvider = chartData; 
    chart.categoryField = "date"; 

    // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens 
    chart.addListener("dataUpdated", zoomChart); 

    // AXES 
    // category     
    var categoryAxis = chart.categoryAxis; 
    categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true 
    categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD 
    categoryAxis.dashLength = 2; 
    categoryAxis.gridAlpha = 0.15; 
    categoryAxis.axisColor = "#DADADA"; 

    // first value axis (on the left) 
    var valueAxis1 = new AmCharts.ValueAxis(); 
    valueAxis1.axisColor = "#FF6600"; 
    valueAxis1.axisThickness = 2; 
    valueAxis1.gridAlpha = 0; 
    chart.addValueAxis(valueAxis1); 

    // second value axis (on the right) 
    var valueAxis2 = new AmCharts.ValueAxis(); 
    valueAxis2.position = "right"; // this line makes the axis to appear on the right 
    valueAxis2.axisColor = "#FCD202"; 
    valueAxis2.gridAlpha = 0; 
    valueAxis2.axisThickness = 2; 
    chart.addValueAxis(valueAxis2); 

    // third value axis (on the left, detached) 
    valueAxis3 = new AmCharts.ValueAxis(); 
    valueAxis3.offset = 50; // this line makes the axis to appear detached from plot area 
    valueAxis3.gridAlpha = 0; 
    valueAxis3.axisColor = "#B0DE09"; 
    valueAxis3.axisThickness = 2; 
    chart.addValueAxis(valueAxis3); 
    var valueAxis4 = new AmCharts.ValueAxis(); 
    valueAxis4.offset = 100; // this line makes the axis to appear detached from plot area 
    valueAxis4.axisColor = "#1E90FF"; 
    valueAxis4axisThickness = 2; 
    valueAxis4.gridAlpha = 0; 
    chart.addValueAxis(valueAxis4); 
    // GRAPHS 
    // first graph 
    var graph1 = new AmCharts.AmGraph(); 
    graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used 
    graph1.title = "HO_ATT_DL_LEVEL_RATE"; 
    graph1.valueField = "HO_ATT_DL_LEVEL_RATE"; 
    graph1.bullet = "round"; 
    graph1.hideBulletsCount = 30; 
    chart.addGraph(graph1); 

    // second graph     
    var graph2 = new AmCharts.AmGraph(); 
    graph2.valueAxis = valueAxis2; // we have to indicate which value axis should be used 
    graph2.title = "SDCCH_DROP_RATE"; 
    graph2.valueField = "SDCCH_DROP_RATE"; 
    graph2.bullet = "square"; 
    graph2.hideBulletsCount = 30; 
    chart.addGraph(graph2); 

    // third graph 
    var graph3 = new AmCharts.AmGraph(); 
    graph3.valueAxis = valueAxis3; // we have to indicate which value axis should be used 
    graph3.valueField = "HO_ATT_BETTER_CELL_RATE"; 
    graph3.title = "HO_ATT_BETTER_CELL_RATE"; 
    graph3.bullet = "triangleUp"; 
    graph3.hideBulletsCount = 30; 
    chart.addGraph(graph3); 
    var graph4 = new AmCharts.AmGraph(); 
    graph4.valueAxis = valueAxis4; // we have to indicate which value axis should be used 
    graph4.valueField = "HO_ATT_BETTER_CELL_RATE"; 
    graph4.title = "HO_ATT_BETTER_CELL_RATE"; 
    graph4.bullet = "bubble"; 
    graph4.hideBulletsCount = 30; 
    chart.addGraph(graph4); 
    // CURSOR 
    var chartCursor = new AmCharts.ChartCursor(); 
    chartCursor.cursorPosition = "mouse"; 
    chart.addChartCursor(chartCursor); 

    // SCROLLBAR 
    var chartScrollbar = new AmCharts.ChartScrollbar(); 
    chart.addChartScrollbar(chartScrollbar); 

    // LEGEND 
    var legend = new AmCharts.AmLegend(); 
    legend.marginLeft = 110; 
    chart.addLegend(legend); 

    // WRITE 
    chart.write("chartdiv"); 
}); 



     </script> 

Answer 1

它會很容易，只設置這樣的元素的CSS屬性：

$('element').css(visibility,hidden); <-- to hide it, and visible to show it, maybe you could add all this to a click event on the submit form, also you can use some other techniques like fadeIn() and fadeOut(). 

Answer 2

我不知道你想要的...查看下面的代碼...

HTML：

<div> 
    <div name="graph"></div> 
    <button type="button" onClick="toggle()"></button> 
</div> 

的JavaScript：

function toggle(){ 
    var graph=this.parentNode.getElementsByName('graph')[0]; 
    var style=window.getComputedStyle(graph).display; 
    if(style=='none'){ 
      graph.style.display='online'; // you can also use 'block' instead of 'online' 
      this.innerHTML='Show'; 
    }else{ 
      graph.style.display='none'; 
      this.innerHTML='Hide'; 
    } 
} 

Answer 3

如果我明白你的問題是顯示/隱藏div標籤內沒有提交表格，

$(document).ready(function() { 
    $('.cssbutton').click(function(event) { 
     event.preventDefault();     
     $('#chartdiv').toggle(); 
    }); 
}); 

Answer 4

設置顯示 「chartdiv」 的屬性沒有

<div id="chartdiv" style="width: 100%; height: 400px; display: none;"></div> 

添加一個click事件驗證者按鈕。

<input name="send_button" type="submit" value="Valider" class="cssbutton" onclick="showHide();" /> 

，並編寫以下腳本來執行功能

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js"></script> 

<script type="text/javascript" language="javascript"> 
var flag=0; 
function showHide() 
{ 
if(flag==0){ 
    $('#chartdiv').show(); 
    flag=1; 
    } 
    else 
    { 
    $('#chartdiv').hide(); 
    flag=0; 
    } 
} 
</script> 

我希望這有助於你