HTMLのフォームからjqueryスクリプトに変数の値を渡すにはどうすればいいですか？

-3

変数reportIdとapiTokenの値を、HTMLページのフォームのフィールドからjqueryスクリプトに渡す方法を知っておく必要があります。、以下を参照してください：HTMLのフォームからjqueryスクリプトに変数の値を渡すにはどうすればいいですか？

<!DOCTYPE html> 
 

 
<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8" /> 
 
     <title></title> 
 
     
 
     <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
 
     <script> 
 

 
      var reportId = "XXXXXXXXXXXX", // Required 
 
       apiToken = "YYYYYYYYYY", // Required 
 

 
       containerId = "embeddedReport", // Required 
 

 
       documentId = "", // Optional 
 
       dateRange = {"mode": "LAST_7_DAYS"}, // Optional 
 
       slicer = { 
 
         
 
\t \t \t \t }, // Optional 
 

 
       // Report size 
 
       width = 1000, 
 
       height = 400, 
 

 
       // leave that variable NULL 
 
       ReportToken = null; 
 

 
      
 

 
      function getReportTokenJS(apiToken, reportId, width, height, containerId) { 
 
       var payLoadData = createPayLoadData(); 
 

 
       if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
 
        xmlhttp = new XMLHttpRequest(); 
 
       } 
 
       else {// code for IE6, IE5 
 
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
 
       } 
 
       xmlhttp.onreadystatechange = function() { 
 
        if (xmlhttp.readyState != 4) { 
 

 
        } 
 
        if (xmlhttp.readyState == 4 && xmlhttp.status >= 200 && xmlhttp.status < 300) { 
 
         var data = JSON.parse(xmlhttp.responseText); 
 
         ReportToken = data.token; 
 
         var iframe = document.createElement('iframe'); 
 
         iframe.style.width = width + 'px'; 
 
         iframe.style.height = height + 'px'; 
 
         iframe.src = 'https://app.somepage.com/reports/' + ReportToken; 
 
         document.getElementById(containerId).appendChild(iframe); 
 
        } 
 
       } 
 
       xmlhttp.open("POST", "https://app.somepage.com/1/embeddedReports", true); 
 
       xmlhttp.setRequestHeader("Content-type", "application/json"); 
 
       xmlhttp.send(JSON.stringify(payLoadData)); 
 

 

 
      }; 
 

 
      function createPayLoadData() { 
 
       if (apiToken == "" || apiToken == null || reportId == "" || reportId == null) { 
 
        console.log("ERROR: apiToken Or reportId is missing"); 
 
        return false; 
 
       } else { 
 
        var payLoadData = {}; 
 
        payLoadData.apiToken = apiToken; 
 
        payLoadData.reportId = reportId; 
 
       } 
 

 
       if (documentId != "" && documentId != null) { 
 
        payLoadData.documentId = documentId; 
 
       } 
 

 
       if (Object.keys(dateRange).length > 0) { 
 
        payLoadData.dateRange = dateRange; 
 
       } 
 

 
       if (Object.keys(slicer).length > 0) { 
 
        payLoadData.slicer = slicer; 
 
       } 
 

 
       return payLoadData; 
 
      }; 
 
     </script> 
 
    </head> 
 
    <body> 
 

 
    <button type="button" onclick="getReportTokenJS(apiToken, reportId, width, height, containerId);">generate embedded report</button> 
 
     <div id="embeddedReport"></div> 
 

 
    
 

 
    </body> 
 
\t 
 
</html>

してください、私はどこかにこの例を見つけたので、私は本当にjqueryの中でプログラムする方法を知らないことを考えます。私がここで提供しているコードを修正している完全な実例は、どうやってやるのかを示すだけの方法です。

出典

2016-06-27 Stack101

場合レムは知っている（**「なぜ、このコードが動作しません？」 **）は*質問の中に**必要な動作*、*特定の問題またはエラー*、*それを再現するのに必要な最短コード**を含まなければなりません**。 **明確な問題文**のない質問は他の読者には役に立たない。参照：[最小限で完全で検証可能なサンプルの作成方法]（http://stackoverflow.com/help/mcve） –

jQueryを使用すると、フォーム内のinputコントロールのIDを使用してフォームから値を取得するのが非常に簡単です。

各入力コントロールに一意のid属性を追加します。次に、あなたのJavascriptで、そのIDを使用して入力コントロールの値にアクセスします。

また、onclickイベントハンドラのすべてのパラメータを渡す必要はありません。

