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);
});
Related
I have an form, like this
<form>
<input type="text" id="abc" name="abc" value="abc"><img src="right.png">
<input type="text" id="abc1" name="abc" value=""><img src="wrong.png">
<input type="submit" id="submit" value="submit">
</form>
but I don't understand how to show this. When the input is not empty <img src="right.png"> and if it is empty then <img src="wrong.png">
Mark your input required and add some CSS, like this:
input:required:valid::after{
content: url(path/to/right.png);
}
input:required:invalid::after{
content: url(path/to/wrong.png);
}
<input type="text" required="required" minlength="1">
Fall back on #divy3993's if you have to support some horrible old browser
I would go with #dtanders but still a simple solution with JavaScript would not harm you.
function myFunction() {
var x = document.getElementById("abc");
var curVal = x.value;
var imageRW = document.getElementById('img_right_wrong');
if (curVal == "")
{
//wrong.png
imageRW.src = "http://findicons.com/files/icons/1671/simplicio/128/notification_error.png";
}
else
{
//right.png
imageRW.src = "https://d3n7l4wl5znnup.cloudfront.net/assets/images/icon-right.png";
}
}
<form>
<input type="text" id="abc" onkeyup="myFunction()" name="abc" value="">
<img src="http://findicons.com/files/icons/1671/simplicio/128/notification_error.png" id="img_right_wrong" width="2%">
<input type="submit" id="submit" value="submit">
</form>
Update:
Working Fiddle
Seems that you want to do dynamic form validation. So you can add event listener And JavaScript:
function checkInput() {
if ($("#abc").val().length == 0) {
// change image
}
}
<input id="abc" name="abc" onchange="checkInput()">
But using jQuery plugin is better:
link (EDIT: this link is dead, but it can be found on the Wayback Machine)
This can be done easily in angularjs using ng-show.
<!DOCTYPE HTML>
<HTML>
<head>
<title>Chat Application</title>
<script src="./scripts/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
</head>
<body ng-app="chatApp">
<div>
<input type="text" name="FirstName" ng-model="text" ng-init='text=""'>
<br />
<img src="right.png" alt="right" ng-show="text.length >0">
<img src="wrong.png" alt="wrong" ng-show="text.length === 0">
<input type="submit" id="submit" value="submit">
</div>
<script src="./scripts/app.js"></script>
</body>
</html>
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>
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>
This is my page code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Marketing Tracking</title>
</head>
<body>
<form action="#" id="form" method="post">
<div id="namevalues">
<span id="span:1">
<input type="text" id="name:1" onchange="changed(this)" style="width:300px;"/>
<input id="value:1" type="number" min="0" value="0" /><br /></span>
</div>
<input type="button" id="add" value="Add 1" />
<br />
<textarea name="talk" style="width:500px;height:175px;"></textarea>
<br />
<input type="button" id="update" value="Update"/>
</form>
<script>
function get(a){return document.getElementById(a);}
up=get("update");
up.onclick = function(){
get("form").submit();
}
get("name:1").onchange = function(){changed(this)};
get("add").onclick = function(){add()};<% z=2 %>
function changed(ele){
id=ele.id;
val=ele.value;
id=id.split(":")[1];
get("value:"+id).name=get("name:"+id).value;
}
function add(){
document.getElementById("namevalues").innerHTML+='<span id="span:'+z+'"><input type="text" id="name:'+z+'" onchange="changed(this)" style="width:300px;"/><input id="value:'+z+'" type="number" min="0" value="0" /><br /></span>';
}
</script>
</body>
</html>
I am very confused as to why when I press the Add 1 button enter some text and then press the Add 1 button again the text that I just entered disappears!
If anyone could give some insight to this it would be greatly appreciated.
The reason your other values disappear is because when you do something.innerHTML += something it will rewrite the HTML for that zone (meaning what was there before is gone and will be replaced with fresh new HTML). What you probably want to do is something along this :
function add(){
var div = document.createElement("div");
div.innerHTML = '<span id="span [... the rest of the code ...]<br /></span>';
document.getElementById("namevalues").appendChild(div);
}
Using appendChild won't alter the other element that are already in the div namevalues.
Just a small thing but try using
<script type="text/javascript">
When I was using inner.document stuff I had all kinds of problems until I added that code.