Hide next button on last Dialog modal - javascript

I have an HTML look like this
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
</div>
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
</div>
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
I want to hide the next button of last fieldset of every modal dialog appears. Anyone, please suggest me. I am new to jquery and haven't done this kind of thing before. I code to learn and sometimes I fall in problem.


Try this
simple way In CSS code
button {
visibility: hidden
}


to hide btn in last element use "last-child" selector
.modalDialog:last-child .btn.btn-next {
display: none;
}
see fiddle


Rahul css answer is correct but if you gonna use jquery here is the code
$(".modalDialog button:last-child").hide();


The :last-child selector matches every element that is the last child of its parent, so you can select the last form element and hide it using display:none.
You can read more about :last-child here.
Notes: you are using duplicate id (id="outerr") in your HTML, which could make you markup invalid and create some issues, please consider correcting this issue in your real app.
.modalDialog:last-child form {
display: none;
}
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
</div>
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
</div>
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>


this should be.
fieldset:last-child .btn.btn-next {
display: none;
}
this is the code which solved my problem.

Related

make the button to toggle specific class Javascript

basically I am not a coder. I just trying to learn about Javascript and is it possible to make a toggle to a specific class?
for HTML
<section class="book_shelf">
<h2>Unfinished Section</h2>
<div id="incompleteBookshelfList" class="book_list">
<article class="book_item">
<h3>Book Title</h3>
<p>Penulis: John Doe</p>
<p>Tahun: 2002</p>
<div class="action">
<button class="green">Finished</button>
<button class="green">Edit</button>
<button class="red">Delete</button>
</div>
<section class="input_section edit_section">
<form id="editBook">
<div class="input">
<input id="editTitle" required="">
<input id="editAuthor" required="">
<input id="editYear" required="">
</div>
<div class="action">
<button class="black">Cancel</button>
<button class="grey">Save</button></div> </form>
</section>
</article>
<article class="book_item">
<h3>Book Title2</h3>
<p>Penulis: John Doe</p>
<p>Tahun: 2002</p>
<div class="action">
<button class="green">Finished</button>
<button class="green">Edit</button>
<button class="red">Delete</button>
</div>
<section class="input_section edit_section">
<form id="editBook">
<div class="input">
<input id="editTitle" required="">
<input id="editAuthor" required="">
<input id="editYear" required="">
</div>
<div class="action">
<button class="black">Cancel</button>
<button class="grey">Save</button></div> </form>
</section>
</article>
<article class="book_item">
<h3>Book Title 3</h3>
<p>Penulis: John Doe</p>
<p>Tahun: 2002</p>
<div class="action">
<button class="green">Finished</button>
<button class="green">Edit</button>
<button class="red">Delete</button>
</div>
<section class="input_section edit_section">
<form id="editBook">
<div class="input">
<input id="editTitle" required="">
<input id="editAuthor" required="">
<input id="editYear" required="">
</div>
<div class="action">
<button class="black">Cancel</button>
<button class="grey">Save</button></div> </form>
</section>
</article>
<br>
</div>
</section>
for CSS
.edit_section {
margin-top: 20px;
display: none;
}
.edit_section.active {
display: block;
}
so my objective is when I click the edit button, the class edit_section has an active class, but the other edit_section classes from another article tag still collapsed. Is that possible without ID tag? I need to do it with pure JavaScript, Thanks guys.

Get value of input type="button"

I want to get the value of Buttons I have created:
<div class="form-row">
<div class="btn-group">
<div class="col">
<div class="form-group">
<input id="MR" type="button" class="btn btn-outline-primary" value="MR" name="MR">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="CT" type="button" class="btn btn-outline-primary" value="CT" name="CT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="PT" type="button" class="btn btn-outline-primary" value="PT" name="PT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="US" type="button" class="btn btn-outline-primary" value="US" name="US">
</div>
</div>
</div>
</div>
I use this JS to highlight the button if is pressed:
$(document).ready(function(){
$(".btn-outline-primary").click(function(){
$(this).button('toggle');
});
});
Underneath those buttons there is a submit button, which I use to search a database. So how can I get the values of the buttons to use them for search (eg. "MR" value)?

