Получить возврат из JQuery в переменную PHP в простой HTML-форме PHP - PullRequest
0 голосов
/ 11 февраля 2019

, поэтому у меня очень простая HTML-форма (form.php), и я использую php для вставки в БД SQL.

Проблема в том, что у меня есть функция динамического добавления имен (get_names.html), котораяЯ хочу получить возврат из функции javascript «post ()» в мою переменную $ name переменной PHP, чтобы я мог отправить всю форму сразу.

Для имени поля я использую AJAX с PHP (return_names).php) для извлечения 'name' в виде строки, и оно работает с $ _POST.

Как передать возврат из return_names.php в $ name в форме?

form.php

    <meta http-equiv="Content-type" content="text/html; charset=UTF- 
8" />
    <html>
    <body>
    <head>
    <script type="text/javascript" src="myjquery.js"></script>
    </head>
    <?php
    include("connect-db.php");
    function renderForm($id = '', $place = '', $name ='') { ?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <form action="" method="post">
    <div>
    <?php if ($id != '') { ?>
    <input type="hidden" name="id" value="<?php echo $id; ?>" />
    <p>ID: <?php echo $id; ?></p>
    <?php } ?>
    <br/>
    <strong>Place: </strong> <input type="text" name="place"
    value="<?php echo $place; ?>"/><br/>
    <br/>
    <strong>Name: </strong> <input type="text" name="name"
    value="<?php echo $name; ?>"/><br/>
    <br/>
    <?php
    if (isset($_POST['submit']))
    {

    $id = htmlentities($_POST['id'], ENT_QUOTES);
    $place = htmlspecialchars($_POST['place'], ENT_QUOTES);
    $name = htmlspecialchars($_POST['name'], ENT_QUOTES);
    ($stmt = $mysqli->prepare("INSERT mydb (id, place, name)
    VALUES (?, ?, ?)"));
    {
    $stmt->bind_param("iss", $id, $place, $name);
    $stmt->execute();
    $stmt->close();
    }
    }
    }
    ?>
    <br/>
    </div>
    </form>
    </body>
    </html>

get_names.html

<head>
<script src="jquery-3.3.1.min.js"></script>
</head>
<script type='text/javascript'>
    const optionsSelect = [{
    id: 1,
    title: 'Mr'
    },
    {
    id: 2,
    title: 'Mrs'
    }
    ];
    function getResults() {
    const { selects, inputs } = getInputs();

    return selects.reduce((acc, select, i) => {
    const { title, name } = getValuesFromElements(select, 
inputs[i]);
    msg = (title && name) ? `${acc} ${title}. ${name}` : acc;
    document.getElementById("asservat").innerHTML = msg;
    var msgs = msg;
    //return (title && name) ? `${acc} ${title}. ${name}` : acc;
    return msgs;
    }, '');
    }

    function getResultsAsArray() {
    const { selects, inputs } = getInputs();

    const getFieldValues = (select, i) => {
    const { title, name } = getValuesFromElements(select, 
 inputs[i]);

    return (title && name) ? `${title}. ${name}` : '';
    };

    return selects.map(getFieldValues).filter(Boolean);
    }

    function getValuesFromElements(select, {value: name}) {
    const { title } = optionsSelect[select.value - 1];

    return {title, name};
    }

    function getContainerElements(query) {
    return Array.from(document.querySelectorAll(`#container > 
${query}`));
    }

    function getInputs() {
    const selects = getContainerElements('select');
    const inputs = getContainerElements('input');

    return {
    selects,
    inputs
    }
    }
    function addFields() {
    const { value: number } = document.getElementById('member');
    const container = document.getElementById('container');

    while (container.hasChildNodes()) {
    container.removeChild(container.lastChild);
    }

    for (let i = 0; i < number; i++) {
    const select = document.createElement('select');
    for (let j = 0; j < optionsSelect.length; j++) {
      const options = document.createElement('option');
      options.value = optionsSelect[j].id;
      options.text = optionsSelect[j].title;
      select.appendChild(options);
    }
    container.appendChild(select);
    container.appendChild(document.createTextNode(' -> Name ' + (i + 1)));
    const input = document.createElement('input');
    input.type = 'text';
    container.appendChild(input);
    container.appendChild(document.createElement('br'));
    }
    }

    </script>

    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <a href="#" onclick="console.log(getResults())">Log results</a>
    <p id="container"></p>
    <div id="asservat"></div>
    <input type="button" value="Submit" onclick="post();">ajax<br />
    <script type="text/javascript">
    function post(){
    var name = getResults();
    $.post('return_names.php',{postname:name},
    function(data){
    $('#name').html(data);
    });
    return $('#name').html(data);
    }
    </script>

return_names.php

    <?php
    function data() {
    $name = $_POST['postname'];
    echo "Name as string ->", $name, " <- here";
    return $name;
    }
    data();
    ?>

Я ожидаю повторить $ name вform.php и получить строки, возвращаемые функцией return_names.php, например, "Mr. Ann Mrs. Anna"

1 Ответ

0 голосов
/ 11 февраля 2019

Так что обновляйте это, если кто-то сталкивается с подобным.Мне удалось использовать JQuery следующим образом:

get_names.html

<head>
<script src="jquery-3.3.1.min.js"></script>
</head>
<script type='text/javascript'>
  const optionsSelect = [{
      id: 1,
      title: 'Mr'
    },
    {
      id: 2,
      title: 'Mrs'
    }
  ];
  function getResults() {
    const { selects, inputs } = getInputs();

    return selects.reduce((acc, select, i) => {
      const { title, name } = getValuesFromElements(select, inputs[i]);
      msg = (title && name) ? `${acc} ${title}. ${name}` : acc;
      document.getElementById("name").innerHTML = msg;
      var msgs = msg ;
      //return (title && name) ? `${acc} ${title}. ${name}` : acc;
      return msgs;
    }, '');
  }

  function getResultsAsArray() {
    const { selects, inputs } = getInputs();

    const getFieldValues = (select, i) => {
      const { title, name } = getValuesFromElements(select, inputs[i]);

      return (title && name) ? `${title}. ${name}` : '';
    };

    return selects.map(getFieldValues).filter(Boolean);
  }

  function getValuesFromElements(select, {value: name}) {
    const { title } = optionsSelect[select.value - 1];

    return {title, name};
  }

  function getContainerElements(query) {
    return Array.from(document.querySelectorAll(`#container > ${query}`));
  }

  function getInputs() {
    const selects = getContainerElements('select');
    const inputs = getContainerElements('input');

    return {
      selects,
        inputs
    }
  }
  function addFields() {
    const { value: number } = document.getElementById('member');
    const container = document.getElementById('container');

    while (container.hasChildNodes()) {
      container.removeChild(container.lastChild);
    }

    for (let i = 0; i < number; i++) {
      const select = document.createElement('select');
      for (let j = 0; j < optionsSelect.length; j++) {
        const options = document.createElement('option');
        options.value = optionsSelect[j].id;
        options.text = optionsSelect[j].title;
        select.appendChild(options);
      }
      container.appendChild(select);
      container.appendChild(document.createTextNode(' -> Name ' + (i + 1)));
      const input = document.createElement('input');
      input.type = 'text';
      container.appendChild(input);
      container.appendChild(document.createElement('br'));
    }
  }

</script>

<script type="text/javascript">

    function post(){
        var name = getResults();
        $.post('return_names.php',{postname:name},
        function(data){
        var result = $('#name').html(data);
        return result;
        });
    }
</script>

<input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails" onclick="addFields()">Fill Details</a>

<p id="container"></p>
<div id="name"></div>

<?php $return_var = '<input type="button" value="Submit" onclick="post();">Post <br />';
echo $return_var;


 ?>

return_names.php

<?php
function returnString() {

$name = $_POST['postname'];
echo "the name entered ->", $name, " <- hier";
return $name;
}

returnString();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...