как мы можем автозаполнять поля формы без обновления страницы

У меня есть рабочая форма HTML/PHP, которая имеет несколько полей ввода текста: идентификатор участника, имя, идентификатор разработчика и имя разработчика. Я хочу знать, как мы можем автозаполнять единственное поле ввода имени вхождения в мою форму, введя поле идентификатора поставщика, т. е. если я введу 100000 в поле идентификатора интнтаузера, его автоматически заполнит имя разработчика из базы данных в поле require без обновления и нажатия клавиши ввода. Вот мой html и php форма кода `как мы можем автозаполнять поля формы без обновления страницы

<?php 
$title = 'Add new member'; 
include_once 'header.php'; 
include_once 'footer.php';?> 
<html> 
    <body> 
     <section id="main" class="column"> 

     <h4 class="alert_info">Welcome to the management page of the company</h4><div class="wrapper"> 
     <div id="main" style="padding:2px 0 0 0;"> 
     <article class="module width_full"> 
      <header><h3>Stats</h3></header> 
      <div class="module_content"> 
     <!-- Form --> 
       <form action="addmembers.php" method="post" class="register"> 
      <h1 style="margin-left: 250px;">New Member Registration</h1> 
      <fieldset class="row1"> 
       <legend>Account Details 
       </legend> 
       <p> 
       <label> 
        Introducer Id: *</label> 
        <input type="text" name="3" id="introducerid" placeholder="Please enter Introducer Id" required onKeyDown="limitText(this,6);"onKeyUp="limitText(this,6);"/> 

           <label> 
        Introducer Name: *</label> 
        <input type="text" name="42" id="Introducerame" placeholder="Please enter Introducer Name" required autofocus> 

       </p> 

         </fieldset> 
         <fieldset class="row2"> 
          <legend>Personal Details 
       </legend> 
           <p> 
       <label> 
        <span>Name: *</span></label> 
        <input type="text" name="5" id="name" placeholder="Please enter member's name" required autofocus class="long"> 

      </p> 

         <p> 
       <label> 
        <span>Father/Husband Name: *</span></label> 
        <input type="text" name="6" id="father_husband_name" placeholder="Please enter father or husband name" required autofocus class="long"> 

         </p> 
      <p> 
       <label> 
        <span>Correspondence Address: *</span></label> 
        <input type="text" name="7" id="per_address" placeholder="Please enter correspondence address" required autofocus class="long"> 

         </p> 
      <p> 
       <label> 
        <span>City: *</span></label> 
        <input type="text" name="8" id="city" placeholder="Please enter city name" required class="long"> 
         </p> 
      <p> 
       <label> 
        <span>Residential Address: *</span></label> 
        <input type="text" name="9" id="resi_address" placeholder="Please enter current address" required autofocus class="long"> 

      </p> 
         <p> 
       <label> 
        <span>Phone: *</span></label> 
             <input type="text" name="22" id="phone" placeholder="Please enter contact number" required class="long" onKeyDown="limitText(this,10);"onKeyUp="limitText(this,10);"/> 

         </p> 
         <p> 
       <label> 
        <span>Gender: *</span></label> 
          <input type="radio" name="23" value="Male" class="gender"><label class="gender">Male</label> 
          <input type="radio" name="23" value="Female" class="gender"><label class="gender">Female</label> 

         </p> 
         <p> 
       <label> 
        <span>Nominee: *</span></label> 
        <input type="text" name="55" id="nominee" placeholder="Please enter nominee name" required autofocus class="long"> 

      </p> 
         <p> 
       <label> 
        <span>Age: *</span></label> 
          <input type="number" name="56" id="nominee" placeholder="&nbsp;&nbsp;yy" required autofocus style="width: 55px;" onKeyDown="limitText(this,2);"onKeyUp="limitText(this,2);"/> 

      </p> 
         <p> 
       <label> 
        <span>Relation: *</span></label> 
        <input type="text" name="57" id="nominee" placeholder="Nominee's relation" required autofocus class="long"> 

      </p> 
         </fieldset> 
         <fieldset class="row3"> 
          <legend>Further Information 
       </legend> 
          <p> 


       <label> 
        PAN card: </label> 
             <input type="text" name="bc" id="PAN" placeholder="Please enter member's PAN card no."onKeyDown="limitText(this,10);"onKeyUp="limitText(this,10);"/> 

      </p> 
           <p> 
       <label> 
        <span>Email: *</span></label> 
            <input type="email" name="24" id="email" placeholder="i.e. [email protected]" class="long"> 

           </p> 
      <p> 
       <label> 
        <span>Date of birth: *</span></label> 
             <input type="date" name="25" id="birthdate" required autofocus> 

         </p> 
         <p> 
       <label> 
        <span>Martial Status: *</span></label> 
          <input type="radio" name="26" value="Married" class="gender"><label class="gender">Married </label> 
          <input type="radio" name="26" value="Unmarried" class="gender"><label class="gender">Unmarried</label> 

         </p> 
         <p> 
       <label> 
        <span>Occupation: *</span></label> 
        <input type="text" name="27" id="occupation" placeholder="Please enter occupation detail" required class="long"> 

         </p> 
         <p> 
       <label> 
        <span>Education: *</span></label> 
        <select name="28" id="education" class="select"> 
              <option value="0">Select one</option> 
              <option value="Highschool">Highschool</option> 
              <option value="Intermediat">Intermediat</option> 
              <option value="Graduation">Graduation</option> 
              <option value="Under Graduate">Under Graduate</option> 
              <option value="Post Graduation">Post Graduation</option> 
              <option value="Under Post Graduate">Under Post Graduate</option> 
              <option value="Other">Other</option> 
           </select> 
         </p> 
         <p> 
       <label> 
        <span>Nationality: *</span></label> 
        <select name="29" id="education" class="select"> 
              <option value="not selected">Select one</option> 
              <option value="Indian">Indian</option> 
              <option value="Non-Indian">Non-Indian</option> 
           </select> 
           </select> 

         </p> 
         <p> 
       <label> 
        <span>Verification Document: *</span></label> 
             <select name="30" id="idproof" class="select"> 
              <option value="no">Select one from below options</option> 
              <option value="Voter Id">Voter Id</option> 
              <option value="Ration Card">Ration Card</option> 
              <option value="Driving License">Driving License</option> 
              <option value="UID card">UID card</option> 
              <option value="PAN card">PAN card</option> 
           </select> 

         </p> 
         <p> 
       <label> 
        <span>Religion: *</span></label> 
             <input type="text" name="32" id="religion" placeholder="Please enter religion" required> 

         </p> 
         </fieldset> 
      <fieldset class="row1" style="margin-top: 30px;"> 
          <legend>Bank Details 
       </legend> 
         <p> 
       <label> 
        <span>Bank Name: *</span></label> 
        <input type="text" name="33" id="bank_name" placeholder="Please enter Bank name" required autofocus> 


       <label> 
        <span>Branch: *</span></label> 
        <input type="text" name="34" id="branch" placeholder="Please enter branch name" required autofocus> 

         </p> 
         <p> 
       <label> 
        <span>IFSC code: *</span></label> 
        <input type="text" name="35" id="IFSC" placeholder="Please enter IFSC code here" required autofocus> 


       <label> 
        <span>Account Number: *</span></label> 
             <input type="text" name="36" id="account_no" placeholder="Please enter member's account number" required autofocus> 

         </p></fieldset> 

         <input type="submit" value=" Submit " name="submit"/> 

     </form> 
     <!-- /Form --> 

     </div> 
       </div> 
<?php 
if(isset($_POST["submit"])){ 
$servername = "localhost"; 
$username = "vicky"; 
$password = "vicky"; 
$dbname = "nrj"; 

// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname); 
// Check connection 
if ($conn->connect_error) { 
die("Connection failed: " . $conn->connect_error); 
} 

$sql = "INSERT INTO members (introducrid, Introducername, PAN, name, father_husband_name, per_address, city, resi_address, phone, gender, nominee, age, relation, email, birthdate, martial_status, occupation, education, nationalty, idproof, religion, bank_name, branch, IFSC, account_no) 
VALUES ('".$_POST["3"]."','".$_POST["42"]."','".$_POST["bc"]."','".$_POST["5"]."','".$_POST["6"]."','".$_POST["7"]."','".$_POST["8"]."','".$_POST["9"]."','".$_POST["22"]."','".$_POST["23"]."','".$_POST["55"]."','".$_POST["56"]."','".$_POST["57"]."','".$_POST["24"]."','".$_POST["25"]."','".$_POST["26"]."','".$_POST["27"]."','".$_POST["28"]."','".$_POST["29"]."','".$_POST["30"]."','".$_POST["32"]."','".$_POST["33"]."','".$_POST["34"]."','".$_POST["35"]."','".$_POST["36"]."')"; 

if ($conn->query($sql) === TRUE) { 
echo "<script type= 'text/javascript'>alert('New record created successfully');</script>"; 
} else { 
echo "<script type= 'text/javascript'>alert('Error: " . $sql . "<br>" . $conn->error."');</script>"; 
} 

$conn->close(); 
} 
?> 
</div> 
       <div class="spacer"></div> 



     </section> 
<script language="javascript" type="text/javascript"> 
function limitText(limitField, limitNum) { 
    if (limitField.value.length > limitNum) { 
     limitField.value = limitField.value.substring(0, limitNum); 
    } 
} 
</script> 

</body> 

</html>

источник

2016-07-09 Peeyush

Можете ли вы рассказать о том, как ваш код «не работает»? Что вы ожидали, и что на самом деле произошло? Если вы получили исключение/ошибку, опубликуйте строку, в которой она произошла, и сведения об исключении/ошибке. Пожалуйста, отредактируйте эти данные или мы не сможем помочь. –

Есть ли что-нибудь, что вы пробовали? Пожалуйста, помните, что SO не является услугой кодирования! И Google - ваш друг, чтобы найти учебники для таких вещей! – Jeff

Если вы хотите получить данные с сервера и отредактировать веб-страницу без обновления, узнайте об AJAX (также называемом XHR). Он обладает возможностями, которые вы ищете, но вам нужно будет начать с простых примеров или учебников. – BeetleJuice

Я покажу вам, как сделать это с помощью AJAX. 1 ° - загрузите JQuery и используйте его в своем проекте. 2 ° - после того, как скачал Jquery написать этот код на конец файла: `

