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
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()+'/'
})
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;
})
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);
}
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();
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" >