michelle1404 Posted July 7, 2016 Share Posted July 7, 2016 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> <?php if(isset($_POST['submit'])) { include ('connect.php') ; include('admin_auth.php'); $var1 = $_POST['var1']; $var2 = $_POST['var2']; $var3= $_POST['var3']; // till $var6 $var11 = (mt_rand(1,3)); $var12 = rand(4,6); $var13 = mt_rand(1,6); // Here i should get only those variables n values which are greater than 0 } 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? In the same page, i want to compare these values with the 3 random numbers which will generate when submit button is clicked. I tried doing like this using like this <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]) alert(val[0]); }) 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> But nothing is happening, i tried to debug with Firebug, it shows TypeError: form is null form.addEventListener('submit', function(evt) { Can somebody help me in this? Quote Link to comment https://forums.phpfreaks.com/topic/301440-how-to-post-only-user-selected-values-in-a-form/ Share on other sites More sharing options...
Muddy_Funster Posted July 7, 2016 Share Posted July 7, 2016 For some reason var form = document.querySelector("form"); isn't doing what you think it should - var form is null on the next line. obviously you can't assign an event to a null element. I would suspect giving the actual form a name (or at the very least an ID) would go some ways to helping you out of this specific issue. Quote Link to comment https://forums.phpfreaks.com/topic/301440-how-to-post-only-user-selected-values-in-a-form/#findComment-1534308 Share on other sites More sharing options...
michelle1404 Posted July 7, 2016 Author Share Posted July 7, 2016 Instead of form, u want me to go by form name???? <form method="post" action="" id="addnameform"> $("#addnameform").submit(function(e) { e.preventDefault(); like this? Quote Link to comment https://forums.phpfreaks.com/topic/301440-how-to-post-only-user-selected-values-in-a-form/#findComment-1534311 Share on other sites More sharing options...
Muddy_Funster Posted July 7, 2016 Share Posted July 7, 2016 If your using jQuery then: $('#addnameform').on('submit', function(e){ e.preventDefault(); //do your thing } Quote Link to comment https://forums.phpfreaks.com/topic/301440-how-to-post-only-user-selected-values-in-a-form/#findComment-1534315 Share on other sites More sharing options...
michelle1404 Posted July 7, 2016 Author Share Posted July 7, 2016 Getting this error ReferenceError: $ is not defined $('#addnameform').on('submit', function(e){ Quote Link to comment https://forums.phpfreaks.com/topic/301440-how-to-post-only-user-selected-values-in-a-form/#findComment-1534324 Share on other sites More sharing options...
Destramic Posted July 7, 2016 Share Posted July 7, 2016 sounds like you havent got jquery included https://developers.google.com/speed/libraries/ latest: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> Quote Link to comment https://forums.phpfreaks.com/topic/301440-how-to-post-only-user-selected-values-in-a-form/#findComment-1534328 Share on other sites More sharing options...
michelle1404 Posted July 7, 2016 Author Share Posted July 7, 2016 <script type="text/javascript"> $('#addnameform').on('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 (selects[i].value != 0) { values.push([selects[i].name, selects[i].value]) }; }; if (values.length) { values.forEach(function(val) { data.append(val[0], val[1], val[2], val[3], val[4], val[6]) alert(val[0]); }) var request = new XMLHttpRequest(); request.open("POST", "/echo/js/") request.onload = function() { values = []; console.log(data); for(prop of[...data]) { console.log(prop) } } request.send(data) } }); </script> is it right? now am not getting that error, but nothing is the output Quote Link to comment https://forums.phpfreaks.com/topic/301440-how-to-post-only-user-selected-values-in-a-form/#findComment-1534329 Share on other sites More sharing options...
Muddy_Funster Posted July 8, 2016 Share Posted July 8, 2016 (edited) If you have jQuery linked it should look something a little bit like this: $('#addformName').on('submit', function(e){ e.preventDefault(); var selectVals =[]; $('#addformName select').each(function(idx, elm){ if(elm.val() > 0){ selectVals[idx] = elm.val(); } }) if (selectVals.length() >= 1){ $.ajax({ method: 'POST', url: 'path/to/page.php', data: selectVals, success: function(data){ alert(data); } }) }); That's likely not going to work as is, and the ajax definitely won't because the url is nonsense, but it covers the core of what you are trying to do. Edited July 8, 2016 by Muddy_Funster Quote Link to comment https://forums.phpfreaks.com/topic/301440-how-to-post-only-user-selected-values-in-a-form/#findComment-1534342 Share on other sites More sharing options...
kicken Posted July 8, 2016 Share Posted July 8, 2016 Is there a reason you are trying to do this in Javascript rather than the PHP file you're posting to? It'd be easier in PHP, especially if you convert the inputs to an array. <form action="" method="post"> <select name="var[]" 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="var[]" 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> $var = array_filter($_POST['var']); //Now $var only contains non-zero entries. If you really want to use Javascript then the easiest thing to do would probably be to disable the inputs with 0 values and use jquery to serialize the form. $('#formId').submit(function(e){ e.preventDefault(); var form = $(this); var selects = form.find('select'); //Disable zero values. selects.each(function(idx,ele){ if (ele.value == 0) ele.disabled=true; }); //Gather form data var data = form.serialize(); //Re-enable selects selects.prop('disabled', false); $.post('script.php', data); }); Something like that. Quote Link to comment https://forums.phpfreaks.com/topic/301440-how-to-post-only-user-selected-values-in-a-form/#findComment-1534361 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.