2017-01-09 2 views
0

У меня есть раскрывающийся список и три поля ввода на моей веб-странице. Всякий раз, когда я делаю выбор в своем раскрывающемся списке, он автоматически заполняет информацию в текстовые поля. У меня также есть кнопка «Сохранить» рядом с каждым текстовым полем. Это позволяет мне обновлять это поле, если оно необходимо изменить после нажатия кнопки сохранения. Так, например, он работает, если я жестко задал значение выпадающего списка в моем операторе обновления, но я не могу заставить его работать без жесткого кодирования. Поэтому я думаю, что мне просто нужно, чтобы Javascript читал, какое значение выбрано в моем раскрывающемся списке. Как я могу это исправить?Обновление базы данных на основе входного значения

Dropdown код коробки:

<div> 
<div id="vendor"> 
<strong>Vendor:</strong> 
</div> 

<div class="align"> 
<select name="vendor_dropdown" id="ven" onChange="updateinput();"> 
    <option value="">Choose a Vendor</option> 
     <?php foreach($users->fetchAll() as $user): ?> 
      <option 
        data-name="<?php echo $user['MR_POC_N'];?>" 
        data-email="<?php echo $user['MR_POC_E'];?>" 
        data-phone="<?php echo $user['MR_POC_P'];?>" 
      > 
       <?php echo $user['MR_Name'];?> 
      </option> 
     <?php endforeach; ?> 
</select> 
</div> 

</div> 

Контактная информация код, который автоматически заполняется:

<div> 
<div id="contact_info"> 
<strong>Contact Information:</strong><br> 
</div> 

<div class="align1"> 
<table align="left" id="contact"> 
    <tr> 
     <td align="left">Name:</td> 
     <td><input type="text" id="name" class="name" name="name" style="margin-left: 5px"></td> 
     <td><input type="button" class="edit" name="edit" value="Save"></td> 
    </tr> 
    <tr> 
     <td align="left">Email:</td> 
     <td><input type="email" id="email" class="email" name="email" style="margin-left: 5px"></td> 
     <td><input type="button" class="edit" name="edit" value="Save"></td> 
    </tr> 
    <tr> 
     <td align="left">Phone Number:</td> 
     <td><input type="tel" id="tel" class="tel" name="number" style="margin-left: 5px"></td> 
     <td><input type="button" class="edit" name="edit" value="Save"></td> 
    </tr> 
</table> 
</div> 

</div> 

Javascript для редактирования информации:

// ----- Edit Contact Info ----- 

$(document).on("click", "#contact .edit", function() { 
    var $this = $(this); 
    var tds = $this.closest('tr').find('td').filter(function() { 
    return $(this).find('.edit').length === 0; 
    }); 
    if ($this.val() === 'Edit') { 
    /*if($this.id !== '.mr_id') { 
     tds.not('.mr_id').not('.mr_name').prop('contenteditable', true); 
    }*/ 
    } else { 
    var isValid = true; 
    var errors = ''; 
    $('#myDialogBox').empty(); 
    var elements = tds; 
    if (tds.find('input').length > 0) { 
     elements = tds.find('input'); 
    } 
    var dict = {}; 
    elements.each(function (index, element) { 
     var type = $(this).attr('class'); 
     var value = (element.tagName == 'INPUT') ? $(this).val() : $(this).text(); 
     console.log(type); 
     // ----- Switch statement that provides validation for each table cell ----- 
     switch (type) { 
     case "ven": 
       dict["MR_Name"] = value; 
      break; 
     case "name": 
      if (value == value.match(/^[a-zA-Z\s]+$/)) { 
       dict["MR_POC_N"] = value; 
      break; 
      } 
      else { 
      isValid = false; 
      errors += "Please enter a valid Name\n"; 
      } 
      break; 
     case "email": 
      if (value == value.match(/^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/)) { 
       dict["MR_POC_E"] = value; 
      break; 
      } 
      else { 
      isValid = false; 
      errors += "Please enter a valid Email\n"; 
      } 
      break; 
     case "tel": 
      if (value == value.match('^[0-9()+/-]{10,}$')) { 
       dict["MR_POC_P"] = value; 
      break; 
      } 
      else { 
      isValid = false; 
      errors += "Please enter a valid Phone Number\n"; 
      } 
      break; 
     } 
    }) 

    if (isValid) { 
     console.log(dict); 
     //$this.val('Save'); 
     //tds.prop('contenteditable', false); 
     var request = $.ajax({ 
      type: "POST", 
      url: "update.php", 
      data: dict 
     }); 

     request.done(function (response, textStatus, jqXHR){ 
      if(JSON.parse(response) == true){ 
      console.log("Data saved"); 
      } else { 
      console.log("Data failed to save"); 
      console.log(response); 
      console.log(textStatus); 
      console.log(jqXHR); 
      } 
     }); 

     // Callback handler that will be called on failure 
     request.fail(function (jqXHR, textStatus, errorThrown){ 
      // Log the error to the console 
      console.log(textStatus); 
      console.log(jqXHR); 
      console.error(
       "The following error occurred: "+ 
       textStatus, errorThrown 
      ); 
     }); 

     // Callback handler that will be called regardless 
     // if the request failed or succeeded 
     request.always(function() { 

     }); 
    } else { 
     alert(errors); 
    } 
    } 
}); 

