Home/ Questions/Q 6224991
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T08:45:46+00:00

This is all in a php file <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN

  • 0

This is all in a php file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
    <title>JQuery Form Example</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script><!--need at least one instance of jquery-->
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script><!--ajax to use with jquery-->
    <script type="text/javascript">
    $(document).ready(function(){//when the document has loaded
        $("#myform").validate({//Q: what is validate?, myform gets validated
            debug: false,
            rules: {
                name: "required",//name and email are the only things passed
                email: {
                    required: true,
                    email: true//I guess this defines the input as an email
                }
            },
            messages: {//at what point is this message displayed?
                name: "Please let us know who you are.",
                email: "A valid email will help us get in touch with you.",
            },
            submitHandler: function(form) {//submit the form
                // do other stuff for a valid form
                $.post('process.php', $("#myform").serialize(), function(data) {//Q:what is serialization? myform gets serialized and assigned an action
                    $('#results').html(data);//what is this?
                });
            }
        });
    });

    window.onload=function( )
    {
    }


    </script>
    <style>
    label.error { width: 250px; display: inline; color: red;}
    </style>
</head>
<body>

<form name="myform" id="myform" action="" method="POST">  
<!-- The Name form field -->
    <label for="name" id="name_label">Name</label>  
    <input type="text" name="name" id="name" size="30" value="Charlie"/>  
    <br>
<!-- The Email form field -->
    <label for="email" id="email_label">Email</label>  
    <input type="text" name="email" id="email" size="30" value="obesemuleaccount@yahoo.com"/> 
    <br>
<!-- The Submit button -->
    <input type="submit" name="submit" value="Submit"> 
</form>
<!-- We will output the results from process.php here -->
<div id="results"><div>
</body>
</html>

<!--ok, so I want to first try some stuff out to get a feel for how the form works-->
<!--upload the form to the site somewhere-->
<!--access and play around with it-->
<!--then figure out how to submit to multiple php forms-->

So I’m using Jquery and Ajax, and I need to submit the form automatically.

I’ve tried using things like document.myform.submit, but that doesn’t seem to work. It works when I am not using ajax, but that causes the page to refresh to the target of the php file.

I think I’m just missing some syntax. I did a search and found a few threads like this one:
Ajax auto form submit

But I’m more of a hobbyist designer, so I don’t really understand what they are saying. I wouldn’t put the task of fixing my code on others, but I’m pretty sure the change is minor, and I’ve been up a while trying to figure this out. Many thanks to anyone that helps! Please be very detailed in your directions, it’d be best in fact if you could provide the fix directly in the code itself.

edit: please don’t laugh too hard at my comments, I understand the code (after much googling) much better now, that was a revision from a few hours ago.

double edit: here’s a sample php script called process.php, you will need to edit it to see if the autosubmit works though. As mentioned above, you can do this with a MySQL database.

print "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>";
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    For minimal effort I think this will work

    <script>

$(document).ready(function(){
        submit_form();
});

function submit_form () {
    $.post('process.php', $("#myform").serialize(), function(data) {
        $('#results').html(data);
    });
}

</script>

    Q: what is validate?, myform gets validated

    A: Using the validate method, it ensures that the data in the fields are valid before the form is submitted.

    Q: at what point is this message displayed?

    A: When the validation does not pass. For example you specified the name to be “required” and the email must be an “email” a few lines earlier.

    Q: what is serialization? myform gets serialized and assigned an action

    A: Serialize reads the value of all the fields in the form and constructs the query string suitable for GET and POST. In your case, after serialization, the POST data will be name=Charlie&email=obesemuleaccount@yahoo.com”

    Q: what is this?

    A: “data” is passed as a parameter to the callback function. In this case, the output of process.php will be written into the innerHTML of #(‘#results’)

    • 0