Question

好的，我觉得这应该很简单;所以要么我完全错过了我在这里以及我读过的其他网站上的问题，要么就是在相同的背景下没有被问过....

我有一个非常简单的表单元素（下面）

<form>
  <input type="text" id="searchTerm" />
  <input type="submit" value="Submit" id="submitButton" />
</form>

基本上我想要做的就是，当点击Submit按钮时，将text框中输入的值传递给JavaScript Function并记录控制台（暂时）。

这看起来已被问了一百万次，但我读过的问题并没有回答我的问题（我不这么认为）。

编辑感谢您的所有回复;最大的问题是我试图引用在表单元素之后调用的外部Javascript文件中的函数。

Answer 1

这样的东西？

document.getElementById('theform').onsubmit = function() { 
    console.log(document.getElementById('searchTerm').value);
    return false;
};

JSFiddle：https://jsfiddle.net/km7rt62v/

return false;在提交处理程序结束时阻止默认行为非常重要，否则表单会发布并重新加载页面。

正如其他人已经证明的那样，也可以使用表单元素的onsubmit html属性，这是个人偏好，但我更喜欢在JS和HTML之间进行更清晰的分离。

编辑：由于我得到了接受的答案，问题用jQuery标记，这里是jQuery的等价物：

$('#theform').submit(function() { 
    console.log($('#searchTerm').val());
    return false;
});

Answer 2

这是一个纯粹的简单JavaScript。你也可以使用jQuery。

function checkForm(){
  console.log(document.getElementById('searchTerm').value);
  return false;
}

<form onsubmit='return checkForm();'>
  <input type="text" id="searchTerm" />
  <input type="submit" value="Submit" id="submitButton" />
</form>

Answer 3

当您在表单中包含提交类型的输入时，可以使用名为onsubmit的属性。这是一些文档http://www.w3schools.com/tags/ev_onsubmit.asp。

代码看起来像这样

<form onsubmit="submitForm()">
  <input type="text" id="searchTerm"/>
  <input type="submit" value="Submit" id="submitButton" />
</form>

<script>
  function submitForm() {
    let input = document.querySelector('#searchTerm');
    console.log(input.value);
    return false;
  }
</script>

Answer 4

提交表格：

JS：

import android.app.DatePickerDialog;
import android.app.Dialog;
import android.content.Intent;
import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Bundle;
import android.support.v4.app.NavUtils;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.DatePicker;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import java.util.Calendar;


