Handling multiple form submit - javascript

I'm a newbie learning new stuff. I'm trying to handle two forms, but can't figure out how to handle the second form differently. It uses 1st forms handle no matter what. Here's the code:
<div class="body questionnaire-container">
<div class="content">
<h2 id="questionNumero"></h2>
<p id="question"></p>
<form class="form" id="question-form">
<div>
<input type="radio" name="question" id="answerA" value="A">
<label class="answerA"></label>
</div>
<div>
<input type="radio" name="question" id="answerB" value="B">
<label class="answerB"></label>
</div>
<div>
<input type="radio" name="question" id="answerC" value="C">
<label class="answerC"></label>
</div>
<div>
<input type="radio" name="question" id="answerD" value="D">
<label class="answerD"></label>
</div>
<button type="submit" id="submit" class="submit">Next</button>
</form>
</div>
<div class="barre-progression">
<h2>Progrès</h2>
<progress class="progression" value="0" max="10">
</div>
</div>
<div class="body weaponquestionnaire-container">
<div class="content">
<h2 id="questionNumero"></h2>
<p id="question"></p>
<form class="form" id="questionweap-form">
<div>
<input type="radio" name="question" id="answerA" value="A">
<label class="answerA"></label>
</div>
<div>
<input type="radio" name="question" id="answerB" value="B">
<label class="answerB"></label>
</div>
<div>
<input type="radio" name="question" id="answerC" value="C">
<label class="answerC"></label>
</div>
<div>
<input type="radio" name="question" id="answerD" value="D">
<label class="answerD"></label>
</div>
<button type="submit" id="chuj" class="questionweap-form">Next</button>
</form>
</div>
<div class="barre-progression">
<h2>Progrès</h2>
<progress class="progression" value="0" max="10">
</div>
</div>
// Handle Form Submits
$("#question-form").submit(function (e) {
e.preventDefault();
alert( "It's broken again!" );
if (questionNumber != nbQuestionToAnswer) {
//question 1 to 9: pushing answer in array
closeAll();
userAnswer.push($('input[name="question"]:checked').val());
questionNumber++;
openQuestionnaire();
} else {
// question 10: comparing arrays and sending number of good answers
userAnswer.push($('input[name="question"]:checked').val());
var nbGoodAnswer = 0;
for (i = 0; i < nbQuestionToAnswer; i++) {
if (userAnswer[i] == goodAnswer[i]) {
nbGoodAnswer++;
}
}
closeAll();
if (nbGoodAnswer >= nbAnswerNeeded) {
openResultGood();
} else {
openResultBad();
}
}
return false;
});
$("#questionweap-form").submit(function (e) {
e.preventDefault();
alert( "It worked, finally." );
if (questionNumber != nbQuestionToAnswer) {
//question 1 to 9: pushing answer in array
closeAll();
userAnswer.push($('input[name="question"]:checked').val());
questionNumber++;
openQuestionnaireWeapon();
} else {
// question 10: comparing arrays and sending number of good answers
userAnswer.push($('input[name="question"]:checked').val());
var nbGoodAnswer = 0;
for (i = 0; i < nbQuestionToAnswer; i++) {
if (userAnswer[i] == goodAnswer[i]) {
nbGoodAnswer++;
}
}
closeAll();
if (nbGoodAnswer >= nbAnswerNeeded) {
openResultGood();
} else {
openResultBad();
}
}
return false;
});
It keeps submitting the "question-form", even when trying to submit "questionweap-form"
I've looked for any tips for hours any couldn't find anything, so any help would be appreciated!

Related

Trying to disable button if text hasn’t being input and one of three check box hasn’t been checked in JavaScript

