<body style="margin:0px; padding:0px;" >
<form method="post" >
<input type="text" id="city" name="city" placeholder="city">
<input type="submit" value="Search" id="searchid"/>
</form>
<script>
$("#searchid").click(function() {
var city=$("#city").val();
$.ajax({
type:'POST',
data:city,
url:'mm.php',
success:function(data) {
alert(data);
}
});
});
</script>
I am new to javascript.I want to search a city in google map using ajax query.But my ajax query is not working properly.It does not opening the given url.
Your Submit button is inside an html form. When you click this button you need to prevent the entire form to be posted, in order to be able to run your Ajax instead. Try this...
<input type="submit" value="Search" id="searchid" onclick="javascript: return false;" />
Apart from that, what Mayk pointed out is also correct. The parameter for sending city needs to have a name. With these two changes your code worked for me when calling an Http Handler created in .Net.
Related
I need to use Javascript window.location.assign() to take input from a user in an inputbox and once a button is clicked the user will be taken to the URL they entered in that inputbox- I am having difficulty finding this online. I am assuming I would need to add a function to my script (not shown).
<form style="padding-top: 20px;">
URL: <input type="url" name="url">
<input type="button" value="GO!" onclick="newUrl()">
</form>
First, instead of putting the function in "onclick" in the button, I suggest putting it on the form element's "onsubmit" handler. That way, a simple "Enter" key can also cause the navigation.
Second, since we're putting the callback on the form, the form's action should changed to 'javascript', like this:
<form style="padding-top 20px;" action="javascript://#" onsubmit="newUrl(this.elements['url'].value)">
URL: <input type="text" name="url">
<input type="submit" value="GO!">
</form>
I've put the url in the first parameter of the "newUrl" function, for ease of writing.
Finally, your "newUrl" function:
function newUrl(url) {
window.location.assign(url);
}
Before using the window.location.assign I would like you to read this
https://developer.mozilla.org/en-US/docs/Web/API/Location/assign
The Location.assign() method causes the window to load and display the
document at the URL specified.
If the assignment can't happen because of a security violation, a
DOMException of the SECURITY_ERROR type is thrown. This happens if the
origin of the script calling the method is different from the origin
of the page originally described by the Location object, mostly when
the script is hosted on a different domain.
If the provided URL is not valid, a DOMException of the SYNTAX_ERROR
type is thrown.
Here is the what you can do to use it
function newUrl(){
window.location.assign(document.getElementById("url").value);
}
<form style="padding-top: 20px;">
URL: <input type="url" name="url" id="url">
<input type="button" value="GO!" onclick="newUrl()">
</form>
Simple alternative
<form style="padding-top 20px;" onsubmit="this.action=document.getElementById('url').value">
URL: <input type="text" id="url">
<input type="submit" value="GO!">
</form>
I have a form that takes a users input and redirects to a the window to a URL with their input appended to the end.
Here is my HTML
<form id="wikiForm">
<label id="sideBarLabel">VoIP Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="submit" value="Search" onclick="searchWiki();" />
</form>
The javascript it runs
function searchWiki() {
alert("Form Works!");
var siteQuery = $('#query-string').val();
window.location.href = "http://wiki.voipinnovations.com/dosearchsite.action?queryString=" + siteQuery;
alert("SECOND MESSAGE");
}
The issue is that it does not redirect. It only appends the 'siteQuery' variable to the end of the current URL. I know its calling the javascript because I see both alerts. I'm not sure what I'm doing wrong here.
There reason is because you using type="submit", which submits and sends an GET header to the default action parameter (current page).
Change the type="submit" to type="button".
<form id="wikiForm">
<label id="sideBarLabel">VoIP Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="button" value="Search" onclick="searchWiki();" />
</form>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
function searchWiki() {
alert("Form Works!");
var siteQuery = $('#query-string').val();
alert(siteQuery);
window.location.assign("http://wiki.voipinnovations.com/dosearchsite.action?queryString=" + siteQuery);
alert("SECOND MESSAGE");
}
</script>
I tried the code with type="submit" and it's alerting, but not redirecting, because the submit is prioritized before the window.location change, thats the reason it just appends a ?queryString=value to the current url.
If you change the type like showed in the code above, it's working perfectly.
The issue is due to the fact that you're actually submitting your form, and the redirection is lost as the form submission occurs first. There are two easy ways to fix this:
Change the type of the input from submit to button, OR
Stop the submission of the form by returning false from your function and changing the call of the function to onclick="return searchWiki();"
jsFiddle example (1)
jsFiddle example (2)
Can't you just use assign?
window.location.assign("http://wiki.voipinnovations.com/dosearchsite.action?queryString=" + siteQuery);
Check out: http://www.w3schools.com/js/js_window_location.asp
Use default action and method attributes instead
The HTML form element provides the mechanism for doing this out of the box.
<form id="wikiForm" action="http://wiki.voipinnovations.com/dosearchsite.action" method="GET">
<label id="sideBarLabel">VoIP Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="submit" value="Search" />
</form>
But, if you must use javascript, make this change:
From:
window.location.href = "…";
To:
window.location.assign("…"); // or
window.location = "…"
This is because location.href is a read-only property and location.assign() is the proper method for setting the new location to be loaded. You may also directly assign a string to the location object:
Whenever a new value is assigned to the location object, a document
will be loaded using the URL as if location.assign() had been called
with the modified URL.
Source: MDN
Change input type=submit to type=button
http://plnkr.co/edit/w4U7Sbm3XSKN8j3zUFMe?p=preview
<form id="wikiForm">
<label id="sideBarLabel">VoIP Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="button" value="Search" onclick="searchWiki();" />
</form>
trying to open search results in window (enter and click) it looks like the code is doing what I want it to do except accessing the actual search url any help is greatly appreciated.
the site is also on dev so you can see what I mean if you enter a search term.
http://staging.asla.org/2014awards/index.html
Code:
<script type="text/javascript">
$(document).ready(function() {
$('form[role="search"]').submit(function() {
var url = "http://asla.org/awardssearch.html";
url += "?s=" + $('#GoogleCSE').val();
window.location = url;
});
});
</script>
<form class="navbar-form navbar-right" role="search">
<div class="search">
<input id="GoogleCSE" type="text" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" value="Search All Awards" name="Search All Awards" />
<input id="submit" type="submit" value="Search" />
</div>
</form>
Setting the location doesn't work beacuse the browser has already started to post the form. The browser will go to the page specified in the action attribute in the form, and as you don't have one, it will use the current page.
Use the preventDefault method to stop the posting of the form:
$('form[role="search"]').submit(function(e) {
e.preventDefault();
...
The issue caused is because of the on focus and onblir event where you are trying to show a placeholder text,
Change your input text to
<input id="GoogleCSE" type="text" placeholder="Search All Awards"/>
It should work.
I'm making a user script for a site, and my goal is to submit a form on a page that I haven't opened. If I remove all unneeded bits from the page with the form that I want to submit, this is what is left (censoring the links):
<form action="http://foo.com/supply/" method="POST" name="supplyContractForm">
<input type="hidden" name="supplyContractData[selected][]" value="2244068">
<input type="type" name="supplyContractData[party_quantity][2244068]" value="123">
<input type="text" value="0" name="supplyContractData[quality_constraint_min][2244068]">
<input type="submit" name="applyChanges">
</form>
It's all about the third line: with the 'value="123"'.
I want to change that value to "222".
What do I do: I change the input value from "123" to "222", I press the submit button, and the form submits: the page reloads, and the value shown is "222".
Exactly as I want.
Now, this was all manual, and I want it scripted.
This works:
$("input:submit").click();
However, this doesn't work:
$("form").submit();
And this doesn't work either:
$.post($("form").attr("action"), $("form").serialize())
How can I post this form using Ajax, in a way I can change the value from http://foo.com/main/?
Note: I can only do things client-side, I'm just making a user script, and I can't see the server-side code.
This would do the trick
Html, notice the addedd class for cleaner js:
<form action="http://foo.com/supply/" method="POST" name="supplyContractForm">
<input type="hidden" name="supplyContractData[selected][]" value="2244068">
<input class="changer" type="type" name="supplyContractData[party_quantity][2244068]" value="123">
<input type="text" value="0" name="supplyContractData[quality_constraint_min][2244068]">
<input type="submit" name="applyChanges">
</form>
Js:
$('form input.changer').val('222');
$('input:submit').click();
The reason why $('form').submit() might not work would be because $('form') matches multiple element, ie do you have multiple forms in your html? if so make the selector more unique, via either adding ids or classes so your selected becomes:
$('#formid').submit();
Ajax
This doesn't use ajax though, for that you would need:
var form = $('form');
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
success: function(){
alert('Form posted via ajax!');
}
});
I am new to HTML. I have got an URL in the following format:
dosomething?param1=abc¶m2-xyz
This URL is guaranteed to be valid.
How I have got an HTML page with a button on that. What I want to do is to send a GET request to the URL by clicking the button.
I have tried this:
<form method="GET" action="dosomething?param1=abc¶m2-xyz">
<button>DO Something</button>
</form>
The problem is that the parameters are missing on the server side.
What is the proper way to do this? I cannot make an Ajax call on this as it will be a file downloading action and people told me that it won't work with Ajax.
Javascript solution is OK for me.
Please help.
You dont need Javascript for this as you can simply form your request like
<form method="GET" action="dosomething">
<input type="hidden" name="param1" value="abc">
<input type="hidden" name="param2-xyz" value="">
<input type="submit" value="DO Something">
</form>
see http://www.w3schools.com/html/html_forms.asp
Of course you could also use Javascript, you might want to look into using JQuery with http://api.jquery.com/jQuery.get/
see also HTTP GET request in JavaScript?
Furthermore, out of interest, what did "people" tell you about "Ajax won't work"?
The GET paramaters are passed by the input tag. This is a proper way :
<form method="GET" action="dosomething.php">
<input type="text" name="customparam" />
<input type="hidden" name="param1" value="value1" />
<input type="hidden" name="param2" value="value2" />
<input type="submit" />
</form>
When you will click on the submit button, you will be on dosomething.php?customparam=whatiwrote¶m1=value1¶m2=value2
On your page "dosomething.php", you can access these params with that :
<?php
$customparam = $_GET['customparam'];
$param1= $_GET['param1'];
$param2= $_GET['param2'];
echo "The value of param1 is : ".$param1;
?>
If the params don't move, you can also put them in a link directly with :
<a href="dosomething.php?param1=value1¶m2=value2" >My link </a>