js用document提取单选按钮中的值

js用document提取单选按钮中的值,第1张

1,不要用关键字type作为name,

2,oInput=documentgetElementById("id_name");得到一个对象

oInput=documentgetElementByTag("input");得到一个数组对象

你都没有用到,js不是通过name查找一个标签的,是通过标签名或id查找的

3,你把表单名loginform,改成id=“loginform”

然后用 var Loginform=documentgetElementById("loginform");就得到了这个表单

然后再用var oInput=LoginformgetElementByTag("input");

得到下面的三个input标签,

如果只想要其中的某一个,就给他加上id

html中获取表单数据的的方法一般有两种,一个是使用form表单的action属性将表单的数据提交给后台,另外一种就是使用JavaScript方法获取表单的数据,然后通过ajax传送给后台。

工具原料:编辑器、浏览器

一、使用表单的方法提交数据

1、利用form表单的action属性来获取表单的数据并提交,代码如下:

<form action="form_actionphp" method="get">

  <p>First name: <input type="text" name="fname" /></p>

  <p>Last name: <input type="text" name="lname" /></p>

  <input type="submit" value="Submit" />

</form>

2、以上代码中method指定提交数据的方法为get,action的值是表单数据提交的地址。

二、使用JavaScript方法来获取表单的数据的方法

1、可以使用JavaScript的选择器选择表单的元素并获取其输入的数据,代码如下:

<form action="form_actionphp" method="get">

   <p>First name: <input id="bt1" type="text" name="fname" /></p>

   <p>Last name: <input id="bt2" type="text" name="lname" /></p>

   <input type="submit" value="Submit" />

  </form>

   <script>

   consolelog($('#bt1')val())

   consolelog($('#bt2')val());

   </script>

2、其中$('#bt1')val()就是获取input输入内容的值

方法一:利用form的onsubmit()函数

Html代码

<script type="text/javascript">

function validateForm(){

if(documentreplytitlevalue == ""){ //通过form名来获取form

alert("please input the title!");

documentreplytitlefocus();

return false;

}

if(documentforms[0]contvalue == ""){ //通过forms数组获取form

alert("please input the content!");

documentreplycontfocus();

return false;

}

return true;

}

<form name="reply" method="post" onsubmit="return validateForm( );">

<input type="text" name="title" size="80" /><br />

<textarea name="cont" cols="80" rows="12"></textarea><br />

<input type="submit" value="提交" >

</form>

注意:

1onsubmit属性内容一定要有return关键字,否则函数会直接执行,不会返回

2validateForm一定要返回一个boolean类型的返回值

3提交按钮要写成submit类型的

以上就是关于js用document提取单选按钮中的值全部的内容,包括:js用document提取单选按钮中的值、html中如何获取表单的数据、如何获取form表单提交的数据等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/10071038.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-04
下一篇 2023-05-04

发表评论

登录后才能评论

评论列表(0条)

保存