I have my HTML structure in the following format
<div>
<form class="form-inline" style="padding-top:10px" action="javascript:function()"> <!-- a search bar-->
<input id="id" type="text" " placeholder="Something">
</form>
<button onClick="somefunction()"> b</button>
</div>
the problem is I want the search bar to work when I press enter in it but unfortunately it is submitting the button element , I am slightly confused as the button is not a form element and I have specifically defined onClick. I am new to javascript so I am sure it is something small but I have not been able to solve it.
ie when I press enter , the "somefunction()" gets active as opposed to "function()"
Try this
HTML
<div>
<form class="form-inline" style="padding-top:10px" action="someFile.php" onsubmit="return someFunc();">
<input id="id" type="text" placeholder="Something">
<input type="submit" name="btn_submit" value="Submit" />
</form>
</div>
JS
function someFunc(){
// code goes here
return false;
}
Just an example.
You may put your button inside the form and have the function called in onClick return false, as discussed here.
EDIT
According to your edit and your comments on what you want, you may do the following:
<html>
<head>
<script>
function formfunction(){
alert("form function is called.");
}
function somefunction(){
alert("the button is clicked.");
}
</script>
</head>
<body>
<div>
<form name="myform" action="#" onsubmit="formfunction(); return false;">
<input id="id" type="text" placeholder="Something">
</form>
<button type="button" onClick="somefunction()"> b</button>
</form>
</div>
</body>
</html>
Related
I have 2 forms on one page.
Form 1
<form id="form1" method="get" action="action1.php">
<input type="text" id="input1">
</form>
This form is submitted by:
$('#input1').on('keydown', function(e) {
if (e.keyCode == 13) {
$('#form1').submit();
}
});
as I don't want a submit button on this form.
The 2nd form:
<form id="form2" method="post" action="action2.php">
<input type="text" id="input2">
<button type="submit">Save</button>
</form>
Now if I press the button on the 2nd form, it submits the 1st form. Not sure why that happens as the submit button is inside the second <form> tag.
Also; as form 1 will be on many pages (it's a search bar in a navigation bar) I'd like to 'future proof' this so that I don't run into problems in the future when I place multiple forms on a page. Ideally that would mean that this issue is fixed by changing form 1.
Update
Stupid mistake...! I had $('form:first').submit(); on the <button type="submit">Save</button> somewhere else in my code, so the first form got submitted...
make this change in form 2
<form id="form1" method="get" action="action1.php">
<input type="text" id="input1">
</form>
<form id="form2" method="post" action="action2.php">
<input type="text" id="input2">
<button type="submit" form="form2">Save</button>
</form>
read this to know more about form attribute
Something else is going on.
try hitting enter in these two fields - you will see there is no need for script
$("form").on("submit",function(e) {
e.preventDefault();
console.log(this.id + " submitted");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1" method="get" action="action1.php">
<input type="text" id="input1"> Submits on enter
</form>
<hr/>
<form id="form2" method="post" action="action2.php">
<input type="text" id="input2"> Submits on enter or on click
<button type="submit">Save</button>
</form>
I am pretty new to jquery, and was trying to create a search button. I wanted to append some code to a div on button click, but the changes apply for a second, and goes off (Flashes as if the page is loaded again)
My code as below:
HTML:
<body>
<!-- HTML for SEARCH BAR -->
<div id="tfheader">
<form id="tfnewsearch" method="get" action="">
<input type="text" class="tftextinput" name="q" size="21" maxlength="120">
<input type="submit" name="search" id="search" value="search" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<div id="container" class="cntnr">
<p>My text here</p>
</div>
</body>
Jquery:
jQuery(document).ready(function() {
$("#search").click(function () {
console.log('your message');
$("#container").append('<div><p>Results displayed here</p></div>');
});
});
Both the console log message and div append get applied for a second and then immediately goes off
The page is, in fact, reloading because you are submitting the form by clicking on it (note: this is quite evident since your console clears when you click. Console output typically only clears on reload). If you don't want to submit the form, you could replace it with a regular button:
<input type="button" name="search" id="search" value="search" class="tfbutton">
or prevent the default event from triggering:
$("#search").click(function (e) {
e.preventDefault();
console.log('your message');
$("#container").append('<div><p>Results displayed here</p></div>');
});
Demo:
jQuery(document).ready(function() {
$("#search").click(function(e) {
e.preventDefault();
console.log('your message');
$("#container").append('<div><p>Results displayed here</p></div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- HTML for SEARCH BAR -->
<div id="tfheader">
<form id="tfnewsearch" method="get" action="">
<input type="text" class="tftextinput" name="q" size="21" maxlength="120">
<input type="submit" name="search" id="search" value="search" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<div id="container" class="cntnr">
<p>My text here</p>
</div>
</body>
Change input type from submit to button.
<input type="button" name="search" id="search" value="search" class="tfbutton">
Here is my problem, when i click the submit button, the textbox doesn't show any value
Is there any mistakes, i am just a newbie
Thank you very much
<form id="form1" name="form1" method="post" >
<p>
<input type="submit" name="setValue" id="setValue" value="submit" onclick="setValue()"/>
</p>
<p>
<label>
<input type="text" name="bbb" id="bbb" />
</label>
</p>
</form>
<script type="text/javascript">
function setValue()
{
document.getElementById('bbb').value="new value here";
}
</script>
The first issue is that you're using the same name for the element as the function, so window.setValue is not the function, but the submit button, and that's an error.
The second issue is that when you hit the submit button, the form is submitted and the page reloads, that's why you wont see a value, you have to prevent the form from submitting.
You could do it with javascript, but the easiest would be to just use a regular button instead of the submit button.
<form id="form1" name="form1" method="post">
<p>
<input type="button" name="set_Value" id="set_Value" value="submit" onclick="setValue()" />
</p>
<p>
<label>
<input type="text" name="bbb" id="bbb" />
</label>
</p>
</form>
<script type="text/javascript">
function setValue() {
document.getElementById('bbb').value = "new value here";
}
</script>
FIDDLE
I was typing the same answer what Adeneo just given, thank you Adeneo.
And user3635102, your <form> was good, you can keep it as it was. Only you need to change <input type="submit"> to <input type="button"> . if you need to submit the form in future you can update your Javascript as follows which will submit form1:
<script>
function setValue() {
document.getElementById('bbb').value = "new value here";
document.getElementById("form1").submit();
}
</script>
Javascript validation is not working! Form is submitting even if function returns false. Where i should make changes? Here is the part of the code i wrote.
<html>
<head>
<script>
function check()
{
temp=document.getElementById("name").value;
if(temp=="")
{
document.getElementById("err").innerHTML="error found";
document.getElementById("name").focus();
return false;
}
}
</script>
</head>
<body>
<form>
<input type="text" id="name">
<div id="err"></div>
<input type="submit" onClick="check()">
</form>
</body>
</html>
I would suggest you to use onSubmit event of form instead of onClick event of button.
You also need to use return with HTML onevent attributes
HTML
<form onSubmit="return check()">
<input type="text" id="name"/>
<div id="err"></div>
<input type="submit" />
</form>
DEMO
i'm studying javascript but i can't find some clear reference about how getting and treat data out of the HTML forms.
Here an example:
THE FORM:
<HTML>
<HEAD>
<TITLE>Database Lookup</TITLE>
<script src="basic.js"></script></HEAD>
<BODY>
<H1>Database Lookup</H1>
<FORM action="javascript: submitForm();">
Please enter the ID of the publisher you want to find: <BR>
<INPUT TYPE="TEXT" NAME="id">
<BR>
<INPUT TYPE="SUBMIT" value="Submit" > </FORM>
</BODY>
<HTML>
//HERE JAVASCRIPT Javascript BASIC.js:
function submitForm()
{
var idsearched=document.getElementById("id").innerHTML;
document.write("idsearched");
}
I would like to know what i'm doing wrong, because nothing happen when i click submit. And which is the better solution for handling forms with javascript?? Using "action"? or which of other attributes?
The value of form elements are contained in their value attribute. Try the modified code snippet below.
Note: ("idsearched") should be without quote because it is a variable and not a string.
var idsearched=document.getElementById("id").value;
document.write(idsearched);
You must add an id attribute to the form element.
<INPUT TYPE="TEXT" NAME="id" id="id">
Use this line to manually submit your form
<INPUT TYPE="button" value="Submit" onclick="submitForm();" >
<INPUT TYPE="button" value="Submit" onclick="submitForm();" >
do not use document.write use document.getElementById("myID").innerHTML
a full working example like you wanted is that:
<HTML>
<HEAD>
<TITLE>Database Lookup</TITLE>
<script src="basic.js"></script>
</HEAD>
<BODY>
<H1>Database Lookup</H1>
<FORM action="javascript: submitForm();">
Please enter the ID of the publisher you want to find: <BR>
<INPUT TYPE="TEXT" id="id" NAME="id">
<BR>
<INPUT TYPE="SUBMIT" value="Submit" >
</FORM>
<script type="text/javascript">
function submitForm()
{
var idsearched=document.getElementById("id").innerHTML;
document.write("idsearched");
return false;
}
</script>
</BODY>
<HTML>