양식 데이터를 사용하여 웹 페이지를 업데이트하십시오.

Question

많은 코드를 제공하기 전에 먼저 할 일이 가능한지 알아야합니다.

나는 JavaScript & JavaScript를 사용하여 PIG라고 부르는 주사위 게임의 웹 기반 버전을 만들었습니다. 사용자는 기본 페이지의 "설정"버튼을 클릭하여 게임 설정 중 일부를 변경할 수 있습니다. 이 버튼은 HTML 양식()을 포함하는 모달 창을 가져옵니다. 사용자가 입력하고 제출하는 데이터를 사용하여 게임의 기본 페이지에있는 다양한 설정을 업데이트하고 싶습니다.

자바 스크립트를 사용하여 유효성 검사 논리를 직접 복사하지 않고 기본 HTML5 양식 유효성 검사 기능을 사용하기를 원했기 때문에 HTML5 양식을 사용하기로했습니다.

그래서 내 접근 방식은 제출시 양식에서 데이터를 가져 오기 위해 자바 스크립트를 사용하는 것이 었습니다. 이 작업을 수행하는 두 가지 다른 방법을 시도 : 태그에서 "onsubmit = function getSettings()"사용 2) onclick = "getSettings()"이있는 양식에 제출 단추 사용.

두 가지 방법을 사용하면 제출시 양식의 모든 값을 성공적으로 가져올 수 있었고 getSettings() 함수를 종료 할 때 gettSettings() 함수를 사용하여 주요 게임 페이지를 성공적으로 채울 수있었습니다. 내가 업데이트 한 웹 페이지 값은 그대로 두지 않습니다 ... 내가 사용하는 두 가지 방법 중 어느 것에 관계없이 원래 값으로 되돌립니다.

getSettings() 메서드의 마지막 문에서 중단 점을 설정하면 주 페이지의 모든 값이 채워진 값을 반영하도록 업데이트되어 있기 때문에 값이 성공적으로 업데이트 된 것을 알고 있습니다. 양식 ... 그래서 나는 모든 데이터를 성공적으로 잡아서 메인 페이지를 그 값으로 업데이트한다는 것을 알고있다.

웹 페이지에서 성공적으로 변경 한 값이 getSettings() 함수를 종료 할 때 원래 값으로 되돌려 놓는 이유에 대해 의아하게 생각합니다.

아마도 내가하려는 일을 수행 할 수 없습니까? 그리고 만약 내가 알 수 없다면 누가 원래 값으로 되돌리기 전에 값이 성공적으로 변경되었는지 알 수 있습니다. 내가 뭘 놓치고 있니?

다시 "기본"HTML5 양식 유효성 검사 기능을 활용할 수 있도록 양식을 사용하고 제출시 데이터를 수집합니다.

감사합니다.

***** 편집은 모달 폼에 대한 코드 HTML 코드를 코드 여기 *******

의 주요 적용 분야입니다 추가하려면 : 여기

<form name="config-settings" onsubmit="getSettings()"> 
    <!--    <form name="config-settings">--> 
    <span class="errMsg"></span> 

    <div class="row clearfix"> 
     <div> 
      <label>Player 1:</label> 
     </div> 
     <div> 
      <input type="text" name="input-name-0" id="input-name-0" maxlength="10" placeholder="Enter name" pattern="^\S+$"> 
     </div> 
    </div> 
    <div class="row clearfix"> 
     <div> 
      <label>Player 2:</label> 
     </div> 
     <div> 
      <input type="text" name="input-name-1" id="input-name-1" maxlength="6" placeholder="Enter name" pattern="^\S+$"> 
     </div> 
    </div> 
    <div class="row clearfix"> 
     <div> 
      <label>Winning Score:</label> 
     </div> 
     <div> 
      <input type="number" name="winning-score" id="winning-score" default="100" placeholder="Enter winning score"> 
     </div> 
    </div> 
    <div class="row clearfix"> 
     <div> 
      <label>Number of Dice:</label> 
     </div> 
     <div> 
      <select name="diceValues" id="dice-value"> 
       <option value=""> - Select - </option> 
       <option value="dice-1">One Dice</option> 
       <option value="dice-2">Two Dice</option> 
      </select> 
     </div> 
    </div> 
    <!-- Below is alt method I used to submit form..yields same results  --> 
    <!-- <input type="submit" value="Submit" onclick="getSettings()">--> 
    <input type="submit" value="Submit"> 
</form> 

