onclick not firing on first click (answer only in Plain Javascript)

onclick not firing on first click (answer only in Plain Javascript) - javascript

Here is my Html Code
<div>
<input type="checkbox" class="input-checkbox-correct" name="checkCheckbox"
onclick="addRightAnswer();">
<input type="text"
placeholder="Enter your option"
class="form-control-range-number"
id="get-radio-input5"
name="get-radio-input"><input
type="number" class="get-radio-input-number" value="0"
name="get-radio-input"/>
<button type="click" onclick="addMoreOptions(this)"><i
class="fa fa-plus-circle" aria-hidden="true"></i></button>
<button type="click" onclick="removeOptions(this)"><i
class="fa fa-minus-circle" aria-hidden="true"></i></button>
</div>
<div>
<input type="checkbox" class="input-checkbox-correct" name="checkCheckbox"
onclick="addRightAnswer();">
<input type="text"
placeholder="Enter your option"
class="form-control-range-number"
id="get-radio-input5"
name="get-radio-input">
<input
type="number" class="get-radio-input-number" value="0"
name="get-radio-input"/>
<button type="click" onclick="addMoreOptions(this)"><i
class="fa fa-plus-circle" aria-hidden="true"></i></button>
<button type="click" onclick="removeOptions(this)"><i
class="fa fa-minus-circle" aria-hidden="true"></i></button>
</div>
<div>
<input type="checkbox" class="input-checkbox-correct" name="checkCheckbox"
onclick="addRightAnswer();">
<input type="text"
placeholder="Enter your option"
class="form-control-range-number"
id="get-radio-input5"
name="get-radio-input">
<input
type="number" class="get-radio-input-number" value="0"
name="get-radio-input"/>
<button type="click" onclick="addMoreOptions(this)"><i
class="fa fa-plus-circle" aria-hidden="true"></i></button>
<button type="click" onclick="removeOptions(this)"><i
class="fa fa-minus-circle" aria-hidden="true"></i></button>
</div>
<div>
<input type="checkbox" class="input-checkbox-correct" name="checkCheckbox"
onclick="addRightAnswer();">
<input type="text"
placeholder="Enter your option"
class="form-control-range-number"
id="get-radio-input5"
name="get-radio-input">
<input
type="number" class="get-radio-input-number" value="0"
name="get-radio-input"/>
<button type="click" onclick="addMoreOptions(this)"><i
class="fa fa-plus-circle" aria-hidden="true"></i></button>
<button type="click" onclick="removeOptions(this)"><i
class="fa fa-minus-circle" aria-hidden="true"></i></button>
</div>
This is my Javascript Code
function addRightAnswer() {
var getRadioOptionsNumberCheck = document.querySelectorAll('.input-checkbox-correct');
var getRadioInputNumber = document.querySelectorAll('.get-radio-input-number');
getRadioOptionsNumberCheck.forEach(function(current, index) {
current.addEventListener('click', function() {
if (current.checked) {
getRadioInputNumber[index].value = 1; //
}
else
{
getRadioInputNumber[index].value = 0;
}
});
});
}
initially value is 0 after one click value wiill increase by 1 , but in my case everything is working But First click on Checkbox value is not increasing in 2nd click value is increasing

You don't need to add an Event Listener if you already call addRightAnswer() on click.
Right now when you click the checkbox, you add the event listener, which will then modify the input value at the next click.
function addRightAnswer() {
var getRadioOptionsNumberCheck = document.querySelectorAll('.input-checkbox-correct');
var getRadioInputNumber = document.querySelectorAll('.get-radio-input-number');
getRadioOptionsNumberCheck.forEach(function(current, index) {
if (current.checked) {
getRadioInputNumber[index].value = 1; //
} else {
getRadioInputNumber[index].value = 0;
}
});
}
<div><input type="checkbox" class="input-checkbox-correct" name="checkCheckbox" onclick="addRightAnswer();"><input type="text" placeholder="Enter your option" class="form-control-range-number" id="get-radio-input5" name="get-radio-input"><input type="number"
class="get-radio-input-number" value="0" name="get-radio-input" /><button type="click" onclick="addMoreOptions(this)"><i class="fa fa-plus-circle" aria-hidden="true"></i></button><button type="click" onclick="removeOptions(this)"><i class="fa fa-minus-circle" aria-hidden="true"></i></button></div>

Related

one search input multiple names

