Redirecting to a page after submitting form in HTML

前端 未结 3 1713
轮回少年
轮回少年 2020-12-30 03:14

I\'m fairly new to coding in HTML. After hours of searching the internet for a way to do this, I failed and so I\'m here. I was setting up a CSRF Proof of concept page here,

3条回答
  •  挽巷
    挽巷 (楼主)
    2020-12-30 03:30

    What you could do is, a validation of the values, for example:

    if the value of the input of fullanme is greater than some value length and if the value of the input of address is greater than some value length then redirect to a new page, otherwise shows an error for the input.

    // We access to the inputs by their id's
    let fullname = document.getElementById("fullname");
    let address = document.getElementById("address");
    
    // Error messages
    let errorElement = document.getElementById("name_error");
    let errorElementAddress = document.getElementById("address_error");
    
    // Form
    let contactForm = document.getElementById("form");
    
    // Event listener
    contactForm.addEventListener("submit", function (e) {
      let messageName = [];
      let messageAddress = [];
      
        if (fullname.value === "" || fullname.value === null) {
        messageName.push("* This field is required");
      }
    
      if (address.value === "" || address.value === null) {
        messageAddress.push("* This field is required");
      }
    
      // Statement to shows the errors
      if (messageName.length || messageAddress.length > 0) {
        e.preventDefault();
        errorElement.innerText = messageName;
        errorElementAddress.innerText = messageAddress;
      }
      
       // if the values length is filled and it's greater than 2 then redirect to this page
        if (
        (fullname.value.length > 2,
        address.value.length > 2)
      ) {
        e.preventDefault();
        window.location.assign("https://www.google.com");
      }
    
    });
    .error {
      color: #000;
    }
    
    .input-container {
      display: flex;
      flex-direction: column;
      margin: 1rem auto;
    }
    
      
        

提交回复
热议问题