How to make jQuery and React friends. PHP (Feedback)?

• 0

  import React from 'react'
  import $ from 'jquery'
  
  $('#sendMail').on('click', function () {
    let name = $('#name').val().trim();
    let face = $('#face').val().trim();
    let personal_account = $('#personal_account').val().trim();
    let addres = $('#addres').val().trim();
    let email = $('#email').val().trim();
    let phone = $('#phone').val().trim();
    let text = $('#text').val().trim();
    let image = $('#image').val();
  
    $.ajax({
      url: 'mail.php',
      type: 'POST',
      cache: false,
      data: {
        "name": name,
        "face": face,
        "personal_account": personal_account,
        "addres": addres,
        "email": email,
        "phone": phone,
        "text": text,
        "image": image
      },
      dataType: 'html',
      beforeSend: function () {
        $('#sendMail').prop('disabled', true);
      },
      success: function() {
        $('#sendMail').prop('disabled', false);
        alert("Успешно отправили заявку")
      }
    });
  });
  
  export const FeedbackForm = () => {
    return (
      <form id="form" method="post" action="mail.php">
        <div className="feedback-form">
          <div className="feedback-form__name">
            <div className="feedback-form__title">Наименование организации / ФИО.*</div>
            <input type="text" name="name" id="name" placeholder="Наименование организации / ФИО.*" className="form-input"
              required />
          </div>
          <div className="feedback-form__face">
            <div className="feedback-form__title">Контактное лицо</div>
            <input type="text" name="face" id="face" placeholder="Контактное лицо" className="form-input" />
          </div>
          <div className="feedback-form__personal-account">
            <div className="feedback-form__title">Лицевой счет*</div>
            <input type="text" name="personal_account" id="personal_account" placeholder="Лицевой счет*"
              className="form-input" required />
          </div>
          <div className="feedback-form__addres">
            <div className="feedback-form__title">Адрес*</div>
            <input type="text" name="addres" id="addres" placeholder="Адрес*" className="form-input" required/>
          </div>
          <div className="feedback-form__email">
            <div className="feedback-form__title">E-mail*</div>
            <input type="email" name="email" id="email" placeholder="E-mail*" className="form-input" required />
          </div>
          <div className="feedback-form__phone">
            <div className="feedback-form__title">Контактный телефон*</div>
            <input type="text" name="phone" id="phone" placeholder="Контактный телефон*" className="form-input" id="phone"
            required />
          </div>
          <div className="feedback-form__text">
            <div className="feedback-form__title">Текст сообщения*</div>
            <textarea type="text" name="text" id="text" placeholder="Текст сообщения*" className="form-input text"
              required></textarea>
          </div>
          <div className="feedback-form__fail">
            <div className="feedback-form__title file">Прикрепить к приложению файл</div>
            <input type="file" name="image" id="image" className="inputfile" />
          </div>
        </div>
        <button type="button" className="send" id="sendMail">Отправить сообщение</button>
      </form>
    )
  }

  
  

  <!--  -->
    // $name = $_POST['name'];
    // $face = $_POST['face'];
    // $personal_account = $_POST['personal_account'];
    // $addres = $_POST['addres'];
    // $email = $_POST['email'];
    // $phone = $_POST['phone'];
    // $text = $_POST['text'];
  
    // $subject = "=?utf-8?B?".base64_encode("Сообщение с сайта")."?=";
    // $headers = "From: $email\r\nReply-to: $email"
  
    // $success = mail("[email protected]", $subject. $text, $headers);
  
    // echo $success;
  //
  
  <?php
    $name = $_POST['name'];
    $face = $_POST['face'];
    $personal_account = $_POST['personal_account'];
    $addres = $_POST['addres'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $text = $_POST['text'];
    $image = $_POST['image'];
  
    $name = htmlspecialchars($name);
    $face = htmlspecialchars($face);
    $personal_account = htmlspecialchars($personal_account);
    $addres = htmlspecialchars($addres);
    $email = htmlspecialchars($email);
    $phone = htmlspecialchars($phone);
    $text = htmlspecialchars($text);
    $image = htmlspecialchars($image);
  
    $name = urldecode($name);
    $face = urldecode($face);
    $personal_account = urldecode($personal_account);
    $addres = urldecode($addres);
    $email = urldecode($email);
    $phone = urldecode($phone);
    $text = urldecode($text);
    $image = urldecode($image);
  
    mail("[email protected]","Заявка с сайта", 
    "Наименование организации / ФИО.*: $name\n
    Контактное лицо: $face\n
    Лицевой счет*: $personal_account\n
    Адрес*: $addres\n
    E-mail*: $email\n
    Контактный телефон*: $phone\n
    Текст сообщения*: $text\n
    Изображение: $image");
    if (mail == TRUE) {
        echo "Заявка отправлена.";
    } else {
        echo "Ошибка отправки.";
    }
  ?>

  JavaScript Anonymous, Feb 3, 2020

---

2 Answers
• 0
  Most likely without angular and python :(

  Anonymous

---

• 0
  To use jquery for react is somehow too much. It seems to me that these libraries are mutually exclusive.
  
  
  
  Here it is easier to make a class component and write the changes of all your fields to the state, and then send a request to the backend (to php) using a regular fetch.
  
  
  
  If you want functional components, use the useState hook.

  Anonymous

---