self.request.POST.get("data") return None

Using Django Forms & APIs
1

Hi,

I’m trying to get some data from a bootstrap range slider, but it is returning None. this only happens in {% elif request.user.profile.status == 'Actor' %} section, when running the same line of code in {% if request.user.profile.status == 'Admin' %} is returns the data as expected.

Am I missing something here?

HTML:

The data I would like to retrieve

<input name="m_slider" type="range" class="form-range" id="id_m_slider">

Full HTML section:

<form method="POST">
	{% csrf_token %}
	<div class="field">
		<Fieldset class="form-group">
			{% if request.user.profile.status == 'Admin' %}
				<div class="container">
					<div class="row">
						<div class="col-md-6 mb-4 offset-md-3">
							<div class="row">
								<div class="col">

									<select name="status" class="select form-control" id="id_status"> 
										<option value="Pending" selected="">Pending</option> 
										<option value="Awaiting Review">Awaiting Review</option> 
										<option value="Complete">Complete</option> 
										<option value="Needs Updating">Needs Updating</option>
									</select>

									<input name="m_slider" type="range" class="form-range" id="id_m_slider">
								</div>
									<button class="btn btn-outline-info" id="submit">Submit</button>
							</div>
						</div>
					</div>
				</div>
			{% elif request.user.profile.status == 'Actor' %}
					<input name="m_slider" type="range" class="form-range" id="id_m_slider">

					<div class="control has-icons-left has-icons-right" style="margin-top: 1rem">
						<audio id="audio_recorder" class="video-js vjs-default-skin"></audio>
					</div>
					<button class="btn btn-primary" id="submit">Submit</button>
			{% endif %}
		</Fieldset>
	</div>
</form>

View:

def form_valid(self, form) -> HttpResponse:
	if self.request.user.profile.status == 'Actor':
		self.object.author = self.request.user
		self.object.date_created = timezone.now()
		print(self.request.POST.get("m_slider"))

		self.object.audio_recording = self.request.FILES.get("recorded_audio")
		self.object.status = 'Awaiting Review'
		self.object.save()
		return JsonResponse({
				"url": self.get_success_url(),
				"success": True,
			})
	elif self.request.user.profile.status == 'Admin':
		self.object.status = self.request.POST.get("m_slider")
		print(self.request.POST.get("username"))

		self.object.save()
	
	return super().form_valid(form)
2

I can’t spot anything from the Django side. Check the rendered HTML on the browser to make sure it matches what you expect and then check the browser’s Developer Tools’ Network Panel’s information for the POST request that’s submitted to verify that m_slider is included.

1 Like
3

Hi, @CodenameTim Thank you for your help and your time.

Your suggestion was great for tracking down the data path.

For those who come across this post in the future… In the section {% elif request.user.profile.status == 'Actor' %} the submit button was handled by a .js function, I had forgotten that this was the case and I was not returning the value from my the m_slider.

// Give event listener to the submit button
$("#submit").on("click", function (event) {
	event.preventDefault();
	let btn = $(this);
	//   change the button text and disable it
	btn.html("Submitting...").prop("disabled", true).addClass("disable-btn");
	//   create a new File with the recordedData and its name
	const recordedFile = new File([player.recordedData], `recorded_audio.webm`);
	//   initializes an empty FormData
	let data = new FormData();
	//   appends the recorded file and language value
	// try{
	console.log(recordedFile);
	data.append("recorded_audio", recordedFile);


	// get m_slider data
	data.append("m_slider", document.getElementById("id_m_slider").value);


	// }
	//   post url endpoint
	const url = ""

	$.ajax({
		url: url,
		method: "POST",
		data: data,
		dataType: "json",
		success: function (response) {
			console.log('success function')
			if (response.success) {
				console.log('success!');
				window.location.href = `${response.url}`;
			} 
			else {
				console.log('Failed!');
				btn.html("Error").prop("disabled", false);
			}
		},
		error: function (error) {
			console.error("ERROR: ", error);
		},
		cache: false,
		processData: false,
		contentType: false,
	});
});
4

@CodenameTim I’m still new to js, is there a cleaner solution to my workaround?

data.append("m_slider", document.getElementById("id_m_slider").value);

by this, I mean a single method that would pass the data from all form elements

something like the example below:

data.append("m_slider", document.form_data());

Thank you for you help!!

5

Check out this part of the MDN docs on FormData: FormData: FormData() constructor - Web APIs | MDN

1 Like
6

Your response also helped me, you are a G mister Tim, thank you!

1 Like