I have a textbox somewhat like the main google search textbox. When you start typing, the javascript triggers a php script that offers suggestions that you can click on . That part works fine. However, I also want the user to be able to enter text and then just submit it--analagous to rejecting Google's hints and typin in your own search term. Right now, I am trying to do this in html and it is not working. Here is my code:
<form action="mail.php" method="post"><input type="text" name="maddress" size="30" onkeyup="showResult(this.value)"><input type="submit" name="submit" value="Email"></form>
Basically, the javascript within the onkeyup works fine. However, the form is not posting the value in the textbox" to the php script. Perhaps I have a typo somewhat but I can't find it. or maybe the onkeyup is preventing the form from posting...
Would appreciate any suggestions.
showResult() should explicitly return true (or in any case, something non-falsy). Returning false (or a falsy value) from an event handler prevents the default action, in this case, posting the form.
I dont know if this is what you're looking for but if you use the concept of this:
<script type="text/javascript">
function insertText(val,e){
document.getElementById(e).innerHTML+=val;
}
</script>
<textarea id="textIns"></textarea><br />
Insert 'Hello'<br />Insert 'GoodBye'
You can change the 'hello' and 'goodbye' with vars from your php script or where ever you get the items from and it should insert it and allow you to post it.
So just insert this into your function and then it should work. I tested it by adding the textarea in the code to a form and echoing it int he php and i got exactly what was added by the javascript... hope it works. Sorry if it wasn't exactly what you were looking for. The question wasn't to easy to understand because I couldn't see the rest of your source.
Related
I'm making a game and I've a html text box, <form> <input> </form> where the users will type in a number and submit it using a html button <button>. How do I get the number using JavaScript so I can use it in my game.js so I'll know how many lives the user want when the submit button is pressed?
I'm not quite sure if this is the correct approach but I was thinking getting the id of the <input> tag and then for the JavaScript part I would use .getElementById of some sort? However, I'm not sure how to incorporate the submit button so that only when it's pressed, I will receive what the user inputted.
Or is there another better way to do this? And if possible, can you provide an example of the codes for doing this?
Let me know if any clarification is needed, thanks!
There are multiple ways to do what you are asking for, one way to do it is as cristian has shown in the comment(using jquery).
In this jsfiddle page I've shown a sample way to do it just using javascript.
The code used in the page is as shown below:
document.getElementById("submit").onclick = function(){
var a = document.getElementById("input").value;
alert("The entered value is: "+a);
}
I'm relatively new to programming, but understand the basics of HTML, CSS, and Javascript (including jQuery). Due to my greenness, I'd appreciate it if answers contained both a simple solution and a reason as to why the solution works. Thanks!
So I've got a form, with a text input and a submit button:
<form>
<input type="text">
<button type="submit">Submit</button>
</form>
When the user types data into the text field and clicks submit, how do I gain access to this data? If a user inputs their name, how do I grab that information? I don't intend to store it or write it anywhere, just to hold onto it as a variable in javascript, which I'll assign to a jQuery cookie.
So how do I access the data that the user has submitted, preferably using only Javascript (with jQuery)? Thanks for the help!
You access the data on the server side (in PHP via $_POST['username'] for example). The form sends data to your sever for any named input, so you would probably have to change the input to:
<input type=text name=username>
If you want to access it on the client side (with JavaScript), you can do that too, but you have to prevent the form from submitting:
$("form").on('submit', function (e) {
$.cookie('username', $(this).find('[name=username]').val());
//stop form from submitting
e.preventDefault();
});
say you had an html input tag such as:
<input id="textfield" type="text">
using javascript, you can store the value of that field in a variable like this:
var inputvalue = $('#textfield').val();
of course, you'll need something to run the script.
the reason this works is that the the textfield is an object. you might think of it as a tree trunk with different branches coming out. one of these "branches" is the value contained inside of it. since you know jquery, you know that $('#textfield') gets the element by a selector. the period says we're getting one of the branches, and "value" says we want the branch that tells what's in the textfield.
hope this helps.
I am using the same input textbox to collect multiple values.
After collecting the first input, I will clear the field by calling
document.getElementById("textbox").value= "";
On the surface, above snippet appears to clear the textbox.
But when I blur the textbox by clicking elsewhere, the old value reappears.
MORE CODES >>>
My HTML >>
<input id="textbox" placeholder="Start">
Javascript >>
After getting the first input, I like to reset the input value >>>
document.getElementById("textbox").value= "";
document.getElementById("textbox").setAttribute("placeholder","End");
This is how I do my data collection >>>
The same textbox is first used to collect a Google "place", and then subsequently to collect some user entered comment. In addition to collecting the data, someFunction() also try to clear the textbox by calling .value= ""
google.maps.event.addListener(textbox, "place_changed", function() {
someFunction();
});
Here is something i found googling fast for an answer; i think you can play around indeed with onFocus() a bit:
<input type="text" value="Click here to clear text" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;"/>
It may require a bit of usage of onBlur as well.
Also some other pointer, to get you going with jQuery if you want.
Looks like your input's value is stored in separate variable to be used for some other actions. So you should maybe check your code and clear thar variable.
I have practically implemented and used this solution whch is already suggested by my friend above:
document.getElementById("textbox").setAttribute("placeholder","End");
So, this works for me pretty well.(context:"placeholder" attribute used)
ICDT
..tc:)
If an HTML form field has focus and you hit enter, the form will be submitted (unless you've done fancy things to bypass that). Weirdly though, if JavaScript adds a field into the form, that enter-to-submit behavior appears to break. For example:
http://jsfiddle.net/SChas/1/
function goose() {
document.getElementById("addhere").innerHTML="<input name=goose value=honk>";
}
function checkForm() {
alert("ok");
}
--
<form onsubmit="checkForm();">
<input name="duck" value="quack">
<div id="addhere"></div>
</form>
<button onclick="goose();">add a goose</button>
(This is a contrived example attempting to be as concise as possible. The original code involved is more modern code with events attached in JavaScript, etc. But this is the simplest code that replicates the issue. Also, it is necessary in the real use case to dynamically modify the form by adding/removing fields.)
Anyway, you'll get a form that has a single field with a value "duck". Click into it and hit enter, and the form will submit (you'll see an "ok" alert and then JSFiddle will tell you not to post!).
However, if you click "add a goose", you get a new field. And now, you cannot hit enter to submit the form.
Why is this happening? I can't find anything about this behavior via google, perhaps I'm using the wrong search terms. But it happens in IE on Windows and Chrome and FF on OSX at least. So it seems like an intentional, perhaps to-specification, behavior. Is it some kind of security protection?
And, is there any way to restore the enter-to-submit behavior on the form once a field is inserted? A way other than to add onkey* events to the input fields?
FWIW, it doesn't seem to matter if the inputs are added via DOM methods (appendChild), or setting the innerHTML, using jQuery or old fashioned JavaScript.
This is because the enter-to-submit behaviour only happens when it's the only input on the form.
You can restore it by putting a input with type=submit on the form, it doesn't even have to be visible.
Check it out: http://jsfiddle.net/SChas/10/
I am wondering if it is possible to somehow get the value of a div and attach it to the form post on submit?
Using JavaScript, you can get the DIV contents and insert them into a hidden form field.
An example - a page snippet (jQuery used for simplicity, plain JS would work too):
<form id="yourform" action="/some/uri">
<input type="hidden" name="your_div_content" id="hidden_element" />
<input type="submit" />
</form>
<div id="yourdiv">
This text will be copied into the form using JS
</div>
<script>
$('#yourform').submit(function(){ /* On #yourform submit ... */
$('#hidden_element').val( /* ... set #hidden_element's value ... */
$('#yourdiv').html() /* ... to whatever is in #yourdiv . */
);
});
</script>
Of course, this will only work when JS is enabled in the browser.
You may want to use a hidden field <input type="hidden"> in your form, and then set the value of your hidden field on form submit with the innerHTML of your div.
You could use ajax. That way you could send whatever data you wanted however you wanted.
For instance (this is using mootools):
var req = new Request({url: 'somepage.php', data: 'queryStringDate'});
req.send();
There you go :)
This of cause can be done without any framework, I just don't remember the code in my head :-P
It depends what you mean by the "value of a div".
For example, you can retrieve all HTML inside the div by using document.getElementById(your_div_id_here).innerHTML
Alternatively, you can access values of the div attributes by using e.g. document.getElementById(your_div_id_here).title to access the div's title attribute.
If you intercept the submit event of your form (maybe by intercepting the click event on the form’s submit button), then you certainly can GET or POST with anything including content of an element. With vanilla HTML, however, I’m afraid it’s not possible.
Tucking values into hidden fields might also work, depends on preference. ;)
You could have a hidden input and populate it with the contents of the div before doing your submit, then it would be included.