Getting undefined value for input control
Question
In the following html and javascript code(codepen - https://codepen.io/manuchadha/pen/OJVXdzb ), I wan to print the value of the input control but I am getting the value as undefined - filename is undefined . Why?
<!DOCTYPE html>
<html>
<head>
<title>some title</title>
<script src="jquery/jquery-3.3.1.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div id="add-more-answer-div">
<div id="answer-filename-div">
<label id="filename-label" for="answer-filename">Name</label>
<input type="text" id="answer-filename" />
<button
type="button"
id="more-answer-button"
onclick="createNewAnswerSection()"
>
Add More Sections
</button>
</div>
</div>
</body>
</html>
function createNewAnswerSection() {
console.log("will create new answer section");
var answerNameControl = $("#answer-filename");
console.log("answer name control is ", answerNameControl);
if (answerNameControl.value === "") {
alert("give a filename to the answer");
} else {
console.log("filename is ", answerNameControl.value);
}
}
3 answers
solution1
1 2020-02-19 07:08:15
请使用 answerNameControl.val() 而不是 answerNameControl.value
solution2
0 ACCPTED 2020-02-19 07:03:13
You should use val() at all !
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="add-more-answer-div"> <div id="answer-filename-div"> <label id="filename-label" for="answer-filename">Name</label> <input type="text" id="answer-filename"> <button type="button" id="more-answer-button" onclick="createNewAnswerSection()">Add More Sections</button> </div> </div> <script> function createNewAnswerSection() { console.log("will create new answer section"); var answerNameControl = $("#answer-filename").val(); console.log("answer name control is ", answerNameControl); if (answerNameControl === '') { alert("give a filename to the answer"); } else { console.log("filename is ", answerNameControl); } } </script>
solution3
0 2020-02-19 07:07:34
You are missing the syntax of jQuery , You are using answerNameControl.value which is not the valid synatx instead you can use $(answerNameControl).val() to get the value Your updated code is as below
<html> <head> <title>some title</title> <script src="jquery/jquery-3.3.1.min.js"></script> <script src="index.js"></script> </head> <body> <div id="add-more-answer-div"> <div id="answer-filename-div"> <label id="filename-label" for="answer-filename">Name</label> <input type="text" id="answer-filename"> <button type="button" id="more-answer-button" onclick="createNewAnswerSection()">Add More Sections</button> </div> </div> </body> </html> <script> function createNewAnswerSection(){ console.log("will create new answer section"); var answerNameControl = $("#answer-filename"); console.log("answer name control is ",answerNameControl); if($(answerNameControl).val() === ''){ alert("give a filename to the answer"); } else { console.log("filename is ",$(answerNameControl).val()); } }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.