jQuery：序列化后更改元素值
jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果和Ajax交互等操作。它提供了一种简单的方式来操作DOM元素，使得开发者能够更加高效地编写前端代码。
序列化是将表单中的数据转换为字符串的过程，以便于在网络传输或存储时使用。在jQuery中，可以使用.serialize()方法来序列化表单数据。该方法会将表单中的所有可用的输入元素的名称和值组合成一个字符串，并使用&符号分隔每个键值对。
更改元素值可以通过jQuery的选择器来选中相应的元素，然后使用.val()方法来设置元素的值。该方法可以用于文本框、下拉列表、复选框等各种表单元素。
下面是一个示例代码，演示了如何使用jQuery序列化表单数据并更改元素值：
<!DOCTYPE html>
<html>
<head>
<title>jQuery序列化和更改元素值示例</title>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form id="myForm">
<input type="text" name="name" value="John">
<input type="text" name="age" value="25">
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<input type="checkbox" name="hobby" value="reading" checked> Reading
<input type="checkbox" name="hobby" value="music"> Music
</form>
<button id="serializeBtn">Serialize and Change Values</button>
<script>
$(document).ready(function() {
$("#serializeBtn").click(function() {
var formData = $("#myForm").serialize(); // 序列化表单数据
console.log(formData);
// 更改元素值
$("input[name='name']").val("Tom");
$("input[name='age']").val("30");
$("select[name='gender']").val("female");
$("input[name='hobby']").eq(1).prop("checked", true);
});
});
</script>
</body>
</html>在上述示例中，我们首先使用$("#myForm").serialize()方法序列化表单数据，并将结果打印到控制台。然后，通过选择器选中相应的元素，并使用.val()方法更改其值。在这个例子中，我们将姓名改为"Tom"，年龄改为"30"，性别改为"Female"，并将第二个爱好选项勾选上。
关于jQuery的更多信息和用法，请参考腾讯云的jQuery产品介绍。
相关·内容
我已经阅读了关于这方面的所有SO主题，并尝试了许多方法。甚至上的jQuery Datepicker信息页面也显示了我不理解的行为。
a.在输入字段中点击>弹出日期选择器b.选择日期>视觉上，输入字段显示您选择的日期c.但是输入字段的value属性不会更改为选择的日期
请问我漏掉了什么？谢谢
浏览 2提问于2014-12-14得票数 0
2回答
ajax不断发布过时的值
、、、、
我有一个表单，自动提交和更新同一页。我有一个更改按钮值的java脚本函数，但是AJAX一直在发送旧的值。
AJAX
$.ajax({
type: 'POST',
url: this.action,
data: $('form').serialize()
});
JQUERY
function changevalue()
{
$('#button').attr('value', 'grapes');
}
表格
form...
<input
浏览 0提问于2012-06-27得票数 0
回答已采纳
2回答
发送电子邮件阵列
、、、、
我需要用PHP通过电子邮件发送一系列产品，但是我遇到了"foreach“的麻烦。
这是我的密码：
//Form
<form action="" method="post">
<select name="product[]" class="product" >
<option value="product1">product1</option>
<option value="product2">prod
浏览 3提问于2011-07-20得票数 0
回答已采纳
我想知道是否可以使用jQuery对输入到表单中的超文本标记语言进行重新编码。例如，我想要“条带化”用户手动输入到表单文本区域的HTML表代码。如果文本区有一个id=tablecode，它就不能工作
$('textarea#tablecode tr:even').addClass('table_even');
有没有什么方法可以使用jQuery来操作用户在表单框中输入的html？或者，我是否需要将表单提交到服务器，然后在PHP中使用正则表达式来添加类？谢谢。
浏览 0提问于2011-04-21得票数 1
回答已采纳
我有一个带有提交按钮的表单，如下所示：
<form action="?edit-form" method="post" class="addEdit">
<input type="submit" name="delete-image" value="Delete Image">
</form>
我的jQuery AJAX是：
$.ajax({
url: $('form.addEdit').attr('action')
浏览 1提问于2014-07-29得票数 0
回答已采纳
我正在使用jQuery日期/时间选择器，并将其放在一个表单中。当按下submit按钮时，我序列化表单并将序列化结果保存到localStorage。
即
localStorage.form_data = $('myform').serialize();
除了使用jQuery日期/时间选择器的表单输入之外，我的一些表单数据显示在序列化的字符串中，有人知道为什么吗？或者如果周围有工作的话..
我可以使用我自己的serialize方法来解决这个问题，但是我很好奇.serialize() & .serializeArray()什么时候会崩溃……
浏览 1提问于2013-03-18得票数 2
我试图使用jquery序列化asp.net(aspx)页面中的表单元素，但只能获得两个参数__VIEWSTATE和__VIEWSTATEGENERATOR。无法获得输入字段和其他窗体控件。我已经找过了，但没能修好。你能告诉我我哪里做错了吗？
这是我的代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JqueryLearning.WebForm1" %>
<!DOCTYPE html&
浏览 4提问于2016-09-09得票数 1
回答已采纳
4回答
我试图使用jquery ()方法发送网页的表单数据。但是当我提交表单时，只有很少的字段数据被发送到服务器。
表格：
<form class="form-horizontal" id="addpost" method="GET" action="">
<div class="control-group">
<label class="control-label" for="form-field">Post
浏览 4提问于2013-10-15得票数 3
回答已采纳
2回答
我有一个PHP Ajax表单，我正在尝试提交一个Zendesk调用。每当我使用ajax部分时，为了使用户保持在同一个页面上，它就无法工作。当我移除<script>部件时，它工作得很好，但显然是从contact.html重定向到contact.php，所以我认为问题是在Ajax部分，而不是在contact.html部分。
以下是我的HTML表单：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.
浏览 0提问于2015-03-08得票数 0
回答已采纳
2回答
我在尝试表单序列化，但令人惊讶的是它没有序列化表单。以下是代码：
<div id="content">
</div>
<form id= "myform">
<input type="text" id="inp"value="mytext">
<input type="button" id="btn" value="serialize"/>
</form>
下面是我正在使用的jQ
浏览 5提问于2012-01-31得票数 16
回答已采纳
我正在使用.jsp中的Java/Spring。
我在myPage.jsp中的div中动态加载来自myForm.jsp的表单(包括表单标记)，并尝试使用这些数据进行ajax post调用。当我调用jQuery .serialize并打印出数据时，它返回为空。
但是，如果在myPage.jsp中包含表单标记并仅加载输入，则一切正常。
动态加载整个表单有什么地方我做错了吗？
myPage.jsp
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
浏览 0提问于2015-04-09得票数 1
1回答
好的，我编写了一个返回序列化数据的代码：
a:3:{i:0;s:250:"Sistema Operativo: Windows Vista SP1 / Windows XP SP3
Procesador: Intel Core 2 Duo 1.8 Ghz, AMD Athlon X2 64 2.4 Ghz
Memoria: 1.5GB Windows Vista / 1GB Windows XP
Espacio en Disco: 16GB libres
Gráfica: 256MB NVIDIA 7900 / 256MB ATI X1900";i:1;s:281:"
浏览 1提问于2014-02-22得票数 1
请考虑以下几点：
PHP：
<form id="f-submit" method="post" action="">
<button class="btn-submit" name="update" type="submit">APPROUVE</button>
</form>
jQuery：
$("button.btn-submit").click(function(event) {
event.preventDe
浏览 1提问于2015-04-07得票数 0
回答已采纳
1回答
我正在寻找一些简洁的解决方案，在其中，我可以发送表单名称和提交按钮名称与表单输入字段。我已经尝试了form.serializeArray()方法，但是我只在post中获得输入字段名称。那么我如何用一行代码发送包含表单名称和提交按钮名称的完整表单数据？
<form id="formid" name="formName" class="formClass" action="service.php" method="POST" >
<input type="text"
浏览 3提问于2014-09-07得票数 2
回答已采纳
3回答
我正在使用CakePHP，这几天我尝试在ajax (jQuery)的帮助下在mysql数据库中存储一个java脚本变量。
我使用以下代码来完成此操作：
<!-- document javascripts -->
<script type="text/javascript">
$(document).ready(function () {
$('#saveForm').submit(function(){
var formData = $(this).serialize();
浏览 3提问于2012-03-26得票数 0
2回答
我有一个jQuery切换器，我正在和它战斗。我可以让它一次切换多个div的可见性，但是一旦我实现next()函数，唯一要切换的就是脚本的加/减部分，而不是div的可见性。这段代码中有什么特别之处吗？
这是可行的，但会切换所有div，而不只是关闭一个：
jQuery(function(){
jQuery(".toggleText").click(function(){
jQuery(".hiddenText").slideToggle("fast");
jQuery(this).html(function(i,html) {
浏览 0提问于2010-10-29得票数 0
我有一个相当简单的软件我正在做。我希望在jQuery模式对话框中设置一组字段。由于其他一些限制，如果我使用jQuery的AJAX函数与服务器通信，而不是使用ASP.NET的AJAX支持，那么这样做是很容易的。
然而，我想知道是否有比直接分配所有字段更容易的方法。例如，为了保存所有字段，我必须这样做：
对于每个字段，执行json.fieldname=$('#fieldname').val()
发送json数据。
在从json将数据加载到字段时，我也必须这样做。
有没有一种比较容易/不那么乏味的方法？
浏览 2提问于2011-07-20得票数 0
回答已采纳
在过去的几天里，我一直在尝试在jquery中序列化一个表单，并将其传递给php。出于某种原因，它就是不起作用。问:在Jquery中序列化表单需要采取哪些步骤……我获取表单的id，将其传递给$('#fomrID').serialize()...
但它还是不起作用。当我使用firebug进行调试时，我得到的只是一个空字符串...您是使用表单的名称还是Id。你用的是e.disableDefalut还是别的什么？我想不出为什么我不能序列化我的表单，请帮帮忙
$('#profilepicbutton').change(function(){
alert(&
浏览 1提问于2011-10-01得票数 1
回答已采纳
2回答
有什么方法可以防止Jquery清除表单值吗？
我编写了以下Jquery脚本，它将表单POST数据发送到一个php函数，如果PHP输出成功，则重定向到新页面，否则将显示错误。
$('#update').click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: 'function.php',
data: $(this).serialize(),
success: function(data)
{
if (data ==
浏览 0提问于2013-02-25得票数 0
回答已采纳
我有一个jQuery对话框。除了下拉列表之外，所有字段都正确过帐，值将作为null而不是所选值传递。
<div id="popupCreateCompany" title="Create a new company">
<form>
<fieldset>
<p>
<label for="company_name">Company Name:</label>
<%= Html.TextBox("
浏览 0提问于2010-04-19得票数 2
回答已采纳
1回答
我正在编写一个程序，通过提供多个序列号，使用php和jquery从SQL数据库获取数据。每个序列号都在一个单独的输入中(全部作为数组)，而不是我使用jquery处理数据并将其传递给php文件。我不知道如何高亮显示或添加红色边框的输入与没有根据的序列号。如果数组中只有一个输入，但如果有更多的输入，我可以这样做。有办法这么做吗？
到目前为止我累了什么？
收集系列品时：
var serial = $("input[name='getID[]']")；
var arrayserial =serial.map(函数(){返回“‘”+$(This).val()+“’；})
浏览 3提问于2014-03-07得票数 0
我正在使用jquery自动完成插件来实现自动建议。
它只为页面的onload元素加载。
如何通过ajax使其适用于使用jQuery加载的元素？
浏览 0提问于2012-07-25得票数 1
回答已采纳
1回答
选择单选按钮的奇怪问题
、、、
我似乎有一个问题，选择单选按钮使用jQuery。我组装了一个来演示这个问题。以下是我的HTML：
<div id="divRadioButtons">
<div style="width: 600px; margin: 5px auto;">
<div style="display: inline"><input type="radio" name="activeStatus" value="Active" id="rbAct
浏览 1提问于2014-06-26得票数 0
回答已采纳
1回答
JQuery可排序序列化
、、、、
我使用对表进行排序，JQuery工作正常，但无法使序列化正确工作。我想知道是否有人能帮我解释一下我需要做什么？
所以我的html是。
<table class="table table-striped table-bordered sorted_table" id="positionstable">
<tbody>
<tr>
<th class="sectionname" colspan="1">Position</th>
浏览 1提问于2014-06-21得票数 1
回答已采纳
2回答
当使用下拉框更改输入框的值时，我希望使用jquery或javascript来跟踪更改。
我给输入框一个firechange类，并尝试使用jQuerychange()事件，但事件根本不触发。
是否有一种方法来检查下拉框选择。
$('.fieldsWrapper').on('click', '.dlInput', function(e) {
// e.stopPropagation();
// load datalist into memory
var dl = "";
dl += "&
浏览 0提问于2019-08-24得票数 0
回答已采纳
我使用$("#divid").attr("disabled",true);禁用了jquery中的div元素
它正在模板中设置disabled="disabled"。我希望该属性在模板中设置为disabled="true"。
浏览 2提问于2014-05-12得票数 0
我有一个复选框已选中的表单。它的序列化不会返回那些选中的复选框。这是我用来执行序列化的jQuery代码。
$('form.subscribe').serialize()
上面的序列化返回
email=
这是标记：
<form class="subscribe">
<div class="body">
<div class="email input">
<input name="email" placeholder="your email a
浏览 0提问于2012-09-28得票数 1
回答已采纳
3回答
表单的serialize()函数在jQuery中有问题。当我试图通过AJAX提交序列化表单时，serialize()会返回几个字段的值。有些值不被保留。
也许我的或jQuery有问题：
<div id="register" class="row callout panel">
<div class="large-12 medium-12">
<form name="signupform" id="signupform" method="post" data-
浏览 4提问于2014-08-12得票数 1
我有一个带有onChange事件的select元素，当我单击选中框并在其中选择一个新的值时，它会触发。但是，当我标签到复选框并按下向上或向下箭头以更改复选框的值时，事件不会触发。
我使用jQuery().change(function(){ ... });设置事件
浏览 1提问于2011-07-01得票数 4
回答已采纳
我有一个包含许多输入的大型表单(表单可以有超过100个值)，这似乎在使用jquery.serialize()回发到服务器时造成了一些不稳定。
通常，在提交表单之前，只会更改一两个值，所以我想我尝试只提交更改过的值。只是我不知道该怎么做。
我想我想选择表单上的所有输入并对它们调用jquery.change()，然后以某种方式使用eventData来确定哪些值发生了变化。
对于代码的任何帮助，或者关于我如何处理这件事的其他想法，我们将不胜感激。
我想我应该提一下，它是MVC-4。
这是我到目前为止想出的剧本。
$(.ready)(函数() {$(“#EditForm”).find(“输入”).
浏览 1提问于2012-12-04得票数 1
回答已采纳
1回答
关于jquery，请有人解释一下change事件是什么，以及什么时候会触发它？
官方医生：
如果值已更改，则在字段模糊时触发；ui.item引用所选项。
他们所说的field is blurred是什么意思？
浏览 1提问于2012-05-30得票数 0
回答已采纳
5回答
如果我想将键/值对从javascript传递到后面的C# ASP.NET代码，我应该使用查询字符串参数、隐藏值或其他方法吗？值不是来自表单，所以jquery序列化或params()将不起作用。我想我必须手动序列化它？？值来自dropdownlist (名称/选定选项文本)对
浏览 0提问于2011-06-30得票数 1
1回答
通过jquery的POST类型ajax方法给出的数据长度是否有限制？
我正在使用ajax()方法在后台提交一个表单：
$.ajax({type:'POST', url: '<?=BASE_URL?>comenzi/save', dataType:'json', data:$('#theForm').serialize(), success: function(response) { ...
但是有些输入没有被发送，在帖子中找不到。
这个数据参数是否有限制，还是我应该在这里寻找另一个问题？
更新：--我已经以两种不同的
浏览 2提问于2012-07-24得票数 1
4回答
为什么jQuery序列化返回一个空值？
这是HTML + JS代码：
代码很简单，只是：
alert($("#frm").serialize())
浏览 3提问于2013-11-02得票数 1
回答已采纳
有没有人能解释在下面的小提琴中发现的奇怪的jquery行为？
我有以下html..。
<div id="test" data-prevy="0"></div>
使用下面的jquery...
console.log($('#test').data('prevy'));
console.log($('#test').attr('data-prevy'));
$('#test').attr('data-prevy', 2);
console.l
浏览 0提问于2013-05-01得票数 1
回答已采纳
我在一个页面上有一堆输入元素。每个输入元素都有一个onchange事件，该事件触发对服务器的ajax调用。我想禁用所有这些onchange，然后对元素进行一些编程更改(重置它们)，然后重新启用这些onchange事件。我希望只有一次ajax调用会因此而发生。
如何使用JQuery完成此操作？
非常感谢！
浏览 2提问于2011-10-04得票数 2
回答已采纳
4回答
使用隐藏的表单域
、、
因此，我使用了一个隐藏的表单字段，并用我的JQuery代码onSubmit中的数据填充它。问题是，JQuery填充了两个Type="Hidden“字段。我只想让它填充name="moment“中的一个，我怎么解决这个问题？
下面是我的html：
<form method="post" action="momentactions.php">
<input type="hidden" name="album_id" value="<?php echo $album_id; ?&g
浏览 0提问于2012-09-21得票数 1
我想知道当值被另一个事件修改时，如何检测输入文本的值的变化。
$('input').on('change', function() {
//I expected this below to be shown when pressing '+'
alert("You changed the value of the input");
})
$('span').on('click', function() {
$('input').val('1'
浏览 0提问于2015-06-17得票数 1
回答已采纳
3回答
因此，我要做的就是将文本输入的禁用和只读属性分别设置为" disabled“和" readonly”。我使用的是Jquery版本1.7.1。我尝试了以下方法：
$("#testtext").attr('disabled','disabled');
$("#testtext").attr("readonly","readonly");
$("#testtext").attr('disabled',true);
$("#testtext")
浏览 0提问于2013-02-07得票数 0
回答已采纳
我有：
<script type="text/javascript">
jQuery('.element').hover(
function () {
jQuery(this).find('div.thumbnail-meta-data-wrapper').show();
jQuery(this).find('div.thumbnail-meta-data-wrapper').find('div.symbol').show();
},
function () {
浏览 1提问于2013-08-13得票数 1
回答已采纳
1回答
我做了这个书签：
javascript:(function(){var s=document.createElement('script');s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');document.getElementsByTagName('body')[0].appendChild(s);$('#hldIntMain').hide();$('#fadeBackgroun
浏览 1提问于2010-03-07得票数 4
回答已采纳
2回答
我是jQuery的新手，有人能帮帮我吗？
我想创建一个像这样的发票系统
我所需要做的就是添加一个提交按钮，它的功能如下所示
.find由某个唯一id标识的文本的所有输入
然后将该值发布到php MySQl搜索行将包含唯一的数据。
浏览 0提问于2011-12-06得票数 1
回答已采纳
我想执行一个简单的$.post()
function(formData) {
var path = reg ? "login" : "regester";
formData.bundle_id = window.bundleId;
app.error = false;
app.unknown = false;
$.post(("/kanban/"+path+"/submit"),{"form":formData},function(data){
if(data.success){
wind
浏览 0提问于2018-09-12得票数 0
回答已采纳
我正在使用(String，Arraylist of String)作为gemfire caching.Is中的键值对。有没有什么方法可以只添加或删除值列表中的特定值，而不需要获取整个列表，然后添加/删除并重新发布列表？！
浏览 1提问于2015-04-10得票数 2
我正在工作的网上订单确认表，其中有几个字段，包括一个期望的发货日期。基于其他字段值的函数可以修改船舶日期默认值。当用户更改这些其他字段时，我刷新默认日期。
在视觉上让用户知道默认日期被修改的最佳方式是什么？
FYI，我使用的是jQuery，但是一个非技术的答案是有效的。
浏览 1提问于2014-02-13得票数 0
回答已采纳
我正在尝试通过jquery在一个模式中填充一个HTML5播放器。目标是根据你是被邀请访问网站还是自己注册来玩两个mp3s中的一个。我有一个存储src路径的隐藏字段，我希望我的jquery函数根据该src加载音频文件。加载页面时，音频文件不会加载到播放器中。不知道我错过了什么，任何帮助都将不胜感激。
HTML
<asp:HiddenField ID="hidModalMsg" runat="server" />
/*Unrelated code*/
<div class="audio" runat="server
浏览 0提问于2013-08-20得票数 2
1回答
函数内的JS函数未被调用
、、、
我有一个我希望是非常简单的问题。事实上，我认为我还没有弄明白这是很愚蠢的。下面是我的代码示例：
摘录：
function lighten() {
jQuery(this).css('opacity', '0.5');
jQuery(this).html('DO IT!');
}
function darken() {
jQuery(this).css('opacity', '1');
jQuery(this).html('CLICK TO EXPAND');
}
function expa
浏览 1提问于2012-11-29得票数 1
回答已采纳
1回答
我在一个使用jquery更改禁用输入文本框的值的站点上运行Selenium。查看HTML，输入框的值继续表示“不可用”，尽管该值显然已被更改。
我可以使用Firebug获得当前值
$("#inputid").val()
但是，当我使用了selenium代码时，我得到了“不可用”的值：
driver.findElement(By.id("inputid")).getAttribute("value");
对于如何在Selenium中获得这个值，有什么建议吗？我想避免使用类似JavascriptExecutor的东西，但如果这是最好的解决方案，那么
浏览 2提问于2014-01-31得票数 1
1回答
我无法将序列化的数据从模式中的表单发送到Controller，我正在使用codeigniter和ajax发送数据
这是我在情态中的形式：
<div class="modal fade" id="nuevoClienteModal" tabindex="-1" role="dialog" aria-labelledby="Nuevo Cliente" aria-hidden="true">
<div class="modal-dialog" role="
浏览 0提问于2018-04-14得票数 1
回答已采纳
3回答
我正在尝试使用jQuery来替换在某个类中出现的所有特定字符串。页面上有多个此类型的类。
到目前为止，我有以下代码：
var el = $('div.myclass');
if(el != null && el.html() != null )
{
el.html(el.html().replace(/this/ig, "that"));
}
如果有多个带有myclass类的div，这将不起作用。如果有多个div，那么第二个div将替换为第一个div的内容！这就好像jQuery在第一个div上执行替换，然后用结果替换myclass的所有
浏览 0提问于2009-10-17得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
