モーダル内の情報をデータとしてPOSTした際に同時にページ更新を行おうと思ったのですが,更新のみが実行されてデータの送信を行うことができませんでした。これではできないのでしょうか?
JavaScript
1function editTaskParameters(task_id, data){ 2 data = 'jsonstring=' + data; 3 4 console.log(data); 5 var url = "https://us-central1-singletasker-dev.cloudfunctions.net/task?api_token=" + api_token + "&task_id=" + task_id; 6 const request = new XMLHttpRequest(); 7 request.open("POST", url); 8 request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 9 request.addEventListener("load", (event) => { 10 if (event.target.status !== 200) { 11 console.log(`${event.target.status}: ${event.target.statusText}`); 12 return; 13 } 14 }); 15 request.addEventListener("error", () => { 16 console.error("Network Error"); 17 }); 18 request.send( data ); 19} 20 21function editTask(){ 22 var name = document.getElementById('editName').value; 23 var memo = document.getElementById('editMemo').value; 24 var due = document.getElementById('editDue').value; 25 due = due.replace(new RegExp("/", 'g'), '-') 26 var priority = document.getElementById('editPriority').value; 27 // var tags = document.getElementById('tags').value; 28 var hour = document.getElementById('editHour').value; 29 var minute = document.getElementById('editMinute').value; 30 31 console.log(document.getElementById('editPriority')); 32 33 most_important_taskid = localStorage.getItem('most_important_taskid'); 34 most_important_task = JSON.parse(localStorage.getItem(most_important_taskid)); 35 36 var data = "{"; 37 38 if(name != most_important_task.name){ 39 data += "\"name\":\"" + name + "\","; 40 } 41 if(memo != most_important_task.description){ 42 data += "\"description\":\"" + memo + "\","; 43 } 44 if(priority != most_important_task.priority){ 45 data += "\"priority\":" + priority + ","; 46 } 47 if(due != most_important_task.due.replace(new RegExp("-", 'g'), '/')){ 48 data += "\"due\":\"" + due + "\","; 49 } 50 if(hour != reformat_time(most_important_task.estimate)[0] || minute != reformat_time(most_important_task.estimate)[1]){ 51 hour = ('0' + hour).slice(-2); 52 minute = ('0' + minute).slice(-2); 53 data += "\"estimate\":\"" + hour + ":" + minute + ":00\"," 54 } 55 56 data = data.slice(0, -1) + "}"; 57 58 most_important_taskid = localStorage.getItem('most_important_taskid'); 59 editTaskParameters(most_important_taskid, data); 60 61 location.replace(location.href); 62 63 // console.log(name); 64 // console.log(memo); 65 // console.log(due); 66 // console.log(priority); 67 // console.log(hour); 68 // console.log(minute); 69 // console.log(data); 70}
HTML
1 <div class="modal fade bd-example-modal-lg" id="taskmodModal" tabindex="-1" role="dialog" aria-labelledby="taskmodModalLabel" 2 aria-hidden="true"> 3 <div class="modal-dialog modal-lg" role="document"> 4 <div class="modal-content"> 5 <div class="modal-header"> 6 <h5 class="modal-title" id="taskmodModalLabel">タスク変更</h5> 7 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 8 <span aria-hidden="true">×</span> 9 </button> 10 </div> 11 <div class="modal-body mx-5"> 12 <form> 13 <!-- タスク名の設定 --> 14 <div class="form-group"> 15 <input type="text" class="form-control" id="editName"> 16 </div> 17 18 <!-- その他パラメータの設定 --> 19 </form> 20 </div> 21 <div class="modal-footer"> 22 <button type="button" class="btn btn-secondary" data-dismiss="modal" style="border-radius: 100px;"> 23 キャンセル 24 </button> 25 <button type="button" onclick="editTask()" class="btn btn-primary" style="border-radius: 100px;">  変更  </button> 26 <!--<button onclick="addTask()" href="home.html" type="submit"--> 27 <!--class="btn btn-primary btn-lg" style="border-radius: 10px;">作成--> 28 <!--</button>--> 29 </div> 30 </div> 31 </div> 32 </div>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/28 10:17