Rumah hujung hadapan web tutorial js javascript 获取表单元素的几种方法

javascript 获取表单元素的几种方法

Jun 01, 2016 am 09:55 AM
js dapatkan bentuk

第一种方法,通过元素的name获取

使用方法:

<code class="language-javascript">document.pref.color.value;//pref表示form表单的name,color是表单中元素的名称。</code>
Salin selepas log masuk

实例:

<code class="language-html">

    <script language="JavaScript">
    function showColor(){
      var color = document.pref.color.value;
      console.log("Your favorite color is: " + color);
    }
    </script>
    
    
    <form name="pref" method="POST">
    Enter the name of your favorite car:
      <input type="text" name="car" size="25">
      <input id="button1" type="BUTTON" name="carButton" value="Show Car" onclick="showCar(this.form)">
    <br>
    Enter your favorite color:
      <input type="text" name="color" size="15">
      <input type="BUTTON" name="colorButton" value="Show Color" onclick="showColor(this.form)">
    </form>

</code>
Salin selepas log masuk

上面实例代码使用ocument.pref.color.value获取pref表单中name为color元素的值。

 

第二种方法:通过元素的index获取

使用方法:

<code class="language-javascript">document.pref.elements[0].value //表示name为pref表单中第一个元素的值</code>
Salin selepas log masuk

实例:

<code class="language-html">

    <script language="JavaScript">
    function showCar(){
      var car = document.pref.elements[0].value;
      console.log("Your favorite car is: " + car);
    }
    </script>
    
    
    <form name="pref" method="POST">
    Enter the name of your favorite car:
      <input type="text" name="car" size="25">
      <input id="button1" type="BUTTON" name="carButton" value="Show Car" onclick="showCar(this.form)">
    <br>
    Enter your favorite color:
      <input type="text" name="color" size="15">
      <input type="BUTTON" name="colorButton" value="Show Color" onclick="showColor(this.form)">
    </form>

</code>
Salin selepas log masuk

此实例获取了表单中第一个元素的值,表单的第一个元素应该是name为car的input

 

第三种方法:通过元素的id获取

<code class="language-javascript">document.getElementById("id").value;</code>
Salin selepas log masuk

实例:

<code class="language-html">
    
    <script language="JavaScript">
    function getName(){
         var textName = document.getElementById("text_id").value;
         console.log("The textbox name is: " + textName);
    }
    </script>
    <form name="form1">
    This is a blank input textbox. Click on the button below to get the name of the textbox.
    <br>
    <input type="text" id="text_id" name="textbox1" size="25">
    <br><br>
    <input type="button" value="Get Name" onclick="getName()">
    </form>
    
</code>
Salin selepas log masuk

使用document.getElementById("text_id")获取id为text_id的input.

注:本文章的实例代码均可复制到这里运行并查看结果,你不妨试一把。

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Di mana untuk mendapatkan kod keselamatan Google Di mana untuk mendapatkan kod keselamatan Google Mar 30, 2024 am 11:11 AM

Di mana untuk mendapatkan kod keselamatan Google

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Apr 03, 2024 am 11:55 AM

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik

Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS Dec 17, 2023 pm 06:55 PM

Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS

Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok Dec 18, 2023 pm 03:39 PM

Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok

Cara membuat carta candlestick saham menggunakan PHP dan JS Cara membuat carta candlestick saham menggunakan PHP dan JS Dec 17, 2023 am 08:08 AM

Cara membuat carta candlestick saham menggunakan PHP dan JS

Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Jan 05, 2024 pm 06:08 PM

Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP

Bagaimana untuk memasang dua kad SIM pada Realme 12 Pro? Bagaimana untuk memasang dua kad SIM pada Realme 12 Pro? Mar 18, 2024 pm 02:10 PM

Bagaimana untuk memasang dua kad SIM pada Realme 12 Pro?

Petua untuk menggunakan kelas borang Laravel: cara untuk meningkatkan kecekapan Petua untuk menggunakan kelas borang Laravel: cara untuk meningkatkan kecekapan Mar 11, 2024 pm 12:51 PM

Petua untuk menggunakan kelas borang Laravel: cara untuk meningkatkan kecekapan

See all articles