1

Hoping someone can help with this. I have a form which has an action attribute. This action attribute enables the user to subscribe to a newsletter when the form is submitted.

What I'm trying to do is only use that action if the user has checked a checkbox giving permission to subscribe to the newsletter. If the checkbox is left unchecked, the form can still be submitted, but will be redirected to a separate URL, disregarding the form's action attribute.

So far this is what I have, I'm not great with javascript so any help would be appreciated.

$('document').ready(function () {
 $('#wifi-capture-form').submit(function() {
 var newsletterTrue= $(this).attr("data-newsletter-checked");
 var newsletterFalse= $(this).attr("data-newsletter-unchecked");   
 if ($('input.newsletter-checkbox').is(':checked')) {
  $('#wifi-capture-form').attr('action', newsletterTrue);
 else (
  $('#wifi-capture-form').attr('action', newsletterFalse);
 )    
}
}); 

});

and the form is

<form name="wifi-capture-form" id="wifi-capture-form" action="" method="post" class="f24form wifi-capture-form" data-newsletter-checked="https://email.com/t/r/s/dkhywr/" data-newsletter-unchecked="https:www.domain.com/wifi-confirm">

    <label for="fieldName">Name</label><br />
    <input id="fieldName" name="cm-name" class="form-control" type="text" />
    <label for="fieldEmail">Email</label><br/>
    <input id="fieldEmail" class="form-control" name="cm-dkhywr-dkhywr" type="email" required /><br/><br/>

    <input type="checkbox" name="newsletter" class="newsletter-checkbox" id="newsletter" value="Subscribe to newsletter"> Subscribe to our newsletter<br/><br/>

    <button type="submit" class="btn btn-primary">Submit</button> 

Adam
  • 303
  • 4
  • 16

2 Answers2

1

You can do it by changing the action attribute value of the form on submit. Here is the syntax:

$("#wifi-capture-form").attr("action", wifiConfirm);

So your new code must be like this:

 $('#wifi-capture-form').submit(function(e) {
  var wifiConfirm = $(this).attr("data-redirect");

  /* if newslwetter checkbox is not checked, then change form action value*/
  if (!$('input.newsletter-checkbox').is(':checked')) {
    $("#wifi-capture-form").attr("action", wifiConfirm);
  } 

  f24("send", "form", "form.#wifi-capture-form");  
});

You can see other examples on How to change form action based on selection

hd84335
  • 8,815
  • 5
  • 34
  • 45
  • I see, yes that seems a much better solution. Would this mean I would leave a blank action attribute in the form. eg. action="" – Adam Jan 07 '18 at 21:58
  • No, keep html as is. this code just changes the action attribute when the checkbox is not checked, otherwise, the form submits to its original location which is already set in the html – hd84335 Jan 07 '18 at 22:03
  • That may well have done it....thank you very much for your help...much appreciated – Adam Jan 07 '18 at 22:58
0

Since you're using jQuery you can assign a click event to the checkbox that would dynamically change the action URL in case the checkbox is checked/unchecked.

muzychuk
  • 288
  • 1
  • 2
  • 13