I don't understand how to select by name with Jquery the button "g_list".
<div class="col-sm-4 sezione-na">
<div class="titolo-sezione-na">Title:</div>
<div class="form-group">
<div class="col-sm-12"><button name="g_list" type="button" class="btn btn-primary btn-block">Generate list</button></div>
</div>
I wrote this Jquery code, but it doesn't work:
$("input[name='g_list']").click(function(){
alert( "ready!" );});
In your code input[name='g_list'] will be search input element with that name, instead you need to search for button so use button[name='g_list'] for that.
$("button[name='g_list']").click(function() {
//--^------ change here
alert("ready!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4 sezione-na">
<div class="titolo-sezione-na">Title:</div>
<div class="form-group">
<div class="col-sm-12">
<button name="g_list" type="button" class="btn btn-primary btn-block">Generate list</button>
</div>
</div>
Related
The first delete produced works fine when clicked on "add more" but del element produced after that deletes everything present on the page. Can someone please help me, maybe something is wrong with ele, I don't have much experience with JS
Steps to reproduce :
Click on add more and then the next add more which got created on click the previous add more.
click on the last del
It deletes everything rather than deleting that very DIV
$(function() {
$(".btn-copy").on('click', function() {
var ele = $(this).closest('.example-2').clone(true);
ele.find('input').val('')
if (ele.find('button').length<2) {
let btn = document.createElement("button");
btn.innerHTML = "Delete";
btn.onclick = (e) => {
e.preventDefault()
ele.remove()
}
ele[0].appendChild(btn);
}
$(this).closest('.example-2').after(ele);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h5 class="card-title">Add Class</h5>
</div>
<div class="card-body">
<form action="#">
<div class="example-2 form-group row">
<!--<label class="col-form-label col-md-2">Input Addons</label>-->
<div class="col-xs-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Class Name</span>
</div>
<input class="form-control" type="text">
<div class="input-group-append">
<button class="btn-copy btn btn-primary" type="button">Add More</button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-2">
<button class="btn btn-primary" type="button">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
The problem was in the use of .clone()
You where cloning the latest cloned element which forced you to create an if statement to prevent creating more than one delete button. But that also did not allow you to execute what was inside the if statement after a certain number of nodes cloned.
You also could not use the btn variable outside that if statement.
The solution is to clone always the first example-2element so we can jump the use of the if statement and allow the btn variable to be used freely.
I added an extra div #wrapper to use find('div').first() so the same example-2 element can be copied every time.
Snippet
$(function() {
$(".btn-copy").on('click', function() {
var ele = $('#wrapper').find('div').first().clone(true);
ele.find('input').val('');
let btn = document.createElement("button");
btn.innerHTML = "Delete";
ele[0].appendChild(btn);
btn.onclick = (e) => { ele.remove() };
$(this).closest('.example-2').after(ele);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="example-2 form-group row" style="margin-top:15px">
<div class="col-xs-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Class Name</span>
</div>
<input class="form-control" type="text">
<div class="input-group-append">
<button class="btn-copy btn btn-primary" type="button">Add More</button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-2">
<button class="btn btn-primary" type="button" style="margin-top:30px">Submit</button>
</div>
</div>
</div>
<body ng-controller="ChatController">
<br>
<div class="container">
<div class="panel panel-primary" id="container">
<div class="panel-heading">Web Based Firebase Chat Application</div>
<div class="panel-body">
<p ng-repeat="m in messages">{{m.message}} - {{m.date | date:'medium'}}</p>
<div class="form-group">
<input type="text" class="form-control" placeholder="Message here..." ng-model="messageText">
</div>
<button type="submit" class="btn btn-default" ng-click="send()">Send</button>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$("#container").click(function () {
$(this).next('#container').slideToggle("slow");
}); });
</script>
What your code currently says is: "When clicking #container, find the next element #container and toggle it".
That doesn't work, there is no other #container element beside the element with the id "container".
So just remove the .next('#container') part, and clicking the container will slideToggle it.
<body ng-controller="ChatController">
<br>
<div class="container">
<div class="panel panel-primary" id="container">
<div class="panel-heading">Web Based Firebase Chat Application</div>
<div class="panel-body">
<p ng-repeat="m in messages">{{m.message}} - {{m.date | date:'medium'}}</p>
<div class="form-group">
<input type="text" class="form-control" placeholder="Message here..." ng-model="messageText">
</div>
<button type="submit" class="btn btn-default" ng-click="send()">Send</button>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$("#container").click(function () {
$(this).slideToggle("slow");
}); });
</script>
Also keep in mind, when hiding the container, you cant toggle (show it again) it, as its now completely hidden and not clickable at all.
I posted a question earlier wrt dynamically created forms, and got excellent advice. At the moment I have a list of forms, formCELL, each created as follows.
html
<div class="container">
<div class="container-element" id="1">
<h3>HEADER</h3>
<form action="refresh.php" id="formCELL" method="post" name="form_1">
<div class="panel-body">
<div class="col-xs-10 com">
CONTENT GOES HERE
</div>
<div class="col-xs-2 btn">
<button class="btn btn-primary" id="refresh" type="submit">Refresh</button>
</div>
</div>
</form>
</div>
<div class="container-element" id="2">
<h3>HEADER</h3>
<form action="refresh.php" id="formCELL" method="post" name="form_2">
<div class="panel-body">
<div class="col-xs-10 com">
CONTENT GOES HERE
</div>
<div class="col-xs-2 btn">
<button class="btn btn-primary" id="refresh" type="submit">Refresh</button>
</div>
</div>
</form>
</div>
<div class="container-element" id="3">
<h3>HEADER</h3>
<form action="refresh.php" id="formCELL" method="post" name="form_3">
<div class="panel-body">
<div class="col-xs-10 com">
CONTENT GOES HERE
</div>
<div class="col-xs-2 btn">
<button class="btn btn-primary" id="refresh" type="submit">Refresh</button>
</div>
</div>
</form>
</div>
<div class="container-element" id="4">
<h3>HEADER</h3>
<form action="refresh.php" id="formCELL" method="post" name="form_4">
<div class="panel-body">
<div class="col-xs-10 com">
CONTENT GOES HERE
</div>
<div class="col-xs-2 btn">
<button class="btn btn-primary" id="refresh" type="submit">Refresh</button>
</div>
</div>
</form>
</div>
</div>
javascript
$(document).ready(function() {
$('#formMAIN').submit(function(event) {
//formCELL is generated here through AJAX call.....
});
});
$('#formCELL').submit(function(event) {
// process the form
alert("about to submit");
//AJAX call to go here
var user_id = $(this).closest("form").attr('id');
alert(user_id);
event.preventDefault();
});
I am trying to get the id of the form being submitted so I can process it further, and I've tried diferent variations of $(this).closest("form").attr('id'); and all return a value of undefined
How can I get the id of the form being submitted?
You can use event.target.id to get form id
Just bind the "submit" event to whole form and then use
$(this).attr('id');
Maybe use data-id bro .
Put data-id as attribute in form
So you can easily get it using
$(this).attr('data-id')
I'm creating a login / register form for a woocommerce shop.
The default woo template shows two side by side forms, one for new customers to register, one for existing customers to login. IMHO this sucks.
I want to use a button group above a single form that swaps out the login / register forms based on the users selection, this way only one option is presented at a time. Hence, I need to swap content, and apply/remove active classes to the appropriate buttons.
I've done the following:
1.) Added a twitter bootstrap button-group like so:
<div class="col-sm-4 col-sm-offset-4">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" id="login_click" class="btn btn-default active" data-toggle="button">Login</button>
</div>
<div class="btn-group">
<button type="button" id="register_click" class="btn btn-default">Register</button>
</div>
</div>
</div>
2.) Wrapped the two forms in bootstrap classes and added IDs for simple targeting.
<div id="login_form" class="col-sm-4 col-sm-offset-4">
// login form
</div>
<div id="register_form" clas="col-sm-4 col-sm-offset-4">
//register form
</div>
I know there are built in jQuery plugins for accomplishing this. I've tried using the .active class without success. I also tried using data-toggle="button" and use the .toggle() method without success. I can't wrap my head around the appropriate jQuery, I either end up with both buttons toggled, or no buttons toggled.
Could someone guide me in the right direction?
You can just set some jQuery to hide/show the form divs:
$('#switch-forms .btn').on('click', function() {
$('#switch-forms .btn').removeClass('active');
$(this).addClass('active');
});
$('#login_click').on('click', function() {
$('#register_form').hide();
$('#login_form').show();
});
$('#register_click').on('click', function() {
$('#login_form').hide();
$('#register_form').show();
});
JS Fiddle: http://jsfiddle.net/ezrafree/HZbvA/
Also, you misspelled the class attribute on button#register_click. Updated markup is:
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div id="switch-forms" class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" id="login_click" class="btn btn-default active">Login</button>
</div>
<div class="btn-group">
<button type="button" id="register_click" class="btn btn-default">Register</button>
</div>
</div>
</div>
</div>
<div class="row">
<div id="login_form" class="col-sm-4 col-sm-offset-4">
<p>Login Form</p>
</div>
<div id="register_form" class="col-sm-4 col-sm-offset-4">
<p>Register Form</p>
</div>
</div>
For anyone interested I made it work. Not the "bootstrap way" but it works as desired. Someone with better jQuery chops could certainly simplify this.
<script>
$(document).ready(function() {
var login_btn = $('#login_click');
var register_btn = $('#register_click');
var register_form = $('#registration_form');
var login_form = $('#login_form');
// set defaults
register_form.addClass("hidden");
login_btn.addClass("active");
// events for register button
register_btn.on("click", function(){
login_form.addClass("hidden");
login_btn.removeClass("active");
register_btn.addClass("active");
register_form.removeClass("hidden");
});
//events for login button
login_btn.on("click", function(){
register_form.addClass("hidden");
register_btn.removeClass("active");
login_btn.addClass("active");
login_form.removeClass("hidden");
});
});
</script>
Code updated
No jQuery, you could do it with bootstrap collapse.
try this
<div class="col-sm-4 col-sm-offset-4">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" id="login_click" class="btn btn-default" data-toggle="collapse" data-target=".class1">Login</button>
</div>
<div class="btn-group">
<button type="button" id="register_click" class="btn btn-default" data-toggle="collapse" data-target=".class1">Register</button>
</div>
</div>
</div>
<div class="col-sm-4 col-sm-offset-4">
<div class="class1 collapse in">123</div>
<div class="class1 collapse">321</div>
</div>
cannot comment in feed. there right way to use toggleClass
not good
$('#switch-forms .btn').on('click', function() {
$('#switch-forms .btn').removeClass('active');
$(this).addClass('active');
});
good
$('#switch-forms .btn').on('click', function() {
$('#switch-forms .btn').toggleClass('active');
});
I have the following code
Html markup
<div>
<div class="col-md-6">
<button type="button" class="adddate">Add Date</button>
</div>
<div class="col-md-12 form-group">
<div class="datesaccordion panel-group">
</div>
</div>
</div>
<div>
<div class="col-md-6">
<button type="button" class="adddate">Add Date</button>
</div>
<div class="col-md-12 form-group">
<div class="datesaccordion panel-group">
</div>
</div>
</div>
<div>
<div class="col-md-6">
<button type="button" class="adddate">Add Date</button>
</div>
<div class="col-md-12 form-group">
<div class="datesaccordion panel-group">
</div>
</div>
</div>
Jquery Code
$(document.body).on("click", ".adddate", addDate);
function addDate(e) {
$(e.target).closest(".datesaccordion").append($("<p />").html("test"));
}
Here i am trying to insert the DHTML on .adddate button click. And i want to inter the DHTML in the closest .datesaccordion div from .adddate button. But the jquery code
(above mentioned) is not working.
Can anybody please tell me what i am missing??
It should be
$(document).on("click", ".adddate", addDate);
function addDate(e) {
$(this).parent().next().find(".datesaccordion").append($("<p />").html("test"));
}
Demo: Fiddle
The datesaccordion element is not a ancestor of the button, it is a descdendant of the next sibling of the buttons's parent, so you cannot use .closest() here
Try:
$(document).on("click", ".adddate", addDate);
instead of:
$(document.body).on("click", ".adddate", addDate);
as well as changing your addDate() function to this:
function addDate(e) {
$(this).parent().siblings('.col-md-12').find('.datesaccordion').append($("<p />").html("test"));
}