글로벌 변수 정의 및 방법) (getSettings에서 사용 : 여기

// Global variables 
var scores, roundScore, activePlayer, gamePlaying, gamesWonCount, playerNames, winningScore, numOfDice, matchScore, msgs; 
var player0, player1, score; 
var player0Field = document.getElementById('name-0'); 
var player1Field = document.getElementById('name-1'); 
var scoreField = document.getElementById('winScore'); 

설정을 포함하는 설정 모달 창이 나타납니다 메인 웹 페이지에서 설정 버튼에 대한 리스너이다가 형성 :

//********************************************************* 
// Open Settings Modal Windows 
//********************************************************* 
document.querySelector('.btn-settings').addEventListener('click', function() { 

    // Settings can't be changed if game is actively underway 
    if (!gamePlaying || roundScore === 0) { 
     document.querySelector('#modal-settings').style.display = 'block'; 
    } else { 
     // Make error message visible 
     msgs.style = 'block'; 
     // Create message to indicate settings successfully updated  
     msgs.textContent = "Settings can't be updated during game"; 
     msgs.style.backgroundColor = 'pink'; 
     fadeOut(msgs); 
    } 
}); 

다음은 getSettings() javaScript 함수입니다 (참고 :이 함수에는 지역 변수가 정의되어 있지 않습니다 ... 모두 전역 값 (javaScript app의 처음 몇 줄)으로 정의됩니다.

function getSettings() { 
    // Alternative call if I want this function to be called via eventListner 
    //document.querySelector('.btn-save').addEventListener('click', function() { 

    console.log("getSettings method called"); 

    player0 = document.forms["config-settings"]["input-name-0"].value; 
    player1 = document.forms["config-settings"]["input-name-1"].value; 
    score = document.forms["config-settings"]["winning-score"].value; 

    // Reset msgs so they will be displayed each time 
    msgs.style = 'block'; 

    playerNames[0] = player0; 
    player0Field.innerHTML = playerNames[0]; 

    playerNames[1] = player1; 
    player1Field.textContent = playerNames[1]; 

    // Set Winning score on UI to value on form 
    scoreField.textContent = score; 

    // numOfDice = document.getElementById('dice-value').value; 

    // Create message to indicate settings successfully updated  
    msgs.textContent = "Successfully updated settings"; 
    msgs.style.backgroundColor = 'lightgreen'; 
    fadeOut(msgs); 
    document.querySelector('#modal-settings').style.display = 'none'; 
} 

Answer 1

오케이 ... 나는 마침내 그것을 알아 냈습니다! 문제는 범위 지정 문제가 아니라 "onSubmit"작동 방식과 관련된 문제였습니다.

이 솔루션은 두 가지 사항을 변경하고 참여 :

1) "getSettings()"함수를 호출 할 때 "onsubmit"속성에 return 문을 추가를;

<form name="config-settings" onsubmit="return getSettings()"> 

2) gettSettings()의 끝에서 false를 반환합니다.

return false; 

참고 : 이전에 true가 아닌 false가 반환되었습니다. getSettings() 함수에서 잘못된 값을 반환하면 HTML5 "native"유효성 검사가 비활성화되고 모든 오류를 직접 구현할 수 있다는 인상 아래에서 필자는 오류가 발생했습니다. 이제는 false를 반환하면 양식이 제출되지 않을뿐입니다. 그러나 HTML5 기본 유효성 검사는 사용 중지되지 않습니다.

내 목표는 여기에 서버 구성 요소가 없으므로 서버에 양식을 제출하지 않고 단순히 "기본"HTML5 양식 검사를 사용하여 로컬의 값을 업데이트하는 것이었기 때문에이 솔루션은 완벽하게 작동했습니다. 웹 페이지.

그 모두는 내가 왜 반환 문장을 제공하지 않았을 때 또는 내가 진정한 것을 반환했을 때 왜 내 모든 변경 사항이 원래 값으로 돌아 왔는지에 대해 완전히 확신하지 못한다고 말했습니다. 누군가 내가 왜 그것을 고맙게 여길지에 관해 밝힐 수 있다면.

환호

Answer 2

나는이 getSettings()가 당신의 기능을 수행하도록되어 정확히 모르겠지만, 나는 당신에게 충고 제공하기 위해 시도 할 수 있습니다 : 양식의 일부를

1. 을 HTML5의 유효성 검사 기능은 사용되는 모든 브라우저에서 완전히 지원되지 않습니다 (일부 사용자는 브라우저를 업데이트하지 않으려 고합니다). 따라서 HTML5의 "기본"유효성 검사에 의존하는 것이 최선의 방법은 아닙니다.
2. 양식을 제출하기 전에 양식 값을 조작하려면 클릭 이벤트에 대한 제출 단추에 수신기를 추가하고 다른 작업을 방지하고 양식 데이터를 검사/조작 한 다음 수동으로 제출하십시오 형태. 어쨌든 프런트 엔드 유효성 검사는 전적으로 안전하지 않으므로 민감한 데이터를 보냈다면 서버 측 (서버에서 응용 프로그램을 사용하는 경우)을 검사해야합니다.

내가 설명 한 일 이전 예시하려면

document.getElementById("myBtn").addEventListener("click", function(event){ 
    //Stops the form submitting. 
    event.stopImmediatePropagation(); 

    //Do the checks here. 

    //Sends the form. 
    document.getelementById("myForm").sumbit(); 
); 

당신이) (이 getSettings 내부 기능을 지역 변수를 변경하는 경우

, 변수가 변경됩니다 단지 내

함수 범위. 당신은 자바 스크립트에서 범위에 대해 읽고 싶을 수도 있습니다. (이것은 단지 교육받은 추측이었습니다).

이 유용한 행운을 찾아 주시기 바랍니다.