保存時にAjaxを使用してUPDATEクエリを実行する

Question

複数の異なる入力を持つフォームがあります。フォームの2つの部分は、ドロップダウンボックスと3つの連絡先情報入力ボックスです。ドロップダウンボックスで選択するたびに、テキストボックスに情報が自動入力されます。また、テキストボックスの横に[保存]ボタンがあります。保存ボタンを押すと変更が必要な場合は、このフィールドを更新することができます。たとえば、私は、私の更新ステートメントにドロップダウンボックスの値をハードコードする場合には機能しますが、ハードコーディングすることなく動作させることはできません。

どうすればこの問題を解決できますか？これは既にフォームになっているので、私はSUBMITでこれを実行していません。フォーム内の保存ボタンをクリックするだけで、自動的に情報が更新されます。

ドロップダウンボックスコード：

<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 align="left"> 
    <th>Name</th> 
    <th>Email</th> 
    <th>Phone Number</th> 
</tr> 
    <tr> 
     <td><input type="text" id="name" class="name" name="name"></td> 
     <td><input type="email" id="email" class="email" name="email"></td> 
     <td><input type="tel" id="tel" class="tel" name="number"></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); 

    var selIndex = ven.selectedIndex; 
    console.log(); 
    var selName = $("#ven option:selected").text(); 

     //$this.val('Save'); 
     //tds.prop('contenteditable', false); 
     var request = $.ajax({ 
     type: "POST", 
     url: "update.php", 
     data: { ven: selName, MR_Name: dict['MR_Name'], MR_POC_N: dict['MR_POC_N'], MR_POC_E: dict['MR_POC_E'], MR_POC_P: dict['MR_POC_P'] }, 
     success: function(data){ 
      console.log(selName); 
      } 
    }); 

     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['ven']; 
    $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); 

?> 

Answer 1

値の宣言の代わりにこのコード行を使用してみてください。

var selName = $("#ven").val();