Firing JS function from onkeyup event input - javascript

I have this very basic code that I feel should be working but isn't.
I have this form:
<form id="search-box" action="">
<input id="search" type="text" placeholder="Search here.." onkeyup="search(this.value)"><!--
--><input id="submit" type="submit" value="Search">
</form>
This form fires a JS search function. This search function contains:
function search(input){
alert(input);
}
I have linked the JS file containing the function in the head of the html document:
<script src="js/ajax.js"></script>
But the problem is this isn't working. I'm getting an error when the onkeyup is fired:
Uncaught TypeError: object is not a function localhost:16:201
onkeyup localhost:16:201
May I get some assitance?

In your code, you have a function named search and an element with the id of search. HTML elements with id's become global variables by that name, so the element with the id of search overwrites the search variable that was your function.
Try something like this.
HTML
form id="search-box" action="">
<input id="search" type="text" placeholder="Search here.." onkeyup="doSearch(this.value)"><!--
--><input id="submit" type="submit" value="Search">
</form>
JS
function doSearch(input){
alert(input);
}

In your HTML you can't have an element ID and function names same in a form. These creates conflicts.
When you add a ID in your form it adds that element as form[id]. So if you will have the same names of functions they will create conflict in same form.
Here is a very nice question has been answered about same.

Related

Javascript return confirm() when input name=confirm gives confirm is not a function

My code shows this error in the console:
Uncaught TypeError: confirm is not a function
I can resolve it by renaming the input to something other then "confirm".
Why would naming an input conflict with JavaScript's confirm function?
<form action="" method="POST">
<input type="text" name="confirm">
<input type="submit" onclick="return confirm('Text')">
</form>
In JavaScript, the names of input elements become properties of the associated form object. In your case, the input named "confirm" becomes a property of its form, which shadows the confirm method inherited from the window object.
window.confirm => form.confirm
<input type="text" name="confirm"> => form.confirm
As mentioned by Dai in comments above, you can use window.confirm() to ensure that you access the confirm method of the window object.
<form action="" method="POST">
<input type="text" name="confirm">
<input type="submit" onclick="return window.confirm('Text')">
</form>
Or, as referenced in your question, use a different input name:
<form action="" method="POST">
<input type="text" name="confirmation">
<input type="submit" onclick="return confirm('Text')">
</form>
For more reference, also see:
HTMLFormElement
Warning: Avoid giving form elements a name that corresponds to a built-in property of the form, since you would then override the predefined property or method with this reference to the corresponding input.
input name called submit
confirm is not a function
confirm not working

Follow the link including the input value using two input and button tags

How to follow a link with a value in the input field without writing additional javascript, i.e. all code in html input and button tags?
Let's say there is a Google site for search and the search line is in input, so that when you click on the button, the link https://www.google.com/search?q= and the value of the input field, for example, text are substituted:
https://www.google.com/search?q=text
<input type="text" id="search" name="search" value="text">
<button onclick="code">Follow a search link with a value in input</button>
To do this without any JS you simply need to create a <form> element whose target is google.com/search.
The only things to note is that the action should be get and the input name needs to be q so that the correct querystring format is used when the form is submit. Try this:
<form action="https://www.google.com/search" method="get">
<input type="text" id="search" name="q" value="" required />
<button type="submit">Follow a search link with a value in input</button>
</form>
"It’s necessary without using a form, you can have js code"
Well, there is a js code that you can use to achieve this
<input type="text" id="search" name="search" value="text">
<button onclick="search()">Follow a search link with a value in input</button>
<script>
function search() {
const searchValue = document.getElementById('search').value
window.location.href = `https://www.google.com/search?q=${ searchValue }`
}
</script>
Form action should be set to the website you need, google in this case
Form method should be GET
Form fields must be named, like the parameters in the query string
Example:
<form action="https://www.google.com/search" method="GET">
<input type="search" placeholder="Search..." name="q" />
<input type="submit" value="serach"/>
</form>

jQuery targeting selector by input type and form name

I want to target any input of text type belonging to a form of a specific name. Because the form will have numerous input fields, I don't want to target a particular input name, but rather, capture the blur (or focusout) event for any input[type="text"] occurring within the form wrap.
My present code, which doesn't work:
$( document ).ready(function() {
$('form[name="tax_form"] input[type="text"]').on("blur",function() {
alert($(this).val());
});
});
I answered my own question. Because the code sample is essentially correct, there is no need for multiple people to try to solve the unsolvable. The problem had something to do with where I placed the javascript code, and nothing to do with structure or syntax of the code, itself.
The way the event "change" works is what it sounds like you want. An event handler doesn't actually fire when the input is clicked or if text is keyed in, it fires when text is entered and then the input loses focus.
In the following Snippet the same selector you are using is delegated to the "change" event. You'll notice that the ['tax_form'] has 4 text inputs yet the last one is the only one working. The reason is because if an input isn't assigned a type attribute, then by default type is 'text". So when using a selector based on an input's type="text", you must keep that in mind. So if you are in full control of your HTML, make sure that each input has a type attribute with an explicit value, or use classes which is better IMO.
SNIPPET
$(document).ready(function() {
$('form[name="tax_form"] input[type="text"]').on("change", function() {
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='notIt'>
<fieldset>
<legend>Not a Tax Form</legend>
<input>
<input type="text">
<input>
<input type="text">
</fieldset>
</form>
<br/>
<br/>
<form name='stillNotIt'>
<fieldset>
<legend>Still not a Tax Form</legend>
<input type="text">
<input>
<input type="text">
<input>
</fieldset>
</form>
<br/>
<br/>
<form name='tax_form'>
<fieldset>
<legend>Tax Form</legend>
<input class='klass' value='TEXT INPUT BY DEFAULT'>
<input value='TEXT INPUT BY DEFAULT'>
<input name='text' value='TEXT INPUT BY DEFAULT'>
<input type='number'>
<input type='text' value='THIS ONE COUNTS'>
</fieldset>
</form>
Previous commentators were right, that my code was fine as-is. I took my selector code out of a header script file, and placed it at the bottom of my footer script, and it worked as expected.
In the end, it wasn't my code that was the problem, but rather something to do with where I placed it. Possibly other javascript or jQuery code stepping on it.
Your code should work fine. Here's a working example of it to prove it's working. The tax_form fields should console.log() on blur. The another_form should not.
$(function() {
$('form[name="tax_form"] input[type="text"]').on("blur",function() {
console.log($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Tax Form</h1>
<form name="tax_form">
<input type="text" name="first" value="first">
<input type="text" name="second" value="second">
<input type="text" name="third" value="third">
</form>
<h1>Another Form</h1>
<form name="another_form">
<input type="text" name="first2" value="first2">
<input type="text" name="second2" value="second2">
<input type="text" name="third2" value="third2">
</form>

Javascript: change element value by input textbox

I want to change THISVALUE using a textbox and submit button, which then refreshes the data on the page:
<form id="newssearch" action="#">
<input type="text" size="30" maxlength="155" name="search" id="search" />
<input type="button" name="submit" value="Search" onclick="showElements();" />
</form>
<div class="sm" data-type="static" data-symbol="THISVALUE" data-size="medium" data-logscale="on" data-chart-type="ca" data-timeframe="1y"></div>
<div class="sm" data-type="news" data-symbol="THISVALUE"></div>
Also: you press the button and it refreshes the page with the new data-symbol value. That value stays for the next visit to the page or until another search is performed.
Perhaps it would be better to do this in php?
You can also use the setAttribute() function
function showElements(){
document.getElementsByClassName('blah')[0].setAttribute("data-symbol",document.getElementById('search').value);
}
First off - data-symbol is not an element. It is an attribute and to be more specific - a data attribute.
Learn more about data attributes here: Using data attributes | MDN
I assume you want the data submitted in the form to get into the data-symbol attribute.
Checkout the working code snippet below:
function showElements(){
// just copy over the search text into the data attribute
document.getElementsByClassName('blah')[0].dataset.symbol = document.getElementById('search').value;
}
<div class="blah" data-type="cur" data-symbol="THISVALUE"></div>
<form id="newssearch" action="#">
<input type="text" size="30" maxlength="155" name="search" id="search" />
<input type="button" name="submit" value="Search" onclick="showElements();" /> <!-- no need to pass any arguments to this function, we can get data using element ID -->
</form>
Check the result using Developer Tools (I have used Chrome here):

Dynamic links with JavaScript

this is my problem.I have a JSP. I want to create a hyperlink dynamically with Javascript. I want to add the text from an input in HTML and use it to pass it as a parameter in my URL:
<form name="test">
<P>Enter search: <input type="text" name="searchName"><BR><BR>
<input type="Button" Value="" onclick="location.href='search.jsp?typeOfSearch=" + JavaScriptFunction( that returns the String from searchName ) ' " >
</P>
</FORM>
I cant seem to add a JS function to the "onclick" string. I ve tried with HREF from an anchor but I cant make it work. And I ve also tried just putting a JS function like this:
<a href="MyJSfunction( that returns the entire URL ) " > hyperlink</a>
and also it does not work. I ve tried like a million diferent things and I still cant pass dynamic parameters from one JSP to another.
Any help would be very good! ...
No JavaScript required. Just set your form method and action, use a submit button, and rename your input field:
<form name="test" method="GET" action="search.jsp">
<p>
Enter search: <input type="text" name="typeOfSearch" /><br/><br/>
<input type="Submit" Value="Go" />
</p>
</form>
Edit: But, if you are just curious how to do it with JavaScript, form elements all have a form property. Form elements are accessible from the form by name. So, you can use this.form.searchName.value to get the value of the searchName field in the same form as your button:
<input type="Button" Value=""
onclick="location.href='search.jsp?typeOfSearch=' + this.form.searchName.value;" />
Edit: The trouble you are having with your current code may be because you have the quotes wrong. Change the double quote at the end of typeOfSearch=" to a single quote: typeOfSearch='. Remove the single quote following your function call:
<input type="Button" value=""
onclick="location.href='search.jsp?typeOfSearch=' + JavaScriptFunction()" />
If you aren't too concerned about security, a simple HTML form should work.
<form action="Your URL Here">
<input type="text" value="" name="search" />
<input type="submit" value="search" />
</form>
http://jsfiddle.net/harveyramer/VfuT4/

Categories

Resources