表单提交后如何在成功提示消息中同时显示文本框与下拉框的值

要在成功提示里同时显示文本框和下拉框的值，你需要做这几步：

• 先获取文本框的DOM引用，和你获取下拉框#budget的方式一致
• 表单提交时，同时拿到文本框和下拉框的当前值，一起拼进提示消息里

假设你的文本框id是#username（请替换成你实际的文本框id），修改后的完整代码如下：

$(document).ready(function() {
  // 存储下拉框、文本框的DOM引用
  const $budget = $('#budget');
  const $username = $('#username'); // 新增：文本框的DOM引用
  const $bookingForm = $('#booking-form');
  const $successText = $('.insert-success-text');
  
  let selectedBudget = $budget.val();

  // 下拉框值变化时更新存储的预算值
  $budget.change(function(){
    selectedBudget = $(this).val();
  });

  $bookingForm.submit(function(e){
    // 获取文本框的最新值，trim()去除首尾空格
    const userName = $username.val().trim();
    
    // 同时验证两个字段是否都不为空
    if(selectedBudget && userName){
      // 拼接包含两个值的提示消息
      $successText.text(`感谢${userName}对${selectedBudget}的关注`);
      return true;
    }
    else{
      // 哪个字段为空就聚焦哪个，提升用户体验
      if(!userName) $username.focus();
      else $budget.focus();
      return false;
    }
  });  
});

核心修改说明： #

1. 新增文本框的DOM引用$username，记得替换成你实际的文本框ID（比如#fullname、#email等）
2. 提交时直接取文本框的最新值，避免提前存储导致值不更新的问题
3. 新增双字段验证，确保两个必填项都有内容才提交
4. 在提示文本里同时插入文本框和下拉框的值

内容的提问来源于stack exchange，提问作者inskribe