使用JQuery更改动态添加的表单字段的输入ID(Change input id for dynamically added form fields using JQuery)
我正在构建一个引用工具,我在使用JQuery单击Add more按钮时添加新的表单字段,并希望id也可以更改,以便我可以在我的计算中使用它,但id不会更改。 另外,我应该如何在计算中使用它,以便添加动态添加的表单字段。 非常感谢提前。
HTML:
<div class="input_fields_wrap"> <div class="empBlock3"> <input type="text" value="Employee" class="employee" id="flex_2" onchange="updateTable2();" /> <div class="slds-form-element__row" > <div class="slds-form-element slds-size--1-of-4"> <div class="status1" name="status1"><h2>Single</h2></div> </div> <div class="slds-form-element slds-size--1-of-4"> <input type="number" id="flex_2_single_num" class="slds-input" min="0" max="1500" value="0" name="stepper1" style="width:50%;" onchange="updateTable2();" /> </div> <div class="slds-form-element slds-size--1-of-4"> $ <input type="text" id="flex_2_single" name="amount1" class="slds-input" style="width:50%;" onchange="updateTable2();" /> </div> </div> <div class="slds-form-element__row"> <div class="slds-form-element slds-size--1-of-4"> <div class="status2" name="status2"><h2>Family</h2></div> </div> <div class="slds-form-element slds-size--1-of-4"> <input type="number" id="flex_2_family_num" class="slds-input" min="0" max="1500" value="0" name="stepper2" style="width:50%;" onchange="updateTable2();" /> </div> <div class="slds-form-element slds-size--1-of-4"> $ <input type="text" id="flex_2_family" name="amount3" class="slds-input" style="width:50%;" onchange="updateTable2();" /> </div> </div> <div class="slds-form-element__row"> <div class="slds-form-element slds-size--1-of-4" name="ratio"> Ratio: <select> <option value="1:1">1:1</option> <option value="1:2" selected="">1:2</option> <option value="1:3">1:3</option> </select> </div> </div> </div> </div>
JQuery的:
function addMoreRows3() { empBlock3 ++; // Adding extra form fields var recRow3 = '<div class="empBlock3'+empBlock3+'"> <br> <div class="empBlock3">\ <input type="text" value="Employee" class="employee" id="flex_2" onchange="updateTable2();" />\ <div class="slds-form-element__row" >\ <div class="slds-form-element slds-size--1-of-4">\ <div class="status1" name="status1"><h2>Single</h2></div>\ </div>\ <div class="slds-form-element slds-size--1-of-4">\ <input type="number" id="flex_2_single_num" class="slds-input" min="0" max="1500" value="0" name="stepper1" style="width:50%;" onchange="updateTable2();" />\ </div>\ <div class="slds-form-element slds-size--1-of-4">\ $ <input type="text" id="flex_2_single" name="amount1" class="slds-input" style="width:50%;" onchange="updateTable2();" />\ </div>\ </div>\ <div class="slds-form-element__row">\ <div class="slds-form-element slds-size--1-of-4">\ <div class="status2" name="status2"><h2>Family</h2></div>\ </div>\ <div class="slds-form-element slds-size--1-of-4">\ <input type="number" id="flex_2_family_num" class="slds-input" min="0" max="1500" value="0" name="stepper2" style="width:50%;" onchange="updateTable2();" />\ </div>\ <div class="slds-form-element slds-size--1-of-4">\ $ <input type="text" id="flex_2_family" name="amount3" class="slds-input" style="width:50%;" onchange="updateTable2();" />\ </div>\ </div>\ <div class="slds-form-element__row">\ <div class="slds-form-element slds-size--1-of-4" name="ratio">\ Ratio:\ <select>\ <option value="1:1">1:1</option>\ <option value="1:2" selected="">1:2</option>\ <option value="1:3">1:3</option>\ </select>\ </div>\ </div><a href="javascript:void(0);" onclick="removeRow3('+empBlock3+');">Delete</a></div></div>'; $('#addedRows3').append(recRow3); }; function removeRow3(removeNum3) { $('.empBlock3'+removeNum3).remove(); };
报价工具的计算:
function updateTable2() { // this updates the table as the values are being filled out // get the variables for the first Job Description (hsa_1) var flex1_Name = document.getElementById('flex_1').value; var flex1_Single_Num = document.getElementById('flex_1_single_num').value; var flex1_Single_Limit = document.getElementById('flex_1_single').value; var flex1_Family_Num = document.getElementById('flex_1_family_num').value; var flex1_Family_Limit = document.getElementById('flex_1_family').value; // get the variables for the second Job Description (hsa_2) var flex2_Name = document.getElementById('flex_2').value; var flex2_Single_Num = document.getElementById('flex_2_single_num').value; var flex2_Single_Limit = document.getElementById('flex_2_single').value; var flex2_Family_Num = document.getElementById('flex_2_family_num').value; var flex2_Family_Limit = document.getElementById('flex_2_family').value; var totalSingle = (flex1_Single_Limit * flex1_Single_Num)+(flex2_Single_Limit * flex2_Single_Num); var totalFamily = (flex1_Family_Limit * flex1_Family_Num)+(flex2_Family_Limit * flex2_Family_Num); var totalCost = totalSingle+totalFamily; var flexCostTMP=document.getElementById('iFlexfee'); var flexCost=flexCostTMP.options[flexCostTMP.selectedIndex].value; // update the table values document.getElementById('iF1C0').innerHTML=parseInt((totalSingle)*.4); document.getElementById('iF1C1').innerHTML=parseInt((totalSingle)*.65); document.getElementById('iF1C2').innerHTML=parseInt((totalSingle)*.8); document.getElementById('iF1C3').innerHTML=parseInt((totalSingle)*1); document.getElementById('iF2C0').innerHTML=parseInt((totalFamily)*.4); document.getElementById('iF2C1').innerHTML=parseInt((totalFamily)*.65); document.getElementById('iF2C2').innerHTML=parseInt((totalFamily)*.8); document.getElementById('iF2C3').innerHTML=parseInt((totalFamily)*1); document.getElementById('iF5C0').innerHTML=parseInt((totalSingle)*.4*flexCost) + parseInt((totalFamily)*.4*flexCost); document.getElementById('iF5C1').innerHTML=parseInt((totalSingle)*.65*flexCost) + parseInt((totalFamily)*.65*flexCost); document.getElementById('iF5C2').innerHTML=parseInt((totalSingle)*.8*flexCost) + parseInt((totalFamily)*.8*flexCost); document.getElementById('iF5C3').innerHTML=parseInt((totalSingle)*1*flexCost) + parseInt((totalFamily)*1*flexCost); document.getElementById('iF6C0').innerHTML=parseInt((totalSingle)*.4*flexCost) + parseInt((totalFamily)*.4*flexCost) +parseInt(totalFamily*.4) + parseInt(totalSingle*.4); document.getElementById('iF6C1').innerHTML=parseInt((totalSingle)*.65*flexCost) + parseInt((totalFamily)*.65*flexCost) +parseInt(totalFamily*.65) + parseInt(totalSingle*.65); document.getElementById('iF6C2').innerHTML=parseInt((totalSingle)*.8*flexCost) + parseInt((totalFamily)*.8*flexCost) +parseInt(totalFamily*.8) + parseInt(totalSingle*.8); document.getElementById('iF6C3').innerHTML=parseInt((totalSingle)*1*flexCost) + parseInt((totalFamily)*1*flexCost) +parseInt(totalFamily*1) + parseInt(totalSingle*1); }
I am building a quote tool and I am adding new form field on the click of Add more button using JQuery, and want the id to change as well so that I can use it in my calculation, but the id doesn't change. Also, how should I use it in my calculation so it adds dynamically added form fields as well. Thanks a lot in advance.
HTML:
<div class="input_fields_wrap"> <div class="empBlock3"> <input type="text" value="Employee" class="employee" id="flex_2" onchange="updateTable2();" /> <div class="slds-form-element__row" > <div class="slds-form-element slds-size--1-of-4"> <div class="status1" name="status1"><h2>Single</h2></div> </div> <div class="slds-form-element slds-size--1-of-4"> <input type="number" id="flex_2_single_num" class="slds-input" min="0" max="1500" value="0" name="stepper1" style="width:50%;" onchange="updateTable2();" /> </div> <div class="slds-form-element slds-size--1-of-4"> $ <input type="text" id="flex_2_single" name="amount1" class="slds-input" style="width:50%;" onchange="updateTable2();" /> </div> </div> <div class="slds-form-element__row"> <div class="slds-form-element slds-size--1-of-4"> <div class="status2" name="status2"><h2>Family</h2></div> </div> <div class="slds-form-element slds-size--1-of-4"> <input type="number" id="flex_2_family_num" class="slds-input" min="0" max="1500" value="0" name="stepper2" style="width:50%;" onchange="updateTable2();" /> </div> <div class="slds-form-element slds-size--1-of-4"> $ <input type="text" id="flex_2_family" name="amount3" class="slds-input" style="width:50%;" onchange="updateTable2();" /> </div> </div> <div class="slds-form-element__row"> <div class="slds-form-element slds-size--1-of-4" name="ratio"> Ratio: <select> <option value="1:1">1:1</option> <option value="1:2" selected="">1:2</option> <option value="1:3">1:3</option> </select> </div> </div> </div> </div>
JQuery:
function addMoreRows3() { empBlock3 ++; // Adding extra form fields var recRow3 = '<div class="empBlock3'+empBlock3+'"> <br> <div class="empBlock3">\ <input type="text" value="Employee" class="employee" id="flex_2" onchange="updateTable2();" />\ <div class="slds-form-element__row" >\ <div class="slds-form-element slds-size--1-of-4">\ <div class="status1" name="status1"><h2>Single</h2></div>\ </div>\ <div class="slds-form-element slds-size--1-of-4">\ <input type="number" id="flex_2_single_num" class="slds-input" min="0" max="1500" value="0" name="stepper1" style="width:50%;" onchange="updateTable2();" />\ </div>\ <div class="slds-form-element slds-size--1-of-4">\ $ <input type="text" id="flex_2_single" name="amount1" class="slds-input" style="width:50%;" onchange="updateTable2();" />\ </div>\ </div>\ <div class="slds-form-element__row">\ <div class="slds-form-element slds-size--1-of-4">\ <div class="status2" name="status2"><h2>Family</h2></div>\ </div>\ <div class="slds-form-element slds-size--1-of-4">\ <input type="number" id="flex_2_family_num" class="slds-input" min="0" max="1500" value="0" name="stepper2" style="width:50%;" onchange="updateTable2();" />\ </div>\ <div class="slds-form-element slds-size--1-of-4">\ $ <input type="text" id="flex_2_family" name="amount3" class="slds-input" style="width:50%;" onchange="updateTable2();" />\ </div>\ </div>\ <div class="slds-form-element__row">\ <div class="slds-form-element slds-size--1-of-4" name="ratio">\ Ratio:\ <select>\ <option value="1:1">1:1</option>\ <option value="1:2" selected="">1:2</option>\ <option value="1:3">1:3</option>\ </select>\ </div>\ </div><a href="javascript:void(0);" onclick="removeRow3('+empBlock3+');">Delete</a></div></div>'; $('#addedRows3').append(recRow3); }; function removeRow3(removeNum3) { $('.empBlock3'+removeNum3).remove(); };
Calculation for Quote tool:
function updateTable2() { // this updates the table as the values are being filled out // get the variables for the first Job Description (hsa_1) var flex1_Name = document.getElementById('flex_1').value; var flex1_Single_Num = document.getElementById('flex_1_single_num').value; var flex1_Single_Limit = document.getElementById('flex_1_single').value; var flex1_Family_Num = document.getElementById('flex_1_family_num').value; var flex1_Family_Limit = document.getElementById('flex_1_family').value; // get the variables for the second Job Description (hsa_2) var flex2_Name = document.getElementById('flex_2').value; var flex2_Single_Num = document.getElementById('flex_2_single_num').value; var flex2_Single_Limit = document.getElementById('flex_2_single').value; var flex2_Family_Num = document.getElementById('flex_2_family_num').value; var flex2_Family_Limit = document.getElementById('flex_2_family').value; var totalSingle = (flex1_Single_Limit * flex1_Single_Num)+(flex2_Single_Limit * flex2_Single_Num); var totalFamily = (flex1_Family_Limit * flex1_Family_Num)+(flex2_Family_Limit * flex2_Family_Num); var totalCost = totalSingle+totalFamily; var flexCostTMP=document.getElementById('iFlexfee'); var flexCost=flexCostTMP.options[flexCostTMP.selectedIndex].value; // update the table values document.getElementById('iF1C0').innerHTML=parseInt((totalSingle)*.4); document.getElementById('iF1C1').innerHTML=parseInt((totalSingle)*.65); document.getElementById('iF1C2').innerHTML=parseInt((totalSingle)*.8); document.getElementById('iF1C3').innerHTML=parseInt((totalSingle)*1); document.getElementById('iF2C0').innerHTML=parseInt((totalFamily)*.4); document.getElementById('iF2C1').innerHTML=parseInt((totalFamily)*.65); document.getElementById('iF2C2').innerHTML=parseInt((totalFamily)*.8); document.getElementById('iF2C3').innerHTML=parseInt((totalFamily)*1); document.getElementById('iF5C0').innerHTML=parseInt((totalSingle)*.4*flexCost) + parseInt((totalFamily)*.4*flexCost); document.getElementById('iF5C1').innerHTML=parseInt((totalSingle)*.65*flexCost) + parseInt((totalFamily)*.65*flexCost); document.getElementById('iF5C2').innerHTML=parseInt((totalSingle)*.8*flexCost) + parseInt((totalFamily)*.8*flexCost); document.getElementById('iF5C3').innerHTML=parseInt((totalSingle)*1*flexCost) + parseInt((totalFamily)*1*flexCost); document.getElementById('iF6C0').innerHTML=parseInt((totalSingle)*.4*flexCost) + parseInt((totalFamily)*.4*flexCost) +parseInt(totalFamily*.4) + parseInt(totalSingle*.4); document.getElementById('iF6C1').innerHTML=parseInt((totalSingle)*.65*flexCost) + parseInt((totalFamily)*.65*flexCost) +parseInt(totalFamily*.65) + parseInt(totalSingle*.65); document.getElementById('iF6C2').innerHTML=parseInt((totalSingle)*.8*flexCost) + parseInt((totalFamily)*.8*flexCost) +parseInt(totalFamily*.8) + parseInt(totalSingle*.8); document.getElementById('iF6C3').innerHTML=parseInt((totalSingle)*1*flexCost) + parseInt((totalFamily)*1*flexCost) +parseInt(totalFamily*1) + parseInt(totalSingle*1); }
原文:https://stackoverflow.com/questions/43878383
最满意答案
Can't set headers after they are sent
通常表示您响应请求两次 。你不能这样做。
对于每个
request
/request
,应该只有一个response
/res
。app.get('/', function(req, res) { // you respond to the request here res.sendFile('./index.html',{root: __dirname}); // and you respond again here res.send(data) });
确定是否要
sendFile()
或send(data)
该端点。从您的代码判断,您可能想要创建另一个端点,使用您的AJAX调用,然后执行后者
// serve your index app.get('/', function(req, res) { res.sendFile('./index.html',{root: __dirname}) }); // serve your data // Your AJAX call should hit this endpoint instead app.get('/data', function(req, res) { var data = 'lorem ipsum dolor'; res.send(data); });
Can't set headers after they are sent
usually indicates that you respond to a request twice.You can't do that.
For each
request
/req
there should only be oneresponse
/res
.app.get('/', function(req, res) { // you respond to the request here res.sendFile('./index.html',{root: __dirname}); // and you respond again here res.send(data) });
Decide if you want to
sendFile()
ORsend(data)
for that endpoint.Judging from your code you probably want to create another endpoint, to hit with your AJAX call, where it does the latter
// serve your index app.get('/', function(req, res) { res.sendFile('./index.html',{root: __dirname}) }); // serve your data // Your AJAX call should hit this endpoint instead app.get('/data', function(req, res) { var data = 'lorem ipsum dolor'; res.send(data); });
相关问答
更多-
通过本地客户端程序获取服务器mysql数据库信息[2023-04-27]
ajax -
无法使用ajax更新页面(Unable to update page with ajax)[2022-07-09]
您应该将回调函数作为参数传递给setInterval 喜欢: setInterval(upd, 5000); upd(); /*Add this so that you will call the ajax immediately after loading and no need to wait for 5seconds*/ 您应该删除代码上的() 。 You should pass the callback function as parameter on setInterval Like: setI ... -
$('.box-list').append($(data).children()); I ended up rendering my ajax response as an html partial and then appending that partial in the success block of the ajax request. Controller: respond_to do |format| if @box.save @item = Item.new ...
-
控制器: def done @task = Task.find(params[:id]) # make sure you have this @task.update_attributes(:done => params["done"]) render :json => { data: "Success", is_done: params[:done] } end 视图: ....
<%= task.done %> <%= check_box_tag 'do ... 这是基于@Nikhil Nanjappa的回答。 您可以使用数组在localStorage中存储更多项目。 将对象存储在localStorage中 。 AjaxFile.html success: function(msg) { document.getElementById('get').innerHTML = msg; StoredData = JSON.parse(localStorage.getItem("StoredData")); if(!StoredData) StoredDat ...你的HTML应该是这样的。 // + javascript ...Can't set headers after they are sent通常表示您响应请求两次 。 你不能这样做。 对于每个request / request ,应该只有一个response / res 。 app.get('/', function(req, res) { // you respond to the request here res.sendFile('./index.html',{root: __dirname}); // and you respond again her ...这可能是因为您没有输出正确的Content-Type。 当你需要做ajax stuff服务器端时,尝试添加以下内容: header('Content-Type: application/json'); 此外,我认为您不需要JSON.stringify()调用,因为这会将您的json响应转换为字符串(如果您想使用json对象,则必须再次解析) It's probably because you are not outputting the correct Content-Type. Try adding t ...对购物车页面/cart进行ajax调用,获取所需元素并在当前页面上替换它们。 在第一个$.each函数之后添加上面的代码。 Do an ajax call to the cart page /cart, get the required elements and replace them on the current page. Add the code for the above after the first $.each function.AJAX不要更新页面(AJAX dont update page)[2023-07-25]
我认为你的问题在这里首先检查这行File "C:\Users\Nurzhan\PycharmProjects\RMS\project\views.py", line 252, data['html_function'] = render_to_string('project/function_list.html', {'functions': functions, 'request_user_is_business_analyst': request_user_is_business_analyst})并打 ...相关文章
更多- form load 的问题
- Storm 中 Fields作用
- form中如何接收传入的值
- jquery 问题
- 关于一个页面多个form问题????????
- jquery 插件开发
- HTML5 智能form表单新属性
- 如何把复选框中的值传到form里?
- jquery validate 插件实例教程
- Jquery EasyUI系列教程2
最新问答
更多- 您如何使用git diff文件,并将其应用于同一存储库的副本的本地分支?(How do you take a git diff file, and apply it to a local branch that is a copy of the same repository?)
- 将长浮点值剪切为2个小数点并复制到字符数组(Cut Long Float Value to 2 decimal points and copy to Character Array)
- OctoberCMS侧边栏不呈现(OctoberCMS Sidebar not rendering)
- 页面加载后对象是否有资格进行垃圾回收?(Are objects eligible for garbage collection after the page loads?)
- codeigniter中的语言不能按预期工作(language in codeigniter doesn' t work as expected)
- 在计算机拍照在哪里进入
- 使用cin.get()从c ++中的输入流中丢弃不需要的字符(Using cin.get() to discard unwanted characters from the input stream in c++)
- No for循环将在for循环中运行。(No for loop will run inside for loop. Testing for primes)
- 单页应用程序:页面重新加载(Single Page Application: page reload)
- 在循环中选择具有相似模式的列名称(Selecting Column Name With Similar Pattern in a Loop)
- System.StackOverflow错误(System.StackOverflow error)
- KnockoutJS未在嵌套模板上应用beforeRemove和afterAdd(KnockoutJS not applying beforeRemove and afterAdd on nested templates)
- 散列包括方法和/或嵌套属性(Hash include methods and/or nested attributes)
- android - 如何避免使用Samsung RFS文件系统延迟/冻结?(android - how to avoid lag/freezes with Samsung RFS filesystem?)
- TensorFlow:基于索引列表创建新张量(TensorFlow: Create a new tensor based on list of indices)
- 企业安全培训的各项内容
- 错误:RPC失败;(error: RPC failed; curl transfer closed with outstanding read data remaining)
- C#类名中允许哪些字符?(What characters are allowed in C# class name?)
- NumPy:将int64值存储在np.array中并使用dtype float64并将其转换回整数是否安全?(NumPy: Is it safe to store an int64 value in an np.array with dtype float64 and later convert it back to integer?)
- 注销后如何隐藏导航portlet?(How to hide navigation portlet after logout?)
- 将多个行和可变行移动到列(moving multiple and variable rows to columns)
- 提交表单时忽略基础href,而不使用Javascript(ignore base href when submitting form, without using Javascript)
- 对setOnInfoWindowClickListener的意图(Intent on setOnInfoWindowClickListener)
- Angular $资源不会改变方法(Angular $resource doesn't change method)
- 在Angular 5中不是一个函数(is not a function in Angular 5)
- 如何配置Composite C1以将.m和桌面作为同一站点提供服务(How to configure Composite C1 to serve .m and desktop as the same site)
- 不适用:悬停在悬停时:在元素之前[复制](Don't apply :hover when hovering on :before element [duplicate])
- 常见的python rpc和cli接口(Common python rpc and cli interface)
- Mysql DB单个字段匹配多个其他字段(Mysql DB single field matching to multiple other fields)
- 产品页面上的Magento Up出售对齐问题(Magento Up sell alignment issue on the products page)