2

I am developing a little website with webflow and must now write a tiny bit of custom code. To simplify and summ up, I have a checkbox that is outside fo the form tag. My goal is to write a little jquery of javascript code to "capture" the checkbox outside the form tag and add it to the form submission.

Here is what I came up with, but it's still not working. Would you have an idea ? I'm pretty new to code... thank you :)

The script I would love to use: (if that makes sense?)

<script>

// defines the variable for the form
var form = document.getElementById("reservation");

// add the checkbox with the id of "outsider" to the form submission
document.getElementById("outsider").addEventListener("click", function () {
  form.submit();
});

</script>

EDIT: I made some research before of course, but couldn't really understand the code snipet people were talking about and how to "link" the script to the actual submit button of my form.

For modern browser:

var checkedValue = document.querySelector('.outsider:checked').value;

By using jQuery:

var checkedValue = $('.outsider:checked').val();

Pure javascript:

var checkedValue = null; 
    var inputElements = document.getElementsByClassName('outsider');
    for(var i=0; inputElements[i]; ++i){
          if(inputElements[i].checked){
               checkedValue = inputElements[i].value;
               break;
          }
    }

Another javascript: Again, not sure how to link the function to my submit button

CheckboxHandler.isChecked = function (checkboxObj) {
  return(checkboxObj.checked == true);
};
Improve this question
2
  • so you want to add checkbox value to the form submission or submit the form when clicking on checkbox which one is your expected result ? Commented Mar 24, 2018 at 15:23
  • @VishalTajPM, thank you for your reply ! Exactely, I would like to add the checkbox value to the form submission. The expected result would be to get an email (after I clicked on "send") and having in written in my email the name of the checkbox and its value. Here are some screenshot for you :) imgur.com/a/PwbTw Commented Mar 24, 2018 at 15:35

2 Answers 2

Reset to default
0

For adding checkbox value you can add a hidden field to keep the value of checkbox so whenever we update the checkbox we update the hidden field also code will be as follows. 

var humanizeCheckbox = ['outsider', 'without outsider'];

$('input[name="outsider"]').val(humanizeCheckbox[1]);

$('#check').on('click', function(){
  $('input[name="outsider"]').val($(this).is(':checked') ? humanizeCheckbox[0] : humanizeCheckbox[1])
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="check" />
<form action='/' method="GET" >
  <input type="hidden" name="outsider" />
  <input type="text" name="email" />
  <input type="submit" value="Send" />
</form>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Interesting ! I see what you did there ! Love the logic behind it :) Thank you for having taken the time to do that. I tried to implement it into my webflow project, though the email I get now displays the "outsider" name but not it's checked value "true". Am I missing something ? Here some screenshots again : imgur.com/a/6P7s0
is it after checking the checkbox or without checking? basically, the checkbox is boolean so if there is any humanized value we can update the hidden field using that and also if you want to set a default value to hidden also you can. i have updated the code please check it.
0

You can add a jQuery submit event to your form:

$("#reservation").submit(function(evt) {
    //handleChecbox
    $("#inside").val($('.outsider:checked').val());
});

This function will run before you actually submit the form but I recommend the addition of the item to the form.

Improve this answer

11 Comments

Interesting ! Thank you Lajos ! I thought it'd be only one way to code things, seems to be many ways to get to what we want. Unfortunately I still can't get the value (wether it's been checked or not) in my email confirmation. What am i missing ? here some screenshot: imgur.com/a/lG986
@anthonysalamin can you show us your HTML and clarify what should be read and where should that value be put?
Of course @lajosarpad , here is the HTML for the outsider checkbox: <input type="checkbox" class="outsider" /> And the HTML for the form containg the hidden checkbox: <script> $("#reservation").submit(function(evt) { //handleCheckbox $("#inside").val($('.outsider:checked').val()); }); </script> <!--begening of the form--> <form action='/' method="get" id="reservation" > <input type="hidden" id="inside" /> <input type="text" name="email" /> <input type="submit" value="Send" /> </form> More screenshot: imgur.com/a/kE6DP
@anthonysalamin thanks. I have changed my code here to use your ids. If this does not solve your problem, then I kindly ask you to create a JSFiddle with a Minimal, Complete, Verifiable example of your problem, see here: stackoverflow.com/help/mcve so we will solve the problem at your experimental example which should help you integrate the solution into your project.
All right, thank you @lajosarpad ! here is the the link to the jsfiddle: jsfiddle.net/anthonysalamin/nrx7vbst/9/… For example purpose, maybe I should generate an "alert pop up" to see if the script worked instead of willing to send an email. What do you think ? Thank you for your help :)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.