I am working on a website that has a sort of quiz in it. What I am currently trying to do is have a value be sent to my function when I hit submit and if it is 0 then write "false" and if it is 1 then write "pass". I wrote the JavaScript but it does not work and I am unsure why. The write to HTML event is firing when I hit the radio button which I assume is because of the onclick I have for it. I don't know how to send the value without it though and if that would fix the issue. I also know that the program is only writing false no matter what I click instead of "pass" for no and "false" for yes. When I press the submit button it doesn't work right. The false/pass shouldn't appear until it is pressed but instead when I press the submit button It will change "false" to "pass". I don't know how to fix any of this or why it is doing this.
Thank you for the help let me know if more clarification is needed.
This is my HTML
<body>
<form id="myForm">
<div class="sub form-row align-items-center">
<div class="col">
<fieldset>
<h3><legend>Eligibility Test</legend></h3>
</fieldset>
</div>
</div>
<div class="col">
<fieldset>
<div class="col">
<legend>Have you had your record expunged before?</legend>
<input type="radio" name="field1" id="field1" value="0" onclick="getscores1()"/>
<label>
Yes
</label>
<input type="radio" name="field1" id="field1" value="1" onclick="getscores1()"/>
<label>
No
</label>
</fieldset>
</div>
<div class="col">
<div class="row">
<fieldset>
<legend>Do you have any charges pending against you?</legend>
<input type="radio" name="field2" id="field2 value="0" onclick="getscores2()"/>
<label>
Yes
</label>
<input type="radio" name="field2" id="field2 value="1" onclick="getscores2()"/>
<label>
No
</label>
</fieldset>
</div>
</div>
<fieldset id="submitbutton">
<input type="button" id="submit" value="submit"
onclick='answer()' />
</fieldset>
<p id="totalScore">this is answer </p>
This is my JavaScript
<script>
function getscores1(){
score1= document.getElementById('field1').value;
answer(score1);
}
function answer(score1){
if (score1 == 0 ){
document.getElementById('totalScore').innerHTML = "false";
}
else{
document.getElementById('totalScore').innerHTML = "pass";
}
}
</script>
It's not working for the following reasons:
You're missing a </div> before </fieldset>
You have duplicate IDs (2 field1 and 2 field2)
Your duplicate field2 IDs are both missing the closing quotation mark
Considering you're not allowed duplicate IDs, I recommend removing those. As you're calling the function on click of both radio buttons, instead of using IDs, you can actually just pass through the element itself to the function with the this operator as onclick="getscores1(this)".
Then you just have to adapt your function to take the argument as a function parameter:
function getscores1(score1) {
answer(score1.value);
}
This can be seen working in the following example:
function getscores1(score1) {
answer(score1.value);
}
function answer(score1) {
if (score1 == 0) {
document.getElementById('totalScore').innerHTML = "false";
} else {
document.getElementById('totalScore').innerHTML = "pass";
}
}
<body>
<form id="myForm">
<div class="sub form-row align-items-center">
<div class="col">
<fieldset>
<h3>
<legend>Eligibility Test</legend>
</h3>
</fieldset>
</div>
</div>
<div class="col">
<fieldset>
<div class="col">
<legend>Have you had your record expunged before?</legend>
<input type="radio" name="field1" value="0" onclick="getscores1(this)" />
<label>
Yes
</label>
<input type="radio" name="field1" value="1" onclick="getscores1(this)" />
<label>
No
</label>
</div>
</fieldset>
</div>
<div class="col">
<div class="row">
<fieldset>
<legend>Do you have any charges pending against you?</legend>
<input type="radio" name="field2" value=" 0 " onclick="getscores2(this)" />
<label>
Yes
</label>
<input type="radio" name="field2 " value="1" onclick="getscores2(this)" />
<label>
No
</label>
</fieldset>
</div>
</div>
<fieldset id="submitbutton">
<input type="button" id="submit" value="submit" onclick='answer()' />
</fieldset>
<p id="totalScore">this is answer </p>
Hope this helps! :)
Related
before submit i'm checking 2 fields if one of two fields is checked i return true else false. the problem is that if false is return , ido check one of two checkboxes but the submit button doesn't seem to work(i do console.log()) on click it shows customvalidity message
gif that shows the problem gif
here is code :
function validateForm() {
var checkcapelli = $('#TaglioCapelli').is(':checked');
var checkcolore = $('#checkcolore').is(':checked');
console.log(checkcapelli);
console.log(checkcolore);
console.log("hello");
if (checkcapelli || checkcolore){
return true;
}else{
document.getElementById('TaglioCapelli').setCustomValidity("Selezionare almeno una opzione");
return false;
}
}
form (i removed some fields): I do check two checkboxes:
<form id="userForm" action="php/userForm.php" onsubmit="return validateForm()" method="post">
<div class="modal-body">
<div class="form-group">
<input class="form-check-input" type="checkbox" name ="TaglioCapelli" id="TaglioCapelli" >
<label class="form-check-label" for="TaglioCapelli">
Taglio Capelli
</label>
<input class="form-check-input" type="number" readonly value ="30" name ="tempTaglioCapelli" id="tempTaglioCapelli" >
<label class="form-check-label" for="tempTaglioCapelli">
Tempo in minuti
</label>
</div>
<div class="form-group">
<input class="form-check-input" type="checkbox" name ="checkcolore" id="checkcolore" >
<label class="form-check-label" for="checkcolore">
Colore Capelli
</label>
<input class="form-check-input" type="number" readonly name ="tempcheckcolore" value ="40" id="tempcheckcolore" >
<label class="form-check-label" for="tempcheckcolore">
Tempo in minuti
</label>
</div>
<div class="form-group">
<label for="noteUser">Note</label>
<input type="text" name ="noteUser" class="form-control" id="noteUser" placeholder="Opzionale">
</div>
<div class="form-group">
<label for="finalTime">Tempo finale stimato</label>
<input type="text" name ="finalTime" class="form-control" readonly id="finalTime" placeholder="">
</div>
</div>
<div class="modal-footer">
<div class="form-check mb-2 mr-sm-2 tratdati">
<input class="form-check-input" type="checkbox" required name ="CheckDati" id="CheckDati" checked>
<label class="form-check-label" for="CheckDati">
Autorizzo il trattamento dei dati
</label>
</div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
<button type="submit" id="sendUserForm" class="btn btn-primary">Prenota</button>
</div>
</form>
Because when you first submit the form, it puts the form in an 'invalid' state. The form will not submit until the fields are changed to put the form in a valid state.
Two options:
$('input[name="myinput"]').on("blur", () => {
// Do your checks and setCustomValidity depending on if is valid or not
});
Or you can change your submit button to a
type="button" onclick="submitForm()"
function submitForm() {
...do my validation checks
call form.submit() if validation passes.
}
Changing the check box html from
<input class="form-check-input" type="checkbox" name ="TaglioCapelli" id="TaglioCapelli" >
to
<input onClick="this.setCustomValidity('')" class="form-check-input" type="checkbox" name ="TaglioCapelli" id="TaglioCapelli" >
here on click we are nullifying the custom validation added.
Note: in this case even you tried to check other checkbox and try to submit, it will still not submit the form as per the validation logic you have set.
Here is my situation, It's giving me lot of trouble..
I have an ajax submit form, on submit, id like an action to happen.
I'm quite dependant as this is on squarespace, so i dont have acess to much code.
On submit of the form ( when sucessfull), I can see a 'hidden' class is added.
So i would like to use this for my action as:
if ( $("input.button").hasClass("hidden") ) {
$("#block-yui_3_17_2_2_1515660345355_6688").fadeIn();
};
But nothing seems to happen !! event alert is not working as well, I believe this is due because its not reloading the page as the hidden class appear only when the form has been submitted.
Is there any other method which could work to achieve this ?
Thanks a lot for your help, it will be a life saving !!!
--update --
BElow the all form html:
<form autocomplete="on" action="https://website.squarespace.com" method="POST" onsubmit="
return (function(form) {
Y.use('squarespace-form-submit', 'node', function(Y){
(new Y.Squarespace.FormSubmit({
formNode: Y.Node(form)
})).submit('5a568ac053450ad102451bc4', '5a568a42c8302558efde1ae7', 'page-5a568a42c8302558efde1ae7');
});
return false;
})(this)" data-form-id="5a568ac053450ad102451bc4">
<div class="field-list clear">
<div id="text-yui_3_17_2_1_1515620880734_20061" class="form-item field text required">
<label class="title" for="text-yui_3_17_2_1_1515620880734_20061-field">FULL NAME
<span class="required">*</span>
</label>
<input class="field-element text" type="text" id="text-yui_3_17_2_1_1515620880734_20061-field">
</div>
<div id="email-yui_3_17_2_3_1515620880734_11301" class="form-item field email required">
<label class="title" for="email-yui_3_17_2_3_1515620880734_11301-field">E-MAIL ADDRESS
<span class="required">*</span>
</label>
<input class="field-element" name="email" x-autocompletetype="email" type="text" spellcheck="false" id="email-yui_3_17_2_3_1515620880734_11301-field">
</div>
<div id="radio-yui_3_17_2_1_1515620880734_21108" class="form-item field radio required">
<div class="title" for="radio-yui_3_17_2_1_1515620880734_21108-field">GENDER
<span class="required">*</span>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21108-field" value="MALE">
<div id="check"></div> MALE</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21108-field" value="FEMALE">
<div id="check"></div> FEMALE</label>
</div>
</div>
<div id="radio-yui_3_17_2_1_1515620880734_21855" class="form-item field radio required">
<div class="title" for="radio-yui_3_17_2_1_1515620880734_21855-field">SHOE SIZE (EU SIZE)
<span class="required">*</span>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="36">
<div id="check"></div> 36</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="37">
<div id="check"></div> 37</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="38">
<div id="check"></div> 38</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="39">
<div id="check"></div> 39</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="40">
<div id="check"></div> 40</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="41">
<div id="check"></div> 41</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="42">
<div id="check"></div> 42</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="43">
<div id="check"></div> 43</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="44">
<div id="check"></div> 44</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="45">
<div id="check"></div> 45</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="46">
<div id="check"></div> 46</label>
</div>
</div>
</div>
<div class="form-button-wrapper form-button-wrapper--align-center">
<input class="button sqs-system-button sqs-editable-button" type="submit" value="Submit">
</div>
<div class="hidden form-submission-text">Thank you!</div>
<div class="hidden form-submission-html" data-submission-html=""></div>
If I understand this right, you want a block to appear with a fade-in once the form is submitted.
A few things here:
First, attaching to an arbitrary class change to make something happen feels very fragile. Why not try attaching this action to the form submit event?
Second, the javascript you put as an example will never make it unless the button was hidden on page load. You would need to attach this code to an actual dom event to execute it.
Here is my proposed solution. Note that this solution assumes the block with the ID you provide is already mounted on the DOM:
Since you seem to want to listen for a submit event and then make something appear, and your code was generic enough, you could:
$('form').onSubmit(function() {
$("#block-yui_3_17_2_2_1515660345355_6688").fadeIn();
});
There are simpler css transitions as well, again assuming the block is already on the DOM when the page loads.
Only final gotcha might be that you don't have jquery loaded on your site. I recommend adding jQuery from a Google CDN.
Its a simple form that looks like below:
<form class="form register-form" data-parsley-validate data-parsley-excluded="input[type=button],input[type=submit], input[type=reset]" method="POST">
<div class="notification hide"></div>
<div class="row first-rg">
<div class="col-sm-6">
<input type="text" class="tfield-2" name="contact_fname" id="contact_fname" placeholder="First Name*" required data-parsley-trigger="focusout">
<div style="display:none;"><input type="text" class="tfield-2" name="contact_projectname" id="contact_projectname" value="Royal Pearls"></div>
</div>
<div class="col-sm-6">
<input type="text" class="tfield-2" name="contact_lname" id="contact_lname" placeholder="Last Name*" required data-parsley-trigger="focusout">
</div>
</div>
<div class="row second-rg">
<div class="col-sm-6">
<input type="text" id="contact_phone" placeholder="Phone No. *" name="contact_phone" maxlength="50" required="" class="international-number-input international-phone-number-input intl-phone-number-input" aria-required="true" autocomplete="off" data-parsley-intl-tel-no data-parsley-trigger="focusout" required>
</div>
<div class="col-sm-6">
<input type="email" class="tfield-2" name="contact_email" id="contact_email" placeholder="Email*" data-parsley-type="email" data-parsley-trigger="focusout" data-parsley-error-message="Enter Valid Email" required>
</div>
</div>
<p class="form-tag">Are you searching for a</p>
<div class="checkbox regiterpage">
<label class="background-co">
<input
type="checkbox"
value="1"
name="bedroom[]"
required
type="checkbox"
data-parsley-mincheck="1"
data-parsley-error-message="Check atleast 1"
>
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 1 Bedroom </label>
<label class="background-co" >
<input type="checkbox" value="2" name="bedroom[]">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 2 Bedrooms </label>
<label class="background-co">
<input type="checkbox" value="3" name="bedroom[]">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 3 Bedrooms </label>
<label class="background-co">
<input type="checkbox" value="4" name="bedroom[]">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 4 Bedrooms </label>
</div>
<div class="radioin">
<p class="form-tag">Are you searching for a property as an</p>
<label class="radio-inline background-co">
<input type="radio"
name="propertytype"
required
data-parsley-mincheck="1"
data-parsley-error-message="Check atleast 1"
>
<span class="rlabl">End-user / Owner-occupier</span> </label>
<label class="radio-inline background-co">
<input type="radio" name="optradio">
<span class="rlabl">Investor</span> </label>
</div>
<!-- HIDDEN INPUTS FOR google captcha -->
<input type="hidden" value="No Bots" id="google-captcha" required>
<input type="hidden" id="google-captcha-check" data-parsley-equalto="#google-captcha" data-parsley-error-message="Fill the captcha!" required>
<!-- HIDDEN INPUTS FOR google captcha -->
<div class="captch">
<div class="g-recaptcha" data-sitekey="6LdksigUAAAAAKw5idd69Xa3ysK_RZJ3xAleTbVj" data-callback="google_captcha_callback" data-expired-callback="google_captcha_callback"></div>
</div>
<button type="submit" class="btn-default">Submit</button>
</form>
Now i have validated the form using parsely.js , the validation works just fine , but there is a problem with my submit handler, i have the following submit handler in my form:
$('.register-form').submit(function() {
$.ajax({
type: 'POST',
url: 'mail/reg_send.php',
data : $('.register-form').serialize(),
success : (data , status) => {
(data === 'success') ? $('.notification').text('Thank you for contacting us.').removeClass('hide') : $('.notification').text('There was a problem submitting your form').removeClass('hide');
$('.register-form')[0].reset();
}
});
return false;
});
But even though i have a submit handler and a return false in the submit handler, the page still refreshes and even the i add a breakpoint to my submit handler in my dev tools , the breakpoint is never reached. Why ? what am i doing wrong here ?
I have tried changing the submit handler to something more generic such as:
$('form').submit((){
// code here
})
But my page will still refreah. Why ?
Include the event in the handler with function(e) and prevent default on it.
$('.register-form').submit(function(e) {
e.preventDefault();
// the rest of your code
});
Your other problem might be that your event handler is not being attached to the element because it is not available when the JavaScript is executed. You can test this easily by using the following instead:
$(document).on("submit", ".register-form", function(e) {
e.preventDefault();
// the rest of your code
});
I'm trying to use javascript to show/hide a div's content depending on which radio button is selected. I have an onchange function that I use to change the the div content from one div to another, but it doesn't work. If you can do this in jquery instead thats ok but im not that familiar with jquery so if you could update my jsfiddle with it I would be appreciativw :) Here is the JSFiddle: https://jsfiddle.net/markusbond/au77Ladg/
Any help is appreciated :)
JAVASCRIPT:
function changeSelection() {
if (document.getElementById("selectionTables").checked) {
document.getElementById("populateCheckBoxes").show;
document.getElementById("unpopulateCheckBoxes").hidden;
} else {
document.getElementById("unpopulateCheckBoxes").show;
document.getElementById("populateCheckBoxes").hidden;
}
}
HTML:
<form role="form">
<div class="row">
<!--this is the onchange call-->
<div class="radio col-xs-2" id="populateSelection" onchange="changeSelection()">
<!--this is the first radio button-->
<label>
<input type="radio" name="optradio" id="selectionTables" />Use Tables
</label>
<!--this is the second radio button-->
<label>
<input type="radio" name="optradio" id="selectionViews" />Use Views
</label>
</div>
<!--this is the first changed div-->
</div>
<div class="row" id="populateCheckBoxes">
<div class="checkbox">
<label>
<input type="checkbox" id="selectionCondition" />Condition
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionDistribution" />Distribution
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionProgram" />Program
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionTreatment" />Treatment
</label>
</div>
</div>
<!--this is the second changed div-->
<div class="row" id="unpopulateCheckBoxes"></div>
</form>
Example using JQuery FIDDLE
JavaScript
$('input:radio[name=optradio]').change(
function(){
if (this.value == 'selectionTables') {
$("#unpopulateCheckBoxes" ).hide();
$("#populateCheckBoxes").show();
}
else {
$("#unpopulateCheckBoxes" ).show();
$("#populateCheckBoxes").hide();
}
}
);
Give your first radio button a value value="selectionTables"
<!--this is the first radio button-->
<label>
<input type="radio" name="optradio" id="selectionTables" value="selectionTables" />Use Tables
</label>
I hope I understood you correctly.
This is the correct way
<script>
function changeSelection() {
if (document.getElementById("selectionTables").checked) {
document.getElementById("populateCheckBoxes").style.visibility = "hidden";
document.getElementById("unpopulateCheckBoxes").style.visibility = "visible";
} else {
document.getElementById("unpopulateCheckBoxes").style.visibility ="hidden";
document.getElementById("populateCheckBoxes").style.visibility = "visible";
}
}
</script>
You are using
document.getElementById("unpopulateCheckBoxes").hidden;
but you should
document.getElementById("populateCheckBoxes").style.visibility = "hidden";
Hope this helps
or via jquery, thats what i would prefer:
function changeSelection() {
if ($("#selectionTables").attr("checked") {
$("#populateCheckBoxes").show();
$("#unpopulateCheckBoxes").hide();
} else {
$("#unpopulateCheckBoxes").show();
$("#populateCheckBoxes").hide();
}
}
document.getElementById('myElementID').style.display = 'none'; // Will hide an element
document.getElementById('myElementID').style.display = 'block'; // Will show an element
It is worth noting that you will not always want your element to be display:block;. There are many display options and you probably want to toggle back and forth based on how your element was originally shown.
Problem is html does not supports show/hide attribute. Try using style attribute with display property. Also use checked attribute to make default radio selection.
<input type="radio" name="optradio" id="selectionTables" checked='' />
function changeSelection() {
var pop = "none",
upop = "block";
if (document.getElementById("selectionTables").checked) {
pop = "block";
upop = "none";
}
document.getElementById("unpopulateCheckBoxes").style.display = upop;
document.getElementById("populateCheckBoxes").style.display = pop;
}
<form role="form">
<div class="row">
<!--this is the onchange call-->
<div class="radio col-xs-2" id="populateSelection" onchange="changeSelection()">
<!--this is the first radio button-->
<label>
<input type="radio" name="optradio" id="selectionTables" checked='' />Use Tables
</label>
<!--this is the second radio button-->
<label>
<input type="radio" name="optradio" id="selectionViews" />Use Views
</label>
</div>
<!--this is the first changed div-->
</div>
<div class="row" id="populateCheckBoxes">
<div class="checkbox">
<label>
<input type="checkbox" id="selectionCondition" />Condition
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionDistribution" />Distribution
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionProgram" />Program
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionTreatment" />Treatment
</label>
</div>
</div>
<!--this is the second changed div-->
<div class="row" id="unpopulateCheckBoxes"></div>
</form>
I have two separate forms with radio buttons. I need to make a button, clicking which submit two forms.
<form action="/second_vote" method="post" id="poll-view-voting" accept-charset="UTF-8">
<div class="choices">
<div class="form-item form-type-radios form-item-choice">
<div id="edit-choice" class="form-radios">
<div class="form-item form-type-radio form-item-choice">
<input type="radio" id="edit-choice-1" name="choice" value="1" class="form-radio">
<label class="option" for="edit-choice-1">1 </label>
</div>
</div>
</div>
</div>
<input type="submit" id="edit-vote" name="op" value="Vote" class="form-submit">
</form>
<form action="/second_vote" method="post" id="poll-view-voting--2" accept-charset="UTF-8">
<div class="choices">
<div class="form-item form-type-radios form-item-choice">
<div id="edit-choice--2" class="form-radios">
<div class="form-item form-type-radio form-item-choice">
<input type="radio" id="edit-choice-3" name="choice" value="3" class="form-radio">
<label class="option" for="edit-choice-3">1 </label>
</div>
</div>
</div>
</div>
<input type="submit" id="edit-vote--2" name="op" value="Vote" class="form-submit">
</form>
I try to do like this, but only sent the first form.
<script language="javascript" type="text/javascript">
function submitDetailsForm() {
$('#poll-view-voting').submit();
}
</script>
I think that you can't send two form in one single request. You should use some AJAX request to send both of them in sequence, or, even better, use just one form (you're using the same action for both of your form..)
You can submit the first form using AJAX, otherwise the submission of one will prevent the other from being submitted.
1
<form action="/second_vote" method="post" id="poll-view-voting--2" accept-charset="UTF-8">
<div class="choices">
<div class="form-item form-type-radios form-item-choice">
<div id="edit-choice--2" class="form-radios">
<div class="form-item form-type-radio form-item-choice">
<input type="radio" id="edit-choice-3" name="choice" value="3" class="form-radio">
<label class="option" for="edit-choice-3">1 </label>
</div>
</div>
</div>
</div>
</form>
<input type="button" value="Click Me!" onclick="submitDetailsForm()" />
<script language="javascript" type="text/javascript">
function submitDetailsForm() {
$('#poll-view-voting').submit();
$('#poll-view-voting--2').submit();
}
</script>