2016-11-16 13 views
0

我無法正確地使這個腳本功能正常工作。Javascript:「if」表單得到的值是「on」

我想讓表單輸入的值在操作頁面上顯示或隱藏不同的部分。

例如,下面的html代碼顯示所有標題文本都以隱藏方式啓動,但javascript函數應根據表單的GET值取消隱藏該部分。

其結果是,以顯示「自定義」部分中,該鏈接將是http://domain.tld/action.php?custom=on

以下是需要基於表單值要顯示/隱藏的部分。

<div id="customsection" onload="javascript:customCheck();" style="display:none" class="custom"> 
    <h1>Custom Text</h1> 
</div> 

<div id="whitesection" onload="javascript:whiteCheck();" style="display:none" class="white"> 
    <h1>White Text</h1> 
</div> 

<div id="colorsection" onload="javascript:colorCheck();" style="display:none" class="color"> 
    <h1>Colored Text</h1> 
</div> 

這裏是我的腳本功能:

function customCheck() { 
    if ($_GET['custom'] == 'on') { 
     document.getElementById('customsection').style.display = 'block'; 
    } 
    else document.getElementById('customsection').style.display = 'none'; 

} 
function colorCheck() { 
    if ($_GET['color'] == 'on') { 
     document.getElementById('colorsection').style.display = 'block'; 
    } 
    else document.getElementById('colorsection').style.display = 'none'; 

} 
function whiteCheck() { 
    if ($_GET['white'] == 'on') { 
     document.getElementById('whitesection').style.display = 'block'; 
    } 
    else document.getElementById('whitesection').style.display = 'none'; 

} 

什麼是錯的腳本/我怎樣才能解決這個問題?

在此先感謝!

+0

你會考慮jQuery嗎?我將在下面寫出一個答案,因爲它看起來像是將php和javascirpt混合在一起。 – Icewine

+0

@Iwwine我沒有jquery的經驗,但如果它適用於這種情況,那麼我一定會使用它。我很確定我的語法是不正確的,但我認爲這是解決之前的問題,所以我嘗試了。 –

回答

1

**把這個網頁的你的頭標籤,以便它會運行一次你的HTML載入**

你可能想看看isset()函數PHP函數,所以你可以檢查$ _GET設置或不

<script> 
    $(document).ready(function(){ 

     // -------------------------------------------------------- 
     // Just for convienience, set the gets as javascript variables 
     // so the bottom functions are cleaner 
     // -------------------------------------------------------- 

     var custom = "<?php echo $_GET['custom']; ?>"; 
     var color = "<?php echo $_GET['color']; ?>"; 
     var white = "<?php echo $_GET['white']; ?>"; 

     // -------------------------------------------------------- 
     // On document load run these 3 functions 
     // -------------------------------------------------------- 

     customCheck(); 
     colorCheck(); 
     whiteCheck(); 

     // -------------------------------------------------------- 
     // Create functions 
     // -------------------------------------------------------- 
     function customCheck() { 
      if (custom == 'on') { 

       document.getElementById('customsection').style.display = 'block'; 
      } else { 
       document.getElementById('customsection').style.display = 'none'; 
      } 
     } 

     function colorCheck() { 
      if (color == 'on') { 
      document.getElementById('colorsection').style.display = 'block'; 
      } else { 
       document.getElementById('colorsection').style.display = 'none'; 
      } 
     } 

     function whiteCheck() { 
      if (white == 'on') { 
       document.getElementById('whitesection').style.display = 'block'; 
      } else { 
       document.getElementById('whitesection').style.display = 'none'; 
      } 
     } 

     // -------------------------------------------------------- 

    }); 
</script> 

這正好無論你的HTML是你的身體內。

<div id="customsection" style="display:none" class="custom"> 
    <h1>Custom Text</h1> 
</div> 

<div id="whitesection" style="display:none" class="white"> 
    <h1>White Text</h1> 
</div> 

<div id="colorsection" style="display:none" class="color"> 
    <h1>Colored Text</h1> 
</div>