<!DOCTYPE html> 
 

 
<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8" /> 
 
     <title></title> 
 
     
 
     <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
 
     <script> 
 

 
      var reportId = "XXXXXXXXXXXX", // Required 
 
       apiToken = "YYYYYYYYYY", // Required 
 

 
       containerId = "embeddedReport", // Required 
 

 
       documentId = "", // Optional 
 
       dateRange = {"mode": "LAST_7_DAYS"}, // Optional 
 
       slicer = { 
 
         
 
\t \t \t \t }, // Optional 
 

 
       // Report size 
 
       width = 1000, 
 
       height = 400, 
 

 
       // leave that variable NULL 
 
       ReportToken = null; 
 

 
      
 

 
      function getReportTokenJS(apiToken, reportId, width, height, containerId) { 
 
       var payLoadData = createPayLoadData(); 
 

 
       if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
 
        xmlhttp = new XMLHttpRequest(); 
 
       } 
 
       else {// code for IE6, IE5 
 
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
 
       } 
 
       xmlhttp.onreadystatechange = function() { 
 
        if (xmlhttp.readyState != 4) { 
 

 
        } 
 
        if (xmlhttp.readyState == 4 && xmlhttp.status >= 200 && xmlhttp.status < 300) { 
 
         var data = JSON.parse(xmlhttp.responseText); 
 
         ReportToken = data.token; 
 
         var iframe = document.createElement('iframe'); 
 
         iframe.style.width = width + 'px'; 
 
         iframe.style.height = height + 'px'; 
 
         iframe.src = 'https://app.somepage.com/reports/' + ReportToken; 
 
         document.getElementById(containerId).appendChild(iframe); 
 
        } 
 
       } 
 
       xmlhttp.open("POST", "https://app.somepage.com/1/embeddedReports", true); 
 
       xmlhttp.setRequestHeader("Content-type", "application/json"); 
 
       xmlhttp.send(JSON.stringify(payLoadData)); 
 

 

 
      }; 
 

 
      function createPayLoadData() { 
 
       // Retrieve the values from the form 
 
       var apiToken = $('#apiToken').val(); 
 
       var reportId = $('#reportId').val(); 
 

 
       if (apiToken == "" || apiToken == null || reportId == "" || reportId == null) { 
 
        console.log("ERROR: apiToken Or reportId is missing"); 
 
        return false; 
 
       } else { 
 
        var payLoadData = {}; 
 
        payLoadData.apiToken = apiToken; 
 
        payLoadData.reportId = reportId; 
 
       } 
 

 
       if (documentId != "" && documentId != null) { 
 
        payLoadData.documentId = documentId; 
 
       } 
 

 
       if (Object.keys(dateRange).length > 0) { 
 
        payLoadData.dateRange = dateRange; 
 
       } 
 

 
       if (Object.keys(slicer).length > 0) { 
 
        payLoadData.slicer = slicer; 
 
       } 
 

 
       return payLoadData; 
 
      }; 
 
     </script> 
 
    </head> 
 
    <body> 
 

 
    <form> 
 
    <input id="apiToken" /> 
 
    <input id="reportId" /> 
 
    </form> 
 

 
    <button type="button" onclick="getReportTokenJS();">generate embedded report</button> 
 
     <div id="embeddedReport"></div> 
 

 
    
 

 
    </body> 
 
\t 
 
</html>

出典

2016-06-27 22:41:37

私はコンソールから次のように見つけました：file：//code.jquery.com/jquery-1.12.0.min.jsリソースのロードに失敗しました：net :: ERR_FILE_NOT_FOUNDどうすればこの問題を解決できますか？ – Stack101

スクリプトライブラリsrc属性をhttps：//で始まるように変更します。したがって、https：// code.jquery.com/jquery-1.12.0.min.jsになるはずです –

あなたはjQueryとHTMLに新しいしているので、私は、コードスニペットですべてを説明しようとします。

var reportId = "XXXXXXXXXX", 
 
    apiToken = "YYYYYYYYYY", 
 
    ReportToken = null, 
 
    width = 100, 
 
    height = 100; 
 

 
function getResponseTokenJS() { 
 
    var payLoadData = createPayloadData(); // A function we'll create later. It returns either an object or a false boolean value. 
 
    if (payLoadData != false) { 
 
    $.ajax({ // jQuery's syntax for creating AJAX requests 
 
     url: "https://app.somepage.com/1/embeddedReports", 
 
     type: "POST", 
 
     contentType: "application/json", 
 
     dataType: "json", 
 
     data: payLoadData, 
 
     success: function(data) { // if it succeeds with data 
 
     this.ResponseToken = data.token; 
 
     $('#embeddedReport').append("<iframe src='https://app.somepage.com/reports/'"+this.ResponseToken)+" width=" + this.width + " height=" + this.height); 
 
     } 
 
    }); 
 
    } 
 
} 
 

 
function createPayloadData() { 
 
    if (this.apiToken=="" || this.apiToken==null || this.reportId=="" || this.reportId==null) { 
 
    // If any of the two values do not instantiate with values... 
 
    console.log("ERROR: missing apiToken or reportId"); 
 
    return false; 
 
    } 
 
    else { 
 
    var payloadData = {}; 
 
    payloadData.apiToken = this.apiToken; 
 
    payloadData.reportId = this.reportId; 
 
    return false; 
 
    } 
 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"/> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <title>Pass the values of a variable</title> 
 
</head> 
 
    
 
<body> 
 
    <button type="button" class="embed" onclick="getReportTokenJS()">Generate Embedded Report</button> 
 
    <div id="embeddedReport"></div> 
 
</body>

URLが有効ではありませんので、実装してください、それはデバッグの助けを求める質問を働くか

出典

2016-06-27 23:06:00 cr05s19xx

HTMLのフォームからjqueryスクリプトに変数の値を渡すにはどうすればいいですか？

答えて

関連する問題