How to Test Form Submissions: Using Google Chrome to Change Form Values

When forms are set to the POST method, it may not be apparent how you can test responses made through fields like radio buttons. Of course, you can click each radio button to make sure each individual value can be submitted. But how do you make sure that someone can't tamper with the form and submit an invalid value. Let's take a look at how the browser can help.

Background

In the last post (How to Test Submissions from Forms that Use the POST Method), we manually changed the PHP script that processes the form submission. The problem with this solution is that it requires us to remember to remove the lines of code used for testing. With all the distractions that come along with managing a website on a daily basis, it's easy for the testing code to get left into the final solution.

To avoid that potential outcome, let's utilize Google Chrome's ability to change the value associated with form fields like the radio button. Note that we'll use the form code from the previous post.

<?php
//IF THE FORM WAS SUBMITTED
if($_SERVER['REQUEST_METHOD'] == 'POST') {
     //DECLARE VALID RESPONSES
     $validResponses = array('Yes', 'No', 'N/A');
 
     //IF INVALID RESPONSE
     if(!in_array($_POST['transmissionProblems'], $validResponses)) {
          print 'Unknown response to "Were there any transmission problems?"';
 
     //ELSE...VALID RESPONSE
     } else {
          print 'Thanks for responding';
     }
}
?>
<form method="post" action="myform.php">
     <p>Were there any transmission problems?</p>
     <div><label><input type="radio" name="transmissionProblems" value="Yes"> Yes</label></div>
     <div><label><input type="radio" name="transmissionProblems" value="No"> No</label></div>
     <div><label><input type="radio" name="transmissionProblems" value="N/A"> N/A</label></div>
     <div><input type="submit" name="submit" value="Submit"></div>
</form>

Alternate Solution

To submit a radio button value through the form, one of them needs to be selected. So let's click the "Yes" radio button generated by the form code above (see Figure 1).

Figure 1. Select a Radio Button

Then right click the "Yes" radio button and click "Inspect element" (see Figure 2).

Figure 2. Click Inspect Element

The radio button code should now appear in the Developer Tools panel (see Figure 3).

Figure 3. Radio Button Code

To modify the value of the radio button, double click the value attribute. We'll change the "Yes" value to "BadValue" (see Figure 4).

Figure 4. Change Radio Button Value

Now you just need to submit the form and hope that the form processing script does what it's supposed to do.

Final Thoughts

Online forms tend to be more complicated than the one presented in this post. Your form will likely have more than one question and a group of radio buttons. So it's worth noting that you can modify as many fields as you need before submitting the form. You can also apply the above technique to other field types like checkboxes, select drop downs, etc.

Related Posts

• How to Test Submissions from Forms that Use the POST Method