2016-04-14 15 views
0

私はこのまま午後すべてお手伝いしており、何が間違っているのかはわかりません。私はjsを初めて使っていて、どこが間違っているのか分からない。私はいくつかのソリューションを試してみましたが、いずれも機能していません。私はjfiddleでjsをテストしましたが、それは機能していましたが、他の場所では動作しません。隠しフォームの入力を追加する

非常に助かりました。

<script language="JavaScript"> 
<!-- 

/*********************************************** 
* Required field(s) validation v1.10- By NavSurf 
* Visit Nav Surf at http://navsurf.com 
* Visit http://www.dynamicdrive.com/ for full source code 
***********************************************/ 

function formCheck(formobj){ 
    // Enter name of mandatory fields 
    var fieldRequired = Array("name", "Address", "city", "state", "zip", "phone", "email", "tradeShow"); 
    // Enter field description to appear in the dialog box 
    var fieldDescription = Array("name", "Address", "city", "state", "zip", "phone", "email", "tradeShow"); 
    // dialog message 
    var alertMsg = "Please complete the following fields:\n"; 

    var l_Msg = alertMsg.length; 

    for (var i = 0; i < fieldRequired.length; i++){ 
     var obj = formobj.elements[fieldRequired[i]]; 
     if (obj){ 
      switch(obj.type){ 
      case "select-one": 
       if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){ 
        alertMsg += " - " + fieldDescription[i] + "\n"; 
       } 
       break; 
      case "select-multiple": 
       if (obj.selectedIndex == -1){ 
        alertMsg += " - " + fieldDescription[i] + "\n"; 
       } 
       break; 
      case "text": 
      case "textarea": 
       if (obj.value == "" || obj.value == null){ 
        alertMsg += " - " + fieldDescription[i] + "\n"; 
       } 
       break; 
      default: 
      } 
      if (obj.type == undefined){ 
       var blnchecked = false; 
       for (var j = 0; j < obj.length; j++){ 
        if (obj[j].checked){ 
         blnchecked = true; 
        } 
       } 
       if (!blnchecked){ 
        alertMsg += " - " + fieldDescription[i] + "\n"; 
       } 
      } 
     } 
    } 

    if (alertMsg.length == l_Msg){ 
     return true; 
    }else{ 
     alert(alertMsg); 
     return false; 
    } 
} 
// --> 
</script> 

<form action="submit.asp" id="qrCodeForm" method="post" onsubmit="return formCheck(this);"> 
    <!-- Display Name --> 
    <div class="row"> 
     <div class="col-xs-12 col-md-4">Name:</div> 
     <div class="col-xs-12 col-md-6 col-md-offset-1"><input type="text" id="name" runat="server" /></div> 
    </div> 

    <!-- Display CompanyName --> 
    <div class="row"> 
     <div class="col-xs-12 col-md-4">Company Name:</div> 
     <div class="col-xs-12 col-md-6 col-md-offset-1"><input type="text" id="companyName" runat="server" /></div> 
    </div> 

    <!-- Display Address --> 
    <div class="row"> 
     <div class="col-xs-12 col-md-4">Your Address:</div> 
     <div class="col-xs-12 col-md-5 col-md-offset-1 si-qr-address"> 
      <div class="col-xs-12"><input type="text" id="address" runat="server" class="col-xs-12" placeholder="Address" /></div> 
      <div class="col-xs-6"><input type="text" id="city" runat="server"  class="col-xs-12" placeholder="City" /></div> 
      <div class="col-xs-3"> 
       <select class="colors_text col-xs-12" name="state"> 
        <option value=""></option> 
        <option value="AL">AL</option> 
        <option value="AK">AK</option> 
        <option value="AZ">AZ</option> 
        <option value="AR">AR</option> 
        <option value="CA">CA</option> 
        <option value="CO">CO</option> 
        <option value="CT">CT</option> 
        <option value="DE">DE</option> 
        <option value="DC">DC</option> 
        <option value="FL">FL</option> 
        <option value="GA">GA</option> 
        <option value="HI">HI</option> 
        <option value="ID">ID</option> 
        <option value="IL">IL</option> 
        <option value="IN">IN</option> 
        <option value="IA">IA</option> 
        <option value="KS">KS</option> 
        <option value="KY">KY</option> 
        <option value="LA">LA</option> 
        <option value="ME">ME</option> 
        <option value="MD">MD</option> 
        <option value="MA">MA</option> 
        <option value="MI">MI</option> 
        <option value="MN">MN</option> 
        <option value="MS">MS</option> 
        <option value="MO">MO</option> 
        <option value="MT">MT</option> 
        <option value="NE">NE</option> 
        <option value="NV">NV</option> 
        <option value="NH">NH</option> 
        <option value="NJ">NJ</option> 
        <option value="NM">NM</option> 
        <option value="NY">NY</option> 
        <option value="NC">NC</option> 
        <option value="ND">ND</option> 
        <option value="OH">OH</option> 
        <option value="OK">OK</option> 
        <option value="OR">OR</option> 
        <option value="PA">PA</option> 
        <option value="RI">RI</option> 
        <option value="SC">SC</option> 
        <option value="SD">SD</option> 
        <option value="TN">TN</option> 
        <option value="TX">TX</option> 
        <option value="UT">UT</option> 
        <option value="VT">VT</option> 
        <option value="VA">VA</option> 
        <option value="WA">WA</option> 
        <option value="WV">WV</option> 
        <option value="WI">WI</option> 
        <option value="WY">WY</option> 
       </select> 
      </div> 
      <div class="col-xs-3"><input type="text" id="zip" runat="server"  class="col-xs-12" placeholder="Zip Code" /></div> 
     </div> 
    </div> 

    <!-- Display Phone --> 
    <div class="row"> 
     <div class="col-xs-12 col-md-4">Phone Number:</div> 
     <div class="col-xs-12 col-md-6 col-md-offset-1"><input type="text" id="phone" runat="server" /></div> 
    </div> 

    <!-- Display Email --> 
    <div class="row"> 
     <div class="col-xs-12 col-md-4">Email:</div> 
     <div class="col-xs-12 col-md-6 col-md-offset-1"><input type="text" id="email" runat="server" /></div> 
    </div> 

    <!-- Display TradeShow --> 
    <div class="row"> 
     <div class="col-xs-12 col-md-4">How did you find us?</div> 
     <div class="col-xs-12 col-md-6 col-md-offset-1"><input type="text" id="tradeShow" runat="server" /></div> 
    </div> 

