Представление формы JQuery генерирует новую форму

Question

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<form id = "my_form"> 
verb <input type = "text" id ="word1"/> 
<input type = "submit"/></form> 
<div id="name"></div> 
<script> 
$(document).ready(function(){ 
    $("#my_form").on('submit', function(e) 
{ 
    e.preventDefault(); 
    var verb = $ ("#word1").val(); 
    var tag = "#Latin "; 
    var url = "http://en.wiktionary.org/wiki/"+verb+tag; 
     $.ajax({ 
      url: "Parser.php", 
      data: {"verb": verb}, 
      type: "POST", 
      async: true, 
      success: function(result){ 
         $("#name").html(result); 
         $("#name").append(url); 

        } 
     }); 
}); 
});</script> 

РЕЗУЛЬТАТ:

PHP

<?php 

    $bank = array(); 
    function endsWith($haystack, $needle) { 
     return $needle === "" || (($temp = strlen($haystack) - strlen($needle)) >= 0 && strpos($haystack, $needle, $temp) !== false); 
    } 
    function check_end_array($str, $ends) 
    { 
     foreach ($ends as $try) { 
     if (substr($str, -1*strlen($try))===$try) return $try; 
     } 
     return false; 
    } 
    function db_connect() { 

     static $connection; 

     if(!isset($connection)) { 
      $connection = mysqli_connect('127.0.0.1','username','password','Verb_Bank'); 
     } 

     if($connection === false) { 
      return mysqli_connect_error(); 
     } 
     return $connection; 
    } 
    function db_query($query) { 
     $connection = db_connect(); 
     $result = mysqli_query($connection,$query); 

     return $result; 
    } 

    function db_quote($value) { 
      $connection = db_connect(); 
      return "'" . mysqli_real_escape_string($connection,$value) . "'"; 
     } 
    $y = false; 
    if (isset($_POST['verb'])){ 
    $y=db_quote($_POST['verb']); 
    echo $y; 
    echo "\n"; 

    $m = db_query("SELECT `conjugation` FROM normal_verbs WHERE (" . $y . ") LIKE CONCAT('%',root,'%')"); 
    if($m !== false) { 
     $rows = array(); 
     while ($row = mysqli_fetch_assoc($m)) { 
      $rows[] = $row; 
      } 
    } 
    foreach ($rows as $key => $value){ 
     if (in_array("first",$value)==true){ 
     echo "first conjugation verb\n";} 
     $y = $_POST["verb"]; 
     $x = $y; 
     foreach ($bank as $key => $value) 
      (series of IF-statements) 
    }}?> 

Answer 1

Как Roamer-1888 говорит, что проблема лежит в стороне сервера, вы возвращаете HTML, который имеет вход тоже. Вам нужно изменить свой код, чтобы вернуть только строку результатов, которую вы добавляете в div. Else, если это невозможно сделать на стороне сервера, так как это может потребовать от вас изменить количество кода, тогда вы можете удалить элемент ввода из результата, а затем добавить его в div. Как показано ниже.

success: function(result){ 
        var div = document.createElement('div'); 
        div.innerHTML = result; 
        $(div).find('input').remove(); 

        $("#name").html(div.innerHTML); 
        $("#name").append(url); 

       }