CODEWITHSUNDEEP
javascripthtml
Chris
Chris

Reputation: 65

How to do two seperate actions with one submit form

So I am trying to do two actions on one form using a singular submit input. I am able to have the form populate in an email which is what I want but I would like to redirect to a confirmation page. I have looked at other inquiries on here and they do not seem to open a page. I see others able to anchor which is what I mainly tried and I have tried running jquery function within the ValidateForm() script but also does not open the page.

HTML

    <head>
        <title>Form</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="/css/styles.css">
    <meta charset="UTF-8">

    <script src="/js/Validate.js">

    </script>


    <style type="text/css">
  html, body{
    height: 100%;
  }

  body{
    width: 100%;
    background-image: url(/img/BpD6ruBXZqiH2Qvq4axJXZ.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }
</style>
<body>
<div class="container">
   <form name=”inputForm” onsubmit="return ValidateForm()" action="mailto:[email protected]?Subject=Customer info" method="post" enctype="text/plain">

    <div class="row">
    <div class="col-25">
        Input First Name: <red>* required</red>
    </div>
    <div class="col-75">
        <input id="fnameID" type=”text” name=fName required="required"/>
    </div>
    </div>
          <br>
    <div class="row">
    <div class="col-25">
        Input Last Name: <red>* required</red>
    </div>  
    <div class="col-75">
        <input id="lnameID" type=”text” name=lName required="required"/>
          <br>
       </div>
    </div>   
    <div class="row">
    <div class="col-25">
        Input Date before today: <red>* required</red>
    </div>  
    <div class="col-75">
        <input id="birthID" type=”date” name=birth placeholder="mm/dd/yyyy" required="required"/>
          <br>
          </div>
    </div>
    <div class="row">
    <div class="col-25">
        Input E-mail: <red>* required</red>
    </div>  
    <div class="col-75">
        <input id="email" type="email" placeholder="[email protected]" name=email required="required"/>
          <br>
          </div>
    </div>
    <div class="row">
    <div class="col-25">
        Input Phone Number: <red>* required</red>
    </div>  
    <div class="col-75">
        <input id="phone" type="phone" placeholder="+1(555)555-5555" name=phone required="required"/>
          <br>
          </div>
    </div>
          <br>

    <div class="row">
    <div class="col-25">
        Message: <br>
    </div>
        <div class="col-75">
        <textarea name=message id="message" cols="30" rows="1"></textarea> <br>
    </div>
    </div>
    <br>
    <div class="row">
    <div class="col-25">
        Security Question: <red>* required</red>
    </div>  
    <div class="col-75">
        <input id="verify" type=”text” name=verify placeholder="Dog talk and tree clothes?" required="required"/>
          <br>
          </div>
    </div>

<div class="row">
    </div>
          <a link href="http://www.analog-gamers.com/confirmationpage.html" ><input type="submit" value="send" name="submit"></a>
          <input type="reset" name="reset" value="reset"/><br>
</div>
    </form>
</body>'''




```function ValidateForm(){
 var fName = document.getElementById("fnameID").value;
 if(!ValidateNotBlank(fName,"First Name")) return false;

var lName = document.getElementById("lnameID").value;
 if(!ValidateNotBlank(lName,"Last Name")) return false;

 var bDay = document.getElementById("birthID").value;
 if(!ValidateNotBlank(bDay,"Date")) return false;

var email = document.getElementById("email").value;
if(!ValidateNotBlank(email,"Email")) return false;

if(!ValidateEmail(email,"Email")) return false;

if(!ValidateDate()) return false;

var number1 = document.getElementById("phone").value;
if(!phoneLength(number1,"phone")) return false;

if(!securityQuestiony()) return false;

    return true;

}```

Upvotes: 0

Views: 87

Answers (4)

Dropout
Dropout

Reputation: 13866

Add a short timer to the current window that redirects your page asynchronously.

function ValidateForm () {

    // whatever validations you need

    window.redirectTimer = setTimeout({
        window.location = "http://www.stackoverflow.com";
    }, 250);

    if( !securityQuestion() ) return false;

    return true;
}

This will set up the redirection to happen in 250ms, tune it depending on your needs. The issue could be solved more efficiently with callbacks and whatnot, because using timers is sometimes frowned upon, but it would require more complex changes to your code, i.e. manually handling the data submission, not just by specifying the action.

Upvotes: 0

onlycau
onlycau

Reputation: 136

I have defined an a tag containing input without (type=submit) or out of form that can be successfully launched to the new site,so i guess the form submit button prohibits other click events added to the button.

Listening for submission event completeed and redirect to the new address using JS is a way too.

Upvotes: 0

A. Meshu
A. Meshu

Reputation: 4148

First remove the a that wrap the input.

Now, I guess function verify() probably return more validation, so you just need to put in the final condition something like that:

if (validation is ok) { document.location.assign('http://www.analog-gamers.com/confirmationpage.html');}
else { show errors }

If this is not working, please share more code.

General example:

<form name=”inputForm” onsubmit="return ValidateForm();" 
action="mailto:[email protected]?Subject=Customer info" method="post" 
enctype="text/plain">
.
.
.
.
<input type="submit" value="send" name="submit" />

</form>

<script>
function ValidateForm(){
.
.
.
.
/* if(!verify()) return false;
else  { */
document.location.assign('http://www.google.com'); // }  //yout URL

}
</script>

Upvotes: 1

Anand Trivedi
Anand Trivedi

Reputation: 11

If you want to redirect to Confirmation page, you can add a redirect code inside your

ValidateForm()

like this:

ValidateForm(){
   e.preventDefault(); 
   window.location.replace("test.xyz");
   }

But remember this will cancel your original submit action.

Hope I got your question right.

Upvotes: 0

Related Questions