I am trying to disable a button that requires both an input of text being typed and one of three checkboxes being checked. The text is a user name and the checkbox is a difficulty of either easy, medium, or hard. Currently, my function only works if one of the requirements is met. So if the text has been inputted the button is enabled and the same with the checkboxes.
startButton.addEventListener('click', startQuiz);
function disableButton() {
if (document.getElementById("username").value === "") {
document.getElementById("start-btn").disabled = true;
}
if (document.getElementsByName("difficulty").checked) {
document.getElementById("start-btn").disabled = true;
}
else {
document.getElementById("start-btn").disabled = false;
}
}
<div>
<label for="username">Enter your Username</label>
<input type="text" name="username" id="username" onkeyup="disableButton()" placeholder="Enter Username">
</div>
<div id="difficulty" class="center">
<div>
<input type="radio" name="difficulty" id="easy-diff" onclick="disableButton()">
<label for="easy-diff">Easy</label>
</div>
<div>
<input type="radio" name="difficulty" id="medium-diff" onclick="disableButton()">
<label for="medium-diff">Medium</label>
</div>
<div>
<input type="radio" name="difficulty" id="hard-diff" onclick="disableButton()">
<label for="hard-diff">Hard</label>
</div>
</div>
<button id="start-btn" type="submit" class="btn" disabled>Start</button>
every time the value changed, check both input
let diffChecked = false;
let startButton = document.querySelector('#start-btn');
let username = document.querySelector('#username');
let difficulty = document.querySelectorAll('[name="difficulty"]');
username.addEventListener('input', function() {
validateInput();
})
difficulty.forEach(function(item) {
item.addEventListener('click', function() {
diffChecked = true;
validateInput();
})
})
function validateInput() {
if (username.value && diffChecked) {
startButton.disabled = false;
} else {
startButton.disabled = true
}
}
<div>
<label for="username">Enter your Username</label>
<input type="text" name="username" id="username" placeholder="Enter Username">
</div>
<div id="difficulty" class="center">
<div>
<input type="radio" name="difficulty" id="easy-diff">
<label for="easy-diff">Easy</label>
</div>
<div>
<input type="radio" name="difficulty" id="medium-diff">
<label for="medium-diff">Medium</label>
</div>
<div>
<input type="radio" name="difficulty" id="hard-diff">
<label for="hard-diff">Hard</label>
</div>
</div>
<button id="start-btn" type="submit" class="btn" disabled>Start</button>
Instead of a div you must use the Semantic HTML form, that will do the job for you without even writing javascript code.
<form id="difficulty" class="center">
<div>
<input type="radio" name="difficulty" id="easy-diff" required>
<label for="easy-diff">Easy</label>
</div>
<div>
<input type="radio" name="difficulty" id="medium-diff" required>
<label for="medium-diff">Medium</label>
</div>
<div>
<input type="radio" name="difficulty" id="hard-diff" required>
<label for="hard-diff">Hard</label>
</div>
<button type="submit">Enviar</button>
</form>
Inside a form tag, the submit button only works with all required inputs does not have an undefined value.
And you may call your function startQuiz as an action, if you want.
The action attribute specifies where to send the form-data when a form is submitted.
<form id="difficulty" class="center" action="startQuiz()">

How to use querySelectorAll to disable a button if all radios in a div have not been checked?

