मैं एकाधिक रूपों के साथ एक HTML पृष्ठ बनाने की कोशिश कर रहा हूं, और मैं उसी पृष्ठ पर फॉर्म से मान दिखाना चाहता हूं (मूल HTML को मिटा देना), लेकिन बटन का उपयोग करने के बाद, कुछ भी दिखाई नहीं देता है (पृष्ठ जैसे पुनः लोड किया गया)

एचटीएमएल के लिए कोड यहां दिया गया है:

function Results() {
  var fname = document.getElementById('fname').value;
  var lname = document.getElementById('lname').value;
  var gender = document.getElementById('gender').value;
  var date = document.getElementById('birthday').value;

  if (document.getElementById('genderM').checked) {
      gender = document.getElementById('genderM').value;
    } else if (document.getElementById('genderF').checked) {
        gender = document.getElementById('genderF').value;
      }

      document.writeIn("<h3>Thank You! Here's Your Precious Data! </h3>"); document.writeIn("<p> Your Name Is : </p>" + fname + lname); document.writeIn("<p> Gender : " + gender); document.writeIn("<p> Birthday : " + birthday);

      document.getElementById('forms').innerHTML = forms;
    }
<!DOCTYPE HTML>
<html>

<head>
  <title> The Page Number 2 </title>
  <link rel="stylesheet" type="text/css" href="page2.css">

</head>

<body>

  <h1> Please fill in the form for exciting contents! </h1>

  <hr size="5px" color="black">

  <div id="forms" class="forms">
    <form onsubmit="Results()" method="post">

      <div class="textFirst">
        First Name
      </div>

      <input id="fname" type="text" name="fname"> <br>

      <br>
      <div class="textLast">
        Last Name <br>
      </div>

      <input id="lname" type="text" name="lname"> <br>

      <br>

      <div class="textGender">
        Gender <br>
        <input id="genderM" type="radio" name="gender" value="male"> Male <br>
        <input id="genderF" type="radio" name="gender" value="female"> Female <br>
      </div>

      <br>

      <div class="textBirth">
        Birthday <br>
      </div>

      <input id="birthday" type="date" name="birthday"> <br>


  <input id="submit" class="buttonagain" type="submit" value="Submit!" />

  </form>
  
  </div>

</body>

</html>

कोई विचार मुझे क्या करना चाहिए?

संपादित करें: मैं इसके लिए PHP या सर्वर का उपयोग करने में सक्षम नहीं हूँ

0
Bill S 29 मार्च 2018, 14:00

3 जवाब

सबसे बढ़िया उत्तर
  1. आपका कोड सिंटैक्स त्रुटियों से भरा हुआ है: लापता कोष्ठक, लापता + ऑपरेटर, आदि।

  2. document.writeIn (अपरकेस I के साथ) कोई फंक्शन नहीं है; document.writeln (लोअरकेस L के साथ) है।

  3. <script> टैग स्वतः बंद नहीं होते हैं, यानी आपको <script src="scriptPage2.js"></script> लिखना होगा

  4. document.getElementById('gender') null लौटाता है, क्योंकि id="gender" के साथ कोई तत्व नहीं है।

  5. आप birthday लिखने का प्रयास कर रहे हैं लेकिन आपने उस चर को कभी घोषित नहीं किया।

  6. मुझे नहीं पता कि आप document.getElementById('forms').innerHTML = forms; के साथ क्या हासिल करने की कोशिश कर रहे हैं

सामान्य तौर पर, आपको इन सभी त्रुटियों को पकड़ने के लिए ब्राउज़र के अंतर्निहित डीबगर का उपयोग करना चाहिए। यदि आप क्रोम या फ़ायरफ़ॉक्स का उपयोग कर रहे हैं, तो Ctrl+Shift+I दबाएं (IE या Edge में, F12) और "कंसोल" टैब खोलें; जेएस पार्सर का सामना करने पर आपको वहां सभी त्रुटियां दिखाई देंगी।

एक बार यह सब ठीक हो जाने के बाद, सबमिट ईवेंट हैंडलर को <form> से हटा दें, और अपना सबमिट बटन इस तरह बदलें:

<input id="submit" class="buttonagain" type="button" onclick="Results()" value="Submit!" />

type के submit से button में परिवर्तन पर ध्यान दें। यह पृष्ठ को पुनः लोड होने से रोकेगा, जो कि प्रपत्र सबमिट करते समय अपेक्षित व्यवहार है।

1
Xavier Guihot 29 मार्च 2018, 18:19

यह आपका उत्तर है।

function Results() {
      var fname = document.getElementById('fname').value;
      var lname = document.getElementById('lname').value;
      var gender;
      var date = document.getElementById('birthday').value;
 
if (document.getElementById('genderM').checked) {
gender = "Male";
} else {
gender = "Female"
}

          document.writeln("<h3>Thank You! Here's Your Precious Data! </h3>");
          document.writeln("<p> Your Name Is : </p>" + fname + " " + lname); 
          document.writeln("<p> Gender : " + gender); 
          document.writeln("<p> Birthday : " + date);

          document.getElementById('forms').style.display = "none";
        }
<!DOCTYPE HTML>
    <html>

    <head>
      <title> The Page Number 2 </title>
      <link rel="stylesheet" type="text/css" href="page2.css">

    </head>

    <body>

      <h1> Please fill in the form for exciting contents! </h1>

      <hr size="5px" color="black">

      <div id="forms" class="forms">
        <form onsubmit="Results();" method="post">

          <div class="textFirst">
            First Name
          </div>

          <input id="fname" type="text" name="fname" required> <br>

          <br>
          <div class="textLast">
            Last Name <br>
          </div>

          <input id="lname" type="text" name="lname"required> <br>

          <br>

          <div class="textGender">
            Gender <br>
            <input id="genderM" type="radio" name="gender" value="male" required> Male <br>
            <input id="genderF" type="radio" name="gender" value="female"> Female <br>
          </div>

          <br>

          <div class="textBirth">
            Birthday <br>
          </div>
          <input id="birthday" type="date" name="birthday"required> <br>
      </div>


      <input id="submit" class="buttonagain" type="submit" value="Submit!" />

      </div>


      </form>



    </body>

    </html>
0
user9539919user9539919 29 मार्च 2018, 11:33

Html में js फ़ंक्शन को कॉल करते समय आपको return और ; की आवश्यकता नहीं है

<form onsubmit="Results()" method="post">
1
henriquehbr 29 मार्च 2018, 11:06