Javascript button click get input from div - javascript

I have a question about something that I can not explain, so I give an example what my output needs to be.
This is my script,
function myfunction(e) {
var value = document.getElementById("value").value;
alert(value);
}
<div class="test">
<input id="value" type="text" name="" value="banana">
<button id="button" type="button" name="button" onclick="myfunction()">Button</button>
</div>
<div class="test">
<input id="value" type="text" name="" value="apple">
<button id="button" type="button" name="button" onclick="myfunction()">Button</button>
</div>
As you can see only the input value is different. If I run the script now and I click the div where apple is my value is banana. But i need to have it if I click on div banana it alert "banana" if I click apple it alert "apple". How can I do this It need to go trought 1 button click not on a div click. It is really hard to explane so if you have any questions please let me know.


First of all never use an id twice.
The code below alerts the value from the input, that is a sibling element of the button, from which the function is called.
function myfunction(e) {
var input = e.parentNode.getElementsByTagName("input")[0]; //or whatever selector you need
var value = input.value;
console.log(value);
}
<div class="test">
<input type="text" name="" value="banana">
<button type="button" name="button" onclick="myfunction(this)">Button</button>
</div>
<div class="test">
<input type="text" name="" value="apple">
<button type="button" name="button" onclick="myfunction(this)">Button</button>
</div>

Related

Selecting one <td> from a table

I have a table which consist of user added data. All the 's added are added with a equal button. Like this:
<td>
<form action="newBet.jsp" method="get">
<fieldset>
<input class="button betButton1" id="Won" type="submit" name="W" value="✔"/>
<div class="closeEarlyForm" style="display:none;">
<input class="form-control" name="update1" type="number"/>
<input class="button betButton1" type="submit" name="update" value="Close early"/>
</div>
<input class="closeEarlyLink" type="button" value="✎ Close early?"/>
</fieldset>
</form>
</td>
This wokrs fine. Now, I want to add some jquery which toggle the hidden div element. This is where I run into troubles. I can't seem show the div element only on the clicked element. Instead it shows the hidden div element on all the td's.
$(document).ready(function(){
$(".closeEarlyLink").click(function(e){
e.preventDefault();
$(".closeEarlyForm").fadeToggle();
});
});
I know that my problem is that I select all the elements with the class, but I cant figure out how to only toggle/select the hidden element on the specific td.