I have the following page which I would like to force the user to check all the radios in the first view:
function show(shown, hidden) {
document.getElementById(shown).style.display = 'block';
document.getElementById(hidden).style.display = 'none';
document.querySelector('[data-testid="crowd-submit"]').style.display = 'inline-block';
return false;
}
function enableButton() {
if (document.querySelectorAll("link[type^=radio]:checked") !== null) {
document.getElementById('button').disabled = false;
}
}
[data-testid="crowd-submit"] {
display: none;
}
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form answer-format="flatten-objects">
<!-- Start Page number one (part 1) -->
<div id="Page1">
<h2>Part 1/2</h2>
<div class="container">
<h4> this is question 1?</h4>
<input type="radio" value="val1" name="question1_1" required onclick="enableButton()">A</input>
<input type="radio" value="val2" name="question1_1" required onclick="enableButton()">B</input>
<input type="radio" value="val3" name="question1_1" required onclick="enableButton()">C</input>
<i></i>
</div>
<div class="container">
<h4> this is question 2?</h4>
<input type="radio" value="val1" name="question2_2" required onclick="enableButton()">A</input>
<input type="radio" value="val2" name="question2_2" required onclick="enableButton()">B</input>
<input type="radio" value="val3" name="question2_2" required onclick="enableButton()">C</input>
<i></i>
</div>
<button type="button" id="button" class="d-block mr-0 ml-auto" disabled onclick="return show('Page2','Page1');"><b>Next</b></button>
<br>
<br>
</div>
<!-- End Page number one (part 1) -->
<!-- start Page number two (part 2) -->
<div id="Page2" style="display:none">
<h2>Part 2/2</h2>
<div class="container">
<h4> this is question 2?</h4>
<input type="radio" value="val1" name="question3_3" required onclick="enableButton()">A</input>
<input type="radio" value="val2" name="question3_3" required onclick="enableButton()">B</input>
<input type="radio" value="val3" name="question3_3" required onclick="enableButton()">C</input>
<i></i>
</div>
</div>
</crowd-form>
How can I disable the next button, until all the radios in the first view have not been answered?
So far, what I tried was:
document.querySelectorAll("link[type^=radio]:checked") !== null
And
if (document.querySelectorAll("link[type^=radio]:checked").length !== null) {
document.getElementById('button').disabled = false;
}
}
And with Jquery:
$(function(){
$("input[type='radio']").change(function(){
$("input[type='submit']").prop("disabled", false);
});
});
However, these attemps have not worked, because if you answer only one set of radios in the first view, the website allows you to continue with the second one. How can I disable the next button, until all the checkboxes in the first view have been completed?
What is even link in link[type^=radio]?
its input[type^=radio]
Also if you are checking .length you need to compare it to an number not null...
.length Always returns an number, 0 >
.length !== 0
function show(shown, hidden) {
document.getElementById(shown).style.display = 'block';
document.getElementById(hidden).style.display = 'none';
document.querySelector('[data-testid="crowd-submit"]').style.display = 'inline-block';
return false;
}
function enableButton() {
console.log(document.querySelectorAll("input[type^=radio][name=question1_1]:checked").length)
console.log(document.querySelectorAll("input[type^=radio][name=question1_2]:checked").length)
if (document.querySelectorAll("input[type^=radio][name=question1_1]:checked").length !== 0 && document.querySelectorAll("input[type^=radio][name=question2_2]:checked").length !== 0) {
document.getElementById('button').disabled = false;
}
}
[data-testid="crowd-submit"] {
display: none;
}
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form answer-format="flatten-objects">
<!-- Start Page number one (part 1) -->
<div id="Page1">
<h2>Part 1/2</h2>
<div class="container">
<h4> this is question 1?</h4>
<input type="radio" value="val1" name="question1_1" required onclick="enableButton()">A</input>
<input type="radio" value="val2" name="question1_1" required onclick="enableButton()">B</input>
<input type="radio" value="val3" name="question1_1" required onclick="enableButton()">C</input>
<i></i>
</div>
<div class="container">
<h4> this is question 2?</h4>
<input type="radio" value="val1" name="question2_2" required onclick="enableButton()">A</input>
<input type="radio" value="val2" name="question2_2" required onclick="enableButton()">B</input>
<input type="radio" value="val3" name="question2_2" required onclick="enableButton()">C</input>
<i></i>
</div>
<button type="button" id="button" class="d-block mr-0 ml-auto" disabled onclick="return show('Page2','Page1');"><b>Next</b></button>
<br>
<br>
</div>
<!-- End Page number one (part 1) -->
<!-- start Page number two (part 2) -->
<div id="Page2" style="display:none">
<h2>Part 2/2</h2>
<div class="container">
<h4> this is question 2?</h4>
<input type="radio" value="val1" name="question3_3" required onclick="enableButton()">A</input>
<input type="radio" value="val2" name="question3_3" required onclick="enableButton()">B</input>
<input type="radio" value="val3" name="question3_3" required onclick="enableButton()">C</input>
<i></i>
</div>
</div>
</crowd-form>
If you want to use 0 as compression just use more direct CSS targeting and add one more condition:
if (document.querySelectorAll("input[type^=radio][name=question1_1]:checked").length !== 0 && document.querySelectorAll("input[type^=radio][name=question2_2]:checked").length !== 0)
so you can put in those two groups any number of options, and in each at least one needs to be picked.
You need to check for the number of radio buttons that are checked, right now you are just checking if any radio buttons are checked.
function enableButton() {
// check if both radio buttons are checked
if (document.querySelectorAll("link[type^=radio]:checked").length == 2) {
document.getElementById('button').disabled = false;
}
}

How do I validate "textarea" after checkbox is checked with javascript