So I am working on a website where you have one search bar and you can search with multiple websites like google, amazon, youtube and some more. My problem is, that all this is in one form and I can't use the name="q" which is working on the most search api's on amazon and wikipedia, because there are the names k (amazon) and search (wikipedia). Does anyone know how to change the name f the input for two buttons?
Here's the link: https://multi-search.bss.design/
<form target="_blank">
<input class="form-control visible" type="search" name="q" autofocus="" autocomplete="off" id="input" placeholder="Search...">
<button class="btn btn-primary btn-circle" type="submit" value="Google" formaction="http://www.google.de/search" target="_blank" value="Google"><span><i class="fa fa-google animated" ></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="YouTube" formaction="https://www.youtube.com/search" target="_blank"><span><i class="fa fa-youtube-play animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Amazon" formaction="https://www.amazon.de/s/" target="_blank"><span><i class="fa fa-amazon animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Google Translate" formaction="https://translate.google.com/#auto/de/" target="_blank"><span><i class="fas fa-language animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Google Images" formaction="http://www.google.com/images?q"><span><i class="fa fa-image animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Netflix" formaction="https://www.netflix.com/search?q"><span><i class="fa fa-film animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Wikipedia" formaction="https://en.wikipedia.org/w/index.php?"><span><i class="fa fa-wikipedia-w animated"></i></span></button>
</form>

