AJAX данные и данные текстового поля не хранятся вместе

Question

Я использую Ajax для отправки информации о ширине экрана на страницу PHP, и я также хочу, чтобы пользователь ввел значение в текстовое поле, однако в настоящее время это не работает, поскольку передается только значение текстового поля и Мне говорят, что другое значение - неопределенный индекс. Любая помощь будет оценена.

HTML / JS страница

<form method="post" action = "insert.php">
  <input type = "text" name ="carName" id ="carName"/>
    <div id ="screenWidth" name = "screenWidth" method="post"></div>
  <input type="submit" id= "submit" name="submit" value="submit"/>

<script type="text/javascript">
var screenWidth = screen.width + "px"; 

document.getElementById("screenWidth").innerHTML = screenWidth; 
console.log(screenWidth) 

var TestVal = ("test");
   $.ajax({
        type: 'POST',
        url: 'insert.php',
        data: {'screenWidth': screenWidth},
        success: function(data){
          console.log(data);
      }
      });

PHP Страница

<?php
include 'db.php';

    $screenWidth = $_POST['screenWidth'];
    $screenHeight = $_POST['screenHeight'];

    if(isset($_POST['submit']))
{ 
    $screenWidth = $_POST['screenWidth'];
    $phoneType = $_POST['carName'];


    echo 'hello';


   $sql = "INSERT INTO deviceInfo (screenWidth, carType, )
     VALUES ('$screenWidth','$carType',)";

     if (sqlsrv_query($conn, $sql)) {
        echo "New record has been added successfully !";
     } else {
        echo "Error: " . $sql . ":-" . sqlsrv_errors($conn);
     }
     sqlsrv_close($conn);
}


?>

Answer 1

Есть несколько проблем с вашей настройкой.

1) только формы ввода представлены с формой. Когда вы нажмете кнопку отправки, форма будет отправлена ​​через браузер HTML post, и ваш JS не будет запущен. Отправка формы будет отправлять только переменную carName в данных публикации, так как screenWidth не входит в форму ввода.

2) JS, который вы написали, будет отправлять только screenWidth свыше ajax - и это будет запущен, как только страница будет загружена (при условии, что это только извлечение и что этот JS находится в блоке jQuery (document) .ready (function ($) {}).

3) ваше carName становится carType, а затем phoneName в вашем коде, поэтому $ carType не устанавливается при вставке SQL.

У вас есть 2 варианта здесь: 1) изменить ваш div, содержащий screenWidth, на текстовый ввод, который доступен только для чтения. Таким образом, вы можете заполнить свой screenWidth при загрузке страницы, а затем попросить пользователя отправить форму через HTML после завершения обновления carName. Это не будет использовать AJAX или

2), чтобы избавиться от формы и создать функцию "щелчка" для отправки вашего AJAX, который включает в себя обе переменные ... что-то вроде этого (не проверено).

jQuery(document).ready(function($){
  $("#submit").click(function(){
     e.preventDefault();  // stop the button from posting
     $.ajax({
       type: 'POST',
       url: 'insert.php',
       data: {'screenWidth': $("#screenWidth").text(),
              'carName': $("#carName").val()},
       success: function(data){
         console.log(data);
       }
     });
  });
});