Pass Django Variable Via Javascript

Question

I'm new to Javascript, and trying to figure out how to get the value of a variable in my HTML form. I have the following code kind of working, I put an alert in to test my logic and the else statement is working, but I can't seem to figure out how to get Javascript to submit my form if the value is set to on. I know my value is being interpretted correctly as I tested it with an alert as well. It just doesn't seem to want to submit the form. I have looked through SO and it seems that the Javascript submit syntax might have changed? Here is my Javascript function:

document.getElementById('ifon').onclick = function(){
  var getval = Checkbox(this.form);
  if (getval == 'on') {
    document.getElementById("data").submit();
}  else {
    alert(getval);
  }
}

And here is my HTML for the form in question:

<form id="data" name="form_name" action="{% url 'foo:bar' record.id %}">
  <input type='hidden' name='status' value="Delete">
</form>

I'm new to Javascript so maybe I'm missing something. This is a checkbox and Javascript seems to know what the value is based on my testing. I just can't seem to get the form to submit. Thanks for the help in advance.

Just to simplify matters and my understanding of Javascript, I've played around a bit, and can confirm that I've got the basics down. Here's my form...

<form id="data" name="form_name" action="{% url 'foo:bar' record.id %}" method="POST">
  <input type='hidden' name='status' value="Delete">
</form>

<script>
function submitform()
 {
    document.form_name.submit();
 }
 </script>

This code doesn't appear to work. No error messages either.

The basic Javascript principles are working, as when I change the script to something simple like...

<script>
function submitform()
 {
   alert("hi!");
 }
 </script>

I in fact see a pop up window that says hi! This is all predicated on a button that has the onclick outlined below. This all works fine.

  <button type="button" onclick="submitform()" class="button9"><h3 class="txtalgn1">Link</h3></button></a>

The basics of Javascript in my install seem to work. I have updated my view to include as follows:

class BookUpdateView(LoginRequiredMixin,NeverCacheMixin,UpdateView):
    model = Book
template_name = 'book/book_update.html'
form_class = book_Update        

@method_decorator(csrf_exempt)
def dispatch(self, request, *args, **kwargs):
    return super(BookUpdateView, self).dispatch(request, *args, **kwargs)

def form_valid(self, form):
    self.kwargs['status'] = form.cleaned_data['status']
    return super(BookUpdateView, self).form_valid(form)

But the Javascript submit still doesn't appear to be working, or if it is it's not performing the Delete based on the status...

You're telling the form to submit itself, but where is it supposed to be submitting to? The form has no action parameter to set a destination. — Daniel Roseman, Jan 18 '18 at 21:37
Daniel Roseman thanks for the guidance. I've added an action parameter to my form but it doesn't seem to help. I'm using Django forms, does that influence the solution? — Steve Smith, Jan 18 '18 at 22:10
No what you've done makes no sense. The action attribute is the URL the form submits to. — Daniel Roseman, Jan 18 '18 at 22:14
Since you indicated it had no action parameter I thought that was what you meant. — Steve Smith, Jan 18 '18 at 22:21
What Roseman means Steve, is that the form action does not have a URL specified to submit. In django words it should point to a URL that call a view or something. Please give us more scope in order to help you. — jsanchezs, Jan 18 '18 at 22:30
jsanchezs Thanks for the clarification. Yes I've tried to include a URL in the action field but that doesn't seem to help either. Essentially I'm trying to determine if a checkbox is checked, and if so, submit a form. If the value is on or true, submit the form I have shown with the associated value of Delete. I could be going about this incorrectly I'm new to Javascript and coding. I want the user to be able to click a button with HREF and ONCLICK if the checkbox is checked, submit a form with the value of Delete. — Steve Smith, Jan 18 '18 at 22:33
Awright, so you think your problem is in your javascript code because you already put an URL in action and doesn't work either ? — jsanchezs, Jan 18 '18 at 22:37
Yes I've updated the HTML with an action URL parameter and it still doesn't submit the form. — Steve Smith, Jan 18 '18 at 22:42

score 0 · Answer 1 · answered Jan 18 '18 at 22:49

Here is the way to do what you need in javascript, basically you add a custom class to the check control in the template (i asumme you're using a checkbox control for what i see in your code), then capture it, ask if is checked and then do the submit to the url you already stablished:

$('.mycheck').click(function(){
      if ($(this).is(':checked')){
          var frm = document.getElementById("data");
          frm.submit();
      }
});

My-ned · Answer 2 · 2018-01-19T15:02:07.373

If you are using django, you will need the view (and url ) correctly coded on the django side. Note that by default csrf protection is on and you'll need either to add an csrf_exempt decorator in the django views or retrieve the csrf token from your page using this method

your view should look like this one if you're using forms:

def myview(request):
    if request.method == 'POST':
        form = yourimportedform(request.POST)
        if form.is_valid():
            yourvariable = form.cleaned_data['yourdataname']

EDIT: If you are running a dev server you should be able to see the logs of the http calls in real time in the terminal you've launched it in. This should help you A LOT at finding where is your mistake.

I think this may be the issue. I'm not addressing this hence, the reason why it would appear my Javascript code is not working. I'll investigate further. Thanks for the input. — Steve Smith, Jan 18 '18 at 23:08

Pass Django Variable Via Javascript

2 Answers2