I have this code like survey form with radio buttons and checkboxes. I try to fill in this form with all options, but the form mailto action doesn't perform if I select more than 12 radio & check boxes (total) in the entire page.
It takes all input as plain text and it operates if I select less than 12 radio buttons and checkboxes. I need the user to allow maximum selection and then send the data via mail. I don't know JavaAPIMail servlet so trying via form action mailto.
<section>
<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
<div class="title1">
<ol class="list-group">
<li class="list-group-item"> heading 1 :
<div>
<label class="radio-inline"><input type="radio" name="1" value="J">j</label>
<label class="radio-inline"><input type="radio" name="1" value="K">K</label>
<label class="radio-inline"><input type="radio" name="1" value="L">L</label>
<label class="radio-inline"><input type="radio" name="1" value="M">M</label>
<label class="radio-inline"><input type="radio" name="1" value="N">N</label>
<label class="radio-inline"><input type="radio" name="1" value="O">O</label>
</div>
</li>
<li class="list-group-item"> Heading 2 :
<div class="form-row">
<textarea name ="Head2:" placeholder ="Type Here" id ="H"></textarea>
</div>
</li>
<li class="list-group-item"> Heading 3 : (you can select more than one option)
<div>
<label class="checkbox-inline"><input type="checkbox" name="A:" class="ipad CCBOX" value="ipad">iPad</label>
<label class="checkbox-inline"><input type="checkbox" name="A:" class="web CCBOX" value="web">Web</label>
<label class="checkbox-inline"><input type="checkbox" name="A:" class="other CCBOX" value="other">other</label>
</div>
</li>
<li class="list-group-item"> Heading 4:
<div>
<label class="radio-inline"><input type="radio" name="B" value="Daily">Daily</label>
<label class="radio-inline"><input type="radio" name="B" value="Weekly">Weekly</label>
<label class="radio-inline"><input type="radio" name="B" value="Biweekly">Biweekly</label>
<label class="radio-inline"><input type="radio" name="B" value="Monthly">Monthly</label>
</div>
</li>
</ol>
<span id="web"><h3><b>Web</b></h3>
<ol class="list-group" >
<li class="list-group-item"> Heading 6:
<div>
<label class="radio-inline"><input type="radio" name="C" value="Easy">Easy</label>
<label class="radio-inline"><input type="radio" name="C" value="Neither easy nor difficult">Neither easy nor difficult</label>
<label class="radio-inline"><input type="radio" name="C" value="Difficult">Difficult</label>
</div>
</li>
<li class="list-group-item"> Heading 7:
<div class="form-row">
<textarea name = "Q :" placeholder = "Type Here" id = "comment-good" ></textarea>
</div>
</li>
<li class="list-group-item"> Heading 8:
<div class="form-row">
<textarea name = "W" placeholder = "Type Here" id = "comment-lack" ></textarea>
</div>
</li>
<li class="list-group-item"> Heading 9
<div class="form-row">
<textarea name = "E" placeholder = "Suggestions" id = "comment-sugg"></textarea>
</div>
</li>
</ol></span>
<span id="ipad"><h3><b>ipad</b></h3>
<ol class="list-group">
<li class="list-group-item"> Heading 9
<div>
<label class="radio-inline"><input type="radio" name="R" value="ipad Easy">Easy</label>
<label class="radio-inline"><input type="radio" name="R" value="ipad Neither easy nor difficult">Neither easy nor difficult </label>
<label class="radio-inline"><input type="radio" name="R" value="ipad Difficult">Difficult</label>
</div>
</li>
<li class="list-group-item"> Heading 10
<div class="form-row">
<textarea name = "T" placeholder = "Type Here" id = "comment-goodipad"></textarea>
</div>
</li>
<li class="list-group-item"> Heading 11
<div class="form-row">
<textarea name = "Y: " placeholder = "Type Here" id = "comment-lackipad" ></textarea>
</div>
</li>
<li class="list-group-item"> Heading 12
<div class="form-row">
<textarea name = "U " placeholder = "Suggestions" id = "comment-suggipad" ></textarea>
</div>
</li>
</ol></span>
<span id="other"><h3><b>Other</b></h3>
<ol class="list-group">
<li class="list-group-item"> Heading 13
<div class="form-row">
<textarea name = "I" placeholder = "Type Here" id = "comment-asuse" ></textarea>
</div>
</li>
<li class="list-group-item"> O
<div>
<label class="radio-inline"><input type="radio" name="S" value="Easy">Easy</label>
<label class="radio-inline"><input type="radio" name="S" value="Neither Easy nor difficult">Neither Easy nor difficult</label>
<label class="radio-inline"><input type="radio" name="S" value="Difficult">Difficult</label>
</div>
</li>
<li class="list-group-item"> Heading 14 :
<div>
<label class="radio-inline"><input type="radio" name="Z" value="Yes">Yes</label>
<label class="radio-inline"><input type="radio" name="Z" class="csgo view" value="No">No</label>
</div>
</li>
<li class="list-group-item excel" > Heading 15
<div class="form-row">
<textarea name = "X" placeholder = "Type Here" id = "comment-lackasd" ></textarea>
</div>
</li>
<li class="list-group-item"> Heading 16:
<div class="form-row">
<textarea name = "V" placeholder = "Suggestions" id = "comment-suggasd" ></textarea>
</div>
</li>
</ol></span>
<h3><b>Scope</b></h3>
<ol class="list-group">
<li class="list-group-item"> Heading 17
<div>
<label class="radio-inline"><input type="radio" name="F" value="Most of the times">Most of the times</label>
<label class="radio-inline"><input type="radio" name="F" value="Occasionally">Occasionally </label>
<label class="radio-inline"><input type="radio" name="F" value="Doesn't meet my requirements">
Doesn't meet my requirements</label>
</div>
</li>
<li class="list-group-item"> Heading 18:
<div>
<label class="checkbox-inline"><input type="checkbox" name="d :" value="D">D</label>
<label class="checkbox-inline"><input type="checkbox" name="d :" value="S">S</label>
<label class="checkbox-inline"><input type="checkbox" name="d :" value="C">C</label>
<label class="checkbox-inline"><input type="checkbox" name="d :" value="M">M</label>
<label class="checkbox-inline"><input type="checkbox" name="d :" value="R">R</label>
</div>
</li>
<li class="list-group-item"> Heading 19
<div class="form-row">
<textarea name = "hi:" placeholder = "Type Here" id = "comment-l" ></textarea>
</div>
</li>
<li class="list-group-item"> Heading 20
<div class="form-row">
<textarea name = "hi2:" placeholder = "Suggestions" id = "comment-s" ></textarea>
</div>
</li>
</ol>
<h3><b>Overall Experience</b></h3>
<ol class="list-group">
<li class="list-group-item"> Heading 21:
<div>
<label class="radio-inline"><input type="radio" name="H" value="Likely">Likely</label>
<label class="radio-inline"><input type="radio" name="H" value="Not-Sure">Not Sure</label>
<label class="radio-inline"><input type="radio" name="H" value="Unlikely">Unlikely</label>
</div>
</li>
<li class="list-group-item"> Heading 22:
<div>
<label class="radio-inline"><input type="radio" name="G" value="Satisfied">Satisfied</label>
<label class="radio-inline"><input type="radio" name="G" value="Neutral">Neutral</label>
<label class="radio-inline"><input type="radio" name="G" value="Dissatisfied">Dissatisfied</label>
</div>
</li>
<li class="list-group-item"> Heading 24:
<div>
<label class="radio-inline"><input type="radio" name="..." value="Size">Size</label>
<label class="radio-inline"><input type="radio" name="..." value="Competition">Competition</label>
<label class="radio-inline"><input type="radio" name="..." value="Mix of both">Mix of both</label>
</div>
</li>
<li class="list-group-item"> Please provide your overall satisfaction:
<input id="input-2c" class="rating" min="0" max="5" step="0.5" data-size="sm" name="rating" data-symbol="" data-glyphicon="false" data-rating-class="rating-fa">
</li>
</ol>
<!-- form submission -->
<div class="wrapper">
<input type="submit" value="Send" class="btn btn-primary">
</div>
</form>
</div>
</section>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$('.CCBOX').click(function () {
$('#other').hide();
$('#web').hide();
$('#ipad').hide();
if($(".ipad:checked").length === 1 ){
$('#ipad').show();
}
if($(".web:checked").length === 1 ){
$('#web').show();
}
if($(".other:checked").length === 1 ){
$('#other').show();
}
});
</script>
<script type="text/javascript">
$(function() {
$('input[name="Z"]').on('click', function() {
if ($(this).val() == 'No') {
$('.excel').show();
}
else {
$('.excel').hide();
}
});
});
</script>
</html>
The problem that I am facing is when I click send button with all options selected, the mailto doesn't function. But if I select few number of radio buttons and checkboxes (maximum 12) the mail function operates. Please help me with where i have to make changes.
When I check everything and submit, I get an email with this in the body:
1=O
Head2:=
A:=ipad
A:=web
A:=other
B=Monthly
C=Difficult
Q :=
W=
E=
R=ipad Difficult
T=
Y: =
U =
I=
S=Difficult
Z=No
X=
V=
F=Doesn't meet my requirements
d :=D
d :=S
d :=C
d :=M
d :=R
hi:=
hi2:=
H=Unlikely
G=Dissatisfied
...=Mix of both
rating=
So, clearly, it's working for me. That's why I think it's an os or mail client issue.
Here it is with ALL text areas and text fields using values:
1=O
Head2:=
A:=ipad
A:=web
A:=other
B=Monthly
C=Difficult
Q :=value of Q :
W=value of W
E=value of E
R=ipad Difficult
T=value of T
Y: =value of Y:
U =value of U
I=value of I
S=Difficult
Z=No
X=value of X
V=value of V
F=Doesn't meet my requirements
d :=D
d :=S
d :=C
d :=M
d :=R
hi:=value of hi:
hi2:=value of hi2:
H=Unlikely
G=Dissatisfied
...=Mix of both
rating=Satisfaction value