ランダム番号。 0以外のフォーム表示

Question

乱数がゼロから15までの間であればフォームを表示したい。これは私が試したコードです。私はiframeを使用していますが、私は他の方法が必要です。そしてbooking.htmlには簡単な形式があります。私はiframeなしでそれを行う方法をしたい。あなたはjQueryを使ってあなたの質問をタグ付けしたよう

function myFunction(){ 
    var x=document.createElement("IFRAME"); 
    x.setAttribute("src","booking.html"); 
    x.style.height="700px"; 
    x.style.border="none"; 
    x.style.float="center"; 
    document.getElementById("ran").appendChild(x); 
} 
var z=Math.floor(Math.random()*15); 
if(z==0){ 
    document.getElementById("ran").innerHTML= 
     "sorry no seats available </br> Please select another date to book ticket"; 
}else{ 
    document.getElementById("ran").innerHTML= 
     "HURRY UP "+z+" seats available !!!</br></br>"; 
    window.onload=myFunction; 
} 

Answer 1

、あなたはload方法から利益を得ることができる：メッセージのための1つ、予約ページのための1：

<div id="ran"> 
    <div id="msg" style="white-space: pre"></div> 
    <div id="load"></div> 
</div> 

は、あなたのHTML内の2つの領域を定義します。

white-space: preは、HTMLエンコーディングに頼らずに、テキストの改行を容易にするためのものです。 JavaScriptで

：予約ページはあなたのサイトに属している場合

$(function() { 
    var z = Math.floor(Math.random()*15); 
    if (!z) { 
     // Preferably don't use html(), but text(): 
     $("#msg").text("Sorry, no seats available.\nPlease select another date to book ticket"); 
    } else { 
     $("#msg").text("HURRY UP, " + z + " seats available !!!"); 
     // Here comes the magic of jQuery which does all the Ajax stuff: 
     $("#load").load('booking.html'); 
    } 
}); 

しかし、なぜ一つだけにページをマージしませんか？それを含めることはできますが、style="display:none"で非表示にすることができます。

<div id="ran"> 
    <div id="msg" style="white-space: pre"></div> 
    <div id="booking" style="display:none"> <!-- hide initially --> 
     <!--- just example code. Put your own stuff here ---> 
     <form action="book.php" method="POST"> 
      Date from: <input type="text" id="from"><br> 
      Date until: <input type="text" id="until"><br> 
      <!-- etcetera .... --> 
     </form> 
    </div> 
</div> 

は次にJavaScriptで、あなたは空席がある場合にのみ、それを表示します：

$(function() { 
    var z = Math.floor(Math.random()*15); 
    if (!z) { 
     // Preferably don't use html(), but text(): 
     $("#msg").text("Sorry, no seats available.\nPlease select another date to book ticket"); 
    } else { 
     $("#msg").text("HURRY UP, " + z + " seats available !!!"); 
     $("#booking").show(); // Only show form when there are seats available. 
    } 
});