点击表单Proceed提交按钮后无法跳转至指定success.html如何解决

• 现有HTML未包裹<form>标签，Proceed按钮为普通无绑定事件的按钮，点击后不会触发提交动作，也没有跳转逻辑
• 若使用AJAX提交表单数据，PHP侧的header跳转指令对AJAX请求无效，需要前端接收响应后手动控制跳转
• PHP代码中header跳转前不能有任何实际输出（包括空格、HTML内容、echo输出等），否则头信息会直接失效
• 原有PHP代码中setSubject($fname,$lname)参数写法错误，该方法仅接受一个字符串类型的主题参数，多参数需要拼接

方案1：原生表单提交（最简方案） #

第一步：修改HTML结构，补充表单属性 #

将原有模态框内容用<form>标签包裹，指定提交地址和提交方法，同时修改按钮类型为提交类型：

<!-- action替换为你的PHP处理文件实际路径 -->
<form action="你的PHP处理文件路径.php" method="post" id="submitForm">
  <div style="opacity: 0.9;" class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content" style="background: #002b49;">
          <div class="modal-header" style="border: none;">
            <h5 class="modal-title" id="exampleModalLabel"> </h5>
            <button type="button" style="background: none; border: none; color: #fff;" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
              <div class="defaultForm-group">
                          <div class="field calculator-price      " data-target="field" data-component="calculator-price-field" data-field="price">
                        <div class="field-input">
                    <div class="field-prefix">
                            <div class="field-prefix-wrapper">
                              <span class="field-prefix-label" data-component="field-prefix" data-related-name="price-prefix"><img height="14px" src="img/incoming-call.png"></span>
                            </div>
                          </div>      
                    <input type="number" class="defaultInput" id="tnumber" placeholder="Telephone no" name="price" step="10" min="0" required="" autocomplete="off">
    
                        </div>
            
                      </div>
                          <div class="field calculator-currency" data-target="field" data-field="currency">
                        <div class="field-input">
                        
                        <div class="field-prefix">
                        
                              <span class=""><img height="14px" src="img/email.png"></span>
                    
                          </div>   
                        
                          <div class="defaultSelec defaultSelect--form ">
                     <input class="defaultSelect-select" name="currency" id="emailaddress" placeholder="Email Address"></div>
    
                        </div>
                      </div>
                </div>
          </div>
          
          <p class="error_rep2" style="color: #fff;"></p>
           <p class="submitinfo2" style="color: #fff;"></p>
          <div class="modal-footer">
            <!-- 将button类型修改为submit触发表单提交 -->
            <button type="submit" id="mproceed" class="btn btn--secondary  btn--large">Proceed</button>
          </div>
        </div>
      </div>
    </div>
</form>

第二步：修复PHP代码跳转逻辑 #

在PHP文件最顶部开启输出缓存，避免前置输出导致header失效，同时修正参数错误：

<?php
// 顶部第一行就开启输出缓存，避免之前的输出导致头信息失效
ob_start();

// 补充获取表单提交参数的代码
$email = $_POST['currency'] ?? '';
$fname = $_POST['price'] ?? '';
$lname = ''; // 按实际需求补充取值逻辑
$msgbody = '手机号：'.$fname.' 邮箱：'.$email; // 按实际需求拼接邮件内容

if(isset($email) && trim($email)!=''){
$send = SimpleMail::make()
    ->setTo('chacha@gmail.com', 'Elie Services')
    ->setFrom($email, $fname)
    ->setSubject($fname.' '.$lname) // 修正subject参数，拼接为单个字符串
    ->setMessage($msgbody)
    ->setHtml()
    ->setWrap(100)
    ->send();

if ($send) {
  header("Location: success.html");
  exit(); // 跳转后立即终止后续代码执行
} else {
    echo 'An error occurred. We could not send email';
   $page = "success.html";
$sec = "3";
header("Refresh: $sec; url=$page");
exit();
}
}else {
    
    $page = "success.html";
$sec = "1";
header("Refresh: $sec; url=$page");
exit();
}
ob_end_flush();
?>

方案2：AJAX无刷新提交方案 #

如果需要保留模态框不刷新页面提交，可使用JS绑定提交事件，提交完成后前端手动跳转：

document.getElementById('mproceed').addEventListener('click', function() {
    const tnumber = document.getElementById('tnumber').value.trim();
    const email = document.getElementById('emailaddress').value.trim();
    const errorTip = document.querySelector('.error_rep2');
    // 基础校验
    if(!tnumber || !email) {
        errorTip.innerText = '请完善手机号和邮箱信息';
        return;
    }
    errorTip.innerText = '';
    // 提交请求
    fetch('你的PHP处理文件路径.php', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: `price=${encodeURIComponent(tnumber)}&currency=${encodeURIComponent(email)}`
    }).then(res => {
        // 请求完成后直接跳转成功页
        window.location.href = 'success.html';
    }).catch(err => {
        errorTip.innerText = '提交失败，请稍后重试';
        setTimeout(()=>{
            window.location.href = 'success.html';
        }, 2000)
    })
})

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