How to use JavaScript/jQuery to look at POST values right before submitting

Question

I am stuck. My company is redesigning its website, but I am stuck with trying to jerry-rig a fix for a problem in the old site. I need to use JavaScript or jQuery.

When a form is submitted, a POST key is sent to the server that starts with "selectedItem_" followed by the item ID. The value attached to it is the text from the button, "Buy This". The complete key:value pair looks something like this:

selectedItem_IDME1KEXN_0_0 : "Buy This"

Because the form has several different versions of the same item, whoever programmed this put several buttons on the form, each with this kind of key. So there may be up to 4 or 5 buttons that are nearly identical. The values assigned to the them are the actualy price, like this:

selectedItem_IDME1KEXN_0_0 : 93.95
selectedItem_IDME2KEXN_0_0 : 99.95
selectedItem_IDME3KEXN_0_0 : 114.95
selectedItem_IDME4KEXN_0_0 : 119.95

All of these are getting sent to the server, which is causing the server to sometimes choose the wrong value. (And I have no idea why it was programmed like this, I am just trying to deal with it!)

MY QUESTION:

How can I use JavaScript or jQuery to evaluate what is currently stored in the POST before it is sent to the server? I would love to iterate through the keys that start with "selectedItem_" and pull out any bad ones before it is sent on its way.

You don't have nearly enough information in your question, HOWEVER, you can probably bind to the form's submit event, intercept the form data being submitted, and even potentially cancel / prevent the form from being submitted. By the way, a good question on StackOverflow shows what you have tried (it's called a Minimal, Complete, and Verifiable Example) — random_user_name
– random_user_name, Commented Oct 19, 2017 at 15:00
Also - this sounds like a fairly "enterprise" site - why are you stuck using javascript? Can you not modify the server-side code? — random_user_name
– random_user_name, Commented Oct 19, 2017 at 15:00
@cale_b -- I would love to modify the server-side code, but all forward dev is devoted to the new code base. There is nothing but fixes allowed on the old site and old code base. (Ugh) — cmdoc
– cmdoc, Commented Oct 19, 2017 at 16:47

Brian Glaz · Accepted Answer · 2017-10-19 15:04:50Z

2

You can bind an event to the submit event of the form, and look at the data.

var $form = $('form').first();

$form.on('submit', function(e) {
  e.preventDefault();
  console.log( $form.serializeArray() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="">
  <input type="text" name="key1" />
  <input type="text" name="key2" />
  <input type="submit" /> 
</form>

answered Oct 19, 2017 at 15:04

Brian Glaz

15.7k4 gold badges40 silver badges55 bronze badges

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

2 Comments

cmdoc Over a year ago

Thank you! This is at least getting me going in the right direction! Let me play around with this and see what I can do.

cmdoc Over a year ago

Your code definitely got me pointed in the right direction. Thanks!

Denis K. · Accepted Answer · 2017-10-19 17:07:12Z

0

If all data are from input tags your form, then try something like this:

document.querySelector('form').addEventListener('submit', function (e) {
    var input = document.querySelectorAll('input[name^="selectedItem_IDME"]');
    var valid = true;
    for (var i = 0; i < input.length; i++) {
        var item = input[i];
        if (Number(item.value) === 93.95) {
            valid = false;
            e.preventDefault();
        }
    }
});

answered Oct 19, 2017 at 17:07

Denis K.

564 bronze badges

1 Comment

cmdoc Over a year ago

If I was dealing with static pages, this could have worked. But all of the order forms are dynamically generated depending on what is in stock at the moment and prices can change at any moment. So my solution has to be dynamic, too.

Collectives™ on Stack Overflow

How to use JavaScript/jQuery to look at POST values right before submitting

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related