Home
Support Forums

Some form data missing

Hi, I am new to Netlify Forms and also to jquery - but here is what I got:

A form at https://feature-2020-survey--fca.netlify.app/survey/2020-survey/ successfully submits most of it’s data, but not all.Specifically I am looking for two fields (data1 and data2) which should contain a javascript serialized result form the ranking of two questions - yet by the time it gets to Netlify forms the two fields are blank.

HTML:

<form name="2020-survey-{{ jekyll.environment }}" method="POST" data-netlify="true" action="/survey/survey-complete">

<!-- questions removed for brevity in this help request - see full HTML at https://feature-2020-survey--fca.netlify.app/survey/2020-survey/ -->

		<li>How important are these transportation and traffic issues to you?
		<i>(drag and drop green boxes - 1 most important, 6 least important.)</i></li>
		<input type='hidden' name='data1' id='data1'>
		<div id="sortablequestion1" class="center">
		<ol id="sortable1" class="rankings">
		  <li id='ranking_1' class="ranking">Ferry-related issues</li>
		  <li id='ranking_2' class="ranking">Pedestrian safety</li>
		  <li id='ranking_3' class="ranking">Street parking</li>
		  <li id='ranking_4' class="ranking">Bicycle-safety related issues</li>
		  <li id='ranking_5' class="ranking">Essential travel-only impacts (e.g., transit)</li>
		  <li id='ranking_6' class="ranking">Traffic issues related to bridge closure</li>
		</ol>
		
<!-- more questions removed for brevity in this help request -->
	</ol>
	<p>
		<button type="submit">Submit</button>
	</p>	
</form>
<script>
$( "#sortable1" ).sortable({ axis: "y", containment: "#sortablequestion1", scroll: false });
$( "#sortable1" ).disableSelection();


$('form').submit(function(){
     
    $('#data1').val($( "#sortable1" ).sortable("serialize"));
    return false;
}); 
</script>

Upon pressing submit, the responses from every question that I did not include in the code above goes off to Netlify and can be retrieved. The field for data1 is blank, though I think it should contain something along these lines: ranking[]=1&ranking[]=2&ranking[]=3&ranking[]=4&ranking[]=5

I believe that I have some mismatch between Netlify Forms and the serialized data that should be in the field data1. Almost as though the ranking is not tabulated by the time the form is submitted to netlify. Alas, JavaScript, and jQuery are not my forte, and I don’t know where to turn next.

Any help would be greatly appreciated.

Thanks.

Bill

In trying to troubleshoot this further, It seems that the data field is not populated.

-X 'POST' \
-H 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8' \
-H 'Origin: http://localhost:4000' \
-H 'Content-Type: application/x-www-form-urlencoded' \
-H 'Content-Length: 487' \
-H 'Accept-Language: en-us' \
-H 'Upgrade-Insecure-Requests: 1' \
-H 'Host: localhost:4000' \
-H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15' \
-H 'Referer: http://localhost:4000/survey/2020-survey/' \
-H 'Accept-Encoding: gzip, deflate' \
-H 'Connection: keep-alive' \
--data 'fca_aware=yes&current_member=yes&not_member_reason=blah&data1=&transportation_traffic_concerns=add&cross-streets=x+and+y&vehicles_at_residence=1&vehicles_on_street=1&vehicles_in_driveway=1&vehicles_in_garage=2&vehicle_break_in=yes&number_of_breakins=3&vehicle_location=street&vehicle+_in_driveway=driveway%2Fcarport&vehicle_in_garage=garage&data2=&spd_reforms=yes&spd_reforms_response=asdf&neighborhood_preservation=no&neighborhood_preservation_response=asdf&other_interests_concerns=ads'

note that data1 and data2 do not equal anything

At this point, I don’t think this function is running, but I have no way of knowing:

	$("#2020-survey-{{ jekyll.environment }}").submit(function(){
		$('#data1').val($( "#sortable1" ).sortable("serialize"));
		$('#data2').val($( "#sortable2" ).sortable("serialize"));
		return false;
	});

Well, you can add something like console.log('it ran') before $('#data1').val($( "#sortable1" ).sortable("serialize")); to check if it was triggered. So, if that function was executed, the console would tell you.

Oh… that is useful. thanks The function is running. “It ran” shows up in the console.

So now to understand why the value of #sortablex is not being put into #datax

I’m not very familiar with jQuery, but, maybe if you can tell me what exactly you’re trying to do, I can suggest you some vanilla JS equivalent and you might try it? If I understand correctly, you’re trying to insert the value of #sortableX in #dataX?

EDIT: Now that I checked your webpage, it made a little sense to me. So, the question 3 has some elements which can be sorted and you want to get their ranking?

Yes. I think.

I am trying to provide a list of topics that the user can rank form most important to least important. I wish to capture that ranking - I found an example online that allows one to do with with jQuery and jQuery-ui and that is what I am trying to follow. (http://jsfiddle.net/jomanlk/KeAer/2/)

I tried to mock this up in jsfiddle too and it works (https://jsfiddle.net/wrq4vsyk/) but I can’t get it to work on my netlify site. While the user can drag and drop the items to their heart’s content, the data form that is not captured and set to netlify forms.

I should be clear, I no longer think this is a netlify thing. When submitting the form on my local Jekyll instance I see that the fields in question are blank. The browser is just not doing what jsfiddle can do and putting the ranking in a field that can be submitted via a POST.

Maybe this would work:

var form = $('#2020-survey-{{ jekyll.environment }}');

form.submit(function(event)
  {
    event.preventDefault();

    var formData =
      {
        'name': $('input[name=name]').val(),
        'email': $('input[name=email]').val(),
        /* and so on for other fields, you can also probably loop through all elements or try some more fancy stuff to get it done for all fields automatically */

        /* your data1 filed */
        'data1': $('#sortable1').sortable('serialize');
      }

    $.post(form.attr("action"), formData.serialize())
  }

This is a very rough guess I have tried to compile. It would definitely need some additional debugging, but, it might get you going.

thanks, I will give this a whirl