submit button post not sent after using javascript

Question

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:

Is there a way to keep my method of keeping the 3 SQL queries separate to the specific forms
Is there a way to sent the POST of the submit even though it is being submitted through JavaScript?
Is there another way that I just haven't seen.

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();"/>

LAROmega · Accepted Answer · 2016-02-10 20:10:58Z

1

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>

edited Feb 10, 2016 at 20:10

answered Feb 10, 2016 at 18:00

LAROmega

5085 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Matt Over a year ago

I have added the html code of the form and js code to my original post. I use require_once '../includes/topicPost.php'; at the beginning of my page which contains the prepare statements etc that updates the database. Would you be able to let me know how to make sure it 'is done on the back end'?

LAROmega Over a year ago

@Matt My comment was on the "data page" that is running SQL. Validating data on the webpage is fine, but it needs to be validated a second time in your PHP. If you don't then someone could look at how your web page works and write their own that allows bad data to be submitted. Since you're inputting this data into the database, the data also needs to be scrubbed so that it's not vulnerable to someone submitting a query that displays, changes or removes data in the database (among other things).

Matt Over a year ago

I use strip_tags on the textarea when saving the string to a variable and then I use prepare, execute statements to update the table. What other validation should I use?

LAROmega Over a year ago

@Matt You should be pretty good then. Without having that code to look at I can't say for certain though. As for your original question, has the answer helped you get it working? Should probably open a second question if you want to talk about php data validation/db stuff.

Matt Over a year ago

I tried using return true if the data is not bad (swapping out the document.get...submit(); for return true) but nothing happens afterwards. I will make a new question in a bit to question the security thanks :)

|

Collectives™ on Stack Overflow

submit button post not sent after using javascript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related