I need to know whether the selected element is input field or not.
As we know that input field in HTML is many. like input element, a div with content editable attr, textfield, etc., and i need to know whether my selected element is editable or not. some thing like this.
$(document).click(function(e){
if($(e.target).is('[contenteditable="true"]')){
alert("i am edit able");
}
});
in this it can able to say element is editable only if contenteditable="true" is present. So is there any common attr or property for editable file. if so answer, if not list out all possible editable text/
I think you can use :input selector
$(document).click(function(e) {
if ($(e.target).is('[contenteditable], :input:not(:button)')) {
snippet.log("i am editable: " + e.target.tagName);
console.log(this)
}
});
div {
border: 1px solid lightgrey;
}
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div contenteditable></div>
<input />
<textarea></textarea>
<select></select>
<div>some other content</div>
<button>Button</button>
<input type="button" value="T Button" />
<input type="reset" value="T Reset" />
<input type="submit" value="T Submit" />
Related
Why is my code not working? i need to simulate click on radio button. Radio button has click event.
$(".form-group").click(function() {
alert("clicked")
$(this).closest(".hotelObj", function() {
$(this).trigger("click");
})
});
.form-group {
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="male" style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Given the markup you've provided, javascript isn't necessary for this task, unless there's some other requirement you've left out.
Since the label contains all the area that you want the click handler to affect, it should just work as is (clicking anywhere in the pink box will cause the radio button to become selected).
.form-group {
background-color: pink;
}
<div class="form-group">
<label style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Your code is not working because you are using .closest() jquery method which will look for element starting from itself and then up in DOM tree.
This way element with class.hotelObj is never found.
You need to use .find() method to find .hotelObj, because it's inside .form-group.
$(".form-group").click(function() {
$(this)
.find(".hotelObj")
.trigger("click");
});
Try onClickHandled property
<input type="checkbox" onclick="onClickHandler()" id="box" />
<script>
function onClickHandler(){
var chk=document.getElementById("box").value;
//use this value
}
</script>
I want to send my forms by click on each submit button.
My question: How can i send each forms and indicate each result separately. I've tested the following code but it does not send any thing and there is no result in div with .divs:
$("form").on('submit',function(e) {
var url = 'http://seller.ir/test'
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function(data) {
$(this).find('.divs').empty
$(this).find('.divs').html(data)
}
});
e.preventDefault();
});
form{
width:100px;
border:1px solid blue;
height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="divs">
<form>
<button id="done"type="submit">done</button>
</form>
</div>
<div class="divs">
<form>
<button id="done" type="submit">done</button>
</form>
</div>
<div class="divs">
<form>
<button id="done" type="submit">done</button>
</form>
</div>
The only problem with your code is that your forms don't have .divs as their descendants. Please read the documentation of .find().
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
Change your HTML to
<form>
<button id="done"type="submit">done</button>
<div class="divs"></div>
</form>
<form>
<button id="done"type="submit">done</button>
<div class="divs"></div>
</form>
<form>
<button id="done"type="submit">done</button>
<div class="divs"></div>
</form>
Now, if you press the done button, the corresponding form will trigger its submit event, which will be handled by jQuery. Also, as other answers pointed out, IDs for different elements have to be unique for an HTML page.
If you're just replacing the contents of the inner div, this line is sufficient.
$(this).find('.divs').html(data);
You don't need to empty the div first.
I want to display the same div with different heading by checkbox hide/show.
$('#cbxShowHide').click(function() {
this.checked ? $('#block').show(1000) : $('#block').hide(1000);
});
#block {
display: none;
background: #eef;
padding: 10px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cbxShowHide" />
<label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" id="cbxShowHide1" />
<label for="cbxShowHide1">Show/Hide1</label>
<input type="checkbox" id="cbxShowHide2" />
<label for="cbxShowHide2">Show/Hide2</label>
<div id="block">Some text here</div>
in the above example on clicking on checkbox "Show/Hide"I am able to display the text "Some text here".
I want to do this for nth checkbox so that I can show "some text here" nth time like "some text here1", "some text here2"
refer the this jsfiddle. I have moved the content inside div in span
$('#cbxShowHide1').click(function(){
$('#block span').text("yyour new text for this div")
this.checked?$('#block').show(1000):$('#block').hide(1000);
});
Hope this helps
You are getting the click event only for a specific ID "cbxShowHide"
I changed it so the event would be from all input which ever is clicked
$('[type~=checkbox]').click(function(){
this.checked?$('#block').show(1000):$('#block').hide(1000);
});
$('[type~=checkbox]').click(function(){
this.checked?$('#block').show(1000):$('#block').hide(1000);
});
#block{display:none;background:#eef;padding:10px;text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" id="cbxShowHide1"/><label for="cbxShowHide">Show/Hide1</label>
<input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide">Show/Hide2</label>
<div id="block">Some text here</div>
First thing is that you need to use a class instead of an ID, then it will do that function for each individual checkbox,
Secondly remember that a for tag is specific to an ID so if you link an label to a checkbox make sure the two match.
Hope this example helps
$('.checkbox').click(function(){
if($(this).attr('id') == 'cbxShowHide')
{
$('#block').text('Some text here')
}
if($(this).attr('id') == 'cbxShowHide1')
{
$('#block').text('Some text here1')
}
if($(this).attr('id') == 'cbxShowHide2')
{
$('#block').text('Some text here2')
}
this.checked?$('#block').show(1000):$('#block').hide(1000);
});
#block{display:none;background:#eef;padding:10px;text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="checkbox" class='checkbox' id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" class='checkbox' id="cbxShowHide1"/><label for="cbxShowHide1">Show/Hide1</label>
<input type="checkbox" class='checkbox' id="cbxShowHide2"/><label for="cbxShowHide2">Show/Hide2</label>
<div id="block">Some text here</div>
Not so elegant, but i don't have much time..i hope i got what you meant
CSS
#block, #block1, #block2 {display:none;background:#eef;padding:10px;text-align:center;}
HTML
<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" id="cbxShowHide1"/><label for="cbxShowHide">Show/Hide1</label>
<input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide">Show/Hide2</label>
<div id="block"><span>Some text here</span></div>
<div id="block1"><span>Some text here 1</span></div>
<div id="block2"><span>Some text here 2</span></div>
JS
$('#cbxShowHide').click(function(){
this.checked?$('#block').show(1000):$('#block').hide(1000);
});
$('#cbxShowHide1').click(function(){
this.checked?$('#block1').show(1000):$('#block1').hide(1000);
});
$('#cbxShowHide2').click(function(){
this.checked?$('#block2').show(1000):$('#block2').hide(1000);
});
Try this Jsfiddle :jsfiddle.net/xs523nw8/6/
$("input[type='checkbox']").click(function(){
if($(this).is(":checked")){
$(this).siblings("input[type='checkbox']").removeAttr("checked");
$("#block").text('Some Text Here :'+$(this).index());
$("#block").show(1000)
}
else{
$("#block").hide(1000);
}
});
Check this fiddle https://jsfiddle.net/tz5ror3s/
I have added a class in checkboxes and bind click event on them and printing text inside block span.
$('.cbxShowHide').click(function() {
$('#block span').text('Some text here ' + $(".cbxShowHide:checked").length );
$('#block').show();
});
1. Toggling element's text
fiddle
Case: you want to just toggle the #block element text.
Fiddle uses type='radio' inputs rather than type='checkbox', as you have only one place where you toggle text, so selecting only one option at the time is better way to do it.
2. Showing elements based on checked checkboxes
fiddle
Case: you want multiple boxes hidden/shown based on checkbox input state(checked/unchecked).
On every state change, it loops through the checkboxes and:
For every checked one, it selects box with the same number and shows it
For every unchecked one, it select box with the same number and hides it
I have a datepicker in a div with class pickergroup, I have 3 datepicker in my page, and this is why I use a group and different names
<div class="pickergroup">
<input type="text" name="day1" id="day1"/> /
<input type="text" name="month1" id="month1"/> /
<input type="text" name="year1" id="year1"/>
<input type="hidden" id="date1" name="date1"/>
<div id="datepicker1" name="calendar"></div>
</div>
In my jquery I want to detect when clicking the id wich starts with "datepicker", I guess something like:
$(document).on('click', '.pickergroup id^="datepicker"', function() {
$(".pickergroup").find('[id^="datepicker"]').datepicker({
//my datepicker code
});
});
but this is not correct.
how can I do it?
The problem is how you're selecting the element inside of the event handler.
$(".pickergroup").find('[id^="datepicker"]')
means "find all elements with the class of pickergroup. Find all of their children which have an ID starting with datepicker." Instead, you want to use this and fix your selector from
.pickergroup id^="datepicker"
to
.pickergroup [id^="datepicker"]
$(document).on('click', '.pickergroup [id^="datepicker"]', function() {
var $this = $(this); // The div that was clicked
console.log($this.text());
});
.pickergroup div {
float: left;
margin-right: 1em;
width: 200px;
height: 200px;
background: #0F0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pickergroup">
<div id="datepicker1">A</div>
</div>
<div class="pickergroup">
<div id="datepicker2">B</div>
</div>
<div class="pickergroup">
<div id="datepicker3">C</div>
</div>
<div class="pickergroup">
<div id="can-t-click-me">D</div>
</div>
First of all, the datepicker element needs to be an input. And remember, ID's are unique. If you using starts with selector, it is ok. But please dont get confusing with this.
Second, why need seperate fields? You could use one datepicker, decide the format you want to display and you could also parse the returned value from the datepicker in the format you need/want. Please have a look at the documentation.
I have followed this threads:
how to open reply form under comments div;
Ck editor is not working after putting it in innerHTML to replace a div with the Ckeditor textarea
CKeditor with multible dynamic textareas
as a foundation in building a simple blog commenting application. The simple HTMl layout is shown below:
I am using the jQuery .toggle() function to hide, show the hidden comment form with jQuery.
I am also using the parent(); children() and next() jquery methods to traverse the DOM and select the textarea element of the displayed form so as to assign the 'name attribute' to it.
I then wish to replace the dynamic (textarea name="content") with a CKEditor instance.
However, when I toggle the comment form, (the name="content") attribute is assigned, but what appears is a simple textarea not with ckeditor enabled on it.
How can I make each new dynamically created textareas use CKeditor?
Note that when I hardcode the name='content' attribute value pair into any of the text areas, that textarea is converted into a rich text editor.
<div>
<div>
Some message over here
</div>
<div style = "height:10px;"> <a class="reply" id="myHeader1" href="javascript:showonlyone('newboxes1');" >Reply</a></div>
</div>
<div class ="replymsgbox" id="newboxes1">
<form id="frmComment" novalidate="novalidate" method="POST" name="frmComment">
<textarea id="comment_text" class=""></textarea>
</form>
</div>
<div>
<div>
Some message over here
</div>
<div style = "height:10px;"> <a class="reply" id="myHeader2" href="javascript:showonlyone('newboxes2');" >Reply</a></div>
</div>
<div class="replymsgbox" id="newboxes2">
<form id="frmComment" novalidate="novalidate" method="POST" name="frmComment">
<textarea id="comment_text" class="" ></textarea>
</form>
</div>
#Assign name attribute and toggle the comment form
<script src="views/js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
$('.replymsgbox').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
</script>
<script type="text/javascript">
$('a.reply').on("click", function(e){
$(this).parent("div").parent("div").next("div").children('form').children('textarea').attr( "name", "content" );
});
</script>
#Adding CKEditor to my Page
<script src="libraries/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if(CKEDITOR)
{
// Replace the <textarea name = "content"> with a CKEditor instance.
CKEDITOR.replace('content');
}
});
</script>