提交具有动作和提交功能的表格

Question

My JS is not that great so I have been fiddling with this for a while now.

I have a form which is being POST to another file when the submit button is clicked. When it is clicked I also want to show an alert then redirect the user back to a URL.

The redirecting code works just fine on a button where I call the function "onclick" like so:

<button onclick="test()">Return</button>

But I don't want to have an extra button for this...I want the form to POST then show an alert box then go to URL specified but I get not a function error from console, thanks.

<iframe name="noreloadhack" style="display:none;"></iframe>
<form action="http://www.example.com/test.php" onsubmit="return test();" method="post" target="noreloadhack">

JS:

 <script>
 function test() {
     alert('Hello World');
     var return_url = document.getElementById('return_url').value;
     window.location.href= return_url;
 }
 </script>

If it makes a difference I have the form target set to a hidden iframe as a hack to not reload page on submit (I know, not the best method). I'm pretty much using 4 form attributes here.

Answer 1

I have some old code that I used to solve a similar situation. Where I wanted to submit a form but not reload the page, here it is. Since there were only 4 input fields I just grabbed the values using jquery.

Javascript:

 function processForm() {
        var teamMembers=new Array();
        console.log($("#"));
        var schoolName=$("#schoolname").val();
        var teamMembers=new Array();
        teamMembers.push($("#contestant1").val());
        teamMembers.push($("#contestant2").val());
        teamMembers.push($("#contestant3").val());
        $.ajax({
                method: "POST",
                url: "php/register.php",
                data: { schoolname: schoolName, teammembers:teamMembers.toString()}
            })
            .done(function( msg ) {
                alert( "Your team is now registered " + msg );
                $('#register').hide();
                location.reload();
            });
        // You must return false to prevent the default form behavior
        // default being reloading the page
        return false;
    }

HTML:

<form id="registration_form" onsubmit="return processForm()" method="POST">
<p style="margin:0px;">School Name:</p>
<input type="text" id="schoolname" name="schoolname" autocomplete="off" class="input" required>
<hr>
<p style="margin:0px;">Contestants</p>
<div id="teammembers">
    <input type="text" id="contestant1" name="contestant1" autocomplete="off" class="input" required>
    <p></p>
    <input type="text" id="contestant2" name="contestant2" autocomplete="off" class="input" required>
    <p></p>
    <input type="text" id="contestant3" name="contestant3" autocomplete="off" class="input" required>
</div>
<input type="submit" id="registered">