0

I have a form in a separate PHP file in the theme directory and it's being included in the sidebar of the main page template. The form is inside a Boostrap modal. I've been trying to use this code to be able to allow the users to submit new posts using the form but this code doesn't insert anything:

<?php 
if ( isset( $_POST['submitted'] ) && isset( $_POST['post_nonce_field'] ) && wp_verify_nonce( $_POST['post_nonce_field'], 'post_nonce' ) ) {

$subjectError = '';

if ( trim($_POST['subject'] ) === '' ) {
  $subjectError = "Please enter the subject.";
  $error = true;
}

$post_information = array(
  'post_title' => wp_strip_all_tags( $_POST['subject'] ),
  'post_content' => $_POST['postContent'],
  'post_type' => 'post',
  'post_status' => 'pending'
);

$post_id = wp_insert_post( $post_information );
if ( $post_id ) {
  wp_redirect("/home");
  exit;
}
  }
?>

<div class="submit-content">
<div id="submit-modal" class="modal hide fade">
<div class="modal-header">
  <h3>Submit content</h3>
</div>

<div class="modal-body">
  <form class="form" id="submit-content-form" method="POST" action="<?php the_permalink(); ?>">
    <?php if ( $subjectError != '' ) { ?>
        <span class="error"><?php echo $subjectError; ?></span>
        <div class="clearfix"></div>
    <?php } ?>

    <div class="control-group subject-group">
        <label for="" class="control-label">Subject</label>

        <div class="controls">
            <input type="text" name="subject" id="subject" class="required" value="<?php if ( isset( $_POST['subject'] ) ) echo $_POST['subject']; ?>" />
        </div>
    </div>

    <div class="control-group content-group">
        <label for="" class="control-label">Content</label>

        <div class="controls">
            <textarea name="postContent" id="postContent" cols="30" rows="10" class="required">
          <?php if ( isset( $_POST['postContent'] ) ) { if ( function_exists( 'stripslashes' ) ) { echo stripslashes( $_POST['postContent'] ); } else { echo $_POST['postContent']; } } ?>   
        </textarea>
        </div>
    </div>

    <div class="control-group upload-group">
        <label for="" class="control-label">Upload file</label>

        <div class="controls">
            <input type="file" value="Choose file">
        </div>
    </div>
  </form>          
</div>

<div class="modal-footer">
  <input type="hidden" name="submitted" id="submitted" value="true" />
  <?php wp_nonce_field( 'post_nonce', 'post_nonce_field' ); ?>
  <a href="" class="btn btn-vq-green" onclick="document.getElementById('submit-content-form').submit()">Submit</a>
</div>

Kindly help! I'm completely lost here. I've been searching everywhere on the web but can't find a solution for this. What am I doing wrong here?

Thanks!

EDIT: Here is the working code. It now creates the post but validation doesn't work which allowed empty posts to be created until I added one more check to make sure the subject field is not empty when the form is being submitted. Now post is being created and the extra check prevents blank posts from being added. Validation works only if I add an elseif block to separately check which field is still empty upon form submission.

<?php
if ( isset( $_POST['submitted'] ) && !empty ( $_POST['subject'] ) && isset( $_POST['post_nonce_field'] ) && wp_verify_nonce( $_POST['post_nonce_field'], 'post_nonce' ) ) {

$subjectError = '';

if ( trim($_POST['subject'] ) === '' ) {
  $subjectError = "Please enter the subject.";
  $error = true;
}

$post_information = array(
  'post_title' => wp_strip_all_tags( $_POST['subject'] ),
  'post_content' => $_POST['postContent'],
  'post_type' => 'post',
  'post_status' => 'pending'
);

$post_id = wp_insert_post( $post_information );
if ( $post_id ) {
  wp_redirect("/home");
  exit;
}
} elseif ( isset( $_POST['submitted'] ) && empty ( $_POST['subject'] ) ) {
$subjectError = "Please enter the subject.";
$error = true;
}
?>