update.php:

<?php 

    $MR_Name = $_POST['MR_Name']; 
    $MR_POC_N = $_POST['MR_POC_N']; 
    $MR_POC_E = $_POST['MR_POC_E']; 
    $MR_POC_P = $_POST['MR_POC_P']; 

    $host="xxxxxxx"; 
    $dbName="xxxxxxxxx"; 
    $dbUser="xxxx"; 
    $dbPass="xxxxxxxx"; 

    $pdo = new PDO("sqlsrv:server=".$host.";Database=".$dbName, $dbUser, $dbPass); 

    $sql = "UPDATE Stage_Rebate_Master SET MR_POC_N = :MR_POC_N, MR_POC_E = :MR_POC_E, MR_POC_P = :MR_POC_P WHERE MR_Name = :MR_Name"; 

    $stmt = $pdo->prepare($sql); 
    $stmt->bindValue(':MR_Name', $MR_Name); 
    $stmt->bindValue(':MR_POC_N', $MR_POC_N); 
    $stmt->bindValue(':MR_POC_E', $MR_POC_E); 
    $stmt->bindValue(':MR_POC_P', $MR_POC_P); 
    $result = $stmt->execute(); 
    echo json_encode($result); 

?> 

ответ

0

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

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

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

0

Я только что создал очень похожую форму. У меня есть одна кнопка отправки в верхней части страницы. On submit: для каждой строки я проверяю, есть ли какие-либо изменения между базой данных и полями ввода (которые могут быть изменены пользователем) Тогда, если (и только если) они разные, я использую запрос таблицы обновления для этой строки. Это довольно просто и работает очень хорошо.

Вот PHP пример:

if (isset($_POST['submit']) and !empty($_POST['submit'])){ 
    $column_1 = $_POST['Col1']; 
    $column_2 = $_POST['Col2']; 
    foreach ($_POST['KeyColumn'] as $key => $variable){ 
     $select = "SELECT * FROM tblTable WHERE KeyColumn='".$variable."'"; 
     $result = $conn->query($select); 
     if ($result->num_rows>0){ 
      while ($row=$result->fetchassoc()){ 
       $same = true; 
       if (($row['Col1'] != $Col1[$key]) or ($row['Col2'] != $Col2[$key])){ 
        $same = false; 
       } 
       if (!$same){ 
        /* update sql on this line */ 
       } 
      } 
     } 
    } 
} 

Примечание: Я использовал много петель, потому что у меня есть электронные таблицы не одну форму. Но он работает одинаково без петель, просто намного проще

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