2015-10-25 4 views
0

У меня есть проблема в моем javascript, что мои элементы формы не печатаются. Я работаю над проверкой переднего конца. Я использую здесь document.getElementById для получения элементов формы, но она возвращает пустой в окне Elert ..
Вот мой код:Элементы формы не печатаются?

<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Interns</title> 


    <link rel="stylesheet" type="text/css" href="CompanyRegestration.css"> 

</head> 
<body> 

<div id="FormDiv"> 
<form> 

<div id="ParagraphDiv"> 
    <p id="HeadingParagraph">Complete the Form for regestration</p> 
    <hr id="HeadingLine"> 
</div> 
<div id="RequiredDiv"><p id="RequiredParagraph">*Required</p></div> 

<div class="DataDivs"><input id="FirstName" type="text" name="FirstName" placeholder="First Name"></div> 
<div class="DataDivs"><input id="LasttName" type="text" name="LastName" placeholder="Last Name"></div> 
<div class="DataDivs2"><input id="Email" type="text" name="Email" 
           placeholder="Enter your Email address (i.e  [email protected])"></div> 
<div class="DataDivs"><input id="CompanyName" type="text" name="CompanyName" placeholder="CompanyName"></div> 

<div class="DataDivs"><input id="Phone" type="text" name="Phone"  placeholder="Phone"></div> 
<div class="DataDivs"><input id="Website" type="text" name="Website"  placeholder="Website"></div> 
<div class="DataDivs"><input id="Location" type="text" name="Location" placeholder="Location"></div> 
<div class="DataDivs"><input id="Password" type="password" name="Password" placeholder="Password"></div> 
<div class="DataDivs"><input id="RePassword" type="password" name="RePassword" placeholder="RePassword"></div> 
<input type="submit" value="submit" onClick="getFormElements()"> 
</form> 
</div> 

Вот код JavaScript:

<script> 
var FirstName=document.getElementById("FirstName");//it will get element by id from the form 
var FirstNameValue=new String(FirstName.value); 
window.alert(FirstNameValue); 
</script> 
</body> 

+1

Ваш JS должен быть внутри getFormElements() – Mistergreen

ответ

1

Используйте некоторые JQuery с этим следующим образом: https://jsfiddle.net/2Lzo9vfc/9/

HTML

<div class="DataDivs"><input id="FirstName" type="text" name="FirstName" placeholder="First Name"></div> 
<button id="button">Check name</button> 

JS

$('#button').click(function() { 
var FirstName=document.getElementById("FirstName");//it will get element by id from the form 
var FirstNameValue = FirstName.value; 
window.alert(FirstNameValue); 
}); 

Редактировать

Кроме того, для формы работы вам нужно, если вы не используете Аякс

<form action="whereYouSendData.php" method="POST"> 

</form> 
+0

У меня есть один вопрос для вас. Можем ли мы использовать javascript и jquery-код внутри одного тега сценария? –

+1

Конечно, вы можете. –

1

Вы написали яваскрипт функцию на клике of submit in input element, Но не написано внутри тегов скриптов, Так что это сработает;

<script> 
 
function getFormElements(){ 
 
\t var FirstName=document.getElementById("FirstName");//it will get element by id from the form 
 
\t var FirstNameValue=new String(FirstName.value); 
 
\t window.alert(FirstNameValue); 
 
} 
 
</script>

<script> function getFormElements(){ var FirstName=document.getElementById("FirstName");//it will get element by id from the form var FirstNameValue=new String(FirstName.value); window.alert(FirstNameValue); } </script>

1

Вы делаете это правильно ... Но нет обработчика события вы используете.

Например, если я использую обработчик событий 'blur' при имени, тогда, когда пользователь имеет поле, событие будет срабатывать, и ваш код будет выполнен.

Есть 2 способа сделать это в гипсе:

One:

Изменения Имени ввода тег.

<input id="FirstName" type="text" onblur="show_first_name();" name="FirstName" placeholder="First Name"> 

И изменить сценарий:

function show_first_name() { 
    var FirstName=document.getElementById("FirstName"); 
    var FirstNameValue=FirstName.value(); 
    window.alert(FirstNameValue); 
} 

Два:

Оставьте свое имя поля, как это.

Изменения сценарий:

document.getElementById('FirstName').onblur = function() { 
    var FirstName = this; 
    var FirstNameValue = this.value(); 
    window.alert(FirstNameValue); 
} 

Надеется, что это помогает.

Смежные вопросы