onkeypress is not working in form - javascript

I have the following problem with this code:
<form>
<div class="searchBarDiv"> <input class="searchBar" id="search" type="search"
placeholder="Suche" onkeypress="search();"> </div>
</form>
search(); won't get fired if i press a key. But when i remove the <form></form> everything works fine.
Is there any way to fire onkeypress in a form or any other function?
I`m using PhoneGap and jQuery. It won't work in a Browser or on a mobile Device.
Any help would be nice. Thank you in advance!
Edit:
Solved by A. Wolff: You can't use the id 'search' in a form. Thank you all for you answers and solutions.

I would suggest something more like this. Remove the onkeypress from the input, and as per #A.Wolff's comment on the question, change the search input's ID. Then add the following JS on document ready.
$("#search_inp").keypress(search);
Make sure that the search function takes an event parameter if you need to know which key was pressed.

Try to change your js function name or input id , your problem is because id and function name are same .
<form>
<div class="searchBarDiv"> <input class="searchBar" id="search" type="search"
placeholder="Suche" onkeypress="searchData();"> </div>
</form>
<script type="text/javascript">
function searchData(){
alert("2222");
}
</script>

Related

How to remove user input from a text input box with Jquery on submit?

I can't seem to get this to work for the life of me. I've tried setting the value to '' with getElementById('guess').value and $('#guess').val, tried using $('#formGuess').reset(), etc. Don't know why the value won't clear out.
Here is my code on this:
js
$('#submit').on('click', function(e) {
e.preventDefault();
var guess = $('#guess').val();
$('#guess').removeAttr('value');
}
HTML
<div class="container center">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-horizontal" method="post" id="guessForm">
<div class="form-group">
<div>
<input type="text" class="form-control" placeholder="Guess" id="guess"/>
</div>
<input type="submit" class="btn btn-success" name="submit" value="Guess" id="submit"/>
</div>
</form>
</div>
</div>
Set empty string as the value of textbox like following.
$('#guess').val('');
First, you should attach a "submit" listener to the form, not to the button, e.g.
<form id="someForm"></form>
$("#someForm").submit(function () {
// your code
});
But if you want to attach it to the button, then you can do that, no worries.
Make sure that the event is called. Are you sure that the function within "click" event is called? Put there a console.log("someText");
If it's called, then make sure that jQuery is getting the right element. Maybe you've made a typo? Maybe there's a missing "#" sign? Or maybe the jQuery is not loaded at all?
Open developers tools and check what's in the console.
Probably you've made a simple mistake - it's always about simple mistakes. : )
From your code,
var guess = $('#guess').val();
you are getting the value not setting.
To set the value
$('#guess').val('');

Run Javascript when enter pressed

<class="searchform">
<input type="text" id="textbox" placeholder="Search..." checkbox_test(this.value);">
<input type="submit" id="button" class="classname" onClick="javascript:checkbox_test();">Search</a>
I have a custom search engine with checkbox options. I have a script called "checkbox_test" that will grab the text from the textbox and run the search query plus additional options selected with checkboxes.
The problem I have is that when I press 'Enter' nothing happens, I have tried many examples from stackoverflow and examples I found on the internet but it does not seem to work for me. Any ideas how to solve this problem?
Basically I want to run the javascript when the visitor presses enter (with and without focus)
You've got a markup error there. That's probably why nothing you try is happening.
Try the following:
<input type="text" id="textbox" placeholder="Search..." onkeypress="checkbox_test(this.value);">
HTML:
<body onkeypress="wasEnter(event)">....
Javascript:
function wasEnter(e) {
if (e.keyCode == 13) {
// here you can do your stuff
}
}

Form Button Submit IE Issue

I have a form that is submitted by a button like this:
<input type="submit" form="billing-form" value="xyz" name="abc">
That submits a form like this:
<form method="POST" id="billing-form" action="something.php">
//bunch of fields here
</form>
The button submits the form fine in most browsers except IE.
Any ideas how to make this work in IE?! The button unfortunately has to be outside of the form itself which is why I'm using the billing-form name to reference.
Thanks,
NCoder
Well if using simple script is not a problem then you can simply use an input button and submit the from using js
<input type="button" form="billing-form" value="xyz" name="abc" onclick="submitForm();">
function submitForm()
{
document.getElementById('billing-form').submit();
}
Not going to work with the submit button outside the form without using javascript. See This question and answer.

javascript only executes once

I'm writing a cms page for my site. part of it is writing a preview component for my blog. I have a form, and a preview button, that activates a Javascript, which places the html typed in the text-area in a div element to test it. Everything works fine but the problem is that it only works once for each pageload. So I can't test something, add some code and retest it. Any ideas how to make multiple testing possible ?
Code Form:
<form>
<textarea rows="30"cols="30" name="blogpost" style="width:500px;resize:none;" autofocus placeholder="Enter your new blogpost here!"></textarea>
</br>
<input type = "submit" value="post">
<input type = "button" id="testknop" value="previeuw" onclick="previeuwpost(this.form, this.form.blogpost);">
<input type="reset" />
</form>
Javascript Code:
function previeuwpost(form, text){
$("#previeuwbox").replaceWith(text.value);
}
Thanks a lot folks
replaceWith means replaced.
Therefore, after you click, the $("#previeuwbox") is gone.
Please use :
$("#previeuwbox").html(text.value);

Trigger autocomplete without submitting a form

I am writing a very simple web app with three text inputs. The inputs are used to generate a result, but all the work is done in Javascript, so there is no need to submit a form. I'm trying to find a way to get the browser to store input values for autocomplete as it would if they were in a form that was submitted.
I have tried giving the inputs autocomplete="on" manually, but without a form to submit, the browser has no way of knowing when it should store the values, so this has no effect.
I have also tried wrapping the inputs in a form that has onSubmit="return false;", but preventing the form from actually submitting appears to also prevent the browser from storing its inputs' values.
It is of course possible to manually use localStorage or a cookie to persist inputs and then generate autocomplete hints from those, but I'm hoping to find a solution that taps into native browser behavior instead of duplicating it by hand.
Tested with Chrome, IE and Firefox:
<iframe id="remember" name="remember" class="hidden" src="/content/blank"></iframe>
<form target="remember" method="post" action="/content/blank">
<fieldset>
<label for="username">Username</label>
<input type="text" name="username" id="username" value="">
<label for="password">Password</label>
<input type="password" name="password" id="password" value="">
</fieldset>
<button type="submit" class="hidden"></button>
</form>
In your Javascript trigger the submit, e.g. $("form").submit(); $("#submit_button").click() (updated from comments)
You need to return an empty page at /content/blank for get & post (about:blank didn't work for me but YMMV).
We know that the browser saves its information only when the form is submitted, which means that we can't cancel it with return false or e.preventDefault()
What we can do is make it submit the data to nowhere without reloading a page. We can do that with an iframe
<iframe name="💾" style="display:none" src="about:blank"></iframe>
<form target="💾" action="about:blank">
<input name="user">
<input name="password" type="password">
<input value="Login" type="submit">
</form>
Demo on JSfiddle (tested in IE9, Firefox, Chrome)
Pros over the currently accepted answer:
shorter code;
no jQuery;
no server-side page loaded;
no additional javascript;
no additional classes necessary.
There is no additional javascript. You normally attach an handler to the submit event of the form to send the XHR and don't cancel it.
Javascript example
// for modern browsers with window.fetch
document.forms[0].addEventListener('submit', function (event) {
fetch('login.php', {
method: 'post',
body: new FormData(event.target))
}).then(r => r.text()).then(() => { /* login completed */ })
// no return false!!
});
No-javascript support
Ideally, you should let the form work without javascript too, so remove the target and set the action to a page that will receive your form data.
<form action="login.php">
And then simply add it via javascript when you add the submit event:
formElement.target = '💾';
formElement.action = 'about:blank';
I haven't tested this, but it might work if you submit the form to a hidden iframe (so that the form is actually submitted but the current page is not reloaded).
<iframe name="my_iframe" src="about:blank"></iframe>
<form target="my_iframe" action="about:blank" method="get">...</form>
---WITHOUT IFRAME---
Instead of using iframe, you can use action="javascript:void(0)", this way it doesn't go to another page and autocomplete will store the values.
<form action="javascript:void(0)">
<input type="text" name="firstName" />
<button type="submit">Submit</button>
</form>
Maybe you can use this Twitter Typeahead...is a very complete implementation of a autocomplete, with local and remote prefetch, and this make use of localStorage to persist results and also it show a hint in the input element...the code is easy to understand and if you don't want to use the complete jquery plugin, I think you can take a look of the code to see how to achieve what you want...
You can use jQuery to persist autocomplete data in the localstorage when focusout and when focusin it autocompletes to the value persisted.
i.e.
$(function(){
$('#txtElement').on('focusout',function(){
$(this).data('fldName',$(this).val());
}
$('#txtElement').on('focusin',function(){
$(this).val($(this).data('fldName'));
}
}
You can also bind persistence logic on other events also depending on the your application requirement.
For those who would rather not change their existing form functionality, you can use a second form to receive copies of all the form values and then submit to a blank page before your main form submits. Here is a fully testable HTML document using JQuery Mobile demonstrating the solution.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<form method="post">
<input type="text" name="email" />
<input type="submit" value="GO" onclick="save_autofill(this);" />
</form>
<script>
function save_autofill(o) {
$(':input[name]', $('#hidden_form')).val(function () {
return $(':input[name=' + this.name + ']', $(o.form)).val();
});
$('#hidden_form').find("input[type=submit]").click();
}
</script>
<iframe name="hidden_iframe" style="display:none"></iframe>
<form target="hidden_iframe" id="hidden_form" action="about:blank" style="display:none">
<input type="text" name="email" />
<input type="submit" />
</form>
</body>
</html>
The save_autofill function just needs to be called on your main form submit button. If you have a scripted function that submits your form, place that call after the save_autofill call. You must have a named textbox in your hidden_form for each one in your main form.
If your site uses SSL, then you must change the URL for about:blank with https://about:blank.
From what i searched.. it seems you need to identify the names. Some standard names like 'name', 'email', 'phone', 'address' are automatically saved in most browser.
Well, the problem is, browsers handle these names differenetly. For example, here is chrome's regex:
first name: "first.*name|initials|fname|first$"
email: "e.?mail"
address (line 1): "address.*line|address1|addr1|street"
zipcode: "zip|postal|post.*code|pcode|^1z$"
But chrome also uses autocomplete, so you can customize the name and put an autocomplete type, but i believe this is not for custom fields..
Here is chrome's standard
And it's another thing in IE, Opera, and Mozilla. For now, you can try the iframe solution there, so you can submit it. (Maybe it's something semi-standard)
Well, that's all i can help.
Make sure you're submitting the form via POST. If you're submitting via ajax, do <form autocomplete="on" method="post">, omitting the action attribute.
you can use "." in both iframe src and form action.
<iframe id="remember" name="remember" style="display:none;" src="."></iframe>
<form target="remember" method="post" action=".">
<input type="text" id="path" size='110'>
<button type="submit" onclick="doyouthing();">your button</button>
</form>

Categories

Resources