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

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!