Need to enable button when text is entered in field. - javascript

I need to enable my button when I type text into my text box. What am I doing wrong?
Code:
<body>
<script>
function IsEmpty(){
if(input1.value!=null){
sendbutton.enabled==true;
}
}
IsEmpty();
</script>
<input class="draft" name="input1" type="text"/>
<button class="send" id="sendbutton" disabled> Send </button>
<ul class="messages">
</ul>
</body>

Change you JavaScript to:
var input1 = document.getElementById('input1'),
sendbutton = document.getElementById('sendbutton');
function IsEmpty(){
if (input1.value){
sendbutton.removeAttribute('disabled');
} else {
sendbutton.addAttribute('disabled', '');
}
}
input1.onkeyup = IsEmpty;
And HTML:
<input class="draft" id="input1" type="text"/>
<button class="send" id="sendbutton" disabled>Send</button>
DEMO

You probably wanted sendbutton.enabled=true;, with a single =. What you've written checks whether they are equal (false, presumably), and then doesn't do anything with the result.

To modify an element at the DOM you need either to use pure Javascript's functionality, let's say getElementById function, or any other Javascript framework.
document.getElementById('sendbutton')
Then refer to the attribute and change it.
You can also use JQuery which will help you heaps. I mean, using selectors.
Hope that helps,

You need to assign an id to your input element.
<input class="draft" name="input1" id='input1' type="text"/>
and in your javascript access it like this:
if(document.getElementById('input1').value != null || document.getElementById('input1').value!='undefined'){
document.getElementById('sendbutton').disabled=false;
}

Related

Is there a way to force the user inside a html text input?

