i have this js function
function showThisTag(tag) {
$('#content .blog').not("."+tag).hide();
}
how can i send the "tag" parameter from a form?
something like
<form name="input" onSubmit="showThisTag(this)">
<input type="text" >
<input type="submit" value="sendit">
</form>
thanks!
Here's an example how you can do it:
<html>
<head>
<script type="text/javascript">
function myfunction(txt) {
alert(txt)
}
</script>
</head>
<body>
<form>
<input id="arg"/>
<input type="button" value="submit" onclick="myfunction(document.getElementById('arg').value)"/>
</form>
</body>
</html>
Put the value you want to send in quotes:
<form name="input" onSubmit="showThisTag('classToShow')">
If you want get the class from the input field, give it a class so you can access it and get its value:
function showThisTag(form) {
var tag = $(form).find(".tagclass").val();
$('#content .blog').not("."+tag).hide();
$("#content .blog."+tag).show();
return false;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="input" onSubmit="return showThisTag(this)">
<input type="text" class="tagclass">
<input type="submit" value="sendit">
</form>
<div id="content">
<div class="blog one">
Blog post one
</div>
<div class="blog two">
Blog post two
</div>
</div>
Related
After a CLICK on the taskYes icon, i need to get the value on the input with the inputMins class
<form method="post" action="">
<span class="taskTitle">
<input id="newInput" type="text" />
<button class="taskYes"></button>
</span>
<span class="taskMinutes">
<input class="col-md-2 inputMins" type="text" />
</span>
</form>
Can you help me saying what is the best way to target my input?
I've tried this but ... without success :
$(".taskYes").click(function(){
var valeurTime = $(this).parent().next("span").val();
alert(valeurTime);
});
On my browser this code is working, please send me your result!
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js">
</script>
<script>
function init() {
console.log("here");
$(".taskYes").click(function(evt){
var value = $(evt.target).parent().next('span').find('.inputMins').val();
alert(value);
});
}
</script>
</head>
<body onload="init()">
<form method="post" action="">
<span class="taskTitle">
<input id="newInput" type="text" />
<button class="taskYes"></button>
</span>
<span class="taskMinutes">
<input class="col-md-2 inputMins" type="text" />
</span>
</form>
</body>
</html>
Are you using jQuery? Or VanillaJS?
Jquery Solution:
$('.inputMins').val()
VanillaJS Solution:
document.getElementsByClassName('inputMins')[0].value
And now the full implementation:
<!DOCTYPE html>
<html>
<head>
<script>
function checkTaskMinutes() {
debugger;
alert(document.getElementsByClassName('inputMins')[0].value);
}
</script>
</head>
<form method="post" action="">
<span class="taskTitle">
<input id="newInput" type="text" />
<button class="taskYes" onclick="checkTaskMinutes()"></button>
</span>
<span class="taskMinutes">
<input class="col-md-2 inputMins" type="text" />
</span>
</form>
</html>
is more simple! Try this:
$(".taskYes").click(function(evt){
var value = $(evt.target).parent().next('span').find('.inputMins').val();
console.log(value);
});
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
can anybody tell me how to make preview before submit in one form using javascript in php
i have an example like
<script type="text/javascript">
$(document).ready(function() {
`$('#db').hide();
});
function preview()
{
var add=document.getElementById('Address_Street').value;
if(add.trim()!="")
{
$('#db').show();
document.getElementById('p_Address_Street').value=add;
}
}
<body>
<form name="approval" id="approval" method="post" enctype="multipart/form-data" action="">
<input type="text" name="Address_Street" id="Address_Street" size="36" value="">
<input type="submit" value="Submit" >`
<input type="button" value="Preview" onclick="preview()">
</form>
<div id="db">
Address Street: <input type="text" name="p_Address_Street" id="p_Address_Street" size="36" value="" readonly="readonly">
</div>
</body>
can everybody tell me the right one please :(
Add id to your Preview button
<input id="Preview" type="button" value="Preview">
Then try this Js
$(document).ready(function() {
$('#db').hide();
$('#Preview').on('click', function(){
var add=$("#Address_Street").val();
if(add.trim()!="")
{
$('#db').show();
$('#p_Address_Street').val(add);
}
});
});
You have an error on this line
`$('#db').hide(); try to remove the ` char
And then, if you're using JQuery, stick to it.
var add = $('#Address_Street').val();
To debug, remove the if statement. Maybe the error is there.
The example:
http://jsfiddle.net/fa295/
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>
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>