HTML
<form class="controls" id="Filters">
<fieldset>
<div id="sample-showcase" class="noUi-target noUi-ltr noUi-horizontal noUi-background"></div>
<div id="rangespan-container">
<span id="min-value-span" class="range-spans"></span>
<input type="hidden" class="min-value-span">
<span class="range-spans">g</span>
<span id="max" class="range-spans"> - </span>
<span id="max-value-span" class="range-spans"></span>
<input type="hidden" class="min-value-span">
<span class="range-spans">g</span>
</div>
<div class="range-button checkbox">
<input type="checkbox" class="rangecheck"/></div>
</fieldset>
<fieldset>
<h3 class="sidetitle">Filter</h3>
<div class="breakfast-filter checkbox">
<input type="checkbox" class="checkbox1" value=".category-breakfast"/>
<label>Breakfast</label></div>
<div class="lunch-filter checkbox">
<input type="checkbox" class="checkbox2" value=".category-lunch"/>
<label>Lunch</label></div>
<div class="dinner-filter checkbox">
<input type="checkbox" class="checkbox3" value=".category-dinner"/>
<label>Dinner</label></div>
<div class="snacks-filter checkbox">
<input type="checkbox" class="checkbox4" value=".category-snacks"/>
<label>Snacks</label></div>
</fieldset>
<fieldset>
<h3 class="sidetitle">Sort</h3>
<div class="sort" data-sort="protein:asc">Low to High</div>
<div class="sort" data-sort="protein:desc">High to Low</div>
<div class="sort" data-sort="random">Random</div>
</fieldset>
<button id="Reset">Clear Filters</button>
</form>
Snippet of JS
bindHandlers: function(){
var self = this;
self.$filters.on('change', function(){
self.parseFilters();
});
self.$reset.on('click', function(){
self.$filters[0].reset();
self.parseFilters();
});
}
self.$reset = jQuery('#Reset'); it is defined higher in the code. Not sure if this is enough info.
Here is the link to the full code: Click Here
If you go to the home page click on some filters then try resetting. You should see it work like it's suppose to then take you to domain.com/?
Not sure why
Help please
button elements are submit buttons by default. You have to set type="button" if you to make them "dummy" buttons, i.e. they don't have a any default behavior:
type="button": The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
<button type="button" id="Reset">Clear Filters</button>
Of course you could also set it to type="reset" and let the browser take care of resetting the form elements for you:
type="reset": The button resets all the controls to their initial values.
Then you could simplify your event handler to:
self.$reset.on('click', function(){
self.parseFilters();
});
It's not a huge change, but if the browser already offers this feature, why not make use of it?
Because you are using a button within the form and it is not prevented its default behavior.
Hence after resetting the form, the form is getting submitted.
You either have to return false after the function or preventDefault(). Try this.
self.$reset.on('click', function(e){
e.preventDefault();
self.$filters[0].reset();
self.parseFilters();
});
Or you need to set the type="button" for the button tag to make sure they are of type button and not submit.
<button id="Reset" type="button">Clear Filters</button>
Related
I have a page which is essentially a giant checklist. If you hit the button to edit a checklist item, a modal pops up. On this modal, is a radio to select if problems were detected or not during the check. If yes is selected, a hidden div is displayed so that more information can be inserted before submitting.
Here is an example modal, currently, there are 60 on the page.
<!-- modal window for submiting check-->
<div id="edit3" class="text-left g-max-width-800 g-bg-white g-overflow-y-auto g-pa-20" style="display: none;">
<button type="button" class="close" onclick="Custombox.modal.close();"><i class="hs-icon hs-icon-close"></i></button>
<h4 class="g-mb-20">Update Record for Empirix->SIP:500 Baseline</h4>
<form action="actions.php" method="POST">
<!-- Checkbox -->
<div class="g-mb-15">
<label class="form-check-inline u-check g-pl-25 ml-0 g-mr-25">
<input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue3" type="radio" value="0" checked="">
<div class="u-check-icon-radio-v4 g-absolute-centered--y g-left-0 g-width-18 g-height-18">
<i class="g-absolute-centered d-block g-width-10 g-height-10 g-bg-primary--checked"></i>
</div>
No Issues
</label>
<label class="form-check-inline u-check g-pl-25 ml-0 g-mr-25">
<input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue3" type="radio" value="1">
<div class="u-check-icon-radio-v4 g-absolute-centered--y g-left-0 g-width-18 g-height-18">
<i class="g-absolute-centered d-block g-width-10 g-height-10 g-bg-primary--checked"></i>
</div>
Issue Found
</label>
</div>
<input type="hidden" name="action" value="subcheck">
<input type="hidden" name="id" value="3">
<div id="ifYes3" class="g-mb-15 desc3" style="display:none">
<div class="form-group g-mb-20">
<label class="g-mb-10" for="inputGroup1_1">INC Ticket</label>
<input id="inputGroup1_1" class="form-control form-control-md rounded-0" type="text" placeholder="INC Ticket #" name="inc_tick">
</div>
<div class="form-group g-mb-20">
<label class="g-mb-10" for="inputGroup2_1">Brief Description</label>
<textarea id="inputGroup2_1" class="form-control form-control-md g-resize-none rounded-0" rows="3" name="problem" placeholder="If you found an issue, please provide a short overview."></textarea>
</div>
</div>
<div align="right">
<button type="submit" class="btn u-btn-primary g-mr-20 g-mb-1">Submit</button>
</div>
</form>
</div>
<!-- End modal window -->
Then, I have this ajax code to perform the refresh, you'll notice I have a jq toggle for each of the 60 div's in here.
var interval = 10000; //number of mili seconds between each call
var refresh = function() {
$.ajax({
url: "ops_controller.php",
cache: false,
success: function(html) {
$("[name=issue1]").click(function(){
$('.desc1').toggle();
$("#ifYes1-"+$(this).val()).show('slow');
});
<!-- Cut out 58 similar functions -->
$("[name=issue59]").click(function(){
$('.desc59').toggle();
$("#ifYes59-"+$(this).val()).show('slow');
});
$("[name=issue60]").click(function(){
$('.desc60').toggle();
$("#ifYes60-"+$(this).val()).show('slow');
});
$('#table-refresh').html(html);
setTimeout(function() {
refresh();
}, interval);
}
});
};
refresh();
I then have the same code (60 jq functions) in another function
$( document ).ajaxStop(function() {
$.HSCore.components.HSModalWindow.init('[data-modal-target]');
$.HSCore.components.HSPopup.init('.js-fancybox', {
btnTpl: {
smallBtn: '<button data-fancybox-close class="btn g-pos-abs g-top-25 g-right-30 g-line-height-1 g-bg-transparent g-font-size-16 g-color-gray-light-v3 g-brd-none p-0" title=""><i class="hs-admin-close"></i></button>'
}
});
$('[data-toggle="tooltip-show"]').tooltip('show');
$("[name=issue1]").click(function(){
$('.desc1').toggle();
$("#ifYes1-"+$(this).val()).show('slow');
});
<!-- cut out 58 other items -->
$("[name=issue59]").click(function(){
$('.desc59').toggle();
$("#ifYes59-"+$(this).val()).show('slow');
});
$("[name=issue60]").click(function(){
$('.desc60').toggle();
$("#ifYes60-"+$(this).val()).show('slow');
});
});
});
The reason I've done it like this is so that this toggle will work on load and on ajax page refresh every 10 seconds. Im very new to jQuery/AJAX so forgive my ignorance. After two days, this is what I came up with to make it still work after the page refresh.
Surely, there has to be a cleaner method than what I'm doing here.
You can use a generic function in combination with event delegation¹ - see example below:
// [name^=issue] will target elements whose [name] attributes begins with "issue"
$(document).on("click", "[name^=issue]", function() {
var issueNo = this.name.replace("issue", "");
$(".desc" + issueNo).toggle();
$("#ifYes" + issueNo + "-" + $(this).val()).show("slow");
})
¹ https://learn.jquery.com/events/event-delegation/
You could set a data attribute in the HTML for each of the items you are wrapping - essentially you need a way to get the current ID for each then build up your jquery selector from that.
<div class="myrow" data-rowID="1">
<input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue1" type="radio" value="1">
</div>
<div class="myrow" data-rowID="2">
<input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue2" type="radio" value="1">
</div>
<div class="myrow" data-rowID="3">
<input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue3" type="radio" value="1">
</div>
$(".myrow input[type=radio]").click(function(){
// ok what number is this row?
var myRowID = $(this).attr('data-rowID');
$('.desc'+ myRowID ).toggle();
$("#ifYes" + myRowID + "-"+$(this).val()).show('slow');
});
Something like that.
This is how my razor code looks like
<form asp-action="Save" asp-controller="ClassesHeld" method="post">
<input asp-for="ClassHeldId" value="#Model.ClassHeldId" hidden />
<div class="form-group">
<label>Student</label>
<input asp-for="#Model.Student" value="#Model.Student" class="form-control" readonly />
</div>
<div class="form-group">
<label>Grade</label>
<input id="Grade"asp-for="Grade" type="number" value="#Model.Grade" class="form-control" min="0" max="5" />
</div>
<div class="form-group">
<label>Attendance</label>
<input id="Attendance" class="form-check-input" asp-for="Attendance" type="checkbox"/>
</div>
<button class="btn btn-primary" type="submit" value="Save">Save</button>
</form>
<script>
$("#Attendance").on("change", function () {
$("#Grade").attr("disabled", this.checked);
});
</script>
Yet for some reason, clicking on the checkbox does nothing at all. I have tried this with simple script as well, and that didn't work either.
document.getElementById('Attendance').onchange = function () {
document.getElementById('Grade').disabled = this.checked;
};
Neither of these worked.
I have even copied some solutions from here (one of them is that last simple scrip with document.getElementbyId, and none of it worked. I have to be missing something simple, but I've been looking at this for the past hour and I still can't figure it out.
I apologize if the question is stupid or noob-level. But I am getting desperate.
EDIT: Simply to add more information, this form works perfectly fine when submitting data, controller saves the stuff to the database... Everything works fine, just not the part where it disables the ability to edit the Grade if the student has not attended.
So the objective, is to disable the input field when the checkbox for "attendance" is checked
The .attr() method only manage string; So if you want to change an attribut like disabled or even checked with a boolean or something else, you have to use the prop method.
For more information check this post :
.prop() vs .attr()
You can execute the snippet below.
$("#Attendance").on("change", function () {
$("#Grade").prop("disabled", this.checked)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form asp-action="Save" asp-controller="ClassesHeld" method="post">
<input asp-for="ClassHeldId" value="#Model.ClassHeldId" hidden />
<div class="form-group">
<label>Student</label>
<input asp-for="#Model.Student" value="#Model.Student" class="form-control" readonly />
</div>
<div class="form-group">
<label>Grade</label>
<input id="Grade"asp-for="Grade" type="number" value="#Model.Grade" class="form-control" min="0" max="5" />
</div>
<div class="form-group">
<label>Attendance</label>
<input id="Attendance" class="form-check-input" asp-for="Attendance" type="checkbox"/>
</div>
<button class="btn btn-primary" type="submit" value="Save">Save</button>
</form>
<script>
</script>
I think you actually need to remove the disabled attribute when you don't want it. Maybe try this:
$(document).ready(function() {
$("#Attendance").on("change", function () {
if (this.checked) {
$("#Grade").attr("disabled", true);
} else {
$("#Grade").removeAttr("disabled");
}
});
});
I got the following form but it dont work.I read plenty of examples but cant understand what I do wrong..
Can someone explain me please why $_POST["choice"] don't work?
I can post whole code if nessesary but I though it dont need..
<form action="2.php" method="POST">
<div class="question">
<?=$question?>
<div class="inline">
<div class="choice1">
<button type="submit" name="choice" class="choice" id="1" value="<?=$ans_array[0]?>" onclick="myFunction()" ><?=$ans_array[0]?></button>
</div>
<div class="choice2">
<button type="submit" class="choice" id="2" name="choice" onclick="myFunction()" value="<?=$ans_array[1]?>"><?=$ans_array[1]?></button>
</div>
</div>
<div class="inline">
<div class="choice1">
<button type="submit" class="choice" id="3" name="choice" onclick="myFunction()" value="<?=$ans_array[2]?>"><?=$ans_array[2]?></button>
</div>
<div class="choice2">
<button type="submit" class="choice" id="4" name="choice" onclick="myFunction()" value="<?=$ans_array[3]?>"><?=$ans_array[3]?></button>
</div>
</div>
</div>
</form>
and then i got the next file 2.php
<?php
echo $_POST["choice"];
$a = $_POST["choice"];
?>
but I get the following
Notice: Undefined index: choice in on line 2
Notice: Undefined index: choice in on line 3
You show the post as a button type. Button type do not exist unless someone pushes the button. If you are doing a submit earlier or allowing ENTER to cause a submit then that is undefined.
You can test this by putting this right in front of choice1
<input type=hidden name=choice value='no button pushed'>
And if you see that, then that's what happened
Thanks everyone for your answers it seemed the problem was on the following javascript as it was blocking the submit from the other buttons.Problem is solved now
<script>
$('form').submit(function (e) {
var form = this;
e.preventDefault();
setTimeout(function () {
form.submit();
}, 1000); // in milliseconds
$("<p>Delay...</p>").appendTo("body");
});
</script>
So this is the relevant part of my html-code. i tried binding the "formFriendsAll" scope to the ng-model.
<form ng-submit="submitForm()" >
<div class="col-sm-3">
<div class="form-group">
<label>Which Persons to show?</label>
<div class="radio">
<label>
<input type="radio" name="FriendsAll" ng-model="formFriendsAll" value="Friends" >
Friends
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="FriendsAll" ng-model="formFriendsAll" value="Alle">
All
</label>
</div>
<div>currently selected: {{formFriendsAll}}</div>
</div>
</div><td><input type="submit" class="btn btn-primary" value="Los!"/></td> </form>
This is the relevant js-code:
var challenge = angular.module('challengeApp', [])
challenge.controller('challengeController', function($scope) {
$scope.submitForm = function () {
alert($scope.formFriendsAll);
};
$scope.formFriendsAll = 'Friends';
});
I used the alert to test the change of value when i hit the submit button but i tried various methods like ng-changed, ng-click, ng-value. but nothing helped me solve the issue that my alert and "currently selected" stays on "Friends"
Any suggestions?
ok guys. seems like the AdminLTE.css i used in my head for the design of the radio buttons blocked the angular somehow
I am trying to checkbox when the div.menuitem is clicked and then it should change class and show the content in the div with class of hidediv. When the div.menuitem is again clicked it should remove the class and hide the div again and uncheck the checkbox.
Want I want to do:
Only show the content of the hidediv when the menuitem is pressed. (checkbox should be checked)
When the menuitem is pressed the checkbox should be checked
When the menuitem is clicked again the hidediv should be hidden again. (checkbox unchecked)
And the checkbox should be uncheched
Illustration of my menu form:
<div class="menuitem">
1.Company1
</div>
<div class="hidediv">
1.1 Company 1.1
1.2 Company 1.2
</div>
<div class="menuitem">
1.Company2
</div>
<div class="hidediv">
1.1 Company 2.1
1.2 Company 2.2
</div>
My previous Jquery code, which only is trigger when the checkbox is clicked. I want pretty
similar function to this, the checkbox should also be trigghed when the div is clicked:
$('.menuitem input:checkbox').change(function(){
if($(this).is(':checked')) {
$('div.hidediv').addClass('someclass').show(200); // not needed it there is another way of identifying the div later to add to hidediv class again.
$('div.hidediv').removeClass('hidediv');
} else {
$('div.someclass').addClass('hidediv').hide(200);
}
});
});
My Jquery so far(not working):
$('.menuitem').click(function(e){
$(this).addClass('menuclicked');
$('div.hidediv').addClass('clicked').show(200);
$('div.hidediv').removeClass('hidediv');
} else {
$('div.someclass').addClass('hidediv').hide(200);
}
$('.menuclicked').click(function(e){
$('div.someclass').addClass('hidediv').hide(200);
});
My HTML:
<form accept-charset="UTF-8" action="/" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<div class="menuitem">
<label for="search_company1">company1</label>
<input name="search[company1_is_true]" type="hidden" value="0" /><input id="search_company1_is_true" name="search[company1_is_true]" type="checkbox" value="1" />
</div>
<div class="menuitem">
<label for="search_company3">company3</label>
<input name="search[company3_is_true]" type="hidden" value="0" /><input id="search_company3_is_true" name="search[company3_is_true]" type="checkbox" value="1" />
</div>
<div class="hidediv">
<div class="menuitem">
<label for="search_company2">company2</label>
<input name="search[company2_is_true]" type="hidden" value="0" /><input id="search_company2_is_true" name="search[company2_is_true]" type="checkbox" value="1" />
<div>
</div>
<input id="search_submit" name="commit" style="display:none;" type="submit" value="Submit" />
</form>
I can help. I think you are structuring this wrong. You have three fields in your html, with the third being hidden. I assume when you fill in the first one you want nothing to happen, but clicking the second one should show the third field?
Try this:
//Use toggle instead of .click()
$('.menuitem').toggle(function(){
$('div.hidediv').addClass('clicked').show(200);
}, function(){
$('div.hidediv').removeClass('clicked').hide(200);
});
This will effect all divs with the "menuitem" class, meaning when you click on any of the three it will toggle showing/hiding the div with the "hidediv" class.
edit you have a couple valid answers here, but I think you're approaching this wrong. If you go try the jsfiddle posted by another user, whos' javascript does the same as mine - it reveals the problem I talked about above. You cannot select all three boxes without some clever clicking. Each click will toggle showing/hiding the third check box. Might I suggest modifying your code like so:
//Use toggle instead of .click()
$('.toggleMenuItem').toggle(function(){
$('div.hidediv').addClass('clicked').show(200);
}, function(){
$('div.hidediv').removeClass('clicked').hide(200);
});
<form accept-charset="UTF-8" action="/" method="get">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
</div>
<div class="menuitem">
<label for="search_company1">company1</label>
<input name="search[company1_is_true]" type="hidden" value="0" />
<input id="search_company1_is_true" name="search[company1_is_true]" type="checkbox" value="1" />
</div>
<div class="menuitem toggleMenuItem">
<label for="search_company3">company3</label>
<input name="search[company3_is_true]" type="hidden" value="0" />
<input id="search_company3_is_true" name="search[company3_is_true]" type="checkbox" value="1" />
</div>
<div class="hidediv">
<div class="menuitem">
<label for="search_company2">company2</label>
<input name="search[company2_is_true]" type="hidden" value="0" />
<input id="search_company2_is_true" name="search[company2_is_true]" type="checkbox" value="1" />
<div>
</div>
<input id="search_submit" name="commit" style="display:none;" type="submit" value="Submit" />
</form>
This will make it so only clicking the checkboxes with the class ".toggleMenuItem" will show the third checkbox.
try something like this:
$('.menuitem').click(function(e){
if($(this).hasClass('menuClicked')){
// Already clicked
$(this)
.removeClass('menuclicked')
.html("");
}else{
// First click
$(this)
.addClass('menuclicked');
.html($('#hidediv').html());
}
})
This may do what you're looking for:
$('.menuitem').click(function(e){
$(this).toggleClass('clicked');
$('div.hidediv').toggle(200);
});
Let me know if it is missing a feature.
http://jsfiddle.net/citizenconn/2bCdR/