Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm new to wordpress and hence facing some issues.

The use case scenario is as follows:

  1. A user is displayed an application form to start a club in his school.
  2. The user fills the form and hits the 'Submit' button.
  3. The form needs to be validated.
  4. If the validation is successful, then data is stored in custom table club_details in db and the user is shown some message(eg: Thanks for submission. Your application is sent to the admin for approval.) else appropriate error messages are shown to the user.
  5. The admin goes to the Wordpress admin panel to approve the pending requests for the club. (The data is fetched from db and shown to the admin).

I have done the following:

  • for 1) I have created a application form/page using the Wordpress HTML editor.
  • for 3) I have a javascript file (validation.js) that has the validation code.
  • for 4) I have a php file (club-functions.php) that has a function storeInDB() to store the application details in custom table in db.
  • for 5) I have created my own plugin folder and added a php file (club.php) that displays the application details to the admin on the Wordpress admin panel.

I'm stuck up at the following place: How to handle the form submission. Where should I place the code that calls the javascript's validate function and later calls the storeInDB() function.

Please provide me some suggestions on how do I achieve this and is this approach good? Thanks a lot in advance.

share|improve this question

4 Answers 4

You should use the wp_ajax or the wp_ajax_nopriv function.

First of all you should put the the admin ajax url as the action attribute value in the submission form.

<form id="" action="<?php echo admin_url('admin-ajax.php'); ?>" method="post" class="form" >

That way the the form will be submitted to the admin-ajax.php by default (without JavaScript). You can use JavaScript to make it work using AJAX.

Next is the function that will use the submitted data. Inside the form, put a wp_nonce_field and a hidden input with the name action. My action value is add_transfer.

<?php wp_nonce_field('add_transfer','security-code-here'); ?>
<input name="action" value="add_transfer" type="hidden">

You can put the function that will handle this form in the functions.php or in your plugin file. You can use wp_ajax_ + the action name if this is a form only for logged in users. For non logged in users, use wp_ajax_nopriv + the action name instead.

add_action('wp_ajax_add_transfer', 'process_add_transfer');

function process_add_transfer() {
if ( empty($_POST) || !wp_verify_nonce($_POST['security-code-here'],'add_transfer') ) {
    echo 'You targeted the right function, but sorry, your nonce did not verify.';
    die();
} else {
    // do your function here 
    wp_redirect($redirect_url_for_non_ajax_request);
}
share|improve this answer
    
Thanks ifdion for the reply. I'm creating the form in 'Wordpress HTML editor'. So, is it good to include php code in the form as I will have to install 'Exec-PHP' plugin which I believe is a overkill? Please share your thoughts. –  Pooja Aug 4 '12 at 14:00
    
Just replace the action value with your-site-url.com/wp-admin/admin-ajax.php. –  ifdion Aug 4 '12 at 21:36
    
Does that work? –  ifdion Aug 8 '12 at 21:55
1  
is there a good way to achieve the same but without admin-ajax.php? –  Tahir Yasin Feb 19 at 10:17

first, let me tell you that javascript validation works on client side. so if the user, disables js, you're going to have problems.

so, you should also validate the input values, server-side.

with that in mind:

The js code can be called directly from the page where the form is. onsubmit attribute is the usual way to call it.

example

<form onSubmit="validateForms()" method="post" action="domain.com/club-contacts">
    <label for="app_email">Application</label>
    <input type="text" name="app_email" id="app_email" value="" />
    <input type="hidden" name="app_application" value="1" />
    <input type="submit" name="app_form_send" value="Send" />
</form>

page.php

This can be also your custom template page or single.php. in this case, 99 is the ID of the specific page you want to indicate to the user if it was approved or had an error.

if ( get_the_ID() == '99' ) {
  // lets validate the input
  if( !empty($_POST['app_application']) && $_POST['app_application'] == "1"  ) {
   if(!empty($_POST['app_email'])) {
    // check the codex for [Data_Validation][1]
    }
  }
}
share|improve this answer
    
Thanks peteroak for the reply. Where can I call PHP code to further process the form data? –  Pooja Aug 4 '12 at 14:02
    
the action attribute will point to a file. in that file you can filter and validate your form. i will update my response to include that. –  peteroak Aug 4 '12 at 19:37

As someone who is new to WordPress development too, sometimes I've stood on the shoulders of giants and found it remarkably easy to get results.

Have you looked at Gravity Forms or Ninja Forms? I really like doing my own development when I'm able but these guys did everything I needed so much better than I could.

Might be worth checking out even if you decide not to use them for this project.

share|improve this answer

Process your form fields in init action as shown in my blog post.

http://scriptbaker.com/create-custom-form-wordpress-handle-submission/

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.