<div class="submit-content">
        <div id="submit-modal" class="modal hide fade">
        <div class="modal-header">
          <h3>Submit content</h3>
        </div>

        <div class="modal-body">
          <form class="form" id="submit-content-form" method="POST" action="">
            <div class="control-group subject-group">
                <label for="" class="control-label">Subject</label>

                <div class="controls">
                    <input type="text" name="subject" id="subject" class="required" value="<?php if ( isset( $_POST['subject'] ) ) echo $_POST['subject']; ?>" />
                </div>
            </div>

            <div class="control-group content-group">
                <label for="" class="control-label">Content</label>
                <?php if ( $subjectError != '' ) { ?>
                <span class="error"><?php echo $subjectError; ?></span>
                <div class="clearfix"></div>
                <?php } ?>

                <div class="controls">
                    <textarea name="postContent" id="postContent" cols="30" rows="10" class="required">
                  <?php if ( isset( $_POST['postContent'] ) ) { if ( function_exists( 'stripslashes' ) ) { echo stripslashes( $_POST['postContent'] ); } else { echo $_POST['postContent']; } } ?>   
                </textarea>
                </div>
            </div>

            <div class="control-group upload-group">
                <label for="" class="control-label">Upload file</label>

                <div class="controls">
                    <input type="file" value="Choose file">
                <input type="hidden" name="submitted" id="submitted" value="submitted" />
                <?php wp_nonce_field( 'post_nonce', 'post_nonce_field' ); ?>
                </div>
            </div>
          </form>          
        </div>

        <div class="modal-footer">
          <a href="javascript:void(0)" class="btn btn-vq-green" onclick="document.getElementById('submit-content-form').submit()">Submit</a>
        </div>
      </div>
    </div>

1 Answer 1

1

The nonce field is not added to the form, and is therefore not passed in the POST request when submitting the form. Thus, isset( $_POST['post_nonce_field'] ) returns false and the conditional is never true. Try moving the nonce field to someplace between the opening form tag ( <form>) and closing form tag (</form>).

EDIT: The problem is actually in your JavaScript. The "submit" link you currently have submits the form, but doesn't stop propagation of the normal on click event for a link, which is actually following the link. Thus, as the href attribute is empty, it will actually point you to the current page via a normal GET request.

To fix this, you could add return false; right behind the submit() JavaScript method call for the form. However, a better way to achieve this would be to use a button or submit element, or at least call the form submission function through JavaScript so you can use preventDefault instead of returning false.

TL;DR Use a button or input submit element (best choice), call the submit through jQuery and add e.preventDefault() (second best) or add return false; after the JavaScript submit() call (worst — but easiest — solution).

13
  • Hi engelen, Thanks a lot for your response! Oops! That was a big mistake. I've now put the hidden input and nonce field between ( <form> ) and ( </form> ) but it still doesn't work. What else might be wrong with this? Sincerely, Avinash
    – A Kumar
    Jun 27, 2014 at 19:02
  • Could you do a little debugging and see if the if-block is actually entered? Perhaps, you could try an echo "test"; right before $subjectError = ''; and tell us whether that's being executed.
    – engelen
    Jun 27, 2014 at 19:07
  • Hi engelen, Thanks again! I tried echoing something in the if block and it didn't work, neither did any var_dump or print_r on $_POST work. I'm really puzzled what's not letting the code insert anything in the DB. :(
    – A Kumar
    Jun 27, 2014 at 19:17
  • I've edited my answer with the solution.
    – engelen
    Jun 27, 2014 at 19:24
  • Hi engelen, You're a lifesaver! Thank you so much!! I'm running out of time so I just used href="javascript:void(0)" for now and it solved the issue but I'll certainly implement your best suggestion for this later. I have another problem with this code now. I have an error checking in place but although the form is being submitted, it doesn't throw any error even if the field is empty. Could you please help on this? Thanks!!
    – A Kumar
    Jun 27, 2014 at 19:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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