Request is being sent to server twice - javascript

I am submitting a form to server using following method:
HTML Form
<form class="navbar-search pull-left" onsubmit="return mera()">
<input placeholder="Search" class="search-query span2" name="query" type="text" id="query" style="width:300px">
</form>
Method
<script>
function mera() {
alert('this is something!');
var query = document.getElementById('query').value;
window.location = '../Translation/Search_Query?query=' + query;
return false;
}
</script>
It sends request twice to server on single submission. But shows alert only once for first time. How to fix it ?

You dont need javascript. Simply use GET method
HTML :
<form class="navbar-search pull-left" method="GET" action="../Translation/Search_Query">
<input placeholder="Search" class="search-query span2" name="query" type="text" id="query" style="width:300px">
</form>
When you submit the form, this will become :
http://example.com/Translation/Search_Query?query=query
Hope this makes sense.

Try this
<script>
function mera() {
alert('this is something!');
var query = document.getElementById('query').value;
window.location = '../Translation/Search_Query?query=' + query;
return true;
}
</script>
<form class="navbar-search pull-left" onsubmit="return mera();">

why dont you change you code a bit. only thing is it will post the value instead of get.
<form class="navbar-search pull-left" action="../Translation/Search_Query">
it will submit your value once you submit the form.
Note : you might need to change the action as per your servlet mapping.
UPDATE
<script>
function mera() {
document.getElementById('testForm').submit();
}
</script>
<form id="testForm" class="navbar-search pull-left" onclick="mera();" method="GET" action="../Translation/Search_Query">

Related

jQuery - Submit Form to RESTful URL

My mind has gone 100% blank on this so need some guidance please.
<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search...">
<input type="submit" value="Search">
</form>
I need that form so the page redirects to a URL such as
http://example.com/rest/ful/url/{value of search}/ e.g. http://example.com/rest/ful/url/jQuery/ if I searched for jQuery
Do I even need jQuery for this?
Solution with jquery:
$('#searchForm').on('submit', function(event){
$('[name=s]').prop('disabled', true)
$(this).attr('action', 'http://example.com/rest/ful/url/' + $('[name=s]').val());
});
https://jsfiddle.net/3y4efht0/1/
Use .submit event of jquery and fetch the input value and use window.location.href to achieve your requirement.
Please check below snippet.
$("#searchForm").submit(function( event ) {
var searchTerm = $("input[name='s']").val();
if($.trim(searchTerm)!=""){
var redirectURL = "http://example.com/rest/ful/url/"+$.trim(searchTerm)+"/";
console.log(redirectURL);
window.location.href=redirectURL;
}else{
alert("Please enter search term!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search...">
<input type="submit" value="Search">
</form>
You don't need jquery to do that, but it can help, you have to listen for the submit event, prevent the default behaviour and redirect to the page you want :
$('#searchForm').on('submit', function(e){
e.preventDefault();
document.location.href = 'http://example.com/rest/ful/url/'+$('#s').val()+'/'
})

POST form to new window

I'm going to try my hardest to try and explain what I'm trying to achieve essentially what I'm after is for the form to POST to the post_form_here.html and then to redirect the main page to redirect_main_page.html I need the form to post the values to the popout window and then to redirect the main page to the redirect page.
<form method="POST" onclick="window.open('POST_FORM_HERE.HTML', 'newwindow',
'width=500,height=500'); return true;" action="REDIRECT_MAIN_PAGE.HTML">
This is what I have so far however this posts the form to the redirect_main_page.html and not the post_form_here.html. Thank-you for any help and I hope I've explained what I'm trying to achieve well enough.
use target="_blank" in form
<form action="demo_form.asp" method="get" target="_blank">
</form>
If you want new window use like this
<form method="post"
target="new_popup"
action="https://www.google.co.in/"
onsubmit="window.open('about:blank','new_popup','width=500,height=300');">
<input type="text" />
<input type="submit" />
</form>
Try this
HTML
<form id="form">
<input type="text" name="name" >
<input type="text" name="age" >
<input type="submit">
</form>
JS
var form = $("#form");
form.on("submit",function(){
window.open("POST_FORM_HERE.html?" + form.serialize(), "newwindow", 'width=500,height=500');
window.location.href = "/REDIRECT_MAIN_PAGE.html";
return false;
})

use js functions return value for html form action attribute

I want to use the return value of a JS function as the URL for a form get action. Is it possible or do I need to set the form attributes with a function call in the onSubmit attribute?
edit: this is basically what i want to do
<div class="search">
<form method="get" action="https://duckduckgo.com/" id="search-form">
<input id="searchbar" type="text" name="q" size="31" maxlength="255" value="" autofocus="autofocus"/>
</form>
<script type="text/javascript">
document.getElementById("search-form").action = "bang()";
</script>
</div>
the bang function is an implementation of the bang system from DDG in JS, so i can easily add bangs to a searchbox in my webpage.
You can use the onsubmit event for the form to set the action before the actual submit happens.
<form id="testForm" methods="get" action="#" onsubmit="setFormUrl()">
Search: <input type="text" name="q" />
<input type="submit" value="Go" />
</form>
function bang()
{
return "http://www.google.com";
}
function setFormUrl()
{
var url = bang();
document.getElementById('testForm').setAttribute('action', url);
}

javascript function call for single form

I have multiple forms in my php file for different buttons. So, if I click on Back button, ramesh.php script should be called and so on. This is the code.
<form action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
<form action="update.php" method="post" >
<button type="submit">Update</button>
</form>
However, I need to pass some data to server from my client side on form submit just for the update button. I have a javascript function to send the data to server side as below.
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function(e) {
var mydata = 3;
if ($(this).is(':not([data-submit="true"])'))
{
$('form').append('<input type="hidden" name="foo" value="'+mydata+'">');
$('form').data('submit', 'true').submit();
e.preventDefault();
return false;
}
})
})
</script>
If I click on the update button, the javascript function is working fine. However, if I click on Back or Submit button, I should not be calling the javascript function. Is there someway to do this?
Give your form an id:
<form action="update.php" method="post" id="update-form">
Then use a more specific selector:
$("#update-form").submit(function() {
// Code
});
I'm not quite sure why you need JavaScript to dynamically add data to your form, however. You should just use an <input type="hidden" /> directly.
type=submit will always load the form's action. Try to specify wich form to submit.
<form name="backForm" id="backForm" action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form name="form2" id="form2" action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
Now you can access the form via document.backForm or document.getElementById("backForm") and than use submit(); like document.getElementById("backForm").submit();

Force form field value on page load & submit

How could I force a specific value within a form field on page load; and have that value 'Submit' with JavaScript or jQuery?
I tried the below; but no cigar.
<script>
window.onload = function(){
document.forms['coolform'].submit()
}
</script>
Mark-Up.
<form id="search" name="coolform" class="navbar-form form-search" action="#">
<div class="input-append">
<input id="query" type="text" class="search-query" value="Bars" >
<button type="submit" class="btn"><i class="icon-search"></i></button>
</div>
Try the following (jQuery):
$(function(){
var s = $('#search');
$('#query', s).val('The value you want to force in.');
s.submit();
});
HTML:
<input id="query" name="query" type="text" class="search-query" value="Bars" >
you could use ajax to submit the value on document.ready...
$(document).ready(function(){
var query = $('#query').value;
$.ajax({
url:'url/to/your.php',
data:'query='+query,
success:function(data){
//handle response
}
});
});
You need a name attribute on the form field, otherwise it won't be included when the form is submitted:
<input id="query" name="query" type="text" class="search-query" value="Bars" >

Categories