Javascript-無法獲取文本字段的值

Question

我正在嘗試制作一個應用程序，該應用程序將根據表單中給出的電子郵件搜索json占位符用戶列表，並且出於測試目的，我將搜索結果打印到控制台。

這是我正在使用的javascript：

<script type="text/javascript">
var mail = document.getElementById("mail").value;
var root = 'http://jsonplaceholder.typicode.com/users?email=';
$.ajax({
    url : root + mail,
    method : 'GET'
}).then(function(data) {
    document.getElementById("ime").value = data[0].name;
});
</script>

當我直接在代碼中輸入郵件時，它可以正常工作：

mail='Sincere@april.biz';

但是，當我使用getElementById時，它將向控制台輸出空行。 不為空，為空，只是為了澄清。

我嘗試了另一種獲取郵件的方式：

var mail = "<c:out value="${param.email}" />";

現在，這里發生的是打印出我想要的內容。 如果我連續兩次提交同一封郵件。 我不知道為什么會這樣。

我還將添加我的表格，也許是錯誤所在：

<form
            action="<%=response.encodeURL(request.getContextPath()
                + "/upisKorisnika.html")%>"
            method="POST">
            <table id='userInput' class="display" border="0"
                style="font-family: Arial; font-size: 18px;">
                <tr>
                    <td><c:out value="Ime: " /></td>
                    <td><input type="text" name="ime"></td>
                </tr>
                <tr>
                    <td><c:out value="Prezime: " /></td>
                    <td><input type="text" name="prezime"></td>
                </tr>
                <tr>
                    <td><c:out value="E-mail: " /></td>
                    <td><input type="text" id="mail" name="email"></td>
                </tr>

                <tr>
                    <td colspan="2" style="text-align: center"><input
                        type="submit" name="unesiButton" value="Unesi"></td>
                </tr>
            </table>
            <input type="hidden" id="ime" name="imePretraga" />
        </form>

我會很感激您的協助，我在這個問題上堅持了幾個小時。

基於評論，我嘗試在“提交”按鈕上運行腳本：

<script type="text/javascript">
function submitform(){
var mail = document.getElementById("mail").value;

var root = 'http://jsonplaceholder.typicode.com/users?email=';
$.ajax({
    url : root+mail,
    method : 'GET'
}).then(function(data) {
    document.getElementById("ime").value = data[0].name;
});
document.getElementById("myForm").submit();
}
</script>

這是按鈕：

<button onClick="submitform()">Unesi</button>
                        </td>

而且我已將ID添加到表單中以進行提交。 它仍然不起作用。 我相當確定是這樣，因為它無法正確接收郵件。 關於為什么會這樣的任何可能的建議？

Answer 1

好吧 因此，在嘗試編寫包括javascript的HTML文件時，我對此有一些個人經驗。 我有一個標簽，希望用戶單擊我制作的按鈕，然后它將從表單中獲取值。 經過數小時的研究，我發現了

document.getElementById()

這個變體是

document.getElementById().value

給定一個帶有id的html表單，請調用我列出的第二個函數（.value one），該函數在括號中用該表單的ID引起，並在ID周圍加上引號。 這將從表格中獲取所有文本。

例如

<br />
<form>
Input text here
<input id="testform" type="text">
</form>
<button onClick="submitform()">Submit</button>
<script>
function submitform(){
form_data=document.getElementById("testform").value;
}
</script>

因此，上述操作需要HTML輸入，並且在單擊按鈕時，它將form_data變量設置為表單內容的值。 因此，如果用戶在表單中輸入“ name”，則form_data =“ name”希望能有所幫助。

記得

document.getElementById().value