You can try using this keyword with parent() and find():
$(this).parent().find(".closeEarlyForm").fadeToggle();
Demo:
$(document).ready(function(){
$(".closeEarlyLink").click(function(e){
e.preventDefault();
$(this).parent().find(".closeEarlyForm").fadeToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
<form action="newBet.jsp" method="get">
<fieldset>
<input class="button betButton1" id="Won" type="submit" name="W" value="✔"/>
<div class="closeEarlyForm" style="display:none;">
<input class="form-control" name="update1" type="number"/>
<input class="button betButton1" type="submit" name="update" value="Close early"/>
</div>
<input class="closeEarlyLink" type="button" value="✎ Close early?"/>
</fieldset>
</form>
</td>

How can i change the class of a div when input field has a specific value?

I want to change the background of a div when an input field gets a specific value. eg:
<div class="vote-container">
<input class="positive" title="" name="pvote_1"
onclick="" value="+" type="submit">
</div>
So when the input field gets the "+" value i need to add the class "green" to the div "vote-container" and become like this:
<div class="vote-container green">
<input class="positive" title="" name="pvote_1"
onclick="" value="+" type="submit">
</div>

This will do it.
<div class="vote-container">
<input class="positive" title="" name="pvote_1"
onclick="" value="+" type="submit">
</div>
<script>
var input = document.querySelector(".positive");
if(input.value == "+"){
document.querySelector(".vote-container").classList.add("green");
}
</script>

unselect Radio Button and Disable Submit when all inputs are empty

We have an interactive map which connects over PHP to an database.
Since i'm pretty new to javascript i have some question.
We have around 15 text input and one dropdown input.
I only provide the Problematic parts of our code.
HTML
<div class="nav nav-sidebar">
<form action="./action_page.php" method="post">
<ul class="dropdown-item" id="u3">
<div data-toggle="buttons">
<label class ="btn btn-default" style="float:left;">
<input type="radio" class="btn btn-default" name="politic" id="politic" value="2"> Trump
</label>
<label class ="btn btn-default" style="margin-bottom:10px; margin-right: 20%; float:right;">
<input type="radio" class="btn btn-default" name="politic" id="politic" value="1"> Hillary
</label>
</div>
</ul>
<button input type="submit" id="submit-button" class="submit-button" value="Submit">Submit</button>
</form>
<button type="button" onclick="test()" class="clear-button">Reset</button>
</div>
JS
function test(){
$('input[name="politic"]').prop('checked', false);
}
How can I disable the Submit button if atleast 1 input is emtpy?
My test() function resets the value of "poltics" but the Button is still selected. How can I fix this?
I would appreciate to not get the working code, more like a guideline how to start on this Problem, or if you want to provide code, I would appreciate some shorts explanation.

I have added example with 3 input fields that will be empty till all of them are filled.. also for radios I have added class removal that was missing,,
hope that helps, cheers
EDIT: try now..
EDIT2: try now :)
function checkallinputs(){
var ch = false;
$('form input[type="text"]').each(function(el){
if( $(this).val() != '' ) ch = true; return false;
});
if( ch ){ $('button[type="submit"]').removeClass('disabled'); return true; }
if(!ch ){ $('button[type="submit"]').addClass('disabled'); return false; }
}
// run this on document.ready or in (function())() self exe block on page
checkallinputs();
$('form input[type="text"]').on( 'change', function(){ checkallinputs(); });
// disable submit
$( 'form' ).on( 'submit', function(){ return checkallinputs(); });
// reset radio ==>remove class
function test(){
$('input[name="politic"]').prop('checked', false);
$('input[name="politic"]').parent().removeClass('active');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form action="./action_page.php" method="post">
<div class="form-group">
<label for="input1">Input 1</label>
<input type="text" class="form-control" id="input1">
</div>
<div class="form-group">
<label for="input2">Input 2</label>
<input type="text" class="form-control" id="input2">
</div>
<div class="form-group">
<label for="input3">Input 3</label>
<input type="text" class="form-control" id="input3">
</div>
<div class="checkbox">
<div data-toggle="buttons">
<label class ="btn btn-default" style="float:left1;">
<input type="radio" class="btn btn-default" name="politic" id="politic1" value="2"> Trump
</label>
<label class ="btn btn-default" style="margin-bottom:10px; margin-right: 20%; float:right;">
<input type="radio" class="btn btn-default" name="politic" id="politic2" value="1"> Hillary
</label>
</div>
</div>
<button type="submit" class="btn btn-default disabled">Submit</button>
<br>
<button type="button" onclick="test()" class="btn btn-default">Reset</button>
</form>

How can I disable the Submit button if atleast 1 input is emtpy?
There are a few ways you can get this done.
Number One:
The easiest way is to add in the required attribute to the field, and the user would not be able to submit the form unless all required field are filled up. This is not the recommended way though as it depends on the browser and I believe there are work arounds for this.
<input type="text" name="username" required>
Number Two:
Another way is to add an onkeyup event handler to all your inputs, which calls a function where you check if all the inputs are filled up. Here, by default, you have your submit button disabled, and when all the inputs are filled, you can enable your submit button. This is not the best way since the user might not know why the button is disabled unless you specifically give a feedback, like making the borders red for invalid fields. Also running the validation after every keyup might be demanding for the application.
Number Three:
The one which I would prefer and recommend is this. You can leave the submit button enabled, and bind it to a click event where you check whether your validation is satisfied, that is, for your case you check if any input is empty and if one is empty, then you don't submit the form and display an alert or give the user a feedback to fill in the field. You might want to set focus to an empty field too.
My test() function resets the value of "poltics" but the Button is
still selected. How can I fix this?
What did you mean by "the button is still selected"? The Reset button? You can set focus to another input of your choice if you want
$(.'input-name').focus();

How can I disable the Submit button if atleast 1 input is emtpy?
You just need to keep trace of the change events of the inputs, like the following. If an input is checked, then you have to re-enable the submit button. If the reset button is used, you need to disable the submit button. This button can be disabled by default.
My test() function resets the value of "poltics" but the Button is still selected. How can I fix this?
As you provided your code, the radio buttons for both politicians successfully deselected.
function test(){
$('input[name="politic"]').prop('checked', false);
$('#submit-button').prop('disabled', true);
}
$('input[type="radio"]').on('change', function () {
// Here we set the button to not disabled if the radio was selected
$('#submit-button').prop('disabled', !$(this).prop('checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav nav-sidebar">
<form action="./action_page.php" method="post">
<ul class="dropdown-item" id="u3">
<div data-toggle="buttons">
<label class ="btn btn-default" style="float:left;">
<input type="radio" class="btn btn-default" name="politic" id="politic" value="2"> Trump
</label>
<label class ="btn btn-default" style="margin-bottom:10px; margin-right: 20%; float:right;">
<input type="radio" class="btn btn-default" name="politic" id="politic" value="1"> Hillary
</label>
</div>
</ul>
<button type="submit" id="submit-button" class="submit-button" value="Submit" disabled>Submit</button>
</form>
<button type="button" onclick="test()" class="clear-button">Reset</button>
</div>

How to assign a selected color in "input" to a variable Javascript/HTML

I have a tag. It lets user to select a color from a colorpicker. It also has a default value before the selection is made. When user makes a selection, where is that selection stored? Looking at the code, in the developer tools, after selection is made, the value is still "fffffff"
<div class="headerTable">
<h2>Header Table</h2>
<form id="form">
<div>
<div class="tableField">
<p>color 1</p>
<input type="color" id="1" value=#ffffff>
</div>
<div class="tableField">
<p>color 2</p>
<input type="color" id="2" value=#111111>
</div>
</div>
<!--<input type="submit" class="btn btn-info" value="Submit">-->
<button class="btn btn-info" onclick="myFunction()">Submit</button>
</form>
</div>
<script>
myFunction() {
document.getElementById("1").value = //assign a "selected" value to the element's "value" parameter
}
</script>

Save the value in a variable
function myFunction() {
var color = document.getElementById("1").value;
alert(color);
}

Jquery UI Clean transition between drop and showing

I'm struggling a bit getting a webpage to smoothly take out buttons and replace them with different buttons. This is the code:
function expandDateSearch() {
$("#button-search-by-date").toggle("drop");
$("#search-tab-label").css("display","none");
$("#button-search-by-keyword").toggle("drop");
// Wait a half second before executing this
setTimeout(function() {
$( "#search-input-date" ).show( "fold", 100 );
$("#date-search-button").show("fold",100);
$("#button-search-reset").show("fold",100);
$("#search-header").text("Search by Date");
},400);
}
And the corresponding HTML:
<!-- Search content goes here -->
<div>
<h4 id="accordion-search-text" class="accordion-header" style="display:none">Keyword:</h4>
<input type="text" id="accordion-search-input" style="display:none">
<h4 id="search-header">Search By: </h4>
<input type="button" value="Keyword" id="button-search-by-keyword" style="margin-top:5px;margin-left:25px;float:left;"></input>
<h4 id="search-tab-label" style="float:left; margin-top:10px;margin-left:10px;"> Or by </h4>
<input type="button" value="Date" id="button-search-by-date" style="margin-top:5px;margin-left:15px;float:left;"></input>
<input type="text" value="Enter Date" id="search-input-date" style="display:none">
<input type="button" id="date-search-button" value="Search Date" style="display:none"></input>
<input type="button" value="Search" id="button-search" style="display:none;"/>
<input type="text" value="Enter Keyword" id="search-keyword-value" style="display:none;"></input>
<input type="button" value="Search Keyword" id="button-search-by-keyword-value" style="display:none;"></input>
<input type="button" id="button-search-reset" value="Restart Search" style="display:none;"></input>
<br>
</div>
As you can see this is very simple. The function expandDateSearch() takes three HTML elements and replaces them with four elements. I used the setTimeout because it looks even worse when it all executes at once. I feel it would be better if there was a function that you fed a list of HTML elements to remove with animation as the first argument and a list of things to show as the second argument but I'm not seeing that in Jquery UI documentation.

The answer was to encapsulate each of the HTML elements in its own div then float:left.

Categories