narawagames narawagames - 4 months ago 18
CSS Question

How do I get a non-input element to send along with a form (POST request)?

I have an HTML form. All of the inputs are standard except for the segmented slider. I made the slider out of

div
s instead of using
<input type="range">
, so I could add extra functionality and style it easier. How do I get the custom input to be part of the form?

I could've put together a query string and redirected the browser with JavaScript:

window.location.assign("/post?author=" + $("#name").val() + "&rating=" + document.elementFromPoint($("#slider-grabber").position().top + 20, $("#slider-grabber").position().left + 5).innerHTML + "&content=" + $("#content").val());


But that only works for a GET request, and my form sends a POST request.




EDIT: If it isn't possible to send a non-input element's data along with the rest of the form, is there still a way to manually make the browser send a POST request in JavaScript?

Answer

Use an hidden input which you change its value according to what you did with your sliders.

<input type="hidden" id="slider_input" name="slider" value="" />

And then later in your JS / jQuery

$('.slider').change(function(){
    $('#slider_input').val(/* what you want */);
});
Comments