Including Javascript for button click in Jade - javascript

I am having trouble detecting a button click using Node.js, Bootstrap and Jade.
I have the following Jade code but I am not seeing the log from the onclick method and there is no change to the button. So the method never gets called.
extends layout
block content
.jumbotron
.container
h1= title
p Enter the url of the file to be sent
form#formInputURL(name="chooser",method="post",action="/chooser",)
input#inputURL(type="text", placeholder="insert url", name="chooseurl")
button#btnSubmit(type="submit") submit
p
.btn-group(data-toggle='buttons')
label.btn.btn-primary.active
input#option1(type='checkbox', autocomplete='off', checked='')
| Radio 1 (preselected)
|
label.btn.btn-primary
input#option2(type='checkbox', autocomplete='off')
| Radio 2
|
label.btn.btn-primary
input#option3(type='checkbox', autocomplete='off')
| Radio 3
script.
$('#option2').on('click', function () {
console.log("clicked")
$(this).button('toggle')
})

your code is working fine,
make sure you're clicking on the right element (checkbox).
have a look at this example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron">
<div class="container">
<h1></h1>
<p>Enter the url of the file to be sent</p>
<form id="formInputURL" name="chooser" method="post" action="/chooser">
<input id="inputURL" type="text" placeholder="insert url" name="chooseurl" />
<button id="btnSubmit" type="submit">submit</button>
<p></p>
<div data-toggle="buttons" class="btn-group">
<label class="btn btn-primary active">
<input id="option1" type="checkbox" autocomplete="off" checked="" /> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input id="option2" type="checkbox" autocomplete="off" /> Radio 2
</label>
<label class="btn btn-primary">
<input id="option3" type="checkbox" autocomplete="off" /> Radio 3
</label>
</div>
</form>
</div>
</div>
<script>
$('#option2').on('click', function() {
alert("clicked")
})
</script>

Related

