We Keep Coding

Run onclick event only if Input was entered

I want to make a submit button which, once clicked on, will run a function I have made: disable() but I want to make it so it only runs the onclick event if the input above had text.
<form id="name">
<p7>Please enter a name for your plan: </p7> <input required>
<input type="submit" onclick="disable()">
</form>
So if the user typed the required input after the tags, and clicked on submit, it will run disable)
But if the user just clicks on submit without typing anything in the required input, disable() doesn't run
Thanks in advance

You can validate the input value at the beginning of the disable function, like so:
function disable() {
var myInput = document.getElementById("myInput");
if (!myInput.value.length) {
alert('empty');
return;
}
alert('fine');
}
<form id="name">
<p7>Please enter a name for your plan: </p7>
<input required id="myInput">
<input type="submit" onclick="disable()">
</form>

If you're want to use HTML5 validation, don't use click event of the button, use submit event of the form, as follows:
function disable(e) {
e.preventDefault() // Not needed, but for the snippet, for the form win't disappear
console.log('Inside disable().');
}
$('#name').submit(disable);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="name">
<p7>Please enter a name for your plan: </p7> <input id="input" required>
<input type="submit">
</form>
I you want to validate it inside JS, use code like the following, that determinates if there is a value inside the input field:
function disable() {
if (!$('#input').val()) {
return;
}
console.log('Inside disable().');
}
$('#button').click(disable);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="name">
<p7>Please enter a name for your plan: </p7> <input id="input" required>
<input type="button" id="button" value="Click Me!">
</form>

