当我添加名称属性时，表单操作不再起作用

Question

除了使用 general_api 将潜在客户发送到网络之外，我还想要表单，以将数据保存在工作表上。 在不写入工作表数据的情况下，wf_general_api 表单操作可以正常工作。如果我在表单上添加“name =”，它会正确保存工作表数据，但 wf_general_api 文件不再有效。

<form method="post" accept-charset="utf-8" role="form" name="gsheet" action="general_api.php">

这是general_api.php，用于向网络发送线索：

<?php

function clean_phone_number($value){
  if(substr($value,0,4) == '0039')
      $value = substr($value,4);

  $value = preg_replace('~\D~', '', $value);
  $value = preg_replace('/\s+/', '', $value);

  if(strlen($value)>10 && substr($value, 0, 2) == '39' && substr($value, 2, 1) == '3')
      $value = substr($value,2);

  return $value;
}

function clean_zipcode($value){

  $value = preg_replace('~\D~', '', $value);
  $value = preg_replace('/\s+/', '', $value);

  return $value;
}

$post_data = [
  'source_id' => SOURCE_ID,
  'aff_sub1' => '',
  'aff_sub2' => '',
  'name' => $_POST['name'],
  'phone' => clean_phone_number($_POST['phone']),
  'quantity' => $_POST['quantity'],
  'address' => $_POST['address'],
  'city' => $_POST['city'],
  'zipcode' => clean_zipcode($_POST['zipcode']),
  'notes' => $_POST['notes'],
  'doubleCheck' => 1
];

$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => SEND_URL,
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => '',
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 0,
  CURLOPT_FOLLOWLOCATION => true,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => 'POST',
  CURLOPT_POSTFIELDS => http_build_query($post_data),
  CURLOPT_HTTPHEADER => array(
    'Content-Type: application/x-www-form-urlencoded'
  )
));

$response = curl_exec($curl);

curl_close($curl);
$json = json_decode($response,true);

$status = $json['status'];

if($status == 'double')
  $redirection_url = $json['check_url'];
else
  $redirection_url = THANKYOU_URL;

//header('Location: '.$redirection_url);
echo "<script>top.location.href='$redirection_url';</script>";

这是保存数据的gsheet：

const scriptURL = 'https://script.google.com/macros/s/xxxxx/exec'
const form = document.forms['gsheet']

  form.addEventListener('submit', e => {
    e.preventDefault()
    fetch(scriptURL, { method: 'POST', body: new FormData(form)})
  })

如果我添加 name 属性，表单操作将不再起作用。如果我删除它，它会恢复工作，但不会将数据保存在工作表上。我该如何解决？

Answer 1

添加名称并且 javascript 开始工作后，e.preventDefault() 会阻止表单的默认操作。您需要从 javascript 中提交表单。我已将其更改为 fetch 以便在 fetch 完成后提交。请注意，这未经测试，但应该可以工作：

const form = document.forms['gsheet']

form.addEventListener('submit', e => {
    e.preventDefault()
    fetch(scriptURL, { method: 'POST', body: new FormData(form)}).then( () => {
            form.submit();
        }
    )
})