<script> 
$("#introducerid").change(function(){ 
    $.get("your_ajax_file.php?value="+$(this).val(),function(data){eval(data);}); 
}); 
</script>`

3 ° - создать файл your_ajax_file.php и записать это на него:

$value = $_GET["value"]; 
//here you makes your query 
$query = mysqli_query(your_connection(),"select * from your_table where your_column_name = ".$value); 
$array = @mysqli_fetch_array($query); 
if($array != ''){ 
    $introducerName = $array["introducerName"]; 
echo "$('#Introducerame').val('".$introducerName."')"; 
}

источник

2016-07-09 16:51:28

Thanx для ответа на мой вопрос. http://i.stack.imgur.com/Y737m.jpg, пожалуйста, проверьте изображение, чтобы лучше понять мою проблему. – Peeyush

Конечно, вы можете ,

Во-первых, вам нужно решить, какое событие пользователя запускает код автоматической выборки. У вас есть несколько вариантов, в том числе:

размытости() - когда пользователь щелкает от конкретного поля (например, #introducerid или любое другое поле с определенным ID или класса)
keyup() - нажатие клавиши по нажатию клавиши в определенном поле
click() - щелчок пользователем по любому элементу (обычно кнопка, но также может быть другим полем ввода, переключателем, любым <div>, флажком и т. д.

Затем вы получите значение, которое хотите найти, например.

Затем с помощью AJAX построить, как изложено ниже:

JS/JQuery:

$('#introducer').blur(function(){ 
    var iid = $(this).val(); 
    $.ajax({ 
     type: 'post', 
     url: 'another_php_file.php', 
     data: 'iid = ' + iid 
    }) 
    .done(function(recd){ 
     //alert('Received: ' + recd); //uncomment to see what PHP side sent back 
     $('#introducer_name').val(recd); //recd contains string Barry Soetoro, injects that into #introducer_name 
    }); //END AJAX code block 

}); //END blur fn

another_php_file.php

<?php 
    $iid = $_POST['iid']; //NOTE: You should always sanitize your inputs -- google it 

    $out = //perform your mysql query// e.g. returns Barry Soetoro 

    echo $out; //echos the string Barry Soetoro

Примечания:

1) This post contains some simple AJAX examples

2) $.post(), $.get() и $.load() являются сокращенными формами $.ajax(). Рекомендуется использовать полную формулу $.ajax(), пока вы не познакомитесь с процессом. Структура $.ajax() упрощает этот простой процесс.

3) В приведенном выше примере используется jQuery. Чтобы он работал, вы должны включить библиотеку jQuery.Простейший способ должен включать ниже тег сценария где-то в документе, как правило, непосредственно над </body> тега, или в <head></head> тэгом:

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

4) Палка с JQuery 1.xx на данный момент ...

5) Я должен был угадать ваши имена. При необходимости измените.

источник

2016-07-10 00:22:31 gibberish

Thanx для ответа sir.please проверьте изображение моей формы здесь http://i.stack.imgur.com/Y737m .jpg Я хочу получить данные из базы данных, поэтому, пожалуйста, предоставьте мне полный PHP-код для этого. Я хочу использовать этот метод только для поля entercer_id и entercer_name, введя ключ. Введенное имя основано на ключе ID-ключа, как показано на изображении. – Peeyush

В Google Chrome: ** щелкните правой кнопкой мыши ** в поле «Идентификатор», выберите «Проверить элемент». На левой панели отобразится HTML-код, и вы увидите идентификатор этого поля ввода '' - теперь у вас есть идентификатор для поля Индекс. Сделайте то же самое для поля «Интродукция». Теперь используйте эти значения ID в коде js/jQuery. Выработайте код PHP для себя. *** Хорошая идея: Создайте автономный PHP-файл - новый файл, только для тестирования. Жестко-кодовое значение идентификатора для запроса в базе данных и 'echo' результаты запроса на экран. Когда у вас это получилось, превратите его в файл AJAX *** – gibberish

сэр ничего не сделал. Идентификатор ввода для идентификатора интродуктора - это (интродукция), а для имени интродуктора есть (инвестор) – Peeyush

Please check the the image for better understanding

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

источник

2016-07-10 02:46:58 Peeyush

как мы можем автозаполнять поля формы без обновления страницы

ответ

Смежные вопросы