0

I am trying to make a quotation request contact form within WordPress Contact Form 7. Now I have multiple different divisions within my website for which a quotation request can be made. I want them all to lead to the same website to minimize work etc.

Now people can choose between 5 different checkboxes about the division for which they want a quotation. For each division I will need to ask 2 specific question to make it easier for myself to make the quotation but these question should only show up when that checkbox is ticked. I have done this using:

function myFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("Propulsion and Stabilization");
  // Get the output text
  var text = document.getElementById("text");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
    } else {
    text.style.display = "none";
  }
}

This is what I'm using in the contact form which will show "Ship Length" and a textbox when ticking the box.

<p id="text" style="display:none"><label> Ship Length 
[text text-234]</p> </label>

When the box is ticked the "text" (questions) will appear perfectly fine. Now my question is how can I make the question that appears "Required" for the people to fill-in? I have tried just normally adding required after document.getElementById("text"); but for some reason I cannot get it to work. Any ideas?

Thanks! Before Ticking box Ticked box result

reymon359
  • 1,240
  • 2
  • 11
  • 34
Ferry Wortelboer
  • 1
  • you can set the `required` attribute of the element to true/false (`text.required = true`) – arieljuod Jul 09 '20 at 18:36
  • On the next line after setting the display to `block` just add another line `text.setAttribute('required', 'required');` and whenever you set the display to `none` just remove the `required` attribute. – maswerdna Jul 09 '20 at 18:39
  • I think this is what your looking for.. similar question already answered https://stackoverflow.com/questions/18770369/how-to-set-html5-required-attribute-in-javascript – StrayAnt Jul 09 '20 at 18:48
  • // If the checkbox is checked, display the output text if (checkBox.checked == true){ text.style.display = "block"; text.required = true} else { text.style.display = "none"; text.required = false} } This should work then if I'm understanding correct? – Ferry Wortelboer Jul 10 '20 at 07:30
  • @maswerdna sadly have not been able to figure it out. Any chance you could have a look again? Thanks! – Ferry Wortelboer Jul 15 '20 at 15:29

1 Answers1

0

Sadly I have not yet managed to get it to work. I have tried multiple variations of this:

function myFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("Propulsion and Stabilization");
  // Get the output text
  var text = document.getElementById("text"); 

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
    text.setAttribute("required", "");}
    else {
    text.style.display = "none";
    element.removeAttribute("required");}
}

but this did not work.

Ferry Wortelboer
  • 1
  • Well, I think I just understood your question. There are some things you have to take note of: 1. The `required attribute` only works on `form` elements like `input`, `checkbox`, `radio` etc. It cannot work on a `span`, a `div` etc. (2). The element must be inside a `form` element for it to work as required. When you set the attribute on non-form elements, the browser `silently` ignores it. – maswerdna Jul 15 '20 at 16:44