Matt
Matt

Reputation: 1757

submit button post not sent after using javascript

I have 3 separate forms each with their own submit buttons (removed all other lines of form code as not required):

<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicSub" id="postingTopicSub" enctype="multipart/form-data">
    <input type="button" name="submittopic" id="submittopic" value="Submit" onclick="topicPostSubmit();"/>

<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicReply" id="postingTopicReply" enctype="multipart/form-data">
    <input type="button" name="submitreply" id="submitreply" value="Submit" onclick="replyPostSubmit();"/>

<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicEdit" id="postingTopicEdit" enctype="multipart/form-data">
    <input type="button" name="submitedit" id="submitedit" value="Submit" onclick="editPostSubmit();"/>

I am using Javascript to verify the form data is filled in before submitting however because using JavaScript the POST data from the button is not being sent.

JavaScript submit for each form:

document.getElementById("postingTopicSub").submit();
document.getElementById("postingTopicReply").submit();
document.getElementById("postingTopicEdit").submit();

On my data page I use isset to make the SQL queries run are for the correct form:

// User meets all conditions and posts a topic
    if (isset($_POST['topicID'], $_POST['subject'], $_POST['post_text'], $_SESSION['username'], $_POST['submittopic']) && !isset($_POST['forumID'])) {

// User meets all conditions and posts a reply
    if (isset($_POST['topicID'], $_POST['post_text'], $_SESSION['username'], $_POST['submitreply'], $_POST['forumID'], $_POST['subject'])) {

// User meets all conditions and edits a post
    if (isset($_POST['topicID'], $_POST['post_text'], $_SESSION['username'], $_POST['submitedit'], $_POST['forumID'], $_POST['postID'], $_POST['subject'])) {

My questions:

Thanks in advance.

EDIT:

Full form (without bbcodes)

<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicSub" id="postingTopicSub" enctype="multipart/form-data">
    <input type="hidden" name="topicID" id="topicID" value="<?php echo $topicID ?>"/>
       <div class="post-subject">
        Subject:
        <input type="text" name="subject" id="subject" />
    </div>

    <div class="post-textarea">
        <textarea name="post_text" id="post_text" cols="100" rows="30"></textarea>
    </div>
    <div class="post-button">
        <input type="button" name="submittopic" id="submittopic" value="Submit" onclick="topicPostSubmit();"/> 
    </div>
</form>

Full JS for form validation:

function forumssubmit() 
{
    var subject = document.getElementById("subject").value;
    var text = document.getElementById("post_text").value;

    if(subject=="" || text=="")
    {
        alert('Please fill in the subject and text');
        return false;
    }
        return true;
}

function topicPostSubmit()
{
  if(forumssubmit())
  {
    document.getElementById("postingTopicSub").submit();
  }
}

EDIT2::

New js:

function forumssubmit() 
{
    var subject = document.getElementById("subject").value;
    var text = document.getElementById("post_text").value;

    if(subject=="" || text=="")
    {
        alert('Please fill in the subject and text');
        return false;
    }
    return true;
}

function topicPostSubmit()
{
  if(forumssubmit())
  {
    //document.getElementById("postingTopicSub").submit();
    return true;
  }
}

New button:

<input type="button" name="submittopic" id="submittopic" value="Submit" onclick="return topicPostSubmit();"/> 

Upvotes: 1

Views: 104

Answers (1)

LAROmega
LAROmega

Reputation: 488

If you're really just "using Javascript to verify the form data is filled" you can add a return to the onclick's of your submit buttons. You'll then be able to use those for submitting the form instead of Javascript.

<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicSub" id="postingTopicSub" enctype="multipart/form-data">
    <input type="submit" name="submittopic" id="submittopic" value="Submit" onclick="return topicPostSubmit()"/>

<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicReply" id="postingTopicReply" enctype="multipart/form-data">
    <input type="submit" name="submitreply" id="submitreply" value="Submit" onclick="return replyPostSubmit()"/>

<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicEdit" id="postingTopicEdit" enctype="multipart/form-data">
    <input type="submit" name="submitedit" id="submitedit" value="Submit" onclick="return editPostSubmit()"/>

Then in the javascript if you have a bad state return false.

function editPostSubmit(){
  if(data == 'bad')
    return false;

  return true;
}

I also want to make sure you're doing data validation on the backend. We don't want to allow SQL injection on your page.

Edit: Updated your modified code.

<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicSub" id="postingTopicSub" enctype="multipart/form-data">
<input type="hidden" name="topicID" id="topicID" value="<?php echo $topicID ?>"/>
   <div class="post-subject">
    Subject:
    <input type="text" name="subject" id="subject" />
</div>

<div class="post-textarea">
    <textarea name="post_text" id="post_text" cols="100" rows="30"></textarea>
</div>
<div class="post-button">
    <input type="submit" name="submittopic" id="submittopic" value="Submit" onclick="return forumssubmit();"/> 
</div>
</form>

Upvotes: 1

Related Questions