db（非ブートストラップ）の事前入力モーダル

Question

データベース（sqlite）の値でフォームをあらかじめ入力しようとしています。

私はここJSFiddleに私のコードを嘲笑しました：

https://jsfiddle.net/daikini/e71mvg7n/

は、ここでキャッチは、私は様々な理由のために、ブートストラップを使用していないよ...もあります。だから、もしそれがなくても達成できるなら、それは好みです。

私は良いdb接続を持っている、私は（PHPを使用して）引っ張って投稿することができます。しかし、私はまだフォームにそれを引っ張って把握することができませんでした。

は、ここに私のJSです：

// Get the modal 
var modal = document.getElementById('myModal'); 

// Get the button that opens the modal 
var btn = document.getElementById("myBtn"); 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks on the button, open the modal 
btn.onclick = function() { 
    modal.style.display = "block"; 
} 

    // When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
    modal.style.display = "none"; 
    } 
} 

任意の提案を参考になります。 ありがとうございました！

EDIT：

おかげで再び、この上の助けを。私はPHPとJavascriptを使ってフォーム（これはモーダルの内側にある）をプレフィックスにしようとすると、まだ問題に遭遇しています。ここでは、関連するコードは次のとおりです。

<?php 
foreach($result as $row) 
{ 
echo "<tr>"; 
echo "<td>" . $row['job_id'] . "</td>"; 
echo "<td>" . $row['job_title'] . "</td>"; 
echo "<td>" . $row['date_create'] . "</td>"; 
echo "<td><a href='#' id='editbtn". $row['job_id']."' class='edit-button' name='edit". $row['job_id']."' data-value='".json_encode($row, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP | JSON_UNESCAPED_UNICODE)."'>EDIT</a></td>"; 

if ($row['display']) { 
    echo '<td><form method="post" action="update_jobs.php"><input type="checkbox" name="'. $row['job_id'] . '" value="'. $row['display'] .'" checked />'; 
} else { 
    echo '<td><form method="post" action="update_jobs.php"><input type="checkbox" name="'. $row['job_id'] . '" value="'. $row['display'] .'" />'; 
    } 

echo '<td class="last"><input type="submit" value="Submit" name="active" data-toggle="modal" data-target="#editModal" ></form></td>'; 

echo "</tr>"; 
} 
echo "</table>"; 
echo $row['position_summary']; 

?> 

とJS：あなたが事前に定義された値を使用してフォームを記入したい場合

<script type="text/javascript"> 
var editModal = document.getElementById('editModal'); 
var editbtn = document.getElementById("editbtn" + job_id).value; 

jQuery('.edit-button').click(function() { 
    id = jQuery(this).attr('data-abstract-id'); 
    }); 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks on the button, open the modal 
editbtn.onclick = function() { 
    var _data = $(this).data('value'); 
    editModal.style.display = 'block'; 

    console.log(_data); 

    setTimeout(function() { 
     $('#job-id').val(_data['job_id']); 
     $('#date-created').val(_data['date_create']); 
     $('#job_title').val(_data['job_title']); 
     $('#position_summary').text(_data['position_summary']); 
     $('#duty1').val(_data['duty1']); 
     $('#duty2').val(_data['duty2']); 
     $('#duty3').val(_data['duty3']); 
     $('#duty4').val(_data['duty4']); 
     $('#duty5').val(_data['duty5']); 
     $('#duty6').val(_data['duty6']); 
     $('#duty7').val(_data['duty7']); 
     $('#duty8').val(_data['duty1']); 
     $('#edu1').val(_data['edu1']); 
     $('#edu2').val(_data['edu2']); 
     $('#edu3').val(_data['edu3']); 
     $('#edu4').val(_data['edu4']); 
     $('#edu5').val(_data['edu5']); 
     $('#edu6').val(_data['edu6']); 
     $('#edu7').val(_data['edu7']); 
     $('#edu8').val(_data['edu8']); 
    }, 500); 


} 

// When the user clicks on <span> (x), close the modal 
$(document).on('click', '.toggle-close-edit-modal', function() { 
editModal.style.display = 'none'; 
}); 


// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
if (event.target.id == 'editModal') { 
    editModal.style.display = 'none'; 
    } 
} 
</script> 

Answer 1

それは依存します。ページの読み込み時にロードする場合は、PHPでHTMLを生成し、目的の入力のvalue = ""タグにデータを出力するだけです。

または、ajaxを使用してデータをロードする場合、jQueryを使用して要素の値を入力できます。

$("form input[name='job_title']").val(value); 

ご希望の場合は、質問を明確にしてください。

EDIT：

私はつもりはあなたが何をしたいのか、まだ100％確実ではない、この短いを維持しますよ。

しかし、私が気づいているのは、.editボタンのデータ値からJSONエンコードされたデータを読み込みますが、それをオブジェクトとしてアクセスしたいということです。最初にデコードする必要があります。

var _data = $.parseJSON($(this).data('value')); 

、あなたが達成し、どこかに作業例をアップロードしようとする何をしたいですか、あなたの質問、それはまだ動作していないさを精巧にしてください。