how to post only user selected values in a form

Question

I have a form with 6 <select> options. All <select> filed will have same values but with different names. Like this:

<form action="" method="post">
    <select name="var1" class="form-control">
     <option value="0">0</option>
     <option value="10">10</option>
     <option value="20">20</option>
     <option value="50">50</option>
     <option value="100">100</option>
     </select>

    <select name="var2" class="form-control">
         <option value="0">0</option>
         <option value="10">10</option>
         <option value="20">20</option>
         <option value="50">50</option>
         <option value="100">100</option>
    </select>
    <input type="submit" name="submit" value="Submit"/>
</form>

I am submitting these information to the same page, But before submit is it possible to filter those variables which are greater than 0? I want to POST only those variables which has value greater than 0. How can i do it?

Possibly duplicate http://stackoverflow.com/questions/14896854/jquery-select-box-validation — AkshayP, Jul 07 '16 at 04:50
No. It is not the duplicate of that. Here my question is to submit those variables which has value greater than 0. It is very much clear that these 2 questions are different. Its not validation — meenal, Jul 07 '16 at 04:52
please go through the question, in that there is a JS validation to check before submit if selected value is 0 or not — AkshayP, Jul 07 '16 at 04:54
@Akshay: I do not require any validation, I need to filter ans submit values to that page. — meenal, Jul 07 '16 at 04:57
It really would fall under a validation scope, especially if you want to do it *before* the form is submitted. The example is not identical but the premise is the same. — Rasclatt, Jul 07 '16 at 04:58
@meenal : those select box are multiple select type ? and you just want to remove selected option if it has value = 0 ? — AkshayP, Jul 07 '16 at 05:04
@parag: is there any tutorial or any examples for the same? As am not very well versed with ajax or jquery. — meenal, Jul 07 '16 at 05:05
@meenal Does http://stackoverflow.com/a/20391011/4297364 answer your question? — Moishe Lipsker, Jul 07 '16 at 05:07
@AkshayP: Not multiple selection, its a single. But yes, if a variable has value 0, i want to discard that variable while submiting — meenal, Jul 07 '16 at 05:08
@meenal : please take a look at http://jsfiddle.net/tPRNd/ and let me know you want the same ? — AkshayP, Jul 07 '16 at 05:10
1. There is is single select box, 2. I do't want select option should be validated if 0 is the value, it should get discard out of 6 select boxes 3. It is not similar to my question. I have gone through it. 4. Thanks — meenal, Jul 07 '16 at 05:13
If you'd like to use the regular form submit, you could could consider disabling the inputs that contain values you don't want. — Moishe Lipsker, Jul 07 '16 at 05:48

score 2 · Answer 1 · answered Jul 07 '16 at 05:28

You can follow the steps as an idea.

Prevent the default event on submit of form or on submit button click with preventDefault(); function.
Check the the value of all select box for greater than 0. If YES then create the query string for the values that are greater than 0.
Query string will look like "var1=3&var3=4".
Use the $.post(); / $.ajax(); functions to submit the data. Reference https://api.jquery.com/jquery.post/

Also you can find the online tutorials for jQuery and ajax. Like w3schools or on https://api.jquery.com

Yes this is what i was looking for. Thank you very much. I will try with this now. Hope i will do it properly. — meenal, Jul 07 '16 at 05:37

Jacob Mulquin · Answer 2 · 2016-07-07T05:41:05.537

1

$('#removeZerosForm').submit(function() {

    var values = {};
    $.each($('#removeZerosForm').serializeArray(), function(i, field) {
        if (field.value > 0) {
          values[field.name] = field.value;
        }
    });

    $.post('url', values);
});

foreach ($_POST as $key => $val) {
    if ($key !== 'submit') {
        if ($val == 0) {
            unset($_POST[$key]);
        }
    }
}

edited Jul 07 '16 at 05:41

answered Jul 07 '16 at 05:01

Jacob Mulquin

3,458
1
19
22

here, `values[field.name] = field.value;`, should i use each filed name? I mean like this. `values[field.var1] = field.value; values[field.var2] = field.value;` – meenal Jul 07 '16 at 05:45

score 1 · Accepted Answer · answered Jul 07 '16 at 05:53

An approach using submit event, event.preventDefault(),FormData(),XMLHttpRequest()`

<form action="" method="post">
  <select name="var1" class="form-control">
    <option value="0">0</option>
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="50">50</option>
    <option value="100">100</option>
  </select>

  <select name="var2" class="form-control">
    <option value="0">0</option>
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="50">50</option>
    <option value="100">100</option>
  </select>
  <input type="submit" name="submit" value="Submit" />
</form>
<script>
  var form = document.querySelector("form");
    form.addEventListener("submit", function(e) {
      e.preventDefault();
      var data = new FormData();
      var selects = e.target.querySelectorAll(".form-control");
      var values = [];
      for (var i = 0; i < selects.length; i++) {
        // if `select` `.value` is not `0`,
        // add to `values` array`
        if (selects[i].value != 0) {
          values.push([selects[i].name, selects[i].value])
        };       
      };
      // if `values` array contains items
      // append items to `FormData` object
      if (values.length) {
      values.forEach(function(val) {
        data.append(val[0], val[1])
      })
      var request = new XMLHttpRequest();
      request.open("POST", "/echo/js/")
      request.onload = function() {
        values = [];
        console.log(data);
        // log values posted
        for (prop of [...data]) {
          console.log(prop)
        }
      }
      request.send(data)
      }
    }); 
</script>

jsfiddle https://jsfiddle.net/7a67uqar/

@meenal Check `Network` tab at `DevTools` at https://jsfiddle.net/7a67uqar/ — guest271314, Jul 07 '16 at 06:08
Open `console`, click `Network` tab. Click `Run` at jsfiddle, click `/js`, scroll to `Request Payload` — guest271314, Jul 07 '16 at 06:28
I can only see this in `jsfiddle` [link]http://netelity.in/jsfiddle.PNG — meenal, Jul 07 '16 at 07:15
I am getting result in this in jsfiddle, but not in my html page — meenal, Jul 07 '16 at 08:44

how to post only user selected values in a form

3 Answers3