I've made a form with few questions. Each question has checkboxes or radio buttons, depending on what type of question it is (how many answers can there be).
Then I've started making a validation function, to be able to check if the user went through the whole form.
I am unsure how to make a validation function that would only trigger if a certain answer is picked (certain checkbox is checked, would trigger the function to check for textarea and check its content).
The code I've got so far can be found here.
The code is also available below:
// main function for checking the validation of answer
function Validation() {
if(!ValidateForm()) {
document.getElementById("errorBox").innerHTML = "Please check that you correctly answered the question";
return false;
} else {
document.getElementById("errorBox").innerHTML = "";
return true
}
}
// will check the checkbox to see if checked,
// the "console.log" is there just because of previous problems, don't mind it
function ValidateForm() {
var k = document.getElementsByName('Knowledge');
for (var l = 0; l<k.length; l++) {
if (k[l].checked) {
console.log(k[l])
return true;
}
}
}
// this was supposed to be the code to do the following:
// if the checkbox is checked, it would check for textarea
// if the textarea is there, check if it has any content
// if not, return false ---> sends message from the main function
var k = document.getElementsByName('Knowledge');
for(var i = 0; i<k.length; i++) {
if (k[6].checked) {
}
}
<form id="frmForm" name="frmForm" action="#" method="post" onsubmit="return Validation()">
<div class="row" style="margin-top: 20px;">
<div class="col-sm-12">
<div class="form-group">
<p>
<b>3. This is a question, Lorem ipsum dolor sit amet?</b>
</p>
<p style="margin-left: 16px;">
(please choose one or more answers to continue)
</p>
<div style="margin-left: 35px;">
<input type="checkbox" id="Knowledge1" name="Knowledge" value="physical" >
<label for="Knowledge1" style="font-weight:normal">answer 1<br>
<input type="checkbox" id="Knowledge2" name="Knowledge" value="music" >
<label for="Knowledge2" style="font-weight:normal">answer 2<br>
<input type="checkbox" id="Knowledge3" name="Knowledge" value="nature" >
<label for="Knowledge3" style="font-weight:normal">answer 3</label><br>
<input type="checkbox" id="Knowledge4" name="Knowledge" value="society" >
<label for="Knowledge4" style="font-weight:normal">answer 4</label><br>
<input type="checkbox" id="Knowledge5" name="Knowledge" value="other" >
<label for="Knowledge5" style="font-weight:normal">answer 5 + explain
<input type="text" placeholder=" . . ." border=""/></label><br>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 50px">
<div class="col-sm-3 col-sm-offset-3">
<div class="form-group">
<button type="submit" id="Submit" name="Submit" class="btn btn-default">! ANSWER !</button>
</div>
</div>
</div>
<div id="errorBox" style="margin-bottom:50px; color: red"></div>
</form>
If you want to keep it generic, add a data attribute to the checkboxes that required additional text and make your validation check that data attribute:
<input type="checkbox" id="Knowledge5" name="Knowledge" value="other" data-explain="Knowledge5text">
<input id="Knowledge5text" type="text" placeholder="..." border=""/>
.
if (checkboxElement.dataset.explain) {
console.log('answer requires an explanation');
var textFieldElement = document.getElementById(k[i].dataset.explain);
if (!textFieldElement .value) {
console.log('no answer found:', textFieldElement .value);
return false;
}
}
Here is the complete example. Side note: Avoid single-character variable names for anything but loop variables, it makes understanding code more difficult
// main function for checking the validation of answer
function Validation() {
if(!ValidateForm()) {
document.getElementById("errorBox").innerHTML = "Please check that you correctly answered the question";
return false;
} else {
document.getElementById("errorBox").innerHTML = "";
return true
}
}
// will check the checkbox to see if checked,
// the "console.log" is there just because of previous problems, don't mind it
function ValidateForm() {
var k = document.getElementsByName('Knowledge');
for (var i = 0; i < k.length; i++) {
if (k[i].checked) {
if (k[i].dataset.explain) {
console.log('answer requires an explanation');
var textField = document.getElementById(k[i].dataset.explain);
if (!textField.value) {
console.log('no answer found:', textField.value);
return false;
}
}
return true;
}
}
}
<form id="frmForm" name="frmForm" action="#" method="post" onsubmit="return Validation()">
<div class="row" style="margin-top: 20px;">
<div class="col-sm-12">
<div class="form-group">
<p>
<b>3. This is a question, Lorem ipsum dolor sit amet?</b>
</p>
<p style="margin-left: 16px;">
(please choose one or more answers to continue)
</p>
<div style="margin-left: 35px;">
<input type="checkbox" id="Knowledge1" name="Knowledge" value="physical" >
<label for="Knowledge1" style="font-weight:normal">answer 1<br>
<input type="checkbox" id="Knowledge2" name="Knowledge" value="music" >
<label for="Knowledge2" style="font-weight:normal">answer 2<br>
<input type="checkbox" id="Knowledge3" name="Knowledge" value="nature" >
<label for="Knowledge3" style="font-weight:normal">answer 3</label><br>
<input type="checkbox" id="Knowledge4" name="Knowledge" value="society" >
<label for="Knowledge4" style="font-weight:normal">answer 4</label><br>
<input type="checkbox" id="Knowledge5" name="Knowledge" value="other" data-explain="Knowledge5text">
<label for="Knowledge5" style="font-weight:normal">answer 5 + explain
<input id="Knowledge5text" type="text" placeholder=" . . ." border=""/></label><br>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 50px">
<div class="col-sm-3 col-sm-offset-3">
<div class="form-group">
<button type="submit" id="Submit" name="Submit" class="btn btn-default">! ANSWER !</button>
</div>
</div>
</div>
<div id="errorBox" style="margin-bottom:50px; color: red"></div>
</form>

