Here is an input field. which returned from an ajax response, and then appended to another div.
Now I want when on any checkbox a user clicks a button with some data will be appended to a specific div.
<input name="new" onclick="showButton()" value=1 type="checkbox" id="switchButton" data-id="' + order.id + '" data-toggle="toggle">
This is the div where i want to append the button.
<div id="setBgColor" class="px-1 py-1 shadow"
style="height: 600px;width: 320px;position: relative;border: solid black 15px;
border-radius: 24px; background-color: #7ecff4;margin-top: -70px;">
first i tried the custom function but it doesnt work properly.
function showButton() {
$('#setBgColor').html('<div><button type="button" class="btn btn-sm btn-block btn-primary"> </button></div>');
}
Then I tried this jquery code but it also does nothing.
$('#switchButton').on('click').each(function(){
$('#setBgColor').html('<div><button type="button" ckass="btn btn-sm btn-block btn-primary"> </button></div>');
});
You don't need to define event using jquery. Replace onclick with onchange on input tag
Since we are using checkbox, we need to use onchange event
Can you try
<input name="new" onchange="showButton()" value=1 type="checkbox" id="switchButton" data-id="' + order.id + '" data-toggle="toggle">
Related
How do I click on this button, without ID or Name:
<input type="submit" class="btn float_right btn" style="margin-top: 10px; margin-bottom: 10px;" value="Calcular" />
I've tryed:
document.getElementsByClassName("btn float_right btn").click()
and
document.getElementsByClassName("btn float_right btn")[0].click()
without sucess.
The console gives the error:
ERROR: Execution of script 'PP$1s' failed! document.getElementsByClassName(...).click is not a function
Try to have the most specific selector, in order to avoid "clicking" on something else…
document.querySelector('input[value="Calcular"]').click();
Demo: https://jsfiddle.net/3v7hd2vx/420/
You can use querySelector() and target one specific element by classes. If you want more specific selector you can use something like this input[type="submit"].btn.float_right
document
.querySelector('.btn.float_right')
.addEventListener('click', function() {
console.log(this.value)
})
<input type="submit" class="btn float_right btn" style="margin-top: 10px; margin-bottom: 10px;" value="Calcular" />
document.getElementsByClassName("btn float_right")[0].click();
<input onclick='alert("You clicked!")' type="submit" class="btn float_right" style="margin-top: 10px; margin-bottom: 10px;" value="Calcular" />
Its's not an issue but class btn was repeated
You can check by using this for get correct DOM.
console.log(document.getElementsByClassName("btn float_right")[0]);
if there are other DOMs that have "classname" attribute name like it, you can not get coreect DOM.
I am cloning a hidden input-group into a table: JSFiddle
input-group:
<div id="protoTextInput" class="input-group">
<input type="text" class="form-control input-sm" value="tw.local." />
<span class="input-group-btn">
<button type="button" class="btn btn-info btn-sm" onclick="autoVar(this);"><i class="glyphicon glyphicon-flash"></i></button>
</span>
</div>
js-clone:
var filterTable = $('#filterTable').find('tbody');
var i = (filterTable.find('tr').length + 1);
filterTable.append(
'<tr><td>' + i + '</td><td>Test</td><td>' + '</td><td></td>' + '<td><button onclick="remColumnFromFilters(this);" type="button" title="remove from filters" class="btn btn-danger btn-sm"><i class="glyphicon glyphicon-trash"></i> remove</button></td></tr>'
);
// Add operator select
filterTable.find('tr:last td:nth-child(3)').append(
$('#protoOperators').clone().attr('id', 'operator_' + i).show()
);
// Add Input for value
filterTable.find('tr:last td:nth-child(4)').append(
$('#protoTextInput').clone().attr('id', 'txt_' + i).show()
);
But the input-group gets destroyed (breaks between input and button).
Any idea why?
So apparently, when I was first creating this on JSFiddle I used a newer version of jQuery and everything worked. - what the hell?
In my code I used jQuery v1.11.2 which caused the break. v3.2.1 works as wanted.
So this stays here for anyone running in the same problem.
You can style the input inside the table to not take 100% width and it will solve your styling problem:
#filterTable input.form-control.input-sm {
width: calc(100% - 50px);
}
Here is a working example:
https://jsfiddle.net/57ozm4no/2/
When page starts, jQuery produce a form that I want it to be hidden. Because I want to show it when I click on a button.
With these instructions I create the form:
$("#cards").append('<li id="card" class="feed-element animated fadeInRight" style="color: grey" data-user="' + key + '">\n\
<button id="previewCard" type="button" value = "' + key + '" class="btn btn-primary btn-sm btn-block btn-xs">' + preview + '</li>\n\
<form id="cardFormDetail" class="animated fadeInRight">\n\
<div class="form-group">\n\
<input id="customerCardDate" class="form-control" type="text">\n\
</div>\n\
<div class="form-group">\n\
<input id="customerCardScope" class="form-control" type="text">\n\
</div>\n\
<div class="form-group">\n\
<textarea id="customerCardText" class="form-control" rows="5"></textarea>\n\
</div>\n\
</form>\n\
<button id="modifiedCard" type="button" value = "' + key + '" class="btn btn-primary btn-xs pull-left">Modified</button>\n\
<button id="deleteRequestCard" type="button" value = "' + key + '" class="btn btn-primary btn-xs pull-right">Delete</button>\n\
<br><hr style="border-color: #c80b00;">');
When page starts cardFormDetail form is visible. How can I make it not visible?
I tried with $("#cardFormDetail").hide() but it doesn't work. And the reason is because it is a dynamic element, right?
Since you want to hide it on load, pls use CSS as opposed to jQuery unless there is a reason to justify why you want to do it so.
#cardFormDetail { display: none; }
put your code which hides the form after the code where it appends the element to the.
Another things is you are appending an element with the same id 'cards' to an existing element which has the same id.
It doesn't matter if your element is dynamically added, you should always be able to hide it using jquery.
Can you post the whole code?
on this page, I'm want to change "sold out" on the button to "coming soon", and then have this link to a new page.
how would i do this?
HTML
<input type="submit" value="Sold Out" id="add" class="btn add-to-cart disabled" disabled="disabled" style="opacity: 0.5;">
Some Jquery
$(e.target).find(selectors.SUBMIT_ADD_TO_CART).attr('disabled', true).addClass('disabled');
Well, change the value to coming soon.
<input type="submit" value="Coming Soon!" id="add" class="btn add-to-cart disabled" disabled="disabled" style="opacity: 0.5;">
Next in your form change the action.
<form action="NEW PAGE HERE">
Did you mean you want to do this with Jquery..?
$('.add-to-cart').on('click', function(e){
var $this = $(this);
if ($this.is(':disabled')) {
$this.prop('disabled', false);
$this.val('Coming Soon!');
e.preventDefault();
} else {
/* do logic to go to other page if needed */
}
});
to change value for submit input
$('#add').val('Coming soon!');
or
$('#add').attr('value','Coming Soon!');
i am using bootstrap btngroup to select one value ..how can i display that selected value ?? here is my code.
<div class="input-group">
<div id="radioBtn" class="btn-group">
<a class="btn btn-primary btn-sm active" data-toggle="fun" data- title="Y">YES</a>
<a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="X">I don't know</a>
<a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="N">NO</a>
</div>
<input type="hidden" name="fun" id="fun">
</div>
and JS
$('#radioBtn a').on('click', function(){
var sel = $(this).data('title');
var tog = $(this).data('toggle');
$('#'+tog).prop('value', sel);
$('a[data-toggle="'+tog+'"]').not('[data- title="'+sel+'"]').removeClass('active').addClass('notActive');
$('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active');
})
Tidy your code - remove the spaces in your data- title attribute, in both the HTML and JS, as these are causing it to break.
Add a <div id="display"></div> in your HTML somewhere and style it how you like.
Add this line to your JS click handler: $('#display').html(sel);
Here's a demo.
If you'd prefer the result to be the text of the radio button instead of the value, use $('#display').html($(this).html()); instead in step 3.
Done.
Not sure if this is what you mean, but to get the value (or text) from a clicked button in a button group, I use for example.....
HTML
<div id="aBtnGroup" class="btn-group">
<button type="button" value="L" class="btn btn-default">Left</button>
<button type="button" value="M" class="btn btn-default">Middle</button>
<button type="button" value="R" class="btn btn-default">Right</button>
</div>
<p>
<div>Selected Val: <span id="selectedVal"></span></div>
JS
$(document).ready(function() {
// Get click event, assign button to var, and get values from that var
$('#aBtnGroup button').on('click', function() {
var thisBtn = $(this);
thisBtn.addClass('active').siblings().removeClass('active');
var btnText = thisBtn.text();
var btnValue = thisBtn.val();
console.log(btnText + ' - ' + btnValue);
$('#selectedVal').text(btnValue);
});
// You can use this to set default value upon document load
// It will fire above click event which will do the updates for you
$('#aBtnGroup button[value="M"]').click();
});
CONSOLE OUTPUT
Left - L
Middle - M
Right - R
Hope this helps
Plunker here