отправка данных из javascript в php не работает

#javascript

#javascript

Вопрос:

Я пишу код, который отправляет электронное письмо с php с вложением. И вот мой код.

мой main.php файл

  <form action="javascript:postData()" id="form">

<fieldset>

<!-- Form Name -->
<legend>Application</legend>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="Full Name">Full Name</label>  
  <div class="col-md-4">
  <input id="FullName" name="FullName" type="text" placeholder="" class="form-control input-md">
    
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="Email">Email</label>  
  <div class="col-md-4">
  <input id="Email" name="Email" type="text" placeholder="" class="form-control input-md">
    
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="roleFor">Role Applying for</label>  
  <div class="col-md-4">
  <input id="roleFor" name="roleFor" type="text" placeholder="" class="form-control input-md">
    
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="jobId">Job ID</label>  
  <div class="col-md-4">
  <input id="jobId" name="jobId" type="text" placeholder="" class="form-control input-md">
    
  </div>
</div>

<!-- File Button --> 
<div class="form-group">
  <label class="col-md-4 control-label" for="uploadResume">Upload Resume</label>
  <div class="col-md-4">
        <input type="file" name="file" class="form-control">
  </div>
</div>

<!-- Textarea -->
<div class="form-group">
  <label class="col-md-4 control-label" for="experience">Experience</label>
  <div class="col-md-4">                     
    <textarea class="form-control" id="experience" name="experience"></textarea>
  </div>
</div>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit"></label>
  <div class="col-md-4">
    <button id="submit" type="submit" name="submit" class="btn btn-success">Submit</button>
  </div>
</div>

</fieldset>
</form>
 

и мой js

 function postData() {
    const form = document.getElementById('form');
    const data = new FormData();
    data.append('FullName', form.FullName.value);
    data.append('Email', form.Email.value);
    data.append('roleFor', form.roleFor.value);
    data.append('jobId', form.jobId.value);
    data.append('experience', form.experience.value);

    fetch('sendEmail.php', {method: 'POST', body: data}).then(response => {
        if (!response.ok){
            throw new Error('Network response was not ok.');
        } else 
        {
            console.log(response);
            alert('New job posted');
            document.getElementById("form").reset();

        }
    }).catch(err => console.log(err));
}
 

и мой sendEmail.php является

 <?php
$fName = $_POST['FullName'];
$emailAddr = $_POST['Email'];
$roleFor = $_POST['roleFor'];
$jobId = $_POST['jobId'];
$exp = $_POST['experience'];

if (!empty($fName) amp;amp; !empty($emailAddr))
    {

       

        $statusMsg = '';
        if (isset($_FILES["file"]["name"]))
        {
            $emailAddr = $_POST['Email'];
            $fromemail = 'admin@admin.com';
            $subject = 'Teesst Syubect';
            $email_message = "<table><tr><td>Name: </td><td>" . $fName . "</td></tr> </table>";
            $email_message .= "Please find CV in the attachment";
            $semi_rand = md5(uniqid(time()));
            $headers = "From: " . $fromemail;
            $mime_boundary = "==Multipart_Boundary_x{$semi_rand}x";

            $headers .= "nMIME-Version: 1.0n" . "Content-Type: multipart/mixed;n" . " boundary="{$mime_boundary}"";

            if ($_FILES["file"]["name"] != "")
            {
                $strFilesName = $_FILES["file"]["name"];
                $strContent = chunk_split(base64_encode(file_get_contents($_FILES["file"]["tmp_name"])));

                $email_message .= "This is a multi-part message in MIME format.nn" . "--{$mime_boundary}n" . "Content-Type:text/html; charset="iso-8859-1"n" . "Content-Transfer-Encoding: 7bitnn" . $email_message .= "nn";

                $email_message .= "--{$mime_boundary}n" . "Content-Type: application/octet-stream;n" . " name="{$strFilesName}"n" .
                //"Content-Disposition: attachment;n" .
                //" filename="{$fileatt_name}"n" .
                "Content-Transfer-Encoding: base64nn" . $strContent .= "nn" . "--{$mime_boundary}--n";
            }
            $toemail = "myEmail@gmail.com";

            if (mail($toemail, $subject, $email_message, $headers))
            {
                $statusMsg = "Email send successfully with attachment";
                header("Location:careers.php");
            }
            else
            {
                $statusMsg = "Not sent";
            }
        }

    }

    else
    {
        echo "Enter both Title and Desription";
        die();
    }
?>
 

Теперь проблемы,

когда я это делаю <form action="sendEmail.php" id="form" method="post"> , он отправляет электронное письмо, как и ожидалось, но когда я пытаюсь отправить его через javascript (как показано в моем коде), он не отправляет электронное письмо, но, к моему удивлению, статус ответа 200 OK .

Пожалуйста, дайте мне знать, где я ошибаюсь.

Спасибо

Комментарии:

1. Я никогда не видел action="javascript:..." , чтобы их использовали. Вы пробовали onsubmit="return postData()" вместо этого? Также убедитесь, что ваша функция postData() возвращает false , что предотвратит отправку формы по URL-адресу действия.

2. Вместо возврата false postData() вы можете вызвать Event.preventDefault() event-объект onsubmit -event формы. Это может быть более чистым, так как это ослабит связь HTML и JS.

3. Привет @LupinityLabs, я отправляю на php

4. Спасибо за совет @OskarGrosser🙂