Javascript conditionals not working on correct button combination

I have 5 if else conditions under function getRadioButtonValue. The function does not go through all the conditions even after clicking the right button combinations.
I have tried to debug the script using Chrome Developer tools but the problem still exists. Where is the code breaking?
Some information regarding the page, I am using Javascript to hide the div's and headers so that at any one time there is only one question seen.
Only the first if conditions work, but nothing else
The results are seen after Get Result button is clicked on the last page which should redirect to the appropriate page.
[DELETED CODE]
[UPDATED CODE]
I am unable to auto hide my div's based on the response given below by Keith.
FYI: His code works as expected.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.hidden {
display: none;
}
.visible {
display: block;
margin: 0 auto;
width: 650px;
height: 445px;
background: #EFDFBC;
}
</style>
</head>
<body>
<div id="first-question" class="visible">
<h3>How?</h3>
<ul>
<li>abc</li>
<li>def</li>
</ul>
<hr>
<input type="radio" name="quiz-question-one" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" name="quiz-question-one" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
</div>
<div id="second-question" class="hidden">
<h3>To</h3>
<hr>
<input type="radio" name="quiz-question-two" id="quiz-question-two-yes" value="yes" />
<label for="quiz-question-two-yes" id="twoYes">Yes</label>
<input type="radio" name="quiz-question-two" id="quiz-question-two-no" value="no" />
<label for="quiz-question-two-yes" id="twoNo">No</label>
</div>
<div id="third-question" class="hidden">
<h3>Make </h3>
<hr>
<input type="radio" name="quiz-question-three" id="quiz-question-three-yes" value="yes" />
<label for="quiz-question-three-yes" id="threeYes">Yes</label>
<input type="radio" name="quiz-question-three" id="quiz-question-three-no" value="no" />
<label for="quiz-question-three-yes" id="threeNo">No</label>
</div>
<div id="fourth-question" class="hidden">
<h3>This</h3>
<hr>
<input type="radio" name="quiz-question-four" id="quiz-question-four-yes" value="yes" />
<label for="quiz-question-four-yes" id="fourYes">Yes</label>
<input type="radio" name="quiz-question-four" id="quiz-question-four-no" value="no" />
<label for="quiz-question-four-yes" id="fourNo">No</label>
</div>
<div id="fifth-question" class="hidden">
<h3>Work?</h3>
<hr>
<input type="radio" name="quiz-question-five-yes" id="quiz-question-five-yes" value="yes" />
<label for="quiz-question-five-yes" id="fiveYes">Yes</label>
<input type="radio" name="quiz-question-five-no" id="quiz-question-five-no" value="no" />
<label for="quiz-question-five-yes" id="fiveNo">No</label>
</div>
<div class="page result">
<label>Results</label>
<div id="result"></div>
</div>
</body>
</html>
<script type="text/javascript">
var results = {};
function updateResult() {
var r = results,
rt = $('#result');
if (r.quiz-question-one && r.quiz-question-two && r.quiz-question-three && r.quiz-question-four && r.quiz-question-five) {
rt.text('All Yes');
} else if (!r.quiz-question-one && !r.quiz-question-two && !r.quiz-question-three && !r.quiz-question-four && !r.quiz-question-five) {
rt.text('All No');
} else {
rt.text('We have a mixed response');
}
}
$(function () {
$('body').on('click', '[name]', function () {
var $this = $(this),
page = $this.closest('.hidden'),
next_page = $(page.next());
results[$this.attr('name')] = $(this).val() === 'yes';
page.removeClass('visible');
next_page.addClass('visible');
if (next_page.hasClass('result')) updateResult();
});
});
</script>
I've created an example below that I think you can work from. The values from the radio I don't think get updated until you submit, instead I've captured the results in the onclick. You can now add back you CSS styling etc. Hope that helps.
var results = {};
function updateResult() {
var r = results,
rt = $('#result');
if (r.q1 && r.q2 && r.q3) {
rt.text('All Yes');
} else if (!r.q1 && !r.q2 && !r.q3) {
rt.text('All No');
} else {
rt.text('We have a mixed response');
}
}
$(function () {
$('body').on('click', '[name]', function () {
var $this = $(this),
page = $this.closest('.page'),
next_page = $(page.next());
results[$this.attr('name')] = $(this).val() === 'yes';
page.removeClass('active');
next_page.addClass('active');
if (next_page.hasClass('result')) updateResult();
});
});
.page {
display: none;
}
.page.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page active">
<div>Question 1</div>
<label for="q1yes">Yes</label>
<input id="q1yes" type="radio" name="q1" value="yes">
<label for="q1no">No</label>
<input id="q1no" type="radio" name="q1" value="no">
</div>
<div class="page">
<div>Question 2</div>
<label for="q2yes">Yes</label>
<input id="q2yes" type="radio" name="q2" value="yes">
<label for="q2no">No</label>
<input id="q2no" type="radio" name="q2" value="no">
</div>
<div class="page">
<div>Question 3</div>
<label for="q3yes">Yes</label>
<input id="q3yes" type="radio" name="q3" value="yes">
<label for="q3no">No</label>
<input id="q3no" type="radio" name="q3" value="no">
</div>
<div class="page result">
<label>Results</label>
<div id="result"></div>
</div>
<input type="radio" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
In the above you are using type="radio", that means all type="radio" with the same name will group together, and not just these two. To group together just give them a name on the input. eg.
<input type="radio" name="quiz-question-one" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" name="quiz-question-one" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
Above you can see I've given the 2 inputs the name="quiz-question-one", and then for the next question maybe give them a name="quiz-question-two" etc..
On another note, there are lots of places where your code could be simplified, but hopefully this will solve your current problem.

