use button on form without submit - javascript

I created a form in which I need to use these two tags. My problem is that every time the user clicks on it, the form is submitted. I used onclick="return false" as follows, but the values ​​are not sent in the url Query.
<div class="btn-group d-flex justify-content-center col-11 mx-auto" role="group">
<button type="radio" onclick="return false" name="type" value="rent" class="btn btn-lg btn-light pr-4 pl-4" id="left">YES</button>
<button type="radio" onclick="return false" name="type" value="sale" class="btn btn-lg btn-light pr-4 pl-4" id="right">NO</button>
</div>
<div class="col-11 mx-auto">
<button class="btn btn-block btn-danger">Submite</button>
</div>

<button type="radio"
Radio buttons are input elements, not button elements. They are also empty/void elements which can't have children, so use a label element instead.
<input type="radio" name="type" value="rent" class="btn btn-lg btn-light pr-4 pl-4" id="left">
<label for "left">Yes</label>
Note that screen reader software tends to read out content in all-caps letter-by-letter. Write in normal sentence case and use the CSS text-transform property to present it in upper-case instead.

Related

Get value from html button attribute

I have the following likert scale:
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<a class="btn btn-link disabled" disabled style="width:10px">Not<br />Fearsome</a>
<button id="fear1" type="button" name="gender" class="btn btn-default likert-1" val="0">1</button>
<button id="fear2" type="button" name="gender" class="btn btn-default likert-2" val="1">2</button>
<button id="fear3" type="button" name="gender" class="btn btn-default likert-3" val="2">3</button>
<button id="fear4" type="button" name="gender" class="btn btn-default likert-4" val="3">4</button>
<button id="fear5" type="button" name="gender" class="btn btn-default likert-5" val="4">5</button>
<a class="btn btn-link disabled" disabled style="width:10px">Extremely<br />Fearsome</a>
</div>
</div>
I am trying to access the 'val' attribute from a script by using:
$('#fear').val($(this).getAttribute('val'));
but this does not seem to work.
Note: #fear is the id of a hidden variable
getAttribute is a standard DOM method but you are trying to call it on a jQuery object.
Either use a standard DOM object:
this.getAttribute('val')
or use the jQuery attr method:
$(this).attr('val')
Note that val is not a valid attribute for the button element. Consider data-val instead.
Alternative, avoid adding an extra attribute with redundant information in the first place.
$(this).text();
none of the element has id "fear", check u have named them like fear1, fear2, fear3 ....
try
$(this).attr('val');
Try this: $('#fear').attr('val');
As suggested by #DimalChandrasiri, use
$(this).attr('val') or $('#fear').attr('val')

Slide div under button clicked within a list of buttons

I have a section tag that contains a div which consists of a list buttons. I have a hidden div within this button div that I want to slide down under the button clicked which pushes down the rest of the content below it. How would i go about this? I have tried using the CSS position : relative but I don't think I'm using it correctly. Here is my HTML code:
<section style="float: left;" id="querySelection">
<div id="queryButtons">
<input class="btn btn-info net-man" id="zStory11" type="submit"
value="Top 10 Market/Operator/Cell ID combinations" />
<input class="btn btn-info net-man" id="failuresPerDeviceBtn" type="submit"
value="Failures per Device" />
<input class="btn btn-info cust-rep supp-eng net-man" id="failuresPerImsiBtn" type="submit"
value="Failures per IMSI" />
<input class="btn btn-info cust-rep net-man supp-eng" id="st6_CauseCodesPerImsiBtn" type="submit"
value="Failure Cause Codes per IMSI" />
<input class="btn btn-info supp-eng net-man" id="imsisPerFailureClassBtn"
type="submit" value="IMSI's Per Failure Class"/>
<input class="btn btn-info net-man" id="top10ImsiCallFailsTimePeriod" type="submit"
value="Top 10 IMSIs with Call Failures" />
<div id="queryPanel">
</div>
</div>
</section>
How would i go about sliding the "queryPanel" div below the button clicked. Here is the JavaScript used when a button is clicked.
if($('#queryPanel').is(':visible')){
$('#queryPanel').slideToggle("fast");
}
else{
$("#queryPanel").slideToggle("slow");
}
At the moment this slides the "queryPanel" div under the "queryButtons" div which is not the desired result
This is what I came up with:
$(".net-man").click(function(){
var elem = $("#queryPanel");
$("#queryPanel").remove();
elem.insertAfter($(this));
$("#queryPanel").hide().slideToggle("fast");
});
Here is the JSFiddle demo

Toggle one button at at time Bootstrap

I've been playing with this for the last hour and can't seem to figure out how to have one button toggle at a time. Also trying to have the button change to different color So if I click button1 it toggles. If I then click button2, then button1 untoggles and button2 toggles.
Here's what I have so far
<div class="Demo-boot" style="padding:30px;">
<button type="button" class="btn btn-primary" data-toggle="button">Button1</button>
<button type="button" class="btn btn-primary" data-toggle="button">Button2</button>
</div>
Here it is in action:
http://www.bootply.com/MaxkTJs3HH
You need to set it up in a button group like this::
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Button 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Button 2
</label>
</div>
first add some ids to the buttons
<div class="Demo-boot" style="padding:30px;">
<button id="button_one" type="button" class="btn btn-primary" data-toggle="button">Button1</button>
<button id="button_two" type="button" class="btn btn-primary" data-toggle="button">Button2</button>
</div>
Next add some jquery
$('#button_one').click(function (e) {
$('#button_two').removeClass('active')
});
$('#button_two').click(function (e) {
$('#button_one').removeClass('active')
});
the running product : http://www.bootply.com/tT4yYWxjyk

How to change class name of a button

I have four buttons like this
<div class="btn-group">
<button id="btn-men" class="btn btn-default active"
i18n:translate="men">Men</button>
<button id="btn-women" class="btn btn-default" i18n:translate="women">Women</button>
<button id="btn-kids" class="btn btn-default" i18n:translate="kids">Kids</button>
</div>
And I have different css styles for the class "btn btn-default active" and "btn btn-default". what I want to know is if there is any way of changing the class name of the clicked button as btn btn-default active from btn btn-default and also change the unclicked button as btn btn-default during run time.
I also use i18n for mulitilingual purpose.
Use addClass() and removeClass() for this purpose
$(".btn-default").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
});
Demo
Looks like you are using bootstrap, so solve it using bootstrap way
<div class="btn-group" data-toggle="buttons">
<label id="btn-men" class="btn btn-default active">
<input type="radio" name="options" id="option1" checked /> Men
</label>
<label id="btn-women" class="btn btn-default">
<input type="radio" name="options" id="option2"/> Women
</label>
<label id="btn-kids" class="btn btn-default">
<input type="radio" name="options" id="option3"/> Kids
</label>
</div>
Demo: Fiddle
Look at the radio example under bootstrap buttons

Issue on Submitting a Form using jQuery

Can you please take a look at this Demo and let me know why I am not able to submit the Form (No Alert after clicking the Submit Button).
<div class="container">
<form id="target">
<div class="btn-group btn-group-xs pull-right" data-toggle="buttons">
<label class="btn btn-default yesactive active ">
<input type="radio" name="options" id="option1"><span class="glyphicon glyphicon-ok" />
</label>
<label class="btn btn-default noactive">
<input type="radio" name="options" id="option2"><span class="glyphicon glyphicon-remove" />
</label>
</div>
<button type="button" class="btn btn-default btn-sm" id="submit">Submit</button>
</form>
</div>
<script>
$( "#target" ).on( "submit", function( e ) {
alert("Handler for");
e.preventDefault();
});
</script>
Change
<button type="button" class="btn btn-default btn-sm" id="submit">Submit</button>
To
<button type="submit" class="btn btn-default btn-sm" id="submit">Submit</button>
You are calling the event on "Submit", but in your button the type of the button is not submit. If you change to submit then it will cater for the submit event.
http://jsfiddle.net/s3774/13/
Try this one out. JQuery uses an input of type submit for form submissions.

Categories