You could simply store a data- attribute on each button representing the corresponding name attribute (defaulting to q) and change it dynamically upon click.
e.g. :
<button ... type="submit" value="Wikipedia" data-search-input-name="search">
document.querySelectorAll('button[type="submit"]').forEach(function(submitButton) {
submitButton.addEventListener('click', function(e) {
document.querySelector('[data-input-search]').setAttribute('name',
this.getAttribute('data-search-input-name') || 'q');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input data-input-search class="form-control visible" type="search" name="q" autofocus="" autocomplete="off" id="input" placeholder="Search...">
<button class="btn btn-primary btn-circle" type="submit" value="Google" formaction="http://www.google.de/search" target="_blank" value="Google"><span><i class="fa fa-google animated" ></i></span>Google</button>
<button class="btn btn-primary btn-circle" type="submit" value="YouTube" formaction="https://www.youtube.com/search" target="_blank"><span><i class="fa fa-youtube-play animated"></i></span>YouTube</button>
<button class="btn btn-primary btn-circle" type="submit" value="Amazon" formaction="https://www.amazon.de/s/" data-search-input-name="k" target="_blank"><span><i class="fa fa-amazon animated"></i></span>Amazon</button>
<button class="btn btn-primary btn-circle" type="submit" value="Google Translate" formaction="https://translate.google.com/#auto/de/" target="_blank"><span><i class="fas fa-language animated"></i></span>Translate</button>
<button class="btn btn-primary btn-circle" type="submit" value="Google Images" formaction="http://www.google.com/images?q"><span><i class="fa fa-image animated"></i></span>Images</button>
<button class="btn btn-primary btn-circle" type="submit" value="Netflix" formaction="https://www.netflix.com/search?q"><span><i class="fa fa-film animated"></i></span>Netflix</button>
<button class="btn btn-primary btn-circle" type="submit" value="Wikipedia" formaction="https://en.wikipedia.org/w/index.php?" data-search-input-name="search"><span><i class="fa fa-wikipedia-w animated"></i></span>Wikipedia</button>
</form>
Note: only Wikipedia button works here as Google/Amazon block that from an iframe, but you can test Wikipedia.

You can for example:
1. Add hidden fields
<input type="search" name="q" onkeyup="updateHiddenFields()">
<input type="hidden" name="k">
and synchronize then using JS code:
const updateHiddenFields = (evt) => {
document.getElementsByName('k')[0].value = document.getElementsByName('q') .[0].value
};
2. Rename field when button is clicked:
document.getElementById('button-amazon')[0].onclick = () => document.getElementsByName('q')[0].setAttribute('name', 'k');
(Add id="button-amazon" to the Amazon button to make this working.)

Bootstrap Prepend Button to Dynamic Input

I'm updating some content on a website running Bootstrap 2.0.4 (I know it's dated but don't have the time to update it yet!).
I'm trying to prepend a button on to an input element. When the button is clicked I'm adding another button dynamically below it using jquery, I need this also to have the button prepended.
I've created a fiddle, would appreciate any help.
HTML
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
JQUERY
$(document).ready(function() {
$(".add-more").click(function() {
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});

Check updated snippet below....
$(".add-more").click(function() {
var html = $(".copy-fields").html();
$(".after-add-more").before(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>

Javascript changing input field diables button

I have a html code:
<div class="fieldWrapper">
<label for="id_planner_step_email_address">To:</label>
<input type="email" name="planner_step_email_address" value="a#sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" />
<span>
<a href=""><button type="button" class="btn-secondary" id="send_email_btn>
<i class="fas fa-envelope-square"></i> Send Email:
</button></a>
</div>
How do i make it so that if theres any changes made to the id_planner_step_email_address input field the send_email_btn gets disabled

Why not make it readonly?
Anyway - I fixed your invalid HTML -no need to wrap a button in an anchor and you had a lose span there
I allow changing if they change back
jQuery:
$(function() {
$("#send_email_btn").prop("disabled", false);
$("#id_planner_step_email_address").on("input", function() {
$("#send_email_btn").prop("disabled", this.value!=this.defaultValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fieldWrapper">
<label for="id_planner_step_email_address">To:</label>
<input type="email" name="planner_step_email_address" value="a#sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" />
<button type="button" class="btn-secondary" id="send_email_btn" disabled="disabled">
<i class="fas fa-envelope-square"></i> Send Email: </button>
</div>
Plain JS
window.addEventListener("load",function() {
document.getElementById("send_email_btn").disabled=false;
document.getElementById("id_planner_step_email_address").addEventListener("input", function() {
document.getElementById("send_email_btn").disabled=this.value!=this.defaultValue;
});
});
<div class="fieldWrapper">
<label for="id_planner_step_email_address">To:</label>
<input type="email" name="planner_step_email_address" value="a#sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" />
<button type="button" class="btn-secondary" id="send_email_btn" disabled="disabled">
<i class="fas fa-envelope-square"></i> Send Email: </button>
</div>

Here the code allows the disabled button to back to enable if the email gets back to its original address.
var currentEmail = $("#id_planner_step_email_address").val();
$(function() {
$("#id_planner_step_email_address").on("input", function() {
if (currentEmail != $(this).val()) {
$("#send_email_btn").prop("disabled", true);
} else {
$("#send_email_btn").prop("disabled", false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fieldWrapper">
<label for="id_planner_step_email_address">To:</label>
<input type="email" name="planner_step_email_address" value="a#sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" />
<button type="button" class="btn-secondary" id="send_email_btn">
<i class="fas fa-envelope-square"></i> Send Email: </button>
</div>

Add a script tag to the end of your body...and note that your <span> tag is not closed.
<div class="fieldWrapper">
<label for="id_planner_step_email_address">To:</label>
<input type="email" name="planner_step_email_address" value="a#sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" />
<span>
<a href="">
<button type="button" class="btn-secondary" id="send_email_btn">
<i class="fas fa-envelope-square"></i> Send Email:
</button>
</a>
</span>
</div>
<script>
const input = document.querySelector('#id_planner_step_email_address');
const button = document.querySelector('#send_email_btn');
input.addEventListener('change', button.disabled = true);
</script>

First of all fix your invalid HTML, missing some of the ending quotes ".Then you can try this way with inline oninput event or input on text element,
With inline usingoninput:
function disableButton() {
document.getElementById("send_email_btn").disabled = true;
}
<div class="fieldWrapper">
<label for="id_planner_step_email_address">To:</label>
<input type="email" name="planner_step_email_address" value="a#sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" oninput="disableButton()" />
<span>
<a href=""><button type="button" class="btn-secondary" id="send_email_btn">
<i class="fas fa-envelope-square"></i> Send Email:
</button></a>
</div>
Without inline using input:
window.addEventListener('load', function() {
document.getElementById('id_planner_step_email_address').addEventListener('input', function() {
document.getElementById("send_email_btn").disabled = true;
})
})
<div class="fieldWrapper">
<label for="id_planner_step_email_address">To:</label>
<input type="email" name="planner_step_email_address" value="a#sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" />
<span>
<a href=""><button type="button" class="btn-secondary" id="send_email_btn">
<i class="fas fa-envelope-square"></i> Send Email:
</button></a>
</div>

How to differentiate between multiple inputs with the same class inside loop using jQuery or Javascript

I am using the following jQuery to add and take away increments of 1 into an input box.
$(function(){
$('button.quantity-increment').on('click', function(){
var form = $(this).closest('form');
if($(this).hasClass('quantity-left-minus')){
form.find('input.quantity').val(parseInt(form.find('input.quantity').val()) - 1);
} else {
form.find('input.quantity').val(parseInt(form.find('input.quantity').val()) + 1);
}
$('a.add_to_cart_variable').attr('data-quantity', form.find('input.quantity').val());
logDataQuantityAttribute();
});
form.find('input.quantity').on('keyup', function(){
$('a.add_to_cart_variable').attr('data-quantity', this.value);
logDataQuantityAttribute();
});
});
The form below is inside of a Wordpress loop. So when I click the plus and minus increment buttons currently it changes all of the input values.
Is there anyway to just increment the input inside the same form as the plus and minus glyphs are in?
<form class="cart-num" action="index.html" method="post">
<input type="text" name="quantity" class="form-control input-number quantity" value="1" min="1" max="100">
<span class="input-group-btn">
<button type="button" class="quantity-left-minus quantity-increment btn btn-number" data-type="minus" data-field="">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<span class="input-group-btn">
<button type="button" class="quantity-right-plus quantity-increment btn btn-number" data-type="plus" data-field="">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</form>

Since you have mentioned that The form below is inside of a Wordpress loop so i think that the id will be repeated for the form elements. So it is a bad idea to set your JQuery logic by referencing the id of the element. Thus you can use this code to be on the safe side:
$(document).ready(function(){
$('.quantity-right-plus').click(function(e){
// Stop acting like a button
e.preventDefault();
var inputField = $(this).closest('form').find('input[type="text"]');
// Get its current value
var currentVal = parseInt($(inputField).val());
// If is not undefined
if (!isNaN(currentVal)) {
// Increment
$(inputField).val(currentVal + 1);
} else {
// Otherwise put a 0 there
$(inputField).val(0);
}
});
$(".quantity-left-minus").click(function(e) {
// Stop acting like a button
e.preventDefault();
//get the text field to be changed
var inputField = $(this).closest('form').find('input[type="text"]');
// Get its current value
var currentVal = parseInt($(inputField).val());
// If it isn't undefined or its greater than 0
if (!isNaN(currentVal) && currentVal > 0) {
// Decrement one
$(inputField).val(currentVal - 1);
} else {
// Otherwise put a 0 there
$(inputField).val(0);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="cart-num" action="index.html" method="post">
<input type="text" id="quantity" name="quantity" class="form-control input-number" value="1" min="1" max="100">
<span class="input-group-btn">
<button type="button" class="quantity-left-minus btn btn-number" data-type="minus" data-field="">
<span class="glyphicon glyphicon-minus">-</span>
</button>
</span>
<span class="input-group-btn">
<button type="button" class="quantity-right-plus btn btn-number" data-type="plus" data-field="">
<span class="glyphicon glyphicon-plus">+</span>
</button>
</span>
</form>
You can notice that i have used input[type="text"] as a selector to find the element. Not an id as in loop this id will be same and will give you incorrect result if you reference the element by id in your JQuery code.

Yes there is a way use jquery selectors, first of all
Select form of clicked glyphicon with:
$('span.glyphicon').on('click', function(){
var form = $(this).parents('form.cart-num');
});
Then you can do finding within form, and increment only input within this form.
$(function(){
$('span.glyphicon').on('click', function(){
var form = $(this).parents('form.cart-num');
if($(this).hasClass('glyphicon-minus')){
form.find('input#quantity').val(parseInt(form.find('input#quantity').val()) - 1);
} else {
form.find('input#quantity').val(parseInt(form.find('input#quantity').val()) + 1);
}
$('a.add_to_cart_variable').attr('data-quantity', form.find('input#quantity').val());
logDataQuantityAttribute();
});
$('input#quantity').on('keyup', function(){
$('a.add_to_cart_variable').attr('data-quantity', this.value);
logDataQuantityAttribute();
});
});
Working example:
$(function(){
$('span.glyphicon').on('click', function(){
var form = $(this).parents('form.cart-num');
if($(this).hasClass('glyphicon-minus')){
form.find('input').val(parseInt(form.find('input').val()) - 1);
} else {
form.find('input').val(parseInt(form.find('input').val()) + 1);
}
//$('a.add_to_cart_variable').attr('data-quantity', form.find('input').val());
//logDataQuantityAttribute();
});
$('input#quantity').on('keyup', function(){
//$('a.add_to_cart_variable').attr('data-quantity', this.value);
logDataQuantityAttribute();
});
});
button { padding: 0px; border: none; background: transparent; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="cart-num" action="index.html" method="post">
<input type="text" id="quantity" name="quantity" class="form-control input-number" value="1" min="1" max="100">
<span class="input-group-btn">
<button type="button" class="quantity-left-minus btn btn-number" data-type="minus" data-field="">
<span class="glyphicon glyphicon-minus">-</span>
</button>
</span>
<span class="input-group-btn">
<button type="button" class="quantity-right-plus btn btn-number" data-type="plus" data-field="">
<span class="glyphicon glyphicon-plus">+</span>
</button>
</span>
</form>
<form class="cart-num" action="index.html" method="post">
<input type="text" id="quantity" name="quantity" class="form-control input-number" value="1" min="1" max="100">
<span class="input-group-btn">
<button type="button" class="quantity-left-minus btn btn-number" data-type="minus" data-field="">
<span class="glyphicon glyphicon-minus">-</span>
</button>
</span>
<span class="input-group-btn">
<button type="button" class="quantity-right-plus btn btn-number" data-type="plus" data-field="">
<span class="glyphicon glyphicon-plus">+</span>
</button>
</span>
</form>

Find Value of textarea from closest row of table

I have a button Update in One td I want to fetch value of both textarea of td from same tr.
There are lots of tr so I have to use closest() method to find element. I have tried to find element but it's not working.
HTML :-
<tr>
<td>
<div class="agenda-date">
<div class="dayofmonth color_font_date">2017-05-31</div>
<div class="dayofweek">
Wednesday
</div>
</div>
</td>
<td>
<div class="row margin_two_planner">
<button type="button" class="btn btn-sm btn-primary">AM </button>
<a data-toggle="modal" href="#add_apt_status" class=""><input type="number" value="3" name="" class="number_planner"></a>
<label class="control-label"> 6 </label>
</div>
<div class="row margin_two_planner">
<button type="button" class="btn btn-sm btn-primary">PM </button>
<a data-toggle="modal" href="#add_apt_status" class=""><input type="number" value="4" name="" class="number_planner"></a>
<label class="control-label"> 2 </label>
</div>
</td>
<td style="width: 20%;">
<textarea id="" class="form-control initial_cap appointment_note" required="required" rows="3" name="appointment_note" cols="50" aria-required="true" disabled=""> APT -1 </textarea>
</td>
<td style="width: 20%;">
<textarea id="" class="form-control initial_cap holiday_note" required="required" rows="3" name="holiday_note" cols="50" aria-required="true" disabled=""> Holiday - 1 </textarea>
</td>
<td>
<div class="text-right">
<button type="button" id="" class="btn btn-primary appointment_edit_button">Edit </button>
<button type="button" id="" onclick="planner_note_edit(1)" class="btn btn-md btn-primary appointment_update_button" style="display:none"> Update </button>
<button type="button" id="" class="btn btn-md btn-cancel appointment_cancel_button" style="display:none">Cancel </button>
</div>
</td>
</tr>
Jquery :-
function planner_note_edit(planner_note_id)
{
appointment_note = $(this).closest('td').find(".holiday_note").val();
alert(appointment_note);
}
But I'm not able to fetch value of textarea from closest td.

You should get the textarea from current row.
So, please use .closest('tr')
appointment_note = $(this).closest('tr').find(".holiday_note").val();
Also, you have to pass the clicked button object. this in your function is a reference to the window object.
function planner_note_edit(planner_note_id,event)
{
appointment_note = $(event.target).closest('td').find(".holiday_note").val();
alert(appointment_note);
}
HTML
<button type="button" id="" onclick="planner_note_edit(1,event)" class="btn btn-md btn-primary appointment_update_button" style="display:none"> Update </button>

Develop Reference

JavaScript is the programming language of the Web.

onclick not firing on first click (answer only in Plain Javascript) - javascript

Related

one search input multiple names

Bootstrap Prepend Button to Dynamic Input

Javascript changing input field diables button

How to differentiate between multiple inputs with the same class inside loop using jQuery or Javascript

Find Value of textarea from closest row of table

Categories

Resources