求助:如何用jQuery实现表单两次提交并映射字段值
表单两次提交的jQuery实现求助
我需要处理一个第三方落地页生成的表单,无法对表单结构做过多修改。需求是触发表单提交时,完成两次提交操作:
- 第一次提交表单的全部原始字段值
- 第二次提交时将部分字段值进行重映射(用推荐人信息替换提交人信息,清空原推荐人字段)
我已经编写了以下jQuery代码,尝试通过AJAX实现无刷新的两次提交,但希望能得到优化建议或问题排查帮助:
jQuery(document).ready(function() { jQuery("form").submit(function(e) { // 监听原始表单提交事件 e.preventDefault(); // 阻止表单默认提交/页面刷新 // 收集原始表单数据用于第一次AJAX提交 var formData = { your_first_name: jQuery("#your_first_name").val(), your_last_name: jQuery("#your_last_name").val(), your_company_name: jQuery("#your_company_name").val(), your_work_email: jQuery("#your_work_email").val(), your_referrals_first_name: jQuery("#your_referrals_first_name").val(), your_referrals_last_name: jQuery("#your_referrals_last_name").val(), your_referrals_company_name: jQuery("#your_referrals_company_name").val(), your_referrals_email_address: jQuery("#your_referrals_email_address").val(), your_referrals_phone_Number: jQuery("#your_referrals_phone_number").val(), how_did_you_hear_about_electrics_referral_program: jQuery("#how_did_you_hear_about_electrics_referral_program").val(), } // 重映射字段值用于第二次AJAX提交 var repostData = { your_first_name: jQuery("#your_referrals_first_name").val(), your_last_name: jQuery("#your_referrals_last_name").val(), your_company_name: jQuery("#your_referrals_company_name").val(), your_work_email: jQuery("#your_referrals_email_address").val(), your_referrals_first_name: '', your_referrals_last_name: '', your_referrals_company_name: '', your_referrals_email_address: '', your_referrals_phone_Number: '', how_did_you_hear_about_electrics_referral_program: jQuery("#how_did_you_hear_about_electrics_referral_program").val(), } // 第一次提交原始数据 jQuery.ajax ({ type: 'POST', data: formData, dataType: 'json', success: function (data) { console.log("Form 1 submitted successfully!"); // 第一次提交成功后,执行第二次提交 jQuery.ajax ({ type: 'POST', data: repostData, dataType: 'json', success: function (data) { console.log("Form 2 submitted successfully!"); }, error: function (data) { console.log("An error has occured on form 2"); } }); }, error: function (data) { console.log("An error has occured on form 1"); } }); }); });
我目前的思路是通过AJAX实现无刷新提交,确保第二次提交仅在第一次成功后执行,但不确定是否存在逻辑漏洞或可优化的点,希望能得到帮助。
内容的提问来源于stack exchange,提问作者David Martini
相关产品推荐
相关产品推荐