"value" is an attribute on the button elements, so you can access it with .attr():
$(document).ready(function() {
$(".btn-outline-primary").click(function() {
console.log($(this).attr("value"))
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-row">
<div class="btn-group">
<div class="col">
<div class="form-group">
<input id="MR" type="button" class="btn btn-outline-primary" value="MR" name="MR">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="CT" type="button" class="btn btn-outline-primary" value="CT" name="CT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="PT" type="button" class="btn btn-outline-primary" value="PT" name="PT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="US" type="button" class="btn btn-outline-primary" value="US" name="US">
</div>
</div>
</div>
</div>

You can try this:
$(".btn-outline-primary").click(function(){
console.log($(this).prop('value'));
});

To get the value of a tag , you could always use the value method.
How :
document.getElementsByClassName('btn-outline-primary")[0].value;
This will get the value of the first element with class btn-outline-primary
If you wish to get the values of all elements :
var arr = document.getElementsByClassName('btn-outline-primary');
var array = []
arr.map(_=>array.push(_.value))
In the case you are using JQuery you will need to add
.attr('value')
to get the value

You could find all buttons with active class and get their value
Something like:
var values = [];
$('.btn-outline-primary.active').each(function(key, value){
values.push($(this).val());
});
values array will have all your values of active buttons

To get a value of clicked button you can do this. Just use the value property of the button to get the value associated with the corresponding button.
const buttons = document.querySelectorAll('.btn-outline-primary');
[...buttons].forEach(item => {
item.addEventListener('click', event => {
console.log(item.value);
});
});
<div class="form-row">
<div class="btn-group">
<div class="col">
<div class="form-group">
<input id="MR" type="button" class="btn btn-outline-primary" value="MR" name="MR">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="CT" type="button" class="btn btn-outline-primary" value="CT" name="CT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="PT" type="button" class="btn btn-outline-primary" value="PT" name="PT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="US" type="button" class="btn btn-outline-primary" value="US" name="US">
</div>
</div>
</div>
</div>
And if you want to store the value for later use then you can simply assign it to some variable.
const buttons = document.querySelectorAll('.btn-outline-primary');
let clickedValue;
[...buttons].forEach(item => {
item.addEventListener('click', event => {
clickedValue = item.value;
});
});

Bootstrap - Submit file input form?

I have this Bootstrap from model, and I do not know why the submit button does not sent the file, it sent nothing.
<form action="myPage.php" class="form-horizontal form-bordered">
<div class="form-body">
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="input-group input-large">
<div class="form-control uneditable-input input-fixed input-medium" data-trigger="fileinput">
<i class="fa fa-file fileinput-exists"></i>
<span class="fileinput-filename"> </span>
</div>
<span class="input-group-addon btn default btn-file">
<span class="fileinput-new"> CHOOSE FILE </span>
<span class="fileinput-exists"> CHANGE </span>
<input type="file" name="..."> </span>
DELETE
</div>
</div>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-6 col-md-offset-3">
Cancel
</div>
</div>
</div>
</form>
all links are available

Try this code :
<form action="myPage.php" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="exampleInputFile">CHOOSE FILE</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

you are using link ,You need submit button
<button type="submit" class="btn btn-default">Submit</button> and your form is messing ">"
<form action="myPage.php" class="form-horizontal form-bordered"

Foundation for apps: ng-disabled not working on buttons

I was using a foundation for apps button in a form. But ng-disabled isn't working with it.
HTML:
<form name="loginForm" novalidate>
<div class="grid-block">
<div class="grid-content">
<input type="text" placeholder="Username" ng-model="formData.username" required/>
</div>
</div>
<div class="grid-block">
<div class="grid-content">
<input type="password" placeholder="Password" ng-model="formData.password"/>
</div>
</div>
<div class="grid-block">
<div class="grid-content">
<a class="button" type="button" href="#" ng-disabled="loginForm.$invalid" ng-click="userLogin()">Login</a>
</div>
</div>
{{loginForm.$invalid}}
</form>
When I use a normal HTML button it is working.

That's not a button it's a link href, if you use a button tag it works fine.
<button class="button" type="submit" ng-disabled="loginForm.$invalid" ng-click="userLogin()">Login</button>

Center div content with Bootstrap (center-block)

Can I center the content of div with center-block??
The following example does not work:
<div class="form-group">
<div class="center-block">
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
</div>
</div>
http://jsfiddle.net/jd93fL1x/2/
And this one works:
<div class="form-group">
<div>
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success center-block" />
</div>
</div>
http://jsfiddle.net/jd93fL1x/3/
I want two buttons centered, that is why I want the div with the center-block.

The class center-block applies the center to the element itself, not to the content; in this case you can use the class text-center on the container and since the input has the class btn making it inline-block, that will work:
<div class="text-center">
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
</div>
DemoFiddle

Just use text-align:center on the div:
.center-block {
text-align:center;
}
jsFiddle example
(or use the selector .form-group > div instead of .center-block if you're not using that class for anything)

You can use simply put text-align:center
<div class="form-group">
<div style="text-align:center">
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
</div>

Categories

Resources