Id like to know if anyone has a suggestion for forcing a user to select a text box with Javascript/Jquery?
Example: user clicks X object on web page. User is forced into a text box in which they should enter information first.
Thanks in advance :)
Yes, what you are looking for is called focus.
Here the examples using jquery and plain js:
function setFocusjquery() {
$('#text-1').focus();
}
function setFocus() {
document.querySelector('#text-2').focus();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="setFocusjquery()">FOCUS jquery</button>
<input type="text" id="text-1" />
<br />
<button onclick="setFocus()">FOCUS JS</button>
<input type="text" id="text-2" />
Use JavaScript focus() method.
HTML:
<button type="button" onclick="focusField()">Click me</button>
...
<input type="text" id="myInput">
JavaScript:
function focusField() {
document.getElementById('myInput').focus();
}
You need to add an event listener to your event trigger object with,
Native JavaScript
let myXObject = document.getElementById('#xObject');
let myTextbox = document.getElementById('#myTextbox');
myXObject.addEventListener('click', function() {
myTextbox.Focus();
});
JQuery
let myXObject = $('#xObject');
let myTextbox = $('#myTextbox');
myXObject.click(function() {
myTextbox.focus();
});

save to localStorage

i'm curious if its possible to save the text input a user types in the field to localStorage , so in this html example , i'd want to save the innner html from the div#match_player_id , that is created when you click the button
<input type="text" id="contract_year" placeholder="Contract" autocomplete="off">
<input value="Submit" onclick="document.querySelector('#match_player_id').innerHTML = document.querySelector('#contract_year').value" type="button">
<div id="match_player_id"></div>
I recommend you to use a javascript function instead:
<script type="text/javascript">
function updateMatchPlayerId() {
var matchPlayerId = document.querySelector('#contract_year').value;
document.querySelector('#match_player_id').innerHTML = matchPlayerId;
if (typeof Storage !== "undefined") {
localStorage.setItem("matchPlayerId", matchPlayerId);
}
}
</script>
HTML:
<input type="text" id="contract_year" placeholder="Contract" autocomplete="off">
<input value="Submit" onclick="updateMatchPlayerId()" type="button">
<div id="match_player_id"></div>
Firstly, you should really be using unobtrusive event handlers to hook to events instead of the outdated on* event attributes. As you've tagged jQuery in the question this can be done incredibly simply.
From there you can just use localStorage.setItem() to save the value you require, like this:
$('button').click(function(e) {
e.preventDefault();
var contractYear = $('#contract_year').val();
$('#match_player_id').html(contractYear);
localStorage.setItem(contractYear);
});
<input type="text" id="contract_year" placeholder="Contract" autocomplete="off">
<button type="button">Submit</button>
<div id="match_player_id"></div>
Working example

javascript add button with two input

I'm trying to write this in javascript without using jquery. It basically has two input field: author and quote, and on click should be added to the page.
I'm also trying to save it on the page in case I leave the page. The added quote disappears when i execute the method:
function radd() {
if((document.getElementById("q").value!="") && (document.getElementById("a").value!="")) {
$("#mid-wraper" ).append("<p class='left-bullet'>"+document.getElementById("q").value+"-<span class='yellow-heading'>"+ document.getElementById("a").value+"</span></p>");
document.getElementById("q").value="";
document.getElementById("a").value="";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="but" onClick="radd()">Add</button>
<label for="q">Add ur Quote!</label><input id="q" name="q" />
<label for="a">The author name</label><input id="a" name="a" />
Try this
function radd()
{
if((document.getElementById("q").value!="")&& (document.getElementById("a").value!=""))
document.getElementById("mid-wraper").innerHTML += "<p class='left-bullet'>"+document.getElementById("q").value+"-<span class='yellow-heading'>"+ document.getElementById("a").value+"</span></p>";
document.getElementById("q").value="";
document.getElementById("a").value="";
}
function add(){
//create a new elem
var el=document.createElement("p");
//you can assign id, class , etc
el.id="yourcustomid";
el.textContent="yourcontent";
//then add to the wrapper
var wrapper=document.getElementById("mid-wrapper");
wrapper.appendChild(el);
}
This code shows you how to create a new paragraph and add it to your wrapper js...
You could also do something like this; far more easier in my opinion. Simply create both inputs, but set their attributes to hidden. And using javascript, delete the "hidden" attribute.
<button id="but" onClick="radd()">Add</button>
<input id="q" hidden="hidden" >Add ur Quote!</input>
<input id="a" hidden="hidden">The author name</input>
The JS part:
function radd(){
document.getElementById("q").removeAttribute("hidden");
document.getElementById("a").removeAttribute("hidden");
}

HTML input into Javascript variable

I've been attempting to grab text input from HTML and trying to output the text back into HTML but for some reason it does not seem to be working. Does putting input within a form alter the interaction with getElementById or is it possible that the second button usage of formaction is interrupting this?
$(document).ready(function(){
$("#submit").on("click",function(){
var test = document.getElementById("searchInput");
$("#text").html(test);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id = "text">
<h1>test</h1>
</div>
EDIT: I have attempted to change
var test = document.getElementById("searchInput");
to
var test = document.getElementById("searchInput").value;
previously and it is still not working. Is there an interaction that is failing that I am missing? Also I would like to be able to store the input as variable i.e thats why I am purposely putting it into a variable before outputting it.
EDIT2: There wasn't anything particularly wrong about the code other than retrieving the value. I am currently using codepen.io to code and did not load jquery into the pen.
Since you're using jQuery, it will make more sense to use jQuery to obtain the elements' value:
Use this to always replace #text element contents with #searchInput value:
$("#text").html($("#searchInput").val());
Use this to append #searchInput value to #text element:
$("#text").append($("#searchInput").val());
But the whole logic does not make any sense. You are changing an elements' value that it is outside the form you are submitting. Either you should prevent submit button click event from submitting the form, or have the #text element inside the form as an input, textarea or hidden field:
$(document).ready(function(){
$("#submit").on("click",function(e) {
e.preventDefault();
$("#text").html($("#searchInput").val());
})
});
or having the #text element inside the form for submitting:
<form>
<input type="hidden" id="text" name="text">
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
You Using form element, so once you click the button , the form will be reloaded, if you want to display textbox value to the element , once remove the form element.
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
<div id ="text">
<h1 id="welc"></h1>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#submit").on("click",function(){
var test = $('#searchInput').val();
$("h1").html(test);
});
});
</script>
Just Remove tag, and check it.
You need to find the element's value and then set it as HTML.
$("#text").html(test.value);
I have updated your question mate check this one .
$(document).ready(function(){
$("#submit").on("click",function(){
var test = document.getElementById("searchInput").value;
$("#text").html(test);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id = "text">
<h1>test</h1>
</div>
I think this will work for you.
<! doctype HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<input type="text" id="searchInput">
<br>
<button type="button" id="submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id="text">
<h1>test</h1>
</div>
</body>
<script>
$(document).ready(function () {
$("#submit").on("click", function () {
$("#text").html($("#searchInput").val());
})
});
</script>
</html>
Edit your JS code please try:
EDIT:
$(document).ready(function(){
$("#submit").on("click",function(){
var test = $("#searchInput").val();
$("#text").html(test);
})
});

input text change onclick button value

Actually i want to create a page switcher, all i need for this is an input with type text where will be entered the number of the page, and i have the second input with type button and onclick value:
<input type="text" value="#number of the page#" />
<input type="button" onclick="_go_page_('cf_pages_form_name1','#number of the page#');" />
I cant figure it out how to take this #number of the page# and put it in onclick dynamically using javascript... please smb help!
<input type="text" id="txtPageNumber" value="2" />
<input type="button" id="btn" value="click" onclick="_go_page_('cf_pages_form_name1','#number of the page#');" />
$(document).ready(function(){
$("#btn").click(function(){
var $val = $("#txtPageNumber").val();
alert($val);
_go_page_('cf_pages_form_name1',$val);
});
});
});
Assuming number is the id of the text field.
You can get the value of the text field like this:
$('#number').val();
And pass that is the onclick event
You can use an ID on the page selector input to get the value.
function goToPage(pageNumber) {
// go to pageNumber
}
<input type="text" id="pageSelector" value="#number of the page#" />
<input type="button" onclick="goToPage($('#pageSelector').val())" />
You've tagged this with jQuery so I'm assuming you're using jQuery.
lets your input type is like this
then in jquery try something like this...
$('#pageNo').keyup(function(){
pageNo = $(this).val()
}
then pass this to your button onclick function
i will answer in "very easy to understand" without jquery:
you have to get the value of the first inputfield. this should your function do. but first the inputfield needs an id(f.g. 'number').
code in function:
var pagenumber = document.getElementById('number').value;
then you have to put the number into the url (document.href).

Categories

Resources