This is the code which I tried, it should work like this: Text written in text-box, should appear as check-box in div tag.
I used onchange() function. It worked fine when I moved out of text box, but when I pressed Enter key, check-box appears for few seconds and disappears. Nothing is displayed in div.
How to solve this problem? What really happens when I press Enter while writing in text-box?
<html>
<body>
<form id="form1" name="form1" method="post" action="">
<p>
<label for="textfield">Hello</label>
<input type="text" name="textfield" id="textfield" onChange="add_items(this.value)" />
</p>
<br>
<div id="item"></div>
</form>
<script>
k=""
function add_items(m)
{
k=k+"<input type=checkbox name=menu[] id=menu[] value="+m+">"+m+" ";
document.getElementById("item").innerHTML=k
}
</script>
</body>
</html>
You are submitting the form by pressing the Enter key.
Add onsubmit="return false;" to your form tag.
onsubmit="return false;" will solve your issue
Related
With one text input in the form, the following code works fine to submit the form once the ENTER key is hit:
<!DOCTYPE html>
<html>
<head>
<script>
document.querySelector("form").addEventListener("submit");
</script>
</head>
<body>
<form name="myForm" action="#" method="post">
First Name: <input type="text" name="fname">
</form>
</body>
</html>
However, with two text input fields, the following code does not work. That is, After hitting ENTER, nothing happens.
<!DOCTYPE html>
<html>
<head>
<script>
document.querySelector("form").addEventListener("submit");
</script>
</head>
<body>
<form name="myForm" action="#" method="post">
First Name: <input type="text" name="fname"> <br>
Last Name: <input type="text" name="lname">
</form>
</body>
</html>
My question is not a duplicate of another question, which addressed how to hide the submit button. My question is: Why addEventListener("submit") doesn't work (i.e., the from cannot be submitted) when the form has two text inputs?
See the HTML spec, specifically 4.10.21.2. Implicit submission:
If the form has no Submit Button, then the implicit submission mechanism must do nothing if the form has more than one field that blocks implicit submission
and
an element is a field that blocks implicit submission of a form element if it is an input element whose form owner is that form element
Your form has two input elements and no submit button.
Add a submit button.
Friends, I am new to JS and I am trying out something that should have been really simple - I want to display a message in a <p> element using document.getElementById when a form is submitted but its not working. However, when I trigger a window.alert onsubmit, it works! Please help! Here's the code:
<!doctype html>
<html>
<body>
<p id="one"></p>
<form method="POST" onsubmit="document.getElementById('one').innerHTML='Ok';">
Name:<input type="text" name="fname">
<input type="submit" name="submit" value="Submit">
</form>
</body>
I'm trying to accomplish a feature where a user can type a piece of text into an input box, click submit and they'll be taken to a webpage which includes the text they submitted in the url.
For example, if the user entered the word 'apple' in the text and clicked submit, they would be taken to http://example.com/link.aspx?username=apple&jump=1 or if they entered the word 'orange', they would be taken to http://example.com/link.aspx?username=orange&jump=1.
I've tried the following code, but to no avail - it doesn't send the user anywhere on submit.
<form method="get">
<input type="text" value="11" id="input">
<button type="button" id="button">Click Me!</button>
</form>
<script>
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $("#input").val();
window.location.replace(" http://www.example.com/page/"+inputvalue);
});
});
</script>
Why you're trying to use JQuery when you can do it much easier with PHP
Form
<form action="form.php" method="get">
<input type="text" name="n" />
<input type="submit" />
</form>
PHP side - form.php
header("Location: http://yourdomain/page/".$_GET['n']);
your code works for me.
are you sure you added jquery before your script?
add this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Do not use jQuery for this. A simple form with get method will work fine.
<form name="sample" method="get">
<input name="username" type="text" value=""/>
<input name="submit" type="submit" value="submit"/>
</form>
This will automatically submit the form once user fills field and click submit button in the format you are looking for.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fiction()
{
shohai.javat.focus();
}
</script>
</head>
<body>
<form name="shohai">
<input type="text" name="javat" placeholder="this is the text" >
<br>
<br>
<input type="text" name="kamel" placeholder="this is the text 2" onblur="fiction2()">
<br>
<br>
<button onclick="fiction()">Aceptar</button>
</form>
</body>
</html>
thank you for answer me.
im traying to focus the javat input, it works but instantly loose his position. Why?
i searched in the web whit bad luck.
Well, it seems to me that when you press the "Aceptar" button, the input does focus, but the form also submits, effectively reloading the page, and giving the impression that the focus is lost. This is because a <button> tag without any type attribute will default to submit. So, simply add a type="button" to the tag, so it is <button type="button">.
The full code with that change:
<form name="shohai">
<input type="text" name="javat" placeholder="this is the text" >
<br>
<br>
<input type="text" name="kamel" placeholder="this is the text 2" onblur="fiction2()">
<br>
<br>
<button type="button" onclick="fiction()">Aceptar</button>
</form>
And like other users said, it is not very clear what you want to do. Do you want "Aceptar" to... submit the form or just focus the input? You can't submit and focus at the same time (WELL, you can, but submitting a form reloads the whole page). And it'd also be a better idea to identify your elements via DOM methods, I didn't even know you could just do shohai.javat, to be honest.
I need to use form fields in an English/Amino Acid Code translater. The code below is simplified to show the problem I'm having. I want to change some text with a javascript function.
If I use an input of type: button with onclick it works.
A submit button with onsubmit in a form changes the text for a split second, then it changes back. I need to use a form for my translation program so how can I make it work?
Extra Credit: Why does it change for a split second with onsubmit?
<html>
<head>
<script type="text/javascript">
function changeTo(text){
document.getElementById("p1").innerHTML=text;
}
</script>
</head>
<body>
<h1 style="text-align:center;">Change text in an element</h1>
<!--
<form onsubmit="changeTo('Hello World');">
<input type="submit" />
</form>
-->
<input type="button" onclick="changeTo('Hello World');" />
<p id="p1">text</p>
</body>
</html>
It's changing it back because the form is submitting. It posts to the same page, and if you are on a local machine it might be so quick you don't notice. Try:
<form onsubmit="changeTo('Hello World');return false;">
<input type="submit" />
</form>
Return false at the end there will stop the submission process.