如何使表单操作将输入文本传递给函数?

时间:2016-10-01 02:40:29

标签: javascript jquery html forms user-input

好的,这就是我的问题。我正在使用维基百科的API创建一个WikiViewer。我有一个搜索框(输入类型文本),我希望能够输入一个查询,然后点击“输入”。让它返回我的结果,而不是有一个实际的提交按钮。它需要是一个实际的形式bc否则移动设备不能只返回/ go /等而不必按下按钮。我尝试了一下'输入'关键新闻事件,但我找不到这样的移动设备,我很确定它们甚至不存在。

这是我的工作代码,没有表单元素。



<div class='container'>
	<input type="text" name="search" placeholder="Search..." id='search'>
	<input type='submit' value=''>
	<div id='article'>
	</div>
</div>
&#13;
&#13;
&#13;

&#13;
&#13;
const ready = () => {

	const getWiki = (text) => {
		$.ajax({
			type: "GET",
			url: "http://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0&page=" + `${text}` + "&callback=?",
			contentType: "application/json; charset=utf-8",
			async: false,
			dataType: "json",
			success: (data, textStatus, jqXHR) => {
				const markup = data.parse.text["*"];
				const text = $('<div></div>').html(markup);
				text.find('a').each(function() {
					$(this).replaceWith($(this).html())
				});
				text.find('sup').remove();
				text.find('.mw-ext-cite-error').remove();
				$('#article').html($(text).find('p'));
			},
			error: error => {}
		});
	};

	$('#search').on('keypress', (e) => {
		if (e.which === 13)
			getWiki($('#search').val())
	});
	
};

$(document).ready(ready);
&#13;
&#13;
&#13;

如果有人知道更简单的方法来实现这一目标而不需要移动设备的表格,我会全力以赴。一如既往,任何帮助将不胜感激。谢谢!

1 个答案:

答案 0 :(得分:0)

您不需要提交按钮。我所说的是创建一个表单,以便使用其默认行为从表单中获取提交:

var $searchForm = $('#search_form');

$searchForm.on('submit', function (e) {
  e.preventDefault();
  var searchField = e.target.search.value;
  alert(searchField);
  //use your searchField to pass to the function
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
    <form id="search_form">
	<input type="search" name="search" placeholder="Search..." id='search'>
    </form>
	<div id='article'>
	</div>
</div>