Блог

Главная - Вопросы по программированию - Как обновить поля формы в режиме начальной загрузки?

Как обновить поля формы в режиме начальной загрузки?

#javascript #jquery #html #twitter-bootstrap

#javascript #jquery #HTML #twitter-bootstrap

Вопрос:

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

 $(document).ready(function(){
    
    
    $("#submitid").on("click",function(){
        var Name = $("#name").val();
        console.log("Name is "  Name);
        var Email = $("#emailid").val();
        console.log("Email is " Email);
        var Contact = $("#contactno").val();
        $("#tableid").css("display","block");
     
        var newRow = "<tr><td>"  Name  "</td> <td>"  Email   "</td> <td>"  Contact   "</td> <td>"; 
        $("table tbody").append(newRow   "<p data-placement="  "top"   "data-toggle="  "tooltip"   "title="  " Edit"   "><"  "button class="  "btn btn-primary btn-xs"   "data-title="  "Edit"   "data-toggle="   "modal"   "data-target="   "#edit"   "><span class="   
"glyphicon glyphicon-pencil"   "></span></button></p></td> </tr>");
        
        return false;
        
        });
    });  
 <!DOCTYPE HTML>
<html lang="en">

<head>
    
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="assgn9_2.js"></script>
    </head>
    
    <body>
    
     
    <div class="container">
  
  <form id="myform">
    <div class="form-group">
      <label for="name">Name:</label>
      <input type="text" class="form-control" id="name" placeholder="Enter Name">
    </div>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="emailid" placeholder="Enter Email">
    </div>
       <div class="form-group">
      <label for="contact">Contact no:</label>
      <input type="number" class="form-control" id="contactno" placeholder="Enter Phone">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default" id="submitid" >Submit</button>
  </form>
        
        <table class="table" id ="tableid" style="display : none">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Contact</th>
      </tr>
    </thead>
    <tbody>
      
    </tbody>
  </table>
        
</div>
        
        
        
    </body>
</html>

Ответ №1:

Я разработал для вас Jsfiddle. Но сначала всего несколько советов.

1 — Лучший способ сделать это — не преобразовывать тип ввода после того, как пользователь отправил форму, вместо этого используйте какую-нибудь библиотеку, такую как jQueryValidate, для проверки данных перед отправкой формы и, при необходимости, извлечения (шага назад) полей ввода для повторного ввода.

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

Способ 1. input событие

В современных браузерах используется событие ввода. Это событие будет срабатывать, когда пользователь вводит текстовое поле, вставляет, отменяет, в основном в любое время, когда значение изменяется с одного значения на другое.

В jQuery сделайте это следующим образом

начиная с jQuery 1.7, замените bind на on:

 $('#someInput').on('input', function() { 
    $(this).val() // get the current value of the input field.
});

Способ 2. keyup событие

Для старых браузеров используйте событие keyup (оно срабатывает при отпускании клавиши на клавиатуре, это событие может давать своего рода ложное срабатывание, потому что при отпускании «w» изменяется входное значение и срабатывает событие keyup, но также при отпускании клавиши «shift» срабатывает событие keyup, но никаких изменений в вводе не было.). Также этот метод не срабатывает, если пользователь щелкает правой кнопкой мыши и вставляет из контекстного меню:

 $('#someInput').keyup(function() {
    $(this).val() // get the current value of the input field.
});

примеры:http://jsfiddle.net/pxfunc/5kpeJ /

Теперь ваш ответ:
JS / jQuery

    $(document).ready(function(){ 

    $("#submitid").on("click",function(){
        var Name = $("#name").val();
        console.log("Name is "  Name);
        var Email = $("#emailid").val();
        console.log("Email is " Email);
        var Contact = $("#contactno").val();
        $("#tableid").css("display","block");

        var newRow = "<tr><td>" "<input type='text' placeholder='" Name  "'>" Name "</td> <td>" "<input type='text' placeholder='" Email   "'>" Email "</td> <td>" "<input type='text' placeholder='" Contact   "'>" Contact "<a href='#' id=''> DELETE</a> </td> <td>"; 
        $("table tbody").append(newRow);


        return false;

        });
    });

HTML

 <!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">amp;times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">

    <div class="container">

  <form id="myform">
    <div class="form-group">
      <label for="name">Name:</label>
      <input type="text" class="form-control" id="name" placeholder="Enter Name">
    </div>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="emailid" placeholder="Enter Email">
    </div>
       <div class="form-group">
      <label for="contact">Contact no:</label>
      <input type="number" class="form-control" id="contactno" placeholder="Enter Phone">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default" id="submitid" >Submit</button>
  </form>

        <table class="table" id ="tableid" style="display : none">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Contact</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>

</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>