將HTML表單輸入傳遞到JavaScript到BaaS

我試圖在BaaS（後端）中存儲用戶HTML輸入字段值。在.js文件腳本中使用固定值並在頁面加載執行它，我能夠成功地存儲領域（apiEndpoint，apiSecretkey，emailAddress）到Request表：將HTML表單輸入傳遞到JavaScript到BaaS

function Request(args) { 
    args = args || {}; 
    this.apiEndpoint = args.apiEndpoint || ""; 
    this.apiSecretkey = args.apiSecretkey || ""; 
    this.emailAddress = args.emailAddress || ""; 
} 

var requestObject = new Request({ 
apiEndpoint: "https://api.foo.com/", 
apiSecretkey: "foo", 
emailAddress: "[email protected]", 
}); 

var savedRequest = Backendless.Persistence.of(Request).save(requestObject);

我想要做的是存儲變量（並在按鈕點擊，而不是頁面加載）。這裏是我非常基本的HTML表單：

<head> 
    <script src="libs/backendless.js"></script> 
    <script src="js/app.js"></script> 
</head> 

<body> 
    <form> 
     <input type="text" name="endpoint"><br> 
     <input type="text" name="secretkey"><br> 
     <input type="text" name="email"><br> 
     <input type="button" onclick="________" value="Submit"> 
    </form> 
</body>

和app.js與變量：當我點擊提交按鈕

function Request(args) { 
    args = args || {}; 
    this.apiEndpoint = args.apiEndpoint || ""; 
    this.apiSecretkey = args.apiSecretkey || ""; 
    this.emailAddress = args.emailAddress || ""; 
} 

var endpoint = document.getElementsByName("endpoint").value, 
    secretkey = document.getElementsByName("secretkey").value, 
    email = document.getElementsByName("email").value; 

var requestObject = new Request({ 
apiEndpoint: endpoint, 
apiSecretkey: secretkey, 
emailAddress: email, 
}); 

var savedRequest = Backendless.Persistence.of(Request).save(requestObject);

什麼也沒有發生。對於我的表單中的onclick=""，我試過Request(),JavaScript: Request()，Backendless.Persistence.of(Request).save(requestObject);。

我在做什麼錯？感謝幫助。

來源

2015-06-03 EricY

如果您粘貼的JavaScript是頁面上唯一的JavaScript，那麼它很可能在頁面加載時全部執行（這就是硬編碼值工作的原因，它們在加載時存在）。你想要的是當點擊提交按鈕時執行代碼。您可以通過爲onsubmit屬性賦值，然後在您的JavaScript中創建一個名爲sendData的函數。

編輯

看起來像我的忘記包括您巴斯實際調用搞砸功能。這是一個演示如何工作的片段。你絕對不希望onclick處理程序分配給你的提交按鈕。

此外，getElementsByName返回NodeList不是Element，所以沒有定義value財產，你必須通過列表迭代或訪問第一個元素。如果你不介意使用ID，那麼getElementById會更好。

function Request(args) { 
 
    args = args || {}; 
 
    this.apiEndpoint = args.apiEndpoint || ""; 
 
    this.apiSecretkey = args.apiSecretkey || ""; 
 
    this.emailAddress = args.emailAddress || ""; 
 
} 
 

 

 
function sendData() { 
 
    var endpoint = document.getElementById("endpoint").value, 
 
    secretkey = document.getElementById("secretkey").value, 
 
    email = document.getElementById("email").value; 
 

 
    var requestObject = new Request({ 
 
    apiEndpoint: endpoint, 
 
    apiSecretkey: secretkey, 
 
    emailAddress: email, 
 
    }); 
 
    alert('apiEndpoint = ' + requestObject.apiEndpoint + '\n' +'apiSecretkey = ' + requestObject.apiSecretkey + '\n' + 'emailAddress = ' + requestObject.emailAddress); 
 
    //var savedRequest = Backendless.Persistence.of(Request).save(requestObject); 
 
}

<body> 
 
    <form onsubmit="sendData()"> 
 
     <input type="text" id="endpoint"><br> 
 
     <input type="text" id="secretkey"><br> 
 
     <input type="text" id="email"><br> 
 
     <input type="submit" value="Submit"> 
 
    </form> 
 
</body>

來源

2015-06-03 23:48:11 bmceldowney

我創建的函數，並試圖'<形成的onsubmit = 「送出數據（）」>'與''但沒有運氣：/ I也嘗試使用'document.getElementById'而不是'document.getElementsByName'。 – EricY

@Eric，對不起，我通過省略Backendless調用搞砸了'sendData'函數。請參閱編輯的答案。 – bmceldowney

非常感謝。我使用'getElementById'並將調用封裝在一個函數中，數據成功存儲在表中！ – EricY

將HTML表單輸入傳遞到JavaScript到BaaS

回答

相關問題