Как прочитать входные данные в форме?

Я только начинаю изучать JavaScript и поэтому мало знаю о том, как используются формы или как их читать. Я пытаюсь поиграть с геокодом Google, и мне нужна помощь в создании JS-формы для чтения.

У меня есть следующий код JS, выводящий долготу и широту, и мне просто нужна форма для хранения некоторых адресов. Код, который у меня есть, выглядит следующим образом:

var geocoder = new google.maps.Geocoder();
var address  = document.getElementById("address").value;
geocoder.geocode( {'address': address}, function(results, status) {
    if(status == google.maps.GeocoderStatus.OK)
    { 
        results[0].geometry.location.latitude
        results[0].geometry.location.longitude
    }
    else
    {
        alert("Geocode was not successful for the following reason: " + status)
    }
});

Если возможно, мне нужна помощь в создании формы, из которой этот код может считывать адрес, где ElementID = «адрес». Как будет выглядеть такая форма? Я был бы очень признателен, если бы кто-нибудь уделил минуту или две и объяснил, как JS работает с формой. Любая помощь приветствуется! Спасибо вам, ребята.


javascript forms html google-geocoder
person swedishcheef    schedule 18.05.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Сначала создайте форму в html. Включите в него свой внешний файл javascript.

<head>
<script type="text/javascript" src="index.js"></script> //index.js is name of  javascript file which is in same location of this jsp page.
</head>
<body>
<form name="EmployeeDetails" action="ServletEmployee" method="post">
Employee Name:<input type="text" id="name"><br>
EmployeeID:<input type="text" id="employID"><br>
<input type="submit" value="Submit">
</form>  
<input type="button" name="Click" id="mybutton" onclick="myButtonClick">
</body>

В вашем внешнем файле javascript... это index.js

window.onload = function(){ // function which reads the value from html form on load without any button click.
var employeename = document.getElementById("name").value;
var employeeid = document.getElementById("employID").value;
alert("Name : "+employeename+" : EmployeeID : "+employeeid);
}

function myButtonClick(){  // function to read value from html form on click of button.
var empname = document.getElementById("name").value;
var empid = document.getElementById("employID").value;
alert("Name : "+empname+" : EmployeeID : "+empid);
}
person Arun    schedule 18.05.2016
comment
Спасибо, Арун! Ценю ответ. - person swedishcheef; 18.05.2016
comment
Пожалуйста, попробуйте это, и если вы считаете, что это правильно, отметьте это как ответ, это будет полезно другим. - person Arun; 18.05.2016
comment
Сделанный. Могу я попросить вас взглянуть на мой второй вопрос: stackoverflow.com/questions/37304295/ Спасибо! - person swedishcheef; 18.05.2016

arrow_upward
1
arrow_downward

JS не волнует, что это за элемент, вам просто нужно получить ссылку на форму из DOM, после чего вы можете делать то, что хотите (получать значение).

простая форма может выглядеть так

<form>
 First name:<br>
 <input type="text" id="firstname"><br>
 Address:<br>
 <input type="text" id="address">
</form>
<button onclick="myFunc()">Done!</button>

Поэтому, когда кнопка нажата, она запустит функцию myFunc, которая получит ваши данные из формы и предупредит ее.

function myFunc(){
  var name = document.getElementById("firstname").value;
  var address = document.getElementById("address").value;
  alert(name + " lives at " + address);
}

подробнее о получении элементов по идентификатору здесь https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

вы также можете использовать jquery

function myFunc(){
  var name = $("#firstname").val();
  var address = $("#address").val();
  alert(name + " lives at " + address);
}

https://api.jquery.com/id-selector/

person axrami    schedule 18.05.2016
comment
Спасибо, аксрами! Я ценю ответ! - person swedishcheef; 18.05.2016
comment
Могу я попросить вас взглянуть на мой второй вопрос: stackoverflow.com/questions/37304295/ Спасибо! - person swedishcheef; 18.05.2016