Question

<form>
  <label>Username:</label>
  <input type="text">
  <br><br>
  <label>Password:</label>
  <input type="password">
  <br><br>

  <!-- <button onclick="goToGallery()">Submit</button> -->
  <!-- <a  href="https://replit.com/@NicoDisara/Final-Project#newPage.html">
          <button>Submit</button>
        </a> -->

  <!-- <form action="newPage.html">
          <input type="Submit"/>
        </form> -->
  <button onclick="onClick()">Submit</button>

  <script>
    function onClick() {
      document.location.href = "newPage.html";
    }
  </script>


</form>

我尝试了不同的方法，但它们都不起作用。每次我按下按钮，页面都会重新加载。您应该按下提交按钮，页面会显示“恭喜”，然后是更多信息。

Answer 1

试试这个

<form action="/newPage.html">
    <label>Username:</label>
    <input type="text">
    <br><br>
    <label>Password:</label>
    <input type="password">
    <br><br>
    <button type="submit">Submit</button>
</form>

我做了什么？

我在表单中添加了操作，并且还更改了按钮的提交类型

Answer 2

弹出某种对话框，向用户显示消息，然后进入新页面应该相当简单。

const dash='-'.repeat(70);
/*
  whatever lines of text to show to user
  - will be displayed by both methods
*/
let messages=[
  'Congratulations!',
  dash,
  'You have been specially selected to enter room 101.',
  'No need to pack - all your needs will be met.',
  'You are very privileged - we hope you enjoy your time there.',
  'All the best - good luck!',
  dash
];


/*
  Method using regular Javascript methods: confirm or alert
*/
document.querySelector('form[name="js"] [type="submit"]').addEventListener('click',function(e){
  e.preventDefault();
  let form=this.parentNode;
  // Add details of data entered by user
  let content=[
    'Username:'+form.username.value,
    'Password:'+form.password.value
  ];
  messages=messages.concat( content );
  /*
    Instead of `confirm` a regular `alert` could be used
    but there is no means of preventing any following actions
    when the alert dialog is closed whereas `confirm` does allow
    the user to abandon at that stage.
  */
  let status = confirm( messages.join( String.fromCharCode( 10 ) ) );
  if( !status )return false;

  location.href='newPage.html';
});



/*
  Method using the new `dialog` element to display a modal
  More: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
*/
document.querySelector('form[name="html"] [type="submit"]').addEventListener('click',function(e){
  e.preventDefault();
  let form=this.parentNode;
  // Add details of data entered by user
  let content=[
    '<div>Username:'+form.username.value+'</div>',
    '<div>Password:'+form.password.value+'</div>'
  ];
  messages=messages.concat( content );
  let dialog=form.querySelector('dialog');
      dialog.innerHTML=messages.join( '<br />' )
      dialog.setAttribute('open',true);
    
  let bttn=document.createElement('button');
      bttn.textContent='OK';
      bttn.onclick=(e)=>{
        dialog.removeAttribute('open');
        location.href='newPage.html';
      }
          
  dialog.append( bttn )
});

<form name='js' method='post'>
    <label>Username: <input type='text' name='username' /></label>
    <label>Password: <input type='password' name='password' /></label>
    <input type='submit' />
</form>


<form name='html' method='post'>
    <label>Username: <input type='text' name='username' /></label>
    <label>Password: <input type='password' name='password' /></label>
    <input type='submit' />
    <dialog></dialog>
</form>

Answer 3

<form>
    <label>Username:</label>
    <input type="text">
    <br><br>
    <label>Password:</label>
    <input type="password">
    <br><br>
      
    <!-- <button onclick="goToGallery()">Submit</button> -->
    <!-- <a  href="https://replit.com/@NicoDisara/Final-Project#newPage.html">
      <button>Submit</button>
    </a> -->
    
    <!-- <form action="newPage.html">
      <input type="Submit"/>
    </form> -->

<button onclick="onClick()">Submit</button>

    <script>
      function onClick() {
        window.location.href="newPage.html";
      }
    </script>

  </form>

刚刚将 javascript 函数中的 Document 替换为 window。我相信它会完美运行。

我试图让一个按钮转到另一个页面，但它不起作用

3 个答案: