We Keep Coding

Javascript Html button

I currently have a button in HTML with the following code:
<form id="tfnewsearch" method="get" >
<input type="text" id="search_query" name="q" size="21" maxlength="120"><input type="button" id="search_button" name="search" value = "Search"onclick="doSearch(this.form.q)">
</form>
The function 'doSearch()' works only if I click the submit button. What changes do I have to do if it has to work even if I just press the Enter key?

<form id="tfnewsearch" method="get" onsubmit="doSearch()" >
Simply change the onclick to an onsubmit and attach it to your form!

The proper way it to move it to simple JS script
<script type="text/javascript">
var form = document.querySelector('#tfnewsearch'),
query = form.querySelector('[name="q"]');
form.addEventListener('submit', function(){
doSearch(query.value);
});
</script>

Issue with javascript retrieve form data for url

I am kind of new to javascript however I have created a submit form that I want to redirect me to a url based on form input. Here is my current code...
The issue I'm running into however is that the form is sending me the initial value rather than the updated form value (It is using "whatevs" no matter what).
HTML
<form id="Search-Form" onClick="genURL()"><label>Value: </label>
<input type="text" id="search" placeholder="Enter Value"></input>
<div id="search-buttons">
<input id="searchSubmit" value="whatevs" type="submit" tabindex="1" />
</div>
</form>
Javascript
function genURL() {
var searchSubmit = document.getElementById("searchSubmit").value;
window.location = "randomsite/view" + searchSubmit;
}

Add return and use onsubmit:
<form id="Search-Form" onsubmit="return genURL()"><label>Value: </label>
<input type="text" id="search" placeholder="Enter Value"></input>
<div id="search-buttons">
<input id="searchSubmit" value="whatevs" type="submit" tabindex="1" />
</div>
</form>
Revise function like so:
function genURL()
{
location.href = "randomsite/view" + document.getElementById("search").value;
return false;
}
If you were to use onclick, it would go on the button, not the form.

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);
}

Request is being sent to server twice

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">

JQuery: How to check the value of a form field

I have a simple form, with one issue.
In explorer, if nothing is inserted, the placeholder is passed as input of the field.
Here is JSbin: http://jsbin.com/EvohEkO/1/
I would like to make a simple comparision, when form is submitted, to check if the value of the field is equal to "First name", and if yes make the value empty ""
Just this i need.
Someone can help me please?

<form onsubmit="return checkform()">
<input name="test" placeholder="placeholdertext" id="test" />
<input type="submit" value="submitbutton"/>
</form>
in js
you should import jquery latest version this is the link: http://code.jquery.com/jquery-1.10.2.min.js
function checkform(){
var fieldvalue = $.trim($('#test').val());
if(!fieldvalue || fieldvalue=="placeholdertext"){
alert('there is no input');
return false;
}else{
alert('enjoy your form!');
return true;
}
}

This is somewhat easier..
$(document).ready(function(){
$("#form").submit(function(){
$('#form input:text, textarea').each(function() {
if($(this).val()==$(this).attr('placeholder'))
$(this).val(" ");
});
});
});

Just put your field value in hidden type input like this :-
<input id="hdnfield" name="hdnfield" value="<Your Field Value>" />

To check the value of a form field use the val() function on the input element
var input_value = jQuery('Input Element Selector').val();
As I looked to your form, the elements do not have any id attribute, I recommend that you add one to each of them, also change the submit input to button the you have more control on the javascript. so your form will look like :
<form id="form" action="form.php" method="post">
<input id="fname" type="text" placeholder="First name" name="fname"><br>
<label for="fname" id="fnamelabel"></label>
<input id="lname"type="text" placeholder="Last name" name="lname"><br>
<textarea id="message" placeholder="Contact us!" cols="30" rows="5" name="message"></textarea><br>
<br>
<input type="button" value="Submit">
</form>
so your jQuery will look like:
jQuery(document).ready(function(){
jQuery('input[type="button"]').click(function(){
var fname = jQuery('#fname').val();
var lname = jQuery('#lname').val();
var message = jQuery('#message').val();
...... Do whatever you need & then change the input values
...... if all validation has passed the use jQuery('#form').submit(); to submit the form otherwise reset the form:
jQuery('#fname').val("");
jQuery('#lname').val("");
jQuery('#message').val("");
});
});
here is a working version:
jsfiddle working link

You can do it like the following!
<form>
<input type="text" id="first_name" name="first_name"/>
<input type="submit" id="submit" value="submit"/>
</form>
<script type="type/javascript"/>
jQuery.noConflict();
(function ($) {
$(function () {
$("#submit").click(function () {
if ($("#first_name").val() == "first name") {
$(this).val("");
}
});
});
})(jQuery);
</script>