<script language="javascript"> 
    function addInput(val) { 
     var input = document.createElement('input'); 
     input.setAttribute('name', 'QR Code URL'); 
     input.setAttribute('type', 'text'); 
     input.setAttribute('value', val); 
     document.body.appendChild(input); 

     //document.write("<input type='hidden' name='QR Code URL3' id='qrCodeUrl3' value=" + window.location.pathname + ">"); 
     //document.write(window.location.pathname); 
     document.write("<input type='hidden' name='QR Code URL3' id='qrCodeUrl3' value=" + val + ">"); 
     alert("PATH URL:" + val); 
    } 

    window.load function { 
     document.write("<input type='hidden' name='QR Code URL3' id='qrCodeUrl3' value=" + val + ">"); 
    } 

    addInput(window.location.pathname); 

    // $('<input>').attr({ 
    //  type: 'hidden', 
    //  id: 'foo', 
    //  name: 'bar', 
    //  value: window.location.pathname 
    // }).appendTo('form'); 



    // $('#qrCodeForm').append('<input type="hidden" name="qrCodeUrl4" value="' + window.location.pathname + '" />'); 


    //'QrUrl.Text = HttpContext.Current.Request.Url.AbsolutePath; 
</script> 
<!-- Qr Code Stuff --> 
<input name="QR Code URL2" id="QrUrl2" value="<asp print path; />" type="hidden"> 

    <!-- Display CAPTCHA --> 
    <div class="row"> 
     <div class="col-xs-12 col-md-4"><img class="captcha" ></div> 
     <div class="col-xs-12 col-md-6 col-md-offset-1"><input name="Verification_Code" type="text"></div> 
    </div> 

    <!-- Display Submit --> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="col-xs-10 col-xs-offset-1 col-md-4 col-md-offset-4"><input type="submit" value="Submit for Coupon Code" class="btn btn-lg btn-primary col-xs-12" alt="Submit for Coupon Code"></div> 
     </div> 
    </div> 
</form> 

最後のサイトではブートストラップが実行されます。私が働こうとしているのは、ドメインのない現在のURLを隠した入力を値として作成することだけです。

もう一度お返事ありがとうございます。

+0

スクリプト要素には言語属性はなく、要素内のHTMLコメント区切り文字は何十年も必要とされていません。 – RobG

答えて

1

あなた<form>要素に隠された要素を追加したい場合は、あなたはそれがdocument.getElementById()機能にid属性だ渡し、あなたが以前にあったようappendChild()機能を使って、それを参照することができます。

function addInput(val) { 
    var input = document.createElement('input'); 
    input.setAttribute('name', 'QR Code URL'); 
    input.setAttribute('type', 'hidden'); 
    input.setAttribute('value', val); 
    // Append this element to the form 
    document.getElementById('qrCodeForm').appendChild(input); 
} 

単に呼び出しますあなたの<script>タグの最後にこの:

addInput(window.location.pathname); 

することができますsee a working example/fiddle here

enter image description here

+0

"* ...あなたはそのIDで参照することができます... *"いいえ、それをしないでください。 'document.getElementById( 'qrCodeForm')'または 'document.forms( 'qrCodeForm')'などを使用してください。 – RobG

+0

私はこの例を更新しました。ほとんどの場合、 'getElementById()'関数を使っているので、私は 'id'アプローチを使うのは冒険的だと思います。 –

+0

IDを持つ各要素のwindowの名前付きプロパティを作成するのは、バージョン4を中心にIEの発明でした。これは決して良い考えではなく、他のブラウザはIEの95%それは持続する。 – RobG

1

あまりコードを投稿する必要はありません。How to create a Minimal, Complete, and Verifiable exampleとしてください。あなたのコードで

あなたが持っている:文書への入力を追加しますが、フォームに関連付けはありません

document.body.appendChild(input); 

。あなたはどちらの形式のIDを入力のフォーム属性を設定することもできますし、フォームの子として追加することができますので、次のいずれか

input.setAttribute('form', 'qrCodeForm'); 

または

document.getElementById('qrCodeForm').appendChild(input); 

または

document.querySelector('#qrCodeForm').appendChild(input); 

または類似物。

また、あなたが持っている:ページが読み込まれた後のdocument.write を呼び出す

document.write("<input type='hidden' name='QR Code URL3' id='qrCodeUrl3' value=" + val + ">"); 
    alert("PATH URL:" + val); 

は、文書の全体コンテンツ(頭と体)をクリアしますdocument.openを呼び出します。あなたが渡したものと置き換えれば、ドキュメントは隠された入力要素だけで構成されます。この方法でページに要素を追加しないでください。

関連する問題