我正在使用JavaScript进行搜索。我会使用一个表单，但它在我的页面上弄乱了其他东西。我有这个输入文本字段：
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>
这是我的JavaScript代码：
<script type="text/javascript">
function searchURL(){
window.location = "http://www.myurl.com/search/" + (input text value);
}
</script>
如何将文本字段中的值转换为JavaScript？
答案 0 :(得分：1568)
有多种方法可以直接获取输入文本框值（不将输入元素包装在表单元素中）：
方法1：
document.getElementById('textbox_id').value获取值 想要的盒子例如，
document.getElementById("searchTxt").value;
注意：方法2,3,4和6返回元素集合，因此请使用[whole_number]获取所需的元素。对于第一个元素，使用[0]， 对于第二个使用1，依此类推......
方法2：
使用
document.getElementsByClassName('class_name')[whole_number].value返回Live HTMLCollection例如，
document.getElementsByClassName("searchField")[0].value;如果这是您网页中的第一个文本框。
方法3：
使用
document.getElementsByTagName('tag_name')[whole_number].value也会返回实时HTMLCollection例如，
document.getElementsByTagName("input")[0].value;，如果这是您网页中的第一个文本框。
方法4：
document.getElementsByName('name')[whole_number].value也＆gt;返回实时NodeList例如，
document.getElementsByName("searchTxt")[0].value;如果这是您网页中第一个名为“searchtext”的文本框。
方法5：
使用强大的
document.querySelector('selector').value使用CSS选择器来选择元素例如，
选择document.querySelector('#searchTxt').value;由id选择 由班级选择的document.querySelector('.searchField').value;由标记名选择的document.querySelector('input').value;按名称document.querySelector('[name="searchTxt"]').value;
方法6：
document.querySelectorAll('selector')[whole_number].value也使用CSS选择器来选择元素，但它将所有带有该选择器的元素作为静态Nodelist返回。例如，
选择document.querySelectorAll('#searchTxt')[0].value;由id选择 由班级选择的document.querySelectorAll('.searchField')[0].value;由标记名选择的document.querySelectorAll('input')[0].value;按名称document.querySelectorAll('[name="searchTxt"]')[0].value;
支持
Browser Method1 Method2 Method3 Method4 Method5/6
IE6 Y(Buggy) N Y Y(Buggy) N
IE7 Y(Buggy) N Y Y(Buggy) N
IE8 Y N Y Y(Buggy) Y
IE9 Y Y Y Y(Buggy) Y
IE10 Y Y Y Y Y
FF3.0 Y Y Y Y N IE=Internet Explorer
FF3.5/FF3.6 Y Y Y Y Y FF=Mozilla Firefox
FF4b1 Y Y Y Y Y GC=Google Chrome
GC4/GC5 Y Y Y Y Y Y=YES,N=NO
Safari4/Safari5 Y Y Y Y Y
Opera10.10/
Opera10.53/ Y Y Y Y(Buggy) Y
Opera10.60
Opera 12 Y Y Y Y Y
有用的链接
答案 1 :(得分：23)
//creates a listener for when you press a key
window.onkeyup = keyup;
//creates a global Javascript variable
var inputTextValue;
function keyup(e) {
//setting your input text to the global Javascript Variable for every key press
inputTextValue = e.target.value;
//listens for you to press the ENTER key, at which point your web address will change to the one you have input in the search box
if (e.keyCode == 13) {
window.location = "http://www.myurl.com/search/" + inputTextValue;
}
}
答案 2 :(得分：14)
我会创建一个变量来存储输入，如下所示：
var input = document.getElementById("input_id").value;
然后我会使用该变量将输入值添加到字符串中。
= "Your string" + input;
答案 3 :(得分：13)
您也可以通过标记名称来调用，如下所示：form_name.input_name.value;
因此，您将以特定形式获得确定输入的特定值。
答案 4 :(得分：9)
您应该可以输入：
var input = document.getElementById("searchTxt");
function searchURL() {
window.location = "http://www.myurl.com/search/" + input.value;
}<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>
我确信有更好的方法可以做到这一点，但是这个方法似乎适用于所有浏览器，并且需要对JavaScript进行最少的理解才能制作，改进和编辑。
答案 5 :(得分：4)
试试这个
<input type="text" onkeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value) {
window.open("http://www.google.com/search?output=search&q=" + value)
}
</script>
答案 6 :(得分：3)
在Chrome和Firefox中测试：
按元素ID获取价值：
<input type="text" maxlength="512" id="searchTxt" class="searchField"/>
<input type="button" value="Get Value" onclick="alert(searchTxt.value)">
在表单元素中设置值：
<form name="calc" id="calculator">
<input type="text" name="input">
<input type="button" value="Set Value" onclick="calc.input.value='Set Value'">
</form>
https://jsfiddle.net/tuq79821/
另请参阅JavaScript计算器实现：http://www.4stud.info/web-programming/samples/dhtml-calculator.html
来自@ bugwheels94的更新：使用此方法时请注意this issue。
答案 7 :(得分：2)
可以使用form.elements获取表单中的所有元素。如果元素具有ID，则可以使用.namedItem（“ id”）找到它。示例：
var myForm = document.getElementById("form1");
var text = myForm.elements.namedItem("searchTxt").value;
var url = "http://www.myurl.com/search/" + text;
来源：w3schools
答案 8 :(得分：1)
<input id="new" >
<button onselect="myFunction()">it</button>
<script>
function myFunction() {
document.getElementById("new").value = "a";
}
</script>
答案 9 :(得分：1)
当您有更多输入字段时，可以使用onkeyup。假设您有四个或输入。
document.getElementById('something').value很烦人。我们需要写4行来获取输入字段的值。
因此，您可以创建一个在keyup或keydown事件发生时将值存储在对象中的函数。
示例：
<div class="container">
<div>
<label for="">Name</label>
<input type="text" name="fname" id="fname" onkeyup=handleInput(this)>
</div>
<div>
<label for="">Age</label>
<input type="number" name="age" id="age" onkeyup=handleInput(this)>
</div>
<div>
<label for="">Email</label>
<input type="text" name="email" id="email" onkeyup=handleInput(this)>
</div>
<div>
<label for="">Mobile</label>
<input type="number" name="mobile" id="number" onkeyup=handleInput(this)>
</div>
<div>
<button onclick=submitData()>Submit</button>
</div>
</div>
javascript：
<script>
const data={ };
function handleInput(e){
data[e.name] = e.value;
}
function submitData(){
console.log(data.fname); //get first name from object
console.log(data); //return object
}
</script>
答案 10 :(得分：1)
简单js
function copytext(text) {
var textField = document.createElement('textarea');
textField.innerText = text;
document.body.appendChild(textField);
textField.select();
document.execCommand('copy');
textField.remove();
}
答案 11 :(得分：1)
如果您的input位于form中，并且您希望在提交后获得价值，可以这样做
<form onsubmit="submitLoginForm(event)">
<input type="text" name="name">
<input type="password" name="password">
<input type="submit" value="Login">
</form>
<script type="text/javascript">
function submitLoginForm(event){
event.preventDefault();
console.log(event.target['name'].value);
console.log(event.target['password'].value);
}
</script>
这种方式的好处：例如，您的页面有 2 form个用于输入sender和receiver信息。
如果您没有使用form来获取价值，那么
-您可以为每个字段（例如id和tag，name和sender-name（或receiver-name或sender-address ...）设置2个不同的receiver-address（或getElementsByName或getElementsByTagName ...） sender，...
-如果为2个输入设置相同的值，那么在receiver（或form ...）之后，您需要记住0或1是form或name。稍后，如果您在html中更改2 address的顺序，则需要再次检查此代码
如果您使用sub create_mail {
my ( $self, $file_attachments, $mail_subject, $mail_body ) = @_;
my @mail_attachments;
if (@$file_attachments) {
foreach my $attachment (@$file_attachments) {
my $single_attachment = Email::MIME->create(
attributes => {
filename => basename($attachment),
content_type => "application/json",
disposition => 'attachment',
encoding => 'base64',
name => basename($attachment)
},
body => io->file($attachment)->all
);
push( @mail_attachments, $single_attachment );
}
}
# Multipart message : It contains attachment as well as html body
my @parts = (
@mail_attachments,
Email::MIME->create(
attributes => {
content_type => 'text/html',
encoding => 'quoted-printable',
charset => 'US-ASCII'
},
body_str => $mail_body,
),
);
my $mail_to_users = join ', ', @{ $self->{config}->{mail_to} };
my $cc_mail_to_users = join ', ', @{ $self->{config}->{mail_cc_to} };
my $email = Email::MIME->create(
header => [
From => $self->{config}->{mail_from},
To => $mail_to_users,
Cc => $cc_mail_to_users,
Subject => $mail_subject,
],
parts => [@parts],
);
return $email;
}
sub send_mail {
my ( $self, $email ) = @_;
my $transport = Email::Sender::Transport::SMTP->new(
{
host => $self->{config}->{smtp_server}
}
);
eval { sendmail( $email, { transport => $transport } ); };
if ($@) {
return 0, $@;
}
else {
return 1;
}
}
，则可以使用userInfo = {
"l_idReference": "205000",
"l_Name": undefined,
"l_totalDebitsAch": 1,
"l_totalCreditsAch": 0,
"l_totalCreditAmountAch": 0,
"l_creationDateAndTime": "2019-10-11T00:00:00"
}
checkNullOrZero = (obj) => {
// console.log(obj ,"OBJ")
const output = Object.keys(obj).map(col => {
if (obj[col] === "" || obj[col] === 0) {
obj[col] = 0
}
if (obj[col] === undefined) {
obj[col] = `""`
}
return `<td>${obj[col]}</td>`
}).join("")
console.log(output)
}
checkNullOrZero(userInfo)，{{1}}，...
答案 12 :(得分：0)
您可以通过以下方式读取值
searchTxt.value
function searchURL() {
let txt = searchTxt.value;
console.log(txt);
// window.location = "http://www.myurl.com/search/" + txt; ...
}
document.querySelector('.search').addEventListener("click", ()=>searchURL());<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>
<button class="search">Search</button>
更新
我看到很多反对意见，但有任何评论-但是（对于将来的读者来说）实际上是这种解决方案works
答案 13 :(得分：0)
试试这个..
function handleValueChange() {
var y = document.getElementById('textbox_id').value;
var x = document.getElementById('result');
x.innerHTML = y;
}
function changeTextarea() {
var a = document.getElementById('text-area').value;
var b = document.getElementById('text-area-result');
b.innerHTML = a;
}input {
padding: 5px;
}
p {
white-space: pre;
}<input type="text" id="textbox_id" placeholder="Enter string here..." oninput="handleValueChange()">
<p id="result"></p>
<textarea name="" id="text-area" cols="20" rows="5" oninput="changeTextarea()"></textarea>
<p id="text-area-result"></p>答案 14 :(得分：0)
这已经好几年了，但天哪，这太难了..
function searchURL() {
window.location = 'http://www.myurl.com/search/' + searchTxt.value
}
所以基本上 searchTxt.value 会用 id='searchTxt' 返回输入字段的值。
希望在 2021 年对某人有所帮助。
答案 15 :(得分：-2)
如果你使用jQuery然后使用插件formInteract，你只需要这样做：
// Just keep the HTML as it is.
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>
在页面底部只包含此插件文件并编写此代码：
// Initialize one time at the bottom of the page.
var search= $("#searchTxt).formInteract();
search.getAjax("http://www.myurl.com/search/", function(rsp){
// Now do whatever you want to with your response
});
或者如果使用参数化的URL，请使用：
$.get("http://www.myurl.com/search/"+search.get().searchTxt, {}, function(rsp){
// Now do work with your response;
})
以下是项目https://bitbucket.org/ranjeet1985/forminteract
的链接您可以将此插件用于多种用途，例如获取表单的值，将值放入表单，验证表单等等。您可以在项目的index.html文件中看到一些代码示例。
当然我是这个项目的作者，欢迎所有人改进它。