Как отправить данные из калькулятора на сайте?

Question

[unlik]

В общем на сайте есть калькулятор в виде таблицы.
Вносим данные , видим итоговую стоимость.
Стоимость при помощи скрипта записывается в тег p с классом article_cost

как можно эту стоимость отправить на почту?

Answer 1

[Талян]

В браузере:

<p class="article_cost" id="test">213</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script>
alert($(".article_cost").html());

$.post(
  "/ajaxtest.php",
  {
   calculated: $(".article_cost").html()
  },
  onAjaxSuccess
);
</script>

На сервере:

$f=fopen("log.txt","a");
fwrite($f,$_POST['calculated']);

Comments

[unlik]

Как оказалось у меня уже есть код который формирует Post запрос.

Но не могу разобраться как узнать эти запросы.

new Vue({
    el: "#js-calculator",
    data: {
      readyMixed: [
        {
          mark: "Ð’7,5",
          params: "M100 П3 F50 W2",
          types: [
            { type: "gravel", value: "", cost: 2250 },
            { type: "granite", value: "", cost: 2450 }
          ]
        },
        {
          mark: "Ð’12,5",
          params: "М150 П3 F50 W4",
          types: [
            { type: "gravel", value: "", cost: 2450 },
            { type: "granite", value: "", cost: 2600 }
          ]
        },
        {
          mark: "Ð’15",
          params: "М200 П3 F100 W6",
          types: [
            { type: "gravel", value: "", cost: 2550 },
            { type: "granite", value: "", cost: 2700 }
          ]
        },
        {
          mark: "Ð’20",
          params: "М250 П4 F200 W8",
          types: [
            { type: "gravel", value: "", cost: 2650 },
            { type: "granite", value: "", cost: 2850 }
          ]
        },
        {
          mark: "Ð’22,5",
          params: "М300 П4 F200 W6",
          types: [
            { type: "gravel", value: "", cost: 2700 },
            { type: "granite", value: "", cost: 2950 }
          ]
        },
        {
          mark: "Ð’25",
          params: "M350 П4 F300 W8",
          types: [
            { type: "gravel", value: "", cost: 2800 },
            { type: "granite", value: "", cost: 3200 }
          ]
        },
        {
          mark: "Ð’30",
          params: "М400 П4 F300 W10",
          types: [
            { type: "gravel" },
            { type: "granite", value: "", cost: 3350 }
          ]
        },
        {
          mark: "Ð’35",
          params: "М450 П4 F300 W12",
          types: [
            { type: "gravel" },
            { type: "granite", value: "", cost: 3500 }
          ]
        },
        {
          mark: "Ð’40",
          params: "М550 П4 F300 W12",
          types: [
            { type: "gravel" },
            { type: "granite", value: "", cost: 3850 }
          ]
        },
        {
          mark: "Ð’45",
          params: "М600 П4 F300 W12",
          types: [
            { type: "gravel" },
            { type: "granite", value: "", cost: 4550 }
          ]
        },
        {
          mark: "Ð’60",
          params: "М800 П4 F300 W14",
          types: [
            { type: "gravel" },
            { type: "granite", value: "", cost: 5450 }
          ]
        }
      ],
      lean: [
        { mark: "M100", types: [{ type: "any", value: "", cost: 2250 }] },
        { mark: "M150", types: [{ type: "any", value: "", cost: 2450 }] },
        { mark: "M200", types: [{ type: "any", value: "", cost: 2550 }] },
        { mark: "M250", types: [{ type: "any", value: "", cost: 2650 }] },
        { mark: "M300", types: [{ type: "any", value: "", cost: 2700 }] }
      ],
      expanded: [
        { mark: "M50", types: [{ type: "any", value: "", cost: 2250 }] },
        { mark: "M100", types: [{ type: "any", value: "", cost: 2450 }] },
        { mark: "M150", types: [{ type: "any", value: "", cost: 2550 }] },
        { mark: "M200", types: [{ type: "any", value: "", cost: 2650 }] },
        { mark: "M300", types: [{ type: "any", value: "", cost: 2700 }] }
      ],
      solution: [
        { mark: "M100", types: [{ type: "any", value: "", cost: 2250 }] },
        { mark: "M150", types: [{ type: "any", value: "", cost: 2450 }] },
        { mark: "M200", types: [{ type: "any", value: "", cost: 2550 }] },
        { mark: "M250", types: [{ type: "any", value: "", cost: 2650 }] }
      ],
      delivery: [
        { text: "до 5 км", cost: "300 руб / m3" },
        { text: "до 5-10 км", cost: "350 руб / m3" },
        { text: "до 10-15 км", cost: "400 руб / m3" },
        { text: "до 15-20 км", cost: "450 руб / m3" },
        { text: "до 20-25 км", cost: "500 руб / m3" },
        { text: "до 25-30 км", cost: "550 руб / m3" }
      ],
      result: 0
    },
    computed: {
      currentTabData: function() {
        return this.tabs[this.currentTabIndex].data;
      },
      currentTab: function() {
        return this.tabs[this.currentTabIndex];
      }
    },
    methods: {
      valueUpdated: function() {
        function t(t) {
          t.forEach(function(t) {
            t.types.forEach(function(t) {
              console.log(t.value),
                t.value > 0 &&
                  ((i.value += t.value), (i.result += t.cost * t.value));
            });
          });
        }
        var i = { value: 0, result: 0 };
        t(this.readyMixed),
          t(this.lean),
          t(this.expanded),
          t(this.solution),
          i.value > 9 && (i.result = parseInt(i.result / 100 * 95)),
          (this.result = i.result);
      }
    }
  }),
  $('a[href*="#"]')
    .not('[href="#"]')
    .not('[href="#0"]')
    .click(function(t) {
      if (
        location.pathname.replace(/^\//, "") ==
          this.pathname.replace(/^\//, "") &&
        location.hostname == this.hostname
      ) {
        var i = $(this.hash);
        (i = i.length ? i : $("[name=" + this.hash.slice(1) + "]")).length &&
          (t.preventDefault(),
          $("html, body").animate(
            { scrollTop: i.offset().top },
            1e3,
            function() {
              var t = $(i);
              if ((t.focus(), t.is(":focus"))) return !1;
              t.attr("tabindex", "-1"), t.focus();
            }
          ));
      }
    }),
  $("#bg-modal").on("click", function() {
    $("#bg-modal").fadeOut(300), $(".modal").fadeOut(300);
  }),
  $("[data-open]").on("click", function() {
    openModal($(this).attr("data-open"));
  }),
  $("[data-close]").on("click", function(t) {
    closeModal($(this).attr("data-close"));
  }),
  $("form").submit(function(t) {
    t.preventDefault();
    var e = $(this),
      o = e.serializeArray(),
      s = {},
      n = e.find('[data-req="true"]'),
      r = !0;
    for (i = 0; i < o.length; i++) s[o[i].name] = o[i].value;
    if (
      ($.each(n, function(t, i) {
        var e = (i = $(i)).attr("name");
        "" == s[e] || null == s[e]
          ? (i.addClass("js-error"), console.log(e), (r = !1))
          : i.removeClass("js-error");
      }),
      r)
    )
      return (
        console.log("Send"),
        (cleararray = e.find('[data-clear="true"]')),
        $.each(cleararray, function(t, i) {
          $(i).val("");
        }),
        $.ajax(
          {
            method: "post",
            url: "php/send.php",
            data: o,
            error: function(t, i, e) {
              console.log(t.responseText + "|\n" + i + "|\n" + e);
            }
          },
          "json"
        ),
        $(".modal").fadeOut(300),
        openModal("#thx"),
        !1
      );
  }),

[Талян]

Да посмотрите вы var_dump($_POST) отправляемого запроса и изучите формат массива, который отправляется.

Запрос отправляется по адресу php/send.php - видно же.

Создайте там скрипт да и все.

Чтобы глянуть многоуровневый POST запрос, делайте циклы:

$f=fopen("1.txt","a+");

function recurse_post($data,$f)
{
    foreach ($data as $key=>$value)
    {
    fwrite($f,"$key =>\n");
		if(is_array($value))
		{
			fwrite($f,"(");
			recurse_post($value,$f);
			fwrite($f,")\n");
		}
		else
		{
			fwrite($f,"$value\n");
		}
    }	
}

recurse_post($_POST, $f);

Answer 2

[xmoonlight]

Отправить на сервер (POST-запрос напрямую или через AJAX), а с сервера - уже на почту.
Без сервера - не получится.

Comments

[unlik]

Это понятно. Вопрос лишь в том, как сформировать этот запрос без формы?

[xmoonlight]

unlik, также - через JS. Проще - с использованием Jquery. Примеры.

[unlik]

xmoonlight, Сам калькулятор реализован таким образом. Я с vue не сталкивался, но что-то мне подсказывает, что не хватает лишь чего-то в php файле.

new Vue({
    el: "#js-calculator",
    data: {
      readyMixed: [
        {
          mark: "Ð’7,5",
          params: "M100 П3 F50 W2",
          types: [
            { type: "gravel", value: "", cost: 2250 },
            { type: "granite", value: "", cost: 2450 }
          ]
        },
        {
          mark: "Ð’12,5",
          params: "М150 П3 F50 W4",
          types: [
            { type: "gravel", value: "", cost: 2450 },
            { type: "granite", value: "", cost: 2600 }
          ]
        },
        {
          mark: "Ð’15",
          params: "М200 П3 F100 W6",
          types: [
            { type: "gravel", value: "", cost: 2550 },
            { type: "granite", value: "", cost: 2700 }
          ]
        },
        {
          mark: "Ð’20",
          params: "М250 П4 F200 W8",
          types: [
            { type: "gravel", value: "", cost: 2650 },
            { type: "granite", value: "", cost: 2850 }
          ]
        },
        {
          mark: "Ð’22,5",
          params: "М300 П4 F200 W6",
          types: [
            { type: "gravel", value: "", cost: 2700 },
            { type: "granite", value: "", cost: 2950 }
          ]
        },
        {
          mark: "Ð’25",
          params: "M350 П4 F300 W8",
          types: [
            { type: "gravel", value: "", cost: 2800 },
            { type: "granite", value: "", cost: 3200 }
          ]
        },
        {
          mark: "Ð’30",
          params: "М400 П4 F300 W10",
          types: [
            { type: "gravel" },
            { type: "granite", value: "", cost: 3350 }
          ]
        },
        {
          mark: "Ð’35",
          params: "М450 П4 F300 W12",
          types: [
            { type: "gravel" },
            { type: "granite", value: "", cost: 3500 }
          ]
        },
        {
          mark: "Ð’40",
          params: "М550 П4 F300 W12",
          types: [
            { type: "gravel" },
            { type: "granite", value: "", cost: 3850 }
          ]
        },
        {
          mark: "Ð’45",
          params: "М600 П4 F300 W12",
          types: [
            { type: "gravel" },
            { type: "granite", value: "", cost: 4550 }
          ]
        },
        {
          mark: "Ð’60",
          params: "М800 П4 F300 W14",
          types: [
            { type: "gravel" },
            { type: "granite", value: "", cost: 5450 }
          ]
        }
      ],
      lean: [
        { mark: "M100", types: [{ type: "any", value: "", cost: 2250 }] },
        { mark: "M150", types: [{ type: "any", value: "", cost: 2450 }] },
        { mark: "M200", types: [{ type: "any", value: "", cost: 2550 }] },
        { mark: "M250", types: [{ type: "any", value: "", cost: 2650 }] },
        { mark: "M300", types: [{ type: "any", value: "", cost: 2700 }] }
      ],
      expanded: [
        { mark: "M50", types: [{ type: "any", value: "", cost: 2250 }] },
        { mark: "M100", types: [{ type: "any", value: "", cost: 2450 }] },
        { mark: "M150", types: [{ type: "any", value: "", cost: 2550 }] },
        { mark: "M200", types: [{ type: "any", value: "", cost: 2650 }] },
        { mark: "M300", types: [{ type: "any", value: "", cost: 2700 }] }
      ],
      solution: [
        { mark: "M100", types: [{ type: "any", value: "", cost: 2250 }] },
        { mark: "M150", types: [{ type: "any", value: "", cost: 2450 }] },
        { mark: "M200", types: [{ type: "any", value: "", cost: 2550 }] },
        { mark: "M250", types: [{ type: "any", value: "", cost: 2650 }] }
      ],
      delivery: [
        { text: "до 5 км", cost: "300 руб / m3" },
        { text: "до 5-10 км", cost: "350 руб / m3" },
        { text: "до 10-15 км", cost: "400 руб / m3" },
        { text: "до 15-20 км", cost: "450 руб / m3" },
        { text: "до 20-25 км", cost: "500 руб / m3" },
        { text: "до 25-30 км", cost: "550 руб / m3" }
      ],
      result: 0
    },
    computed: {
      currentTabData: function() {
        return this.tabs[this.currentTabIndex].data;
      },
      currentTab: function() {
        return this.tabs[this.currentTabIndex];
      }
    },
    methods: {
      valueUpdated: function() {
        function t(t) {
          t.forEach(function(t) {
            t.types.forEach(function(t) {
              console.log(t.value),
                t.value > 0 &&
                  ((i.value += t.value), (i.result += t.cost * t.value));
            });
          });
        }
        var i = { value: 0, result: 0 };
        t(this.readyMixed),
          t(this.lean),
          t(this.expanded),
          t(this.solution),
          i.value > 9 && (i.result = parseInt(i.result / 100 * 95)),
          (this.result = i.result);
      }
    }
  }),
  $('a[href*="#"]')
    .not('[href="#"]')
    .not('[href="#0"]')
    .click(function(t) {
      if (
        location.pathname.replace(/^\//, "") ==
          this.pathname.replace(/^\//, "") &&
        location.hostname == this.hostname
      ) {
        var i = $(this.hash);
        (i = i.length ? i : $("[name=" + this.hash.slice(1) + "]")).length &&
          (t.preventDefault(),
          $("html, body").animate(
            { scrollTop: i.offset().top },
            1e3,
            function() {
              var t = $(i);
              if ((t.focus(), t.is(":focus"))) return !1;
              t.attr("tabindex", "-1"), t.focus();
            }
          ));
      }
    }),
  $("#bg-modal").on("click", function() {
    $("#bg-modal").fadeOut(300), $(".modal").fadeOut(300);
  }),
  $("[data-open]").on("click", function() {
    openModal($(this).attr("data-open"));
  }),
  $("[data-close]").on("click", function(t) {
    closeModal($(this).attr("data-close"));
  }),
  $("form").submit(function(t) {
    t.preventDefault();
    var e = $(this),
      o = e.serializeArray(),
      s = {},
      n = e.find('[data-req="true"]'),
      r = !0;
    for (i = 0; i < o.length; i++) s[o[i].name] = o[i].value;
    if (
      ($.each(n, function(t, i) {
        var e = (i = $(i)).attr("name");
        "" == s[e] || null == s[e]
          ? (i.addClass("js-error"), console.log(e), (r = !1))
          : i.removeClass("js-error");
      }),
      r)
    )
      return (
        console.log("Send"),
        (cleararray = e.find('[data-clear="true"]')),
        $.each(cleararray, function(t, i) {
          $(i).val("");
        }),
        $.ajax(
          {
            method: "post",
            url: "php/send.php",
            data: o,
            error: function(t, i, e) {
              console.log(t.responseText + "|\n" + i + "|\n" + e);
            }
          },
          "json"
        ),
        $(".modal").fadeOut(300),
        openModal("#thx"),
        !1
      );
  }),

[crmMaster]

unlik,
Код, отвечающий за запрос:

$.ajax(
          {
            method: "post",
            url: "php/send.php",
            data: o,
            error: function(t, i, e) {
              console.log(t.responseText + "|\n" + i + "|\n" + e);
            }
          },
          "json"
        ),

то, что хранится в переменной o вы можете через console.log(o) посмотреть

Answer 3

[Stalker_RED]

FormData + XMLHttpRequest (ajax), или fetch, или какая-то похожая штука.

Примеры: https://developer.mozilla.org/en-US/docs/Web/API/F...

Comments

[unlik]

xmoonlight, Сам калькулятор реализован таким образом. Я с vue не сталкивался, но что-то мне подсказывает, что не хватает лишь чего-то в php файле.

new Vue({
    el: "#js-calculator",
    data: {
      readyMixed: [
        {
          mark: "Ð’7,5",
          params: "M100 П3 F50 W2",
          types: [
            { type: "gravel", value: "", cost: 2250 },
            { type: "granite", value: "", cost: 2450 }
          ]
        },
        {
          mark: "Ð’12,5",
          params: "М150 П3 F50 W4",
          types: [
            { type: "gravel", value: "", cost: 2450 },
            { type: "granite", value: "", cost: 2600 }
          ]
        },
        {
          mark: "Ð’15",
          params: "М200 П3 F100 W6",
          types: [
            { type: "gravel", value: "", cost: 2550 },
            { type: "granite", value: "", cost: 2700 }
          ]
        },
        {
          mark: "Ð’20",
          params: "М250 П4 F200 W8",
          types: [
            { type: "gravel", value: "", cost: 2650 },
            { type: "granite", value: "", cost: 2850 }
          ]
        },
        {
          mark: "Ð’22,5",
          params: "М300 П4 F200 W6",
          types: [
            { type: "gravel", value: "", cost: 2700 },
            { type: "granite", value: "", cost: 2950 }
          ]
        },
        {
          mark: "Ð’25",
          params: "M350 П4 F300 W8",
          types: [
            { type: "gravel", value: "", cost: 2800 },
            { type: "granite", value: "", cost: 3200 }
          ]
        },
        {
          mark: "Ð’30",
          params: "М400 П4 F300 W10",
          types: [
            { type: "gravel" },
            { type: "granite", value: "", cost: 3350 }
          ]
        },
        {
          mark: "Ð’35",
          params: "М450 П4 F300 W12",
          types: [
            { type: "gravel" },
            { type: "granite", value: "", cost: 3500 }
          ]
        },
        {
          mark: "Ð’40",
          params: "М550 П4 F300 W12",
          types: [
            { type: "gravel" },
            { type: "granite", value: "", cost: 3850 }
          ]
        },
        {
          mark: "Ð’45",
          params: "М600 П4 F300 W12",
          types: [
            { type: "gravel" },
            { type: "granite", value: "", cost: 4550 }
          ]
        },
        {
          mark: "Ð’60",
          params: "М800 П4 F300 W14",
          types: [
            { type: "gravel" },
            { type: "granite", value: "", cost: 5450 }
          ]
        }
      ],
      lean: [
        { mark: "M100", types: [{ type: "any", value: "", cost: 2250 }] },
        { mark: "M150", types: [{ type: "any", value: "", cost: 2450 }] },
        { mark: "M200", types: [{ type: "any", value: "", cost: 2550 }] },
        { mark: "M250", types: [{ type: "any", value: "", cost: 2650 }] },
        { mark: "M300", types: [{ type: "any", value: "", cost: 2700 }] }
      ],
      expanded: [
        { mark: "M50", types: [{ type: "any", value: "", cost: 2250 }] },
        { mark: "M100", types: [{ type: "any", value: "", cost: 2450 }] },
        { mark: "M150", types: [{ type: "any", value: "", cost: 2550 }] },
        { mark: "M200", types: [{ type: "any", value: "", cost: 2650 }] },
        { mark: "M300", types: [{ type: "any", value: "", cost: 2700 }] }
      ],
      solution: [
        { mark: "M100", types: [{ type: "any", value: "", cost: 2250 }] },
        { mark: "M150", types: [{ type: "any", value: "", cost: 2450 }] },
        { mark: "M200", types: [{ type: "any", value: "", cost: 2550 }] },
        { mark: "M250", types: [{ type: "any", value: "", cost: 2650 }] }
      ],
      delivery: [
        { text: "до 5 км", cost: "300 руб / m3" },
        { text: "до 5-10 км", cost: "350 руб / m3" },
        { text: "до 10-15 км", cost: "400 руб / m3" },
        { text: "до 15-20 км", cost: "450 руб / m3" },
        { text: "до 20-25 км", cost: "500 руб / m3" },
        { text: "до 25-30 км", cost: "550 руб / m3" }
      ],
      result: 0
    },
    computed: {
      currentTabData: function() {
        return this.tabs[this.currentTabIndex].data;
      },
      currentTab: function() {
        return this.tabs[this.currentTabIndex];
      }
    },
    methods: {
      valueUpdated: function() {
        function t(t) {
          t.forEach(function(t) {
            t.types.forEach(function(t) {
              console.log(t.value),
                t.value > 0 &&
                  ((i.value += t.value), (i.result += t.cost * t.value));
            });
          });
        }
        var i = { value: 0, result: 0 };
        t(this.readyMixed),
          t(this.lean),
          t(this.expanded),
          t(this.solution),
          i.value > 9 && (i.result = parseInt(i.result / 100 * 95)),
          (this.result = i.result);
      }
    }
  }),
  $('a[href*="#"]')
    .not('[href="#"]')
    .not('[href="#0"]')
    .click(function(t) {
      if (
        location.pathname.replace(/^\//, "") ==
          this.pathname.replace(/^\//, "") &&
        location.hostname == this.hostname
      ) {
        var i = $(this.hash);
        (i = i.length ? i : $("[name=" + this.hash.slice(1) + "]")).length &&
          (t.preventDefault(),
          $("html, body").animate(
            { scrollTop: i.offset().top },
            1e3,
            function() {
              var t = $(i);
              if ((t.focus(), t.is(":focus"))) return !1;
              t.attr("tabindex", "-1"), t.focus();
            }
          ));
      }
    }),
  $("#bg-modal").on("click", function() {
    $("#bg-modal").fadeOut(300), $(".modal").fadeOut(300);
  }),
  $("[data-open]").on("click", function() {
    openModal($(this).attr("data-open"));
  }),
  $("[data-close]").on("click", function(t) {
    closeModal($(this).attr("data-close"));
  }),
  $("form").submit(function(t) {
    t.preventDefault();
    var e = $(this),
      o = e.serializeArray(),
      s = {},
      n = e.find('[data-req="true"]'),
      r = !0;
    for (i = 0; i < o.length; i++) s[o[i].name] = o[i].value;
    if (
      ($.each(n, function(t, i) {
        var e = (i = $(i)).attr("name");
        "" == s[e] || null == s[e]
          ? (i.addClass("js-error"), console.log(e), (r = !1))
          : i.removeClass("js-error");
      }),
      r)
    )
      return (
        console.log("Send"),
        (cleararray = e.find('[data-clear="true"]')),
        $.each(cleararray, function(t, i) {
          $(i).val("");
        }),
        $.ajax(
          {
            method: "post",
            url: "php/send.php",
            data: o,
            error: function(t, i, e) {
              console.log(t.responseText + "|\n" + i + "|\n" + e);
            }
          },
          "json"
        ),
        $(".modal").fadeOut(300),
        openModal("#thx"),
        !1
      );
  }),

[xmoonlight]

unlik,

$.ajax(
          {
            method: "post",
            url: "php/send.php",
            data: o,
            error: function(t, i, e) {
              console.log(t.responseText + "|\n" + i + "|\n" + e);
            }
          },

Вот кусок кода, который отсылает.
1. Откройте консоль браузера и посмотрите: нет ли там ошибок.
2. Нужен файл send.php в папке php, который будет отправлять письмо (надеюсь тут сами справитесь уже).

[Stalker_RED]

unlik, похоже на то.

[unlik]

xmoonlight, Stalker_RED, Тут весь затык у меня в том, что в send.php прописан лишь номер телефона из формы.
А данные из самого калькулятора не подгружаются. А так как до этого я работал только с формами, то тут впал в ступор.

[xmoonlight]

unlik, все данные, получаемые через POST, находятся в массиве $_POST (на PHP). Вот там и ищи их (print_r($_POST);). Ну и потом формируй сообщение из элементов массива и отсылай E-mail.

[unlik]

xmoonlight, Можешь помочь разобраться до конца? Не за спасибо.

[xmoonlight]

unlik, к сожалению, сейчас не смогу - есть активный проект уже. Советую посмотреть в документацию PHP самому и разобраться (это не сложно).

[unlik]

xmoonlight, Ок. Спасибо!

[unlik]

xmoonlight, В общем у меня так и не получилось разобраться.
print_r($_POST); не выводит ничего.

[xmoonlight]

unlik, учите инструменты кодирования прежде, чем браться за работу...

[Stalker_RED]

unlik, посмотрите в браузере (f12->network) отправляется ли вообще post запрос, и что там передается.