public class SettingsActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_settings);

        Typeface ubuntu_MI = Typeface.createFromAsset(getAssets(), "Ubuntu-MI.ttf");

        // Get the ActionBar
        android.support.v7.app.ActionBar ab = getSupportActionBar();

        // Create a TextView programmatically.
        TextView tv = new TextView(getApplicationContext());

        // Create a LayoutParams for TextView
        RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
                RelativeLayout.LayoutParams.MATCH_PARENT, // Width of TextView
                RelativeLayout.LayoutParams.WRAP_CONTENT); // Height of TextView

        // Apply the layout parameters to TextView widget
        tv.setLayoutParams(lp);

        // Set text to display in TextView
        // This will set the ActionBar title text
        tv.setText("Ayarlar");

        // Set the text color of TextView
        // This will change the ActionBar title text color
        tv.setTextColor(Color.parseColor("#FFF5EE"));

        // Center align the ActionBar title
        tv.setGravity(Gravity.CENTER_HORIZONTAL);

        // Set the serif font for TextView text
        // This will change ActionBar title text font
        tv.setTypeface(ubuntu_MI);

        // Underline the ActionBar title text
        // tv.setPaintFlags(tv.getPaintFlags()| Paint.UNDERLINE_TEXT_FLAG);

        // Set the ActionBar title font size
        tv.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 24);

        // Display a shadow around ActionBar title text
        //tv.setShadowLayer(
        //      1.f, // radius
        //    2.0f, // dx
        //  2.0f, // dy
        //  Color.parseColor("#FF8C00") // shadow color
        //);

        // Set the ActionBar display option
        ab.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);

        // Finally, set the newly created TextView as ActionBar custom view
        ab.setCustomView(tv);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }

    public boolean onOptionsItemSelected(MenuItem item) {

        //Action Bar'daki back butonuna basınca ne yapacağını söylüyoruz.
        if (item.getItemId() == android.R.id.home) {
            Intent intent = new Intent(getApplicationContext(), ProfileFragment.class);
            NavUtils.navigateUpTo(this, intent);
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    }

HTML：

var searchForm= document.getElementById('searchForm');
var submitButton = document.getElementById('submitButton');

searchForm.onsubmit= function () {
  console.log(searchTerm.value);
};

点击按钮：

JS：

<form id="searchForm">
  <input type="text" id="searchTerm" />
  <input type="submit" value="Submit" id="submitButton" />
</form>

HTML：

var searchTerm = document.getElementById('searchTerm');
var submitButton = document.getElementById('submitButton');

submitButton.onclick = function () {
  console.log(searchTerm.value);
};

请参阅演示Here

Answer 5

要在外部文件中使用这样的功能，最好的办法是在onload事件中连接提交事件：

window.onload=function() {
  document.getElementById("form1").onsubmit=function(e) {
    e=e?e:event;
    e.preventDefault(); // cancel the submit
    var val = document.getElementById("searchTerm").value;
    console.log(val);
  }  
}

<form id="form1">
  <input type="text" id="searchTerm" />
  <input type="submit" value="Submit" id="submitButton" />
</form>

jQuery版本：

$(function() {
  $("#form1").on("submit",function(e) {
    e.preventDefault(); // cancel the submit
    var val = $("#searchTerm").val();
    console.log(val);
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form1">
  <input type="text" id="searchTerm" />
  <input type="submit" value="Submit" id="submitButton" />
</form>

Answer 6

你用jQuery标记了这个，所以这是一个jQuery的答案。您需要使用的是.submit()事件处理程序。

$("form").submit(function(e) {
    console.log("form data: %o", $(this).find("#searchTerm").val());
    e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
    <input type="text" id="searchTerm" />
    <input type="submit" value="Submit" id="submitButton" />
</form>

此代码会将处理程序附加到<form> onsubmit事件：

Answer 7

所以主要的问题是我在<script>元素的底部包含了<body>元素，链接到我的外部JavaScript文件;这意味着在创建表单时，它不知道我正在谈论的Javascript函数。

感谢所有帮助过的人，这就是解决方案......

<强> HTML

<head>
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <!-- Custom JavaScript -->
  <script src="js/wiki.js"></script>
</head>
<body>
  <form id="theform" onsubmit="test(this.searchTerm.value)">
    <input type="text" id="searchTerm" />
    <input type="submit" value="Submit" id="submitButton" />
  </form>
</body>
</html>

<强>的JavaScript

$(document).ready(function() {

  test = function(value) {
      console.log(value);
    return false;
  };

});

Answer 8

不必在提交表单处理函数中添加另一个getElementById()。我对为什么这种方法如此普遍感到困惑。如果您需要获取表单的多个/所有值，该怎么办？写几十个元素选择器？

我认为以下内容更干净：

输入可以包含name属性，以简化其访问范围：

  function submitForm(event) {
    alert(event.target.elements.searchTerm.value)
    return false;
  }

<form onsubmit="submitForm(event)">
  <input name="searchTerm"/>
  <button>Submit</button>
</form>

更好，

function submitForm(that) {
  alert(that.searchTerm.value)
  return false;
}

<form onsubmit="submitForm(this)">
  <input name="searchTerm"/>
  <button>Submit</button>
</form>

在处理程序本身中，您甚至可以直接访问值：

<form onsubmit="alert(searchTerm); false">
  <input name="searchTerm"/>
  <button>Submit</button>
</form>

即使我不知道最新示例为何起作用； Havent找到了与此相关的任何文档；我打开了一个问题here。

如果要从HTML表单中获取键/值映射（普通）对象，请参见this answer。

在提交时将表单数据发送到Javascript

8 个答案: