I was just wondering how to go about getting a href to press a button.I want to get btn btn primary when pressed to: press the submit button.
<BODY>
<a class="btn btn-primary" href="#Home"><span class="fui-time"></span></a>
<a class="btn btn-primary" href="#School"><span class="fui-time"></span></a>
<form>
<input type="submit" name="options" id="Home" value="1" />Home
<input type="submit" name="options" id="School" value="2" />School
<input type="submit" name="options" id="Work" value="3" />Work
</form>
</BODY>
Thank-you.Also if you could also provide a in-depth explanation that would be great as I sort of new to javascript.
PS: Is there any way to do it without using the function onClick()
With jQuery:
$('.btn.btn-primary').click(function (ev) {
$(this.href).click();
ev.preventDefault();
});
Although I would say your markup and structure are quite strange, you want to have submit buttons and then links that cause those buttons to be clicked??
try this
<BODY>
<a class="btn btn-primary" href="#Home" onClick="formSubmit()"><span class="fui-time"></span></a> <a class="btn btn-primary" href="#School" onClick="formSubmit()"><span class="fui-time"></span></a>
<form id="myform">
<input type="submit" name="options" id="Home" value="1" />
Home
<input type="submit" name="options" id="School" value="2" />
School
<input type="submit" name="options" id="Work" value="3" />
Work
</form>
</BODY>
<script type="text/javascript">
function formSubmit(){
$("#myform").submit();
}
</script>
You can execute javascript in a link like this <a href="javascript:alert('javascript go')">
Edit: as susheel pointed out this is not a good idea, its much better to just bind or use onClick to trigger the button click.
It would be better to do something like this:
<div onclick="document.myform.submit()"></div> (if you are submitting a form). There is no way to replace a button with another element with raw html. You will need to use javascript one way or another.
check the below fiddle:
http://jsfiddle.net/6Q4Va/3/
$('.btn.btn-primary').on('click',function () {
$(this.href).click();
});
Related
I have this html like
<form method="POST" action="?do=vote&page=vote-page">
<button type="submit" name="vote_id" value="1" class="btn btn-primary" role="button">Vote Now</button>
</form>
<form method="POST" action="?do=vote&page=vote-page">
<button type="submit" name="vote_id" value="2" class="btn btn-primary" role="button">Vote Now</button>
</form>
My question is, I want to click the button based on name and value with jquery or javascript, How to do this?
If I understand correctly, you mean, that you want to execute click if name and value attributes are matching on any button. You can try the following. You should have some event attached to that button, so you can see the effect.
I have attached onclick there and put correct names.
function clickButtons(name,value){
var elements=document.getElementsByTagName("button");
for(var i=elements.length-1;i>=0;--i)
{
var e=elements.item(i);
if(name==e.name&&value==e.value)e.click();
}
}
clickButtons("name_1",2);
<html>
<head>
</head>
<body>
<form method="POST" action="?do=vote&page=vote-page">
<button type="submit" name="name_3" value="3" class="btn btn-primary" role="button" onclick="alert(this.name+', '+this.value)">Vote Now</button>
</form>
<form method="POST" action="?do=vote&page=vote-page">
<button type="submit" name="name_1" value="2" class="btn btn-primary" role="button" onclick="alert(this.name+', '+this.value)">Vote Now</button>
</form>
</body>
</html>
You should of course put correct names and value, I have also changed that.
I have the following html:
<html>
<body>
<div title="test" class="test">hello</div>
<input onclick="" type="confusepuppet" value="google" class="button">
<form action="http://yahoo.com">
<input onclick="" type="submit" value="yahoo" class="button">
</form>
<form action="http://google.com">
<input onclick="" type="submit" value="google" class="button">
</form>
</body>
</html>
and suppose I want to click the button to redirect to google.com, I can't use value="google" or type="submit", I have to use both value="google" AND type="submit" to avoid clicking the wrong button.
How do I accomplish this in puppeteer?
This doesn't work:
await page.click('input[value="google",type="submit"]')
Multiple value selector:
await page.click('input[value="google"][type="submit"]');
You can use attribute selector
const element = await page.$('[value="google"]');
await element.click();
Okay I understand that the JavaScript is not being applied to the entire group because each button is part of a different group, but the documentation says this is the proper way to use justified with the button tag. This would not be an issue except I need them to be justified.
So my question is: how am I supposed to use JavaScript on all three buttons as a whole? It should operate as a simple radio button group.
Click one and the others are unselected. Any advice would be great!
HTML:
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group">
<button type="button" class="btn btn-default">Low Cost/Effeciency</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default active">Average</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">High Cost/Effeciency</button>
</div>
</div>
JavaScript:
$(function() {
$('body').on('click', '.btn-group button', function (e) {
$(this).addClass('active');
$(this).siblings().removeClass('active');
//other things I need to do
})
});
The button elements are not sibling elements.
You need to select the parent element's sibling elements.
Working Example Here
$(document).on('click', '.btn-group button', function (e) {
$(this).addClass('active').parent().siblings().find('button').removeClass('active');
});
However, the proper way to do this is to use the attribute data-toggle="buttons".
In doing so, you don't need to write any custom JS. For more information, see this old answer of mine explaining how it works.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="btn-group btn-group-justified" data-toggle="buttons" role="group" aria-label="...">
<label class="btn btn-default">
<input type="radio" name="options" />Low Cost/Effeciency
</label>
<label class="btn btn-default">
<input type="radio" name="options" />Average
</label>
<label class="btn btn-default">
<input type="radio" name="options" />High Cost/Effeciency
</label>
</div>
In my Django app, I would like to use Twitter bootstrap radio buttons. Then I would like to post the value of those buttons in order to create an object.
Here is my buttons:
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn" name="supporting">Team1</button>
<button type="button" class="btn" name="supporting">Team2</button>
</div>
<div class="span6 btn-group ib" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary active" name="style">relaxed</button>
<button type="button" class="btn btn-primary active" name="style">strict</button>
</div>
<input type="submit" value="create your match">
I would like to get the information from those radio button and create an object match with it in a view:
def test(request):
user=request.user
if request.method == 'POST':
style = request.POST['style']
supporting = request.POST['supporting']
match = Match.objects.create(user=user, style=style, supporting=supporting)
return HttpResponse(test)
The thing is that I don't know JavaScript well, so I didn't find how to get the value from the button.
Then, I think I have to use:
$.post('/sportdub/points_dub/', {'style': style , 'supporting': supporting});
But how can I do so that style and supporting correspond to the value of the buttons, and then to post it only when the user clicks on the button?
Thank you very much for your help.
taking my last answer, let's use your own code... in your HTML you have something like:
<form action="/sportdub/points_dub/" method="post" class="form-horizontal">
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn" name="supporting">Team1</button>
<button type="button" class="btn" name="supporting">Team2</button>
</div>
<div class="span6 btn-group ib" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary active" name="style">relaxed</button>
<button type="button" class="btn btn-primary active" name="style">strict</button>
</div>
<input type="submit" value="create your match" />
</form>
and you just have to add one hidden field per block, in your case, add 2. Your form would then match:
<form action="/page" method="post" class="form-horizontal">
<input type="hidden" id="supporting_team" value="" />
<input type="hidden" id="supporting_type" value="" />
<div class="btn-group supporting_team" data-toggle="buttons-checkbox">
<button type="button" class="btn" name="supporting">Team1</button>
<button type="button" class="btn" name="supporting">Team2</button>
</div>
<div class="span6 btn-group ib supporting_type" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary active" name="style">relaxed</button>
<button type="button" class="btn btn-primary active" name="style">strict</button>
</div>
<input type="submit" value="create your match" />
</form>
add a jQuery helper that will set the values of those hidden fields upon buttons click:
// whenever a button is clicked, set the hidden helper
$(".supporting_team .btn").click(function() {
$("#supporting_type").val($(this).text());
});
$(".supporting_type .btn").click(function() {
$("#supporting_team").val($(this).text());
});
when you click the create your match the entire form will be posted to the page set as the action attribute of the form, you have to do nothing more...
If you want to submit it manually by invoking post in javascript you need to remember to prevent the form to be submitted again as that's the input type="submit" element task, you can invoke your post and serializing the entire form data, instead one by one as in your example...
like:
// when the form is submited...
$("form").submit(function() {
// submit it using `post`
$.post('/sportdub/points_dub/', $("form").serialize());
// prevent the form to actually follow it's own action
return false;
});
in your dynamic code, you will have those variables as:
supportingTeam = request.POST['supporting_team']
supportingType = request.POST['supporting_type']
and this, will be valid, no matter if you have the manually form submit script or not...
After your most recent comment, I think you should try using the input radio buttons provided in HTML. It is very easy to do button groupings, make labels for the inputs, and retrieve which one has been clicked.
Altering your HTML slightly to look like this (the for attribute of the label allows the user to be able to click the label and select the radio button instead of clicking on the button directly):
<div>
<input id="team1" type="radio" name="supporting" value="Team1" /><label for="team1">Team 1</label>
<input id="team2" type="radio" name="supporting" value="Team2" /><label for="team2">Team 2</label>
</div>
<div>
<input id="relaxed" type="radio" name="style" value="relaxed" /><label for="relaxed">Relaxed</label>
<input id="strict" type="radio" name="style" value="strict" /><label for="strict">Strict</label>
</div>
I can get which selections have been made using this:
$('input[name="supporting"]').filter(':checked').val();
$('input[name="style"]').filter(':checked').val();
If you still wish to use buttons, class active is added to a radio button when clicked. To get the button text, try:
$('button[name="supporing"]').filter('.active').text();
$('button[name="style"]').filter('.active').text();
To put this value into a hidden input, do the following:
$('#hiddenInput1').val($('button[name="supporting"]').filter('.active').text());
$('#hiddenInput2').val($('button[name="style"]').filter('.active').text());
i have the bootstrap-button.js and have this markup, but when i click on the button, it does not toggle it to show that it has been clicked. any tips as to what is missing?
<div class="control-group">
<div class="btn-group" data-toggle="buttons-checkbox" data-toggle-name="checkbox_group">
<button class="btn" id="chkbox1" type="button" value="1Fail" data-toggle="button"> 1 Failure </button>
<button class="btn" id="chkbox2" type="button" value="2Fail" data-toggle="button"> 2 Failure </button>
<button class="btn" id="chkbox3" type="button" value="OtherFail" data-toggle="button"> Other Failure </button>
</div>
<input type="hidden" name="checkbox_group" value="1"/>
</div>
second part of the question is how to get the data into javascript as to which button was clicked? if 1Fail was clicked, it should toggle and js code to detect that 1Fail was clicked. Thanks in advance.
The problem seems to be that you added data-toggle="button" to every check button, which is not necessary. Because you already have data-toggle="buttons-checkbox" in the outer div element .
So change it to look like this:
<div class="control-group">
<div class="btn-group" data-toggle="buttons-checkbox" data-toggle-name="checkbox_group">
<button class="btn" id="chkbox1" type="button" value="1Fail" > 1 Failure </button>
<button class="btn" id="chkbox2" type="button" value="2Fail" > 2 Failure </button>
<button class="btn" id="chkbox3" type="button" value="OtherFail" > Other Failure </button>
</div>
<input type="hidden" name="checkbox_group" value="1"/>
</div>
EDIT:
Sorry, I didn't notice your second question. When a button is clicked an active class will be added to it, so you can detect this with jQuery's hasClass method.