Good day, i've a trouble with my script. I want to make a dynamic field. Please kindly check my script first
$(document).ready(function() {
var max_fields = 10;
var wrapperss = $(".wrappers");
var add_button = $(".btn");
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
$(wrapperss).append('<div><input type="text" name="nama[]"/>Hapus</div>');
}
});
$(wrapperss).on("click",".hapus", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
<button class="btn">Tambah baris</button>
<?php echo form_open('inputbanyak/save'); ?>
<div class="wrappers">
<div><input type="text" name="nama[]"></div>
</div>
<input type='submit' class='button'>
<?php echo form_close(); ?>
By the way, i'm using bootstrap. when i press Tambah baris nothing change.
Multiple class selector is wrong, please remove the space and add . :
var add_button = $(".btn.tmbh");//$(".btn tmbh");
In addition, you can only use 1 css class (btn or tmbh) to target your button for action, you dont need both.
also one spelling mistake:
var wrapperss = $(".wrappers");//$(".wrapperss");
Of course they won't
First thing that you must really note is your css class naming.
Here is your css class, "btn tmbh".
<button class="btn tmbh">
In css this means you are using 2 css class, first btn class, and second is tmbh class. But eventhough you are using those css class by that way, you are still make some mistakes in your jquery path for this code
var add_button = $(".btn tmbh");
I dont really got what do you want to try, but I can guess what do you want.
Here we go...
may be you want to define your button class ass ".btn_tmbh" then you call that css class in your jquery code like this
varr add_button = $(".btn_tmbh")
But if you want to treat your css class as 2 different class that would be come as composite identifier (by using 2 different css class, I don't know how u are using that, Instead of using class as identifier, I think the better way is to use id), what you need is to use css path like this.
suppose we are got 2 different class ".btn" and "tmbh" and with two different element. We need to define our css class path like this
$(".btn > .tmbh")
more precise css path is like this
$("<your-element-type>.btn > <your-element-type>.tmbh>")
If you want to use two different class in one same element you can use this class path format
.class1.class2
can be much thing, like button, input, div, ul, li, table, tr, td, and other html tags.
So I think you need to learn more about css path rather than only search sample code without you fully understand that code.
Related
I need to fill table with numbers automatically. And for this cause I'm using this bookmarklet:
javascript:var crn=[num1,num2...];
for(var i=0;i<crn.length;i++){
var d=document.getElementById("crn_id"+(i+1));
d.value=crn[i];
}
void(0);
It works but I need to click this submit button :
<input type="submit" name="REG_BTN" value="Submit Changes">
I tried to use this code:
javascript: var document.getElementsByTagName('submit')[0].click();
There is a sample of the website that I m trying to fill: (https://web.itu.edu.tr/durgunor/crn.html)
But it doesn't work. How can I fill the table and submit it with unified code?
document.getElementsByTagName would have to target a tag (<input> in this case). But there might be more inputs and you'd have to know which it is in order (also, the order might change?).
querySelector allows targeting by CSS selector. In this case, name="REG_BTN":
document.querySelector('[name=REG_BTN]').click();
More on attribute selectors can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
What I'm trying to do is, when one of six divs is clicked, a separate div will have 3 specific divs appear in it. Each of the original six divs have three similar but different divs related to it.
http://jsfiddle.net/petiteco24601/hgo8eqdq/
$(document).ready(function () {
$(".talkbubble").mouseout(function(){
$(".sidebar").show();
});$
$(".talkbubble").click(function(){
$
How do I make it so that when you click a "talkbubble" div, a different "sidebar" div appears with all its contained elements, and when you mouseout, the first talkbubble div automatically activates?
Here is a demo of how to do this: http://jsfiddle.net/n1xb48z8/2/
The main part of this example is some javascript that looks like this:
$(document).ready(function(){
showSideBar(1);
$('.expander').click(function(){
var sidebarIndex = $(this).data('sidebar-index');
showSideBar(sidebarIndex);
});
$('#Container').mouseleave(function(){
showSideBar(1);
});
});
function showSideBar(index){
$('.sidebarContent').hide();
$('.sidebarContent[data-index="' + index + '"]').show();
}
.data('some-name') will get you the attribute data-some-name="" on the specific element, this is a html 5 attribute and if you do not want to use it you can instead give each of the elements their own class names such as:
<div class="sidebarContent subBarContent_1">
<!-- content -->
</div>
and use the '.subBarContent_1' as your jquery selector instead. You would then also have to have some sort of data attached to your clickable divs to identify which one you wanna show, you could use a hidden field to do that like:
<input type="hidden" class="subContentSelector" value="subBarContent_1" />
The javascript for that looks like this:
$(document).ready(function(){
showSideBar(1);
$('.expander').click(function(){
var sidebarSelector = $(this).find('.subContentSelector').val();
showSideBar(sidebarSelector );
});
$('#Container').mouseleave(function(){
showSideBar('subBarContent_1');
});
});
function showSideBar(selector){
$('.sidebarContent').hide();
$('.sidebarContent.' + selector).show();
}
Ps. the overflow:hidden css is because chrome was messing up the placement of the sidebar content otherwise... oh chrome, you silly goose
I have several elements on the page. Something like:
<div id="el1"><div id="el2"><span id="el3">1</span><span id="el4">2</span></div><span id="el5">3</span></div>
I need to disable/enable any of them, using their ids.
<input type="radio" name="do" onclick="disable(document.getElementById('el4'));">
<input type="radio" name="do" onclick="enable(document.getElementById('el4'));">
What should be in disable() and enable() functions to really disable elements?
By "disable" I mean make it invisible for user, inaccessible by "id" and be restorable by "enable()" function.
Is it possible to turn elements on/off? Entirely, I mean.
function addEl4(){
var elem = document.getElementById('el2');
var newElem = document.createElement('div');
newElem.setAttribute('id', 'el4');
newElem.innerHTML = 2;
elem.appendChild(newElem);
};
function disable(elem){
var container = document.getElementById('el2');
container.removeChild(elem);
};
If you are talking in terms of removing the element from the page completely.
Then you can use the .removeChild() method..
Then need to append it to the div you are talking about..
Check Fiddle
You may use
document.getElementById('el4').style.display='none'; // hide
document.getElementById('el4').style.display=''; // show
You could define functions like this :
function hide(element){
element.style.display='none';
}
function show(element){
element.style.display='';
}
I really suggest not to use the enable and disable words, as they have other meanings (a disabled widget is one you can see but you can't change).
A better solution would be to define a css class
.hidden {
display: none;
}
and change the class in js :
document.getElementById('el4').classname='hidden'; // hide
If you want to completely remove an element, you may use removeChild :
var node = document.getElementById('el4');
node.parentNode.removeChild(node);
but it's almost never useful. Prefer to hide as is commonly done.
I'm a jquery newbie
If I have a fieldset like this, how can I add new attributes like class="error" and also modify the text of the legend from the script?
I do not know anything about the fieldset or the legend apart from the fact that they exist
<fieldSet>
<legend>My Legend</legend>
<script type="text/javascript">
//I want to select the legend???
</script>
</fieldset>
To add the class:
$('fieldset').addClass('error');
To modify the legend text:
$('fieldset legend').html('New Legend');
However you need know more information about the fieldset, if you have more then on the page, because the code above will modify all the fieldset tags on it.
From your example above the following would change the text of the 'legend' element and add a class to it -
$("fieldSet legend").text('New Text').addClass('newClass')
You might need to change the $("fieldSet legend") part of the code depending on what other elements you ultimately display on your page.
EDIT
If you want to refer to a specific fieldset you could do something like this to change the first fieldset on the page -
$("body fieldSet:first-child legend").text('New Text').addClass('newClass')
Otherwise you'd need to add a class or id to the fieldset. So if your fieldset looked like this -
<fieldSet class="chosen">
Your jQuery would need to be -
$("fieldSet.chosen legend").text('New Text').addClass('newClass')
Or if you add an id -
<fieldSet id="chosen">
jQuery -
$("#chosen").text('New Text').addClass('newClass')
There exists workaround for this one.
<fieldSet>
<legend>My Legend 1</legend>
<script type="text/javascript">
var to = 'New Legend 1';
var id = "temp" + Math.floor(Math.random()*100000);
document.write('<span id="'+id+'"></span>');
var temp = $('#'+id); scriptParent = temp.parent(); temp.remove();
scriptParent.find('legend').html(to);
</script>
</fieldset>
<fieldSet>
<legend>My Legend 2</legend>
<script type="text/javascript">
var to = 'New Legend 2';
var id = "temp" + Math.floor(Math.random()*100000);
document.write('<span id="'+id+'"></span>');
var temp = $('#'+id); scriptParent = temp.parent(); temp.remove();
scriptParent.find('legend').html(to);
</script>
</fieldset>
All SCRIPT elements are evaluated in order as the document is loaded. So, when you use document.write inside inline SCRIPT element, the write accours right next to SCRIPT. Generating unique element after script, and referencing it, could be traced by DOM with ease. You can eaven try creating function for such an action. Just play with it, and I hope, you will understand :)
Try jQAPI for jQuery references if you are new to jQuery.
Have you tried the following expression?
$("legend").html();
I have a input text box, I want to change its class dynamically by using Javascript. I also have to make it hidden. How can I do it?
<input id="mybutton" iconClass="iconclassbutton" class="classTochange" label="done" />
var button = document.getElementById('mybutton');
button.style.visibility = hidden;
button.className = newClass;
You don't have a type attribute on the input element though, is that on purpose?
Using jQuery:
$("#mybutton").hide()
$("#mybutton").toggleClass("classTochange","newclass")
If not mistaken - do check the jQuery documentation to confirm it
Can you specify under what circumstances would you want to change the class and then hide the text box? I am assuming 'class' here is stylesheet class.
Anyway, if you don't want to use jQuery, the javascript could be modified like this:
function toggleButton(){
var button=document.getElementById('mybutton');
if(button.className=="classTochange"){
button.className="newClass";
button.style.visibility = 'hidden';
}else{
button.className="classTochange";
button.style.visibility = 'visible';
}
}