I making a "to do list" of task to be done. I have some buttons that will move the tasks up and down on the list.
I go the up and down buttons going. My only issue is that the task divs are able to move up and down the entire page. How can I keep the task divs to only moving up and down on on each other?
Thank you!
Here's my code:
$(document).ready(function(){
$('.up_button').click(function(){
$(this).parents('.task').insertBefore($(this).parents('.task').prev());
});
$('.down_button').click(function(){
$(this).parents('.task').insertAfter($(this).parents('.task').next());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="task col-sm-12">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon"><input type="checkbox" name="task1" value="taskID1" /></span> <input type="text" class="form-control" value="Write HTML" readonly>
</div>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-default up_button"><span class="glyphicon glyphicon-arrow-up"></span> Move Up</button>
<button type="button" class="btn btn-default down_button"><span class="glyphicon glyphicon-arrow-down"></span> Move Down</button>
</div>
</div>
<div class="task col-sm-12">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon"><input type="checkbox" name="task1" value="taskID1" /></span> <input type="text" class="form-control" value="Write XML" readonly>
</div>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-default up_button"><span class="glyphicon glyphicon-arrow-up"></span> Move Up</button>
<button type="button" class="btn btn-default down_button"><span class="glyphicon glyphicon-arrow-down"></span> Move Down</button>
</div>
</div>
1st: I think you need to define $(this) before going to insertAfter or insertBefore
2nd: you can use .closest()
$(document).ready(function(){
$('.up_button').click(function(){
var ThisIt = $(this);
$(this).closest('.task').insertBefore(ThisIt.closest('.task').prev('.task'));
});
$('.down_button').click(function(){
var ThisIt = $(this);
ThisIt.closest('.task').insertAfter(ThisIt.closest('.task').next('.task'));
});
});
Demo Here
Related
I know this question has been asked before, but all the other answers I found are way too complicated for me to understand.
When you click a button, I need one section to disappear and another to show in its place.
How can I do this with jQuery?
Here's the outline of my code:
<div class="container">
<div class="hide">
<button class="btn btn-block btn-primary rounded-0 mb-2">Button</button>
<button class="btn btn-block btn-primary rounded-0 btn-hide">Button</button>
</div>
<div class="show mt-3">
<form>
<div class="form-group mb-2">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<button class="btn btn-block btn-primary rounded-0">Button</button></div>
</form>
</div>
</div>
What do I need to do CSS and jQuery-wise to make this work? So the second section (.show) appears exactly where the first one was?
You need to bind a click event to the button, .show() the section you want to show and .hide() the one you want to hide.
$('.btn').on('click', function() {
$('div-to-show').show();
$('div-to-hide').hide();
});
Example below:
$('#btn').on('click', function() {
$('.hide').hide();
$('.show').show();
});
.hide {
display: block;
}
.show {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click Me</button>
<div class="hide">
<button class="btn btn-block btn-primary rounded-0 mb-2">Button</button>
<button class="btn btn-block btn-primary rounded-0 btn-hide">Button</button>
</div>
<div class="show mt-3">
<form>
<div class="form-group mb-2">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
</form>
</div>
First, your HTML has an error in it. You have an extra closing div just before your closing form.
One of your div elements will default to be hidden and the other to be shown. Then upon your trigger (button click) we swap the display of both.
// Get references to the two areas
var divs = $("#div1, #div2");
// When the "trigger" button is clicked, toggle the hidden class on both elements
$("#btnShowHide").on("click", function(){
divs.toggleClass("hidden");
});
.hidden { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="hidden" id="div1">
<button class="btn btn-block btn-primary rounded-0 mb-2">Button</button>
<button class="btn btn-block btn-primary rounded-0 btn-hide">Button</button>
</div>
<div class="show mt-3" id="div2">
<form>
<div class="form-group mb-2">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<button class="btn btn-block btn-primary rounded-0">Button</button>
</form>
</div>
<button id="btnShowHide" type="button">Click to toggle display</button>
</div>
when i click on id save_newsection i need value of class school_name means school name
<div class="school_form_submit">
<div class="form-group">
<label class="control-label col-md-3">School Name<span class="required"> * </span>
</label>
<div class="col-md-9">
<input type="text" class="form-control school_name" placeholder="Please Enter School Name" value="dfghdf" name="school_name_submit">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
<button type="button" id="save_newsection" class="btn green">Save changes</button>
</div>
</div>
If there is only one input with the class .school_name, use this
$("#save_newsection").click(function() {
var value = $("input.school_name").val();
// use value
});
If there could be more of them throughout the document use this:
$("#save_newsection").click(function() {
var value = $(".school_form_submit .school_name").val();
// use value
});
$("#save_newsection").click(function() {
var value = $(".school_form_submit .school_name").val();
alert(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="school_form_submit">
<div class="form-group">
<label class="control-label col-md-3">School Name
<span class="required"> * </span>
</label>
<div class="col-md-9">
<input type="text" class="form-control school_name" placeholder="Please Enter School Name" value="dfghdf" name="school_name_submit">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
<button type="button" id="save_newsection" class="btn green">Save changes</button>
</div>
I have a piece of HTML that looks like this
<div id="imageContent">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="input-group form-group">
<input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source">
<span class="input-group-btn">
<button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button>
</span>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input class="form-control" type="text" placeholder="http://postbackurl.com"/>
</div>
</div>
</div>
</div>
Above that I have a button that looks like this
<div class="row text-center">
<div class="col-md-12">
<button type="button" class="btn btn-wd btn-info btn-fill btn" onclick="add_fields();" rel="tooltip">Add More Images</button>
</div>
</div>
Once that button is pressed I run a function to get the #imageContent div and append a new row with the same as before.
<script type="text/javascript">
function add_fields() {
var div = document.getElementById("imageContent");
div.insertAdjacentHTML('afterend','<div class="row"><div class="col-md-5 col-md-offset-1"> <div class="input-group form-group"><input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source"><span class="input-group-btn"> <button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button> </span> </div> </div> <div class="col-md-5"> <div class="form-group"> <input class="form-control" type="text" placeholder="http://postbackurl.com"/> </div> </div> </div>');
}
</script>
This works as expected and adds a new row into the imageContent div.
See picture. If I click Select Image, it launches a modal window with all of my images, and when I select one, it runs this piece of js.
onInsertCallback: function (obj){
/** Populate the src **/
currentModalBtn.closest('.input-group').find('input.file-src').val(obj.src);
$('#myModal').hide();
}
The problem I am having is that it does not get the correct input area to insert the value into, and instead always updates the first element. The full js code looks like this.
$(document).ready(function() {
jQuery(document).ready(function() {
/** Keep track of which modal button was clicked. **/
var currentModalBtn;
jQuery('.modal-btn').click(function() {
currentModalBtn = jQuery(this);
});
jQuery('.laradrop').laradrop({
onInsertCallback: function(obj) {
/** Populate the src **/
currentModalBtn.closest('.input-group').find('input.file-src').val(obj.src);
$('#myModal').hide();
},
onErrorCallback: function(jqXHR, textStatus, errorThrown) {
// if you need an error status indicator, implement here
//Swal here
swal({
title: 'Error!',
text: 'An Error Occurred',
type: 'error',
showConfirmButton: false,
showCancelButton: true
});
},
onSuccessCallback: function(serverData) {
//
}
});
});
});
My question is, how can I ensure that I get the right input field that the button was clicked on to update that fields value and make sure the others stay as they were.
move var currentModalBtn; outside the ready so it is available to the callback(s)
Also have only one
$(document).ready(function() {
jQuery(document).ready(function() {
you have a mess of jQuery/$ and so on - this will likely work better:
function add_fields() {
var $div = $("#imageContent");
$div.append('<div class="row"><div class="col-md-5 col-md-offset-1"> <div class="input-group form-group"><input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source"><span class="input-group-btn"> <button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button> </span> </div> </div> <div class="col-md-5"> <div class="form-group"> <input class="form-control" type="text" placeholder="http://postbackurl.com"/> </div> </div> </div>');
}
var currentModalBtn;
$(function() {
/** Keep track of which modal button was clicked. **/
$("#imageContent").on("click",".modal-btn", function() {
currentModalBtn = $(this);
});
$("#test").on("click",function() {
currentModalBtn.closest('.input-group').find('input.file-src').val("hello");
$('#myModal').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row text-center">
<div class="col-md-12">
<button type="button" class="btn btn-wd btn-info btn-fill btn" onclick="add_fields();" rel="tooltip">Add More Images</button>
</div>
</div>
<div id="imageContent">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="input-group form-group">
<input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source">
<span class="input-group-btn">
<button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button>
</span>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input class="form-control" type="text" placeholder="http://postbackurl.com"/>
</div>
</div>
</div>
</div>
<button type="button" id="test">
click
</button>
How do I change the input from disabled to enabled when clicks and returns from disabled to enabled when clicked
HTML
<div class="col-md-2">
<input type="text" class="form-control" id="tes" name="tes" />
</div>
<br>
<div class="col-md-3">
<button type="submit" id="submit1" class="glyphicon glyphicon-ok success btn btn-primary btn" value=""> </button>
</div>
JQUERY
$('#submit1').click(function() {
$('#tes').prop("disabled",true);
$(this).toggleClass('glyphicon glyphicon-ok').toggleClass('glyphicon glyphicon-remove btn-danger');
});
Use this Generalized function in your project to make things enabled / disabled.
(function($) {
$.fn.toggleDisabled = function(){
return this.each(function(){
this.disabled = !this.disabled;
});
};
})(jQuery);
$('#submit1').click(function() {
$('#tes').toggleDisabled();
$(this).toggleClass('glyphicon glyphicon-ok').toggleClass('glyphicon glyphicon-remove btn-danger');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2">
<input type="text" class="form-control" id="tes" name="tes" />
</div>
<br>
<div class="col-md-3">
<button type="submit" id="submit1" class="glyphicon glyphicon-ok success btn btn-primary btn" >Button </button>
</div>
You can use this one.
$('#submit1').click(function() {
$('#tes').prop("disabled",!$('#tes').prop("disabled"));
$(this).toggleClass('glyphicon glyphicon-ok').toggleClass('glyphicon glyphicon-remove btn-danger');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2">
<input type="text" class="form-control" id="tes" name="tes" />
</div>
<br>
<div class="col-md-3">
<button type="submit" id="submit1" class="glyphicon glyphicon-ok success btn btn-primary btn" value="Submit">SUbmit </button>
</div>
.prop(property) will return whether the property is set. You can use this to check the value and toggle it based on it's current value.
if( $('#tes').prop("disabled") )
$('#tes').prop("disabled",false);
else
$('#tes').prop("disabled",true);
You could reduce this to:
$('#tes').prop("disabled", !$('#tes').prop("disabled") )
This fetches the current value of the property, negates it with !, then sets that as the new value
If what you want is to toggle the disable prop:
$('#submit1').click(function() {
$('#tes').prop("disabled", !$('#tes').prop("disabled"));
});
I got the code add fields dynamically here Add fields dynamically - link
when I try use this code insight my form class <form class="form-horizontal" action="create.php" method="post"> it won't work but when put this filed out from form class it will work I know have to changes in java script but I'm new to JS so please help me the changes
this my form:
<body>
<form class="form-horizontal" action="create.php" method="post">
<div class="form-group">
<label for="des" class="col-sm-2 control-label">To Address</label>
<div class="col-sm-8">
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group ">
<input class="form-control"name="fields[]"type="text" placeholder="To....." />
<span class="input-group-btn">
<button class="btn btn-success btn-add"type="button">
<span class="glyphicon glyphicon-plus"></span> </button> </span>
</div>
</form>
</div>
</div>
</div>
<div class="form-group">
<input name="submit" class="btn btn-success" type="submit" value="Save" id="search"/>
</div>
</form>
</body>
myscript :
<script>
$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
</script>
You made a mistake in your HTML markup, adding a form inside another form, and i had a look at your reference, you would see you did make a mistake.
<div class="container">
<div class="row">
<div class="control-group" id="fields">
<label class="control-label" for="field1">Nice Multiple Form Fields</label>
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group col-xs-3">
<input class="form-control" name="fields[]" type="text" placeholder="Type something" />
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
<br>
<small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another form field :)</small>
</div>
</div>
</div>
So if you wanted to add your POST method, you would add it into the form tag there, and not create a new one.
Hope this helps.
here i did a mistake to add form insight form the easy way to add multiple fields :
<label for="des" class=" control-label">Description</label>
<div class="multi-field-wrapper ">
<div class="multi-fields">
<div class="multi-field">
<div class="col-sm-8">
<input id="des" type="text" class="form-control" name="descrip[]"></div>
<span class="remove-field">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span></button></span>
</div>
</div>
<button type="button" class="add-field">Add field</button>
</div>
script funtion :
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});