I want to ask why won't my Javascript function do the enclosed jQuery function $.getJSON()?
HTML
<form action="" method="get">
<input id="search" name="search" type="text" class="map-search form-control input-sm"/>
<span class="input-group-btn">
<input class="map-search btn btn-default btn-sm" type="submit" onclick="nominatim_search()" />
<span class="glyphicon glyphicon-search"></span>
</span>
</form>
Javacript
function nominatim_search() {
var query = document.getElementById("search").value;
$.getJSON('http://nominatim.openstreetmap.org/search/ph/'+query+'?format=json&limit=1&polygon_geojson=1&bounded=1&addressdetails=1', function (boundary) {
var json = boundary[0].geojson;
L.geoJSON(json).addTo(map);
});
}
It would enter the function however and alert the query, however the JSON won't load. I would outside of the function.
input isn't a templated tag, so you must close it without put other tag inside:
<input class="map-search btn btn-default btn-sm" type="submit" onclick="nominatim_search()" />
The form <input> ..... </input> isn't valid for html
UPDATE
To solve the issue, it's mandatory to change the input type="submit", because the submit causes the reload of the page before the end of the function in the script. In the comment section of this answer, I suggest to use input type="button" and that did the trick. Other solutions like replace the input with a <button type="button"> tag are good enough to be considered as valid for this question, maybe a <button type="button"> tag is more compliant to the question needs because it's a templated tag, so it can be written with other tag inside.
You didnt close input tag, just add >:
<input class="map-search btn btn-default btn-sm" type="submit" onclick="nominatim_search()">
Here Just try Replacing your markups with these. Since your using Span for modifying the text of the button, use <button> instead of <input>.
HTML
<form action="" method="get">
<input id="search" name="search" type="text" class="map-search form-control input-sm">
<span class="input-group-btn">
<button class="map-search btn btn-default btn-sm" type="button" onclick="nominatim_search()" />
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</form>
Let me know if it helped with your problem.
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 a simple button:
<p><button class="btn btn-lg btn-success btn-parks"
onclick="search()">Get started today</a></p>
On click I want to completely replace the above code with a search field. I'm wondering what the best way is to replace the code above with the code for the search field onclick using JavaScript or JQuery.
<div class="box">
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>
Use element.outerHTML='NEW HTML'
To get the current element, pass this as argument
To replace p element as well, Use elem.parentElement.outerHTML => parentElement will return parent node of the owner node..
Try this:
var html = '<div class="box">\
<div class="container-1">\
<span class="icon"><i class="fa fa-search"></i></span>\
<input type="search" id="search" placeholder="Search..." />\
</div>\
</div>';
function search(elem) {
elem.outerHTML = html;
}
<p>
<button class="btn btn-lg btn-success btn-parks" onclick="search(this)">Get started today</button>
</p>
First of all - your code is not valid: tag starts as <button> but ends as </a>.
To hide initial search .box you can place it in <script> tag and set it's type attribute to unrecognizable (random text). After clicking button take this template inner html and replace it with your code.
Also I have passed this to function to get element you clicked, so you can have multiple same purpose elements.
function search(el) {
$(el)
.parents()
.eq(1)
.html($('#box-tpl').html())
;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>
<button class="btn btn-lg btn-success btn-parks" onclick="search(this)">Get started today</button>
</p>
</div>
On click I want to completely replace the above code with a search field. I'm wondering what the best way is to replace the code above with the code for the search field onclick using JavaScript or JQuery.
<script type="text/tmpl" id="box-tpl">
<div class="box">
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>
</script>
you can use onclick
$('#id').on('click', function(e){
$('#id').replaceWith('<input type="text" name="q" size="25" id="newelement" value=""/>');
});
if you want cursor in input field in onclick event
$("newelement").focus();
Try this:
function search(){
var button = document.getElementsByClassName('btn btn-lg btn-success btn-parks');
var button0 = button[0];
button0.outerHTML = ('<div class="box"> <div class="container-1"> <span class="icon"><i class="fa fa-search"></i></span> <input type="search" id="search" placeholder="Search..."/> </div></div>');
}
Use jQuery's hide() and show() functions:
$('button').click(function(){
$('.button').hide();
$('.box').show();
});
$('button').click(function(){
$('.button').hide();
$('.box').show();
});
.box{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="button">
<button class="btn btn-lg btn-success btn-parks" onclick="search()">Get started today</button>
</p>
<div class="box">
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>
jsFiddle with Bootstrap styles
I am trying to do a function like I have one input field and two buttons for two different actions but fetch the same input value.
Button 1
<form id="formAddUser" name="search" method="post" action="/maps">
<input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
<br>
<br>
<button id="btnSubmit" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
</form>
Button 2
<form id="formAddUser" name="search" method="post" action="/biodata">
<button id="btnSubmit" class="btn btn-info primary" type="submit">View BioData</button>
</form>
I have one text where I take the ID of pilgrim and provide two buttons 'view biodata' and 'view location'
How can I get the input value of one html element to pass to two javascript functions to perform some actions with the inputs?
I've typically put both buttons on the form and used jQuery to attach On Click events to change the action of the form. Try this ...
<form id="formAddUser" name="search" method="post" action="/maps">
<input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
<br>
<br>
<button id="btnSubmit1" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
<button id="btnSubmit2" class="btn btn-info primary" type="submit">View BioData</button>
</form>
Then, also add (jQuery must be loaded) ...
$("#btnSubmit1").on('click', function() {
$("#formAddUser").attr("action", "/maps");
});
$("#btnSubmit2").on('click', function() {
$("#formAddUser").attr("action", "/biodata");
});
The default action of the form submit will still operate, with different actions.
First: do you have two buttons with same ID? You need to choose different IDs, like btnLocate and btnBiodata.
Second: put the two buttons inside the same form. Sorry if I wrong, but I understand that you have two forms with same ID (again). So, you need just one form, somethink like this:
<form id="formAddUser" name="search" method="post" action="/maps">
<input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
<br>
<br>
<button id="btnLocate" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
<button id="btnBiodata" class="btn btn-info primary" type="submit">View Biodata</button>
</form>
Later, you need to create a JavaScript function. You know how to create? With JavaScript function you can call elements by ID. Example, if I want to change the text of btnLocate:
<script type="text/javascript">
function changeText() {
document.getElementById("btnLocate").innerHTML = New Text;
}
</script>
To add JavaScript on
Now, call the function on the click event of the button, for example:
<button id="btnLocate" class="btn btn-info primary" type="submit" onClick="changeText()">Locate Pilgrim</button>
This is simple example, with ID of element, you can change what you want. If you want to display something on screen, use alert("Text here") inside JavaScript function.
Hope I can help.
Bye,
Pasch.
Put everything in the same form and use the formaction attribute on one or both of the buttons.
formaction overrides the action attribute on the form tag if that particular button is clicked.
I'm on my phone right now, so it's hard to type up an example, but http://www.wufoo.com/html5/attributes/13-formaction.html has some good information.
<form method="post" action="/selector">
<input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
<button name="action" value="view-data" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
<button name="action" value="locate" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
</form>
In selector you can figure out what to do using value of the action.
You could combine both buttons and a text input into single form and use JavaScript (via onclick attribute) to change form action based on the button clicked.
<script>
function setMapsAction(){
formAddUser.action = "/maps";
}
function setBioAction(){
formAddUser.action = "/biodata";
}
</script>
<form id="formAddUser" name="search" method="post" action="see-script">
<input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
<br>
<br>
<button id="btnSubmitMaps" class="btn btn-info primary" type="submit"
onclick="javascript:setMapsAction()"
>Locate Pilgrim</button>
<button id="btnSubmitBio" class="btn btn-info primary" type="submit"
onclick="javascript:setBioAction()"
>View BioData</button>
</form>
<form class="form-asd" role="form">
<h2>REGISTER</h2>
<hr />
EmailAddress:
<input class="form-control" type="text" id="email" required/>
<br />
Password:
<input class="form-control" type="password" id="Password" required />
User Type
<input style="width: 2.2em;height:1.3em" id="ContributorRdb" type="radio" name="choose" value="Contributor" required/>Contributor
<input style="width: 2.2em;height:1.3em" id="CategoryRdb" type="radio" name="choose" required/>
<select class="btn btn-default dropdown-toggle" id="Select" disabled="disabled">
<option selected="selected" disabled="disabled">type</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
<br/
<input class="btn btn-lg btn-sucess" id="Register" value="Sign up"/>
</form>
<script>
$(document).ready(function () {
$('#Register').click(function () {
alert("this is submitted");
});
})
</script>
This above form works well without tag type= submit but when i modify the button to input class="btn btn-lg btn-sucess" id="Register" value="Sign up" type="submit" this form stops working so is there any way to use type ="submit" in this input tag.
I can imagine that the form doesn't work.
Form attributes
Wrong: <form class="form-asd" role="form">
This should contain action and method.
Good: <form class="form-asd" role="form" action="" method="post">
Submit button
Wrong: <input class="btn btn-lg btn-sucess" id="Register" value="Sign up"/>
Should contain the type
Good: <input type="submit" class="btn btn-lg btn-sucess" id="Register" value="Sign up"/>
jQuery (not sure if you even include the library)
Wrong: $('#Register').click(function () {
Never asume that users always click the button (you can also use the enter key)
Good: $('form').submit(function () { (I would use a class or id in the form tag)
jQuery 2
You don't prevent the default action, so your form will be submitted always.
You can add something like return false; or event.preventDefault(); in the jQuery callback.
Why not just submit the form, if that is what are you trying to attain. You can do this inside your document ready function like..
$('.form-asd).submit();
Or if this is the only form in your document then you can target the form using the form element selector like
$('form').submit();
Hope it helps :=)
you can do a following change to the code to make it work.
<input class="btn btn-lg btn-sucess" id="Register" value="Sign up"/>
to
<input type="button" class="btn btn-lg btn-sucess" id="Register" value="Sign up"/>
but definitely you should use the best practices suggested in the previous answer.
I think you must set action for the form <form class="form-asd" role="form" action='youraction'> and you can call document.forms[0].submit() in javascript, It will submit form.
Hope this help!
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());