Hide a div after selecting a radio

I am working on the following codes where I want the input number to appear only when the radio Mobile Money is selected.
Script:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if ($(this).attr('id') == 'mobilemoney') {
$('#mobilemoneynumber').show();
} else {
$('#mobilemoneynumber').hide();
}
});
});
Html:
<form class="form-basic" method="post" action="#">
<div class="form-row">
<label><span>Select one</span></label>
<div class="form-radio-buttons">
<div>
<label>
<input type="radio" name="radio" id="mobilemoney">
<span>Mobile Money</span>
</label>
</div>
<div>
<label>
<input type="radio" name="radio">
<span>Cash on delivery</span>
</label>
</div>
</div>
</div>
<div class="form-row">
<label>
<span>Number</span>
<input type="text" id="mobilemoneynumber" name="mobilemoneynumber">
</label>
</div>
<div class="form-row">
<button type="submit">Submit Form</button>
</div>
</form>
By default when the page is displayed only the input number is displayed and I want it to be displayed by default.
How can I do that ?
Add value to both radio:
<input type="radio" name="radio" value="mobilemoney">
<input type="radio" name="radio" value="cash">
Jquery:
$('input[type="radio"]').click(function() {
if($(this).val() == 'mobilemoney') {
$('#mobilemoneynumber').show();
}
else {
$('#mobilemoneynumber').hide();
}
});
Radio is wrapped in the element 'form-row'. Which is the previous element of the parent of input element.
$('input[type="radio"]').click(function() {
if ($(this).attr('id') == 'mobilemoney') {
$(this).closest(".form-row").next().show();
} else {
$(this).closest(".form-row").next().hide();
}
});
Fiddle
closest(".form-row") will return the parent element which has the classname form-row

Categories