You could also disable the button itself as you don't need it when there is no input present.
You need to add disable function on input box field.
Added onkeyup event on inputbox to track changes.
disable()
function disable(){
if($("#input").val()!=""){
$("input[type=submit]").attr("disabled", false);
//your own code here!!
}
else{
$("input[type=submit]").attr("disabled", true);
return; //do nothing and return back.
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="name">
<p7>Please enter a name for your plan: </p7>
<input onkeyup="disable()" value="" id="input" required>
<input onclick="disable()" id="submit" type="submit">
</form>

HTML/JavaScript - Value of Input doesn't update (Element.value = Null)

Hello I just started today so im pretty new.
I have to get a string, which a user can enter on the website into my JavaScript file. I found out that I should use document.getElementById("myID").value to get the value of an input field on the html site. Here is my problem: I can't use the brackets arround my input and button because a submit will force a reload of the site and my functions wont have any affect.
So I have to get the string on the fly into my JavaScript file.
This is all I have at the moment:
<div id="searchDiv">
<input type="text" id="searchInput" placeholder="Search for Gifs..." value="" />
<input type="button" id="searchButton" value="Search"></button>
</div>
And my JavaScript file:
var searchButton = document.getElementById("searchButton");
var searchInput = document.getElementById("searchInput").value;
searchButton.addEventListener("click",
function() {
function(parameter)
}
)...
So document.getElementById("searchInput").value; give back null even if the input field has been edited.
I hope you can help me.

It is because your are storing the searchInput value even before the button is clicked,so the value would be empty irrespective of anything that you enter as input
Try accessing on the click event of the button
check this snippet
var searchButton =document.getElementById("searchButton");
var searchInput=document.getElementById("searchInput");
window.onload=function(){
searchButton.addEventListener("click",
function() {
alert(searchInput.value);
}
)
}
<div id="searchDiv">
<input type="text" id="searchInput" placeholder="Search for Gifs..." value="" />
<input type="button" id="searchButton" value="Search">
</div>
Hope it helps

You should use
<button></button>
Instead of
<input></button>
What I did was
<div id="searchDiv">
<input type="text" id="searchInput" placeholder="Search for Gifs...">
<button id="searchButton">Search</button>
</div>
<script type="text/javascript">
document.getElementById("searchButton").onclick = function(){
alert(document.getElementById("searchInput").value);
}
</script>

detect the submit event when click enter key

If I have one form with actually different inputs for two submit requests. When I click on any submit button I can know what action to do.
but I need to detect in which input I'm when click Enter keyboard key.
<form class="main-form">
<div class="form_one">
<input class="form_one_input" type="text" id="form_one_input"/>
<button type="submit" class="form_one_button">Submit form one</button>
</div>
<div class="form_two">
<input class="form_two_input" type="text" id="form_two_input"/>
<button type="submit" class="form_two_button">Submit form two</button>
</div>
</form>
https://jsfiddle.net/m6433obp/

To detect which input you are in use the keyup event handler as:
$('.form_one').bind('keyup', function(e) {
if(e.keyCode === 13) {
alert($(this).attr('class'));
}
})
$('.form_two').bind('keyup', function(e) {
if(e.keyCode === 13) {
alert($(this).attr('class'));
}
})
check demo for this here

I am not really sure that I understand your question correctly. But I think that since you are using two submit buttons in the same form, you should give unique names to the buttons, so that on the server side you know that on hitting enter which input got submitted.
<form class="main-form">
<div class="form_one">
<input class="form_one_input" type="text" id="form_one_input"/>
<button type="submit" name="first_button" class="form_one_button">Submit form one</button>
</div>
<div class="form_two">
<input class="form_two_input" type="text" id="form_two_input"/>
<button type="submit" name="second_button" class="form_two_button">Submit form two</button>
</div>
</form>
And the code to check:
if (isset($_POST['first_button'])) {
} else if (isset($_POST['second_button'])) {
} else {
//no button pressed
}
Hope this is what you were looking for.

generate alert on button click based on input type hidden

I have html that has tile view and each tile has some info with button. I want to check the value of an input hidden field and if the value is not in array defined raise an alert.
html
<div class="box" style="width:30%%">
<div class="boxInner">
<form id="form_myws" method="POST">
<input type="hidden" name="state" value="%s">
<div class="titleBox">
<input type="submit" value="submit" name="ws_butt" id="submit" />
</div>
</form>
</div>
</div>
javascript
<script type="text/javascript">
$('#submit').click(function(){
var state_list=["AVAILABLE","IMPAIRED","INOPERABLE",];
var curr_state=$(this).find("input[type='hidden'][name='state']");
console.log(curr_state.val());
if (jQuery.inArray(curr_state.val(),state_list)<0){
alert("submission is allowed only with AVAILABLE,IMPAIRED,INOPERABLE states.");
}
});
It is not generating any alert. How to achieve that?

var curr_state=$(this).find("input[type='hidden'][name='state']");
change it to
var curr_state=$(this).closest('form').find("input[type='hidden'][name='state']");
also add
return false;
inside if statement so it won't submit form.

If you want to subvert submit you need to do:
$('#submit').click(function(e){
// this:
e.preventDefault();
// more code
// .. or better
return false;
});
You can contain these responses in if --> then constructs but you need to do one or the other to prevent a form from submitting. If you're not using a form, don't use submit!
You can also access the hidden input value like this:
$('#form_myws > input[name="state"]').val();
Working snippet:
var val = $('#form_myws > input[name="state"]').val();
$('body').append(val);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form_myws">
<input type="hidden" name="state" value="%s">
<div class="titleBox">
<input type="submit" value="submit" name="ws_butt" id="submit" />
</div>
</form>

in your case:
var curr_state=$(this).find("input[type='hidden'][name='state']");
$(this) get the button element you selected , you can't find any childen nodes via find() So you should select the hidden input correctly like:
var curr_state=$($(this).parent()[0]).prev()[0];
or like this:
var curr_state=$($(this).parent()[0]).siblings('[name="state"]')[0];

Changing div content with Javascript onClick

I'm trying to use a textbox and a submit button to change a div on the page. I want to take the text that has been typed in the textbox and put it in the div when the button is clicked. I have this code:
function myfunction() {
var myText = document.getElementById("textbox").value;
document.getElementById('myDiv').innerHTML = myText;
}
<form>
<input type="text" name="textbox" id="textbox" />
<input type="submit" name="button" id="button" onclick="myfunction()" />
</form>
<br/>
<div id="myDiv"></div>
But nothing happens. When I try it in the browser it just refreshes the page and adds ?textbox=someValueHere to the end of the URL. How can I get the div to display the textbox value?

The problem is that the submit button is posting the form, so you are not seeing the change - If you change your submit button to a normal button it will work
<input type="button"name="button" id="button" onclick="myfunction()" />

The form is submitting. You need to stop that by adding return false; (if you are using Jquery) Or remove the form entirely it is not required.
function myfunction() {
var myText = document.getElementById("textbox").value;
document.getElementById('myDiv').innerHTML = myText;
return false;
}

Nothing happens because the form is being submitted. You need to prevent the default action from happening, which is the form submission. See preventDefault() or return false in the MDN for more details on how to prevent an events default action from occurring.

Call event.preventDefault() to prevent the normal form submission.
function myfunction(e) {
e.preventDefault();
var myText = document.getElementById("textbox").value;
document.getElementById('myDiv').innerHTML = myText;
}
<form>
<input type="text" name="textbox" id="textbox" />
<input type="submit" name="button" id="button" onclick="myfunction(event)" />
</form>
<br/>
<div id="myDiv"></div>