使用javascript重定向到同一文件夹中的另一个页面

时间:2018-02-11 11:45:24

标签: javascript html redirect web

我正在处理更改密码页面。在此页面中,用户输入新密码并确认新密码。如果两个密码都不匹配,则它应该在同一页面中。如果密码匹配,则用户将被定向到另一个页面。我已经尝试了所有方法来重定向页面,但它没有发生。请帮忙!

# Fetch the component UIDs from the database
component_uids = ComponentDetail.objects.values('uid')
# Make sure we have component UIDs to begin with
if component_uids:
    for component_uid in component_uids:
        # Fetch stream UIDs for each component from the database
        stream_uids = StreamDetail.objects.values('uid').filter(comp_id=ComponentDetail.objects.get(uid=component_uid['uid']))
        for stream_uid in stream_uids:
            feed_data = json.loads(get_feed_data(component_uid['uid'], stream_uid['uid']))
            sd = StreamDetail.objects.get(uid=stream_uid['uid'])
            for component in feed_data['feed']['component']:
                for stream in component['stream']:
                    t = {}
                    d = {}
                    stats = {}
                    for time_value in stream['time']:
                        t = time_value
                    for stats in stream['statistic']:
                        for data_value in stats['data']:
                            print({
'uid': sd, value_type:stats['type'], timestamp=t, value=data_value
})

警报框正在运行但页面重定向未发生。我已经尝试了代码中显示的所有重定向方法。但仍然没有工作。新的JavaScript。请帮忙

2 个答案:

答案 0 :(得分:1)

您正在表单的submit事件中调用该函数,以便发生这种情况:

  1. 您的JavaScript告诉浏览器导航到X
  2. 表单提交告诉浏览器导航到Y
  3. 浏览器导航到Y
  4. 您需要阻止表单提交的默认行为,以允许继续执行步骤1中的导航。

    使用内在事件属性,您需要在return false;函数末尾onsubmit。这可以是返回f1的返回值,然后从那里返回false,或者在函数中返回第二个语句。

    现代方法(即本世纪的最佳做法)会将onsubmit属性替换为addEventListener,然后调用事件对象的the preventDefault method

答案 1 :(得分:1)

在您的方法中,只需返回false即可。这样就可以避免表单提交。

function f1() {
  var newpass = document.getElementById('npass').value;
  var confirmpass = document.getElementById('cpass').value;

  if (newpass != confirmpass) {
    document.getElementById('npass').value = "";
    document.getElementById('cpass').value = "";

    alert("Password Mismatch. Please enter again!");

    //window.location.href = "/file.html";
    // window.location = 'file.html';
    // window.location.replace('file.html');
    //window.location.assign("file.html");
    //window.location.href = "file.html";
  } else {
    alert("Password Match");
    //   window.location.href= "/file.html";
    // document.write("check");
  }

  return false;
}
<form method="POST" onsubmit="return f1()">

  <label for="npass">New Password:</label>
  <input type="password" id="npass" placeholder="Enter New Password" name="newpassword" required="required" size="8">

  <label for="cpass">Confirm Password:</label>
  <input type="password" id="cpass" placeholder="Confirm New Password" name="cpass" required="required" size="8"><br><br>
  <input type="submit" class="btn btn-info" name="submit" value="Submit">
</form>

另一方面,如果您具有重定向用户的控件,为什么要使用表单元素。您想要默认的表单验证吗?也许!如果不是这样,您可以删除表单元素并将单击事件绑定到您的按钮。

function f1() {
  var newpass = document.getElementById('npass').value;
  var confirmpass = document.getElementById('cpass').value;

  if (newpass.trim() === '') {
    alert("Password is required.");
    return;
  }
  
  if (confirmpass.trim() === '') {
    alert("Password confirmation is required.");
    return;
  }
  
  if (newpass != confirmpass) {
    document.getElementById('npass').value = "";
    document.getElementById('cpass').value = "";

    alert("Password Mismatch. Please enter again!");

    //window.location.href = "/file.html";
    // window.location = 'file.html';
    // window.location.replace('file.html');
    //window.location.assign("file.html");
    //window.location.href = "file.html";
  } else {
    alert("Password Match");
    //   window.location.href= "/file.html";
    // document.write("check");
  }
}

document.querySelector('.btn').addEventListener('click', f1)
<label for="npass">New Password:</label>
  <input type="password" id="npass" placeholder="Enter New Password" name="newpassword" required="required" size="8">

  <label for="cpass">Confirm Password:</label>
  <input type="password" id="cpass" placeholder="Confirm New Password" name="cpass" required="required" size="8"><br><br>
  <input type="submit" class="btn btn-info" name="submit" value="Submit">