How can I remove the HTML document`s content only leaving a chosen part of the document with JavaScript?

I am making a simple quiz making website for my portfolio. There are two buttons for adding questions and answers, when you add questions and answers underneath the fieldset containing the "add question/answer" buttons pops up a preview of the quiz you`ve made. After you add some questions and answers you can press a "create" button on the bottom of the page. I want to add an eventListener to that button so that when it is pressed everything besides the "preview" fieldset is cleared from the document. Is there an easier way than removing all elements with the body.removeChild()?
Thanks for any replies this recieves. I am new to stackoverflow so I apologize if a break an unwritten rule with the way I structured my question.
The code in question:
<body id="quiz-body">
<h1>Let`s make a quiz</h1>
<form id="quiz-form">
<fieldset class="quiz-type" id="quiz-type">
<label>Will this quiz be anonymous:</label>
<label for="anonymous-quiz"
><input
id="anonymous-quiz"
type="radio"
name="quiz-type"
class="inline"
value="anonymous"
checked
/>
Yes, do not require participant name.</label>
<label for="non-anonymous-quiz"
><input
id="non-anonymous-quiz"
type="radio"
name="quiz-type"
class="inline"
value="non-anonymous"
/>
No, do require participant name.</label
>
</fieldset>
<fieldset class="fieldset">
<label>Add a question:</label>
<input type="text" id="question-input">
<button type="button" id="add-question" class="add__Question"><span class="material-symbols-outlined">
add
</span></button>
</fieldset>
<fieldset id="answersDisplay" class="answers__Display">
<p id="added-question"></p>
<label>Add answer:</label>
<input type="text" id="answer">
<label for="true">
<input class="check" id="true-answer" type="radio" name="answer-value" value="true" checked>True</label>
<label for="false">
<input class="check" id="false-answer" type="radio" name="answer-value" value="false">False</label>
<button type="button" id="add-answer" class="add__Answer"><span class="material-symbols-outlined">
add
</span></button>
</fieldset>
</fieldset>
<div id="preview-container">
<h2>Preview</h2>
<fieldset id="preview">
<input type="text" id="name-input" placeholder="Please enter your name">
</fieldset>
</label>
</div>
<button id="create-quiz">Create</button>
<script type="text/javascript" src="quiz.js"></script>
</form>
</body>
I wish to remove everything besides the "preview-container" div. I apologise for the monstrosity that this is.
Try this one
buttonId.onclick = () => {
const element = document.getElementById("elementID");
element.innerHTML = '';
// or
element.style.display = 'none';
}
<div id='elementID'>
<span>Hello</span>
<span>Test</span>
</div>
<button id='buttonId'>Remove via innerHTML</button>

jquery not catching selector of input by name

I'm trying to toggle between 2 divs and I can't even get through the first challenge... to catch the radiobutton click event with jQuery selector.
$("input[name='radio_btn_options']").on("click", function(){
debugger;
alert("1234");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle" style="margin:15px" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="radio_btn_options" id="diagramRB" autocomplete="off" checked> Diagram
</label>
<label class="btn btn-secondary">
<input type="radio" name="radio_btn_options" id="listRB" autocomplete="off"> List View
</label>
</div>
I don't get no error message no nothing. Nothing just happens have i done something wrong??

Disappearing a submit button after being clicked in html form

I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?
Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>
after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.

Pass value from one field to another

Got a 3 selection radio button options and also a number field, in case somebody wants to select more than radio buttons can offer. And i'm trying to pass a radio button value to the number field when radio value is changed.
Here is my html code for it
<!-- this is main add to cart form -->
<form>
<!-- and this is secondary form for radio buttons, so, only one could be selected -->
<form class="quanform">
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio1" value="1" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio2" value="2" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio3" value="3" name="quanline" />
</div>
</div>
</div>
</form>
<div class="newquanfield tablecell almiddle">
<input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="2" />
</div>
</form>
And this is my jquery code for it
$("form.quanform .pricelinewrap .priceline .pricelinecellval input[type=radio]").each(function(){
$(this).click(function(){
var quanval = $(this).val();
$(this).parents().find(".newquanfield input[type=number]").val(quanval);
});
});
Nothing happens and there are no errors in the console
The problem lies purely in your selector:
$("form.quanform) won't work, as your <form class="quanform"> is wrapped inside another <form>, which is invalid markup; <form> cannot be nested inside another <form>.
Because the 'desired' markup is invalid, it actually never gets added to the DOM. You can confirm this by viewing the source yourself with CTRL + U - <form class="quanform"> doesn't exist. Thus, you cannot target it with jQuery.
You can validate your markup with the W3 Validation service to ensure that your HTML is indeed valid, ensuring that your jQuery selectors work the way you expect.
As for your current structure, you can omit the .quanform component, and simply use $("form .pricelinewrap .priceline .pricelinecellval input[type=radio]"), which will work based off of the outer <form> element (which does indeed exist in the DOM).
This can be seen working in the following example:
$("form .pricelinewrap .priceline .pricelinecellval input[type=radio]").each(function() {
$(this).click(function() {
var quanval = $(this).val();
$(this).parents().find(".newquanfield input[type=number]").val(quanval);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- this is main add to cart form -->
<form>
<!-- and this is secondary form for radio buttons, so, only one could be selected -->
<form class="quanform">
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio1" value="1" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio2" value="2" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio3" value="3" name="quanline" />
</div>
</div>
</div>
</form>
<div class="newquanfield tablecell almiddle">
<input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="2" />
</div>
</form>
Hope this helps! :)

How to show validation message after radio buttons?

I have two inline radio button in a form using Bootstrap. But when I validate it then the message showing inside of first radio button instead of showing after second radio button. I would like to show that radio button message like Email and password. Here is the screenshot of my form.
Without Validation:
With Validation:
HTML Form:
<form name="registration" action="">
<div class="signingInner">
<h4 style="font-weight: 500; text-align:center; font-size: 20px ">Sign in to your Account</h4>
<div class="form-group">
<label for="emailId">Email Address:</label>
<input type="text" class="form-control" id="login_email" name="login_email" placeholder="Please enter Email address">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" name="login_password" id="login_password" placeholder="●●●●●●">
</div>
<div class="form-group">
<div class="radio-inline" style="padding-left: 100px;">
<input type="radio" id="user" name="LoginMode" value="user" >
As <strong>User</strong> </>
</div>
<div class="radio-inline" style="padding-left: 30px;">
<input type="radio" id="company" name="LoginMode" value="company" >
As <strong>Company</strong></>
</div>
</div>
<input type="submit" name="btnLogin" class="btn btn-lg btn-primary btn-block" value="Login"></input>
</div>
</form>
Plunker Link:
https://plnkr.co/edit/0vpvU9QbRu8Mlwbi04ti?p=preview
The trick is to use errorPlacement callback function.
So I am checking whether the rendered type is radio button then I am tracking the appropriate topmost parent div and inserting the message after that.
errorPlacement: function(error, element) {
if ( element.is(":radio") ) {
error.insertAfter( element.parent().parent().parent().parent());
}
else { // This is the default behavior of the script for all fields
error.insertAfter( element );
}
},
See the updated plunkr here.
And the output looks like
EDIT:
I have finally updated the original plunkr provided by you.

Categories

Resources