Hi i would like few textboxes disabled when a textbox contains a specific text and i click a button.
Here is what I have:
button:
<div id="itemRows1">
<label ></label><input type="hidden" name="add_name1" /><input onclick="addRow1(this.form); " type="button" id="dodaj1" value="Dodaj tip droge in količino" class="btn btn-primary" />
</div>
<br>
</div>
script:
<script>
var dis1 = document.getElementById("preiskavoopr1");
dis1.onchange = function () {
if (this.value == "SKP" ) {
document.getElementById("dolgnaziv").disabled = true;
var x = document.getElementsByClassName("form-control1");
var i = 0;
for (i = 0; i < x.length; i++) {
x[i].disabled = true;
}
} else {
document.getElementById("dolgnaziv").disabled = false;
}
}
</script>
The button is adding more fields dinamicaly and is working as expected.
The text box with the id preiskavoopr1 is a drop down with 2 values and is OK.
When i select a value SKP in the dropdown the text boxes with ClassName("form-control1"); has to become disabled and that is working. But when i click on the button 2 more text boxes with the ClassName("form-control1"); appears not disabled but they should be.
Hope i explained well enough.
It looks like you are trying to add onclick methods to <input> elements which disguised into a button because you added class="btn btn-primary" to it.
Change your button to
<button onclick="addRow()" class="btn btn-primary">Button Text</button>
Related
I have an input field and a button next to it, what i want to do is whatever i type in the input field then click on the button next to it, the result gets displayed in another button, here is what i tried so far:
function add_keyword() {
var keyword_value = (document.getElementById("keyword").value);
var result = keyword_value;
document.getElementById("btnresult").value = result;
}
#btnresult{
display: none;
}
<button type="button" class="btn btn-default" name="clickbtn" value="Add Keyword" onclick="add_keyword()">Add</button>
<div class="input-group">
<input type="text" class="form-control" id="keyword" name="keywordbox"/>
</div>
<button type="button" id="btnresult" class="btn btn-default">input value should be here</button>
https://jsfiddle.net/sheriffderek/p2LoLcv3/
I think this is what you are describing...
Some simplified markup
<div class="parent">
<input type='button' value='Add' rel='action' /><br>
<input type='text' rel='text-input' />
</div>
<ul class='button-list' rel='button-list'>
<!-- you need to put the buttons somewhere, right? -->
</ul>
jQuery was one of the tags, so I used it
// just caching some thing that will be reused (I like using rel)
var $parent = $('.parent'); // whatever - to keep some scope
var $addButton = $parent.find('[rel="action"]');
var $textInput = $parent.find('[rel="text-input"]');
var $buttonList = $('[rel="button-list"]');
$addButton.on('click', function() { // on click...
var currentInputValue = $textInput.val(); // get the value from input...
$buttonList.append('<li><button>' + currentInputValue + '</button></li>'); // append a new button...
$textInput.val(''); // clear input
});
You're almost there, you have to unhide the button you've hidden in the first place, and not set a value for a button, but rather the innerHTML property. Since a button doesn't hold a value, but displays the content between the tags as text.
I've commented my changes:
function add_keyword() {
var keyword_value = (document.getElementById("keyword").value);
var result = keyword_value;
// Changed from .value to .innerHTML
document.getElementById("btnresult").innerHTML = result;
// Changed style from to 'block'
document.getElementById("btnresult").style.display = "block"
}
#btnresult{
display: none;
}
<button type="button" class="btn btn-default" name="clickbtn" value="Add Keyword" onclick="add_keyword()">Add</button>
<div class="input-group">
<input type="text" class="form-control" id="keyword" name="keywordbox"/>
</div>
<button type="button" id="btnresult" class="btn btn-default">input value should be here</button>
In addition, there are several aspects of your code that could use improvement, I described them below:
function add_keyword() {
// No need for parentheses around the document.getElement function.
var keyword_value = document.getElementById("keyword").value;
// There's no need to place the value in a new variable, it is useful to place the element you wish to replace in a variable, since we'll be re-using it's instance.
var btn = document.getElementById("btnresult");
btn.innerHTML = keyword_value;
btn.style.display = "block"
}
EDIT: Since OP's goal was to create a new button with the content, this is an updated version that generates a new button for every new input.
function add_keyword() {
var keyword_value = document.getElementById("keyword").value;
// Create a new button element.
var btn = document.createElement("button");
// Set it's content to the keyword from the input.
btn.innerHTML = keyword_value
// Append it to the body.
document.body.appendChild(btn);
}
<button type="button" class="btn btn-default" name="clickbtn" value="Add Keyword" onclick="add_keyword()">Add</button>
<div class="input-group">
<input type="text" class="form-control" id="keyword" name="keywordbox"/>
</div>
I have an HTML form in which I get by id an input field when a button is clicked, then write its content in a div.
However, I would like to have the input values appended at each successive button click rather than replaced.
How would I do that?
Here is my code:
function myFunction() {
var x = document.getElementById("usr").value;
document.getElementById("listaa").innerHTML = x;
}
<input type="text" class="form-control" id="usr" value="unesi">
<!-- ... -->
<button type="button" class="btn btn-primary btn-lg btn-block" onclick="myFunction()">click me!</button>
<!-- ... -->
<div class="col-sm-6" id="listaa"></div>
If you want them to be listed one after the other change the function:
function myFunction() {
var x = document.getElementById("usr").value;
document.getElementById("listaa").innerHTML += x + "<br>";
}
notice the += to append text rather than replace it.
I'm trying to change the state of a button (using Bootstrap) from active to inactive based on input from the user. In the bigger picture, I am trying to come up with an intuitive way to test input for a form, so that once every field is valid, the submit button can then be pressed for PHP processing on the server side. Here is what I currently have for code:
<br>
<label>
Input: <input type="text" name="sample" class="form-control" id="input" onkeyup="activateButton()" required>
</label>
<br>
<label>
<button type="submit" name="submit" class="btn btn-success disabled" id="button">Submit</button>
</label>
<script type="text/javascript">
function activateButton() {
"use strict";
var input = document.getElementById("input").val();
if (input == "activate") {
document.getElementById("button").className = "btn btn-success active";
}
}
</script>
This is, of course within html markup, and so I wanted to get some pointers on how to approach this, since my current setup doesn't seem to work. Thank you!
In your code document.getElementById("input").val(); should be document.getElementById("input").value;
And Since you have tagged question in jquery too..
function activateButton() {
"use strict";
var input =$("#input").val();
if (input == "activate") {
$("#button").toggleClass("btn btn-success active");
}
}
ADDITION(extra info asked by the user):
$("input").keyup(function(){
var d=$(this).val();
var res = d.test(/your-regex-here/);
if(res)
{
//enable button here
}
else
{
//disable button here
}
});
I'd like to have a drop down menu and have two buttons on a page, where one button will send out something like:
url/?tile=x&status=on
if the "On" button is pressed
or
url/?tile=x&status=off
if the off button is pressed
x = is the value in the drop down menu
I can do something like this:
<form>
Select Tile For On/Off
<select id="tileSelect2" data-range="63" name="tile"></select>
<script>
var select = document.getElementById("tileSelect2");
var range = select.dataset.range;
for (var i=0; i<+range; i++) {
var node = document.createElement("option");
node.value = i;
node.text = i;
select.appendChild(node);
}
</script>
<input type="submit" value="Switch Tile On">
<input type="submit" value="Switch Tile Off">
</form>
But that will just send the same thing out for both buttons. Is there a way of making different buttons do different things? I'd be happy if it sent:
url/?tileon=x
and
url/?tileoff=x
Or the other option suggested above.
I've found various methods where you can run a script from a button press, but I can't work out from that how to make it send out the value selected to the server.
I need to keep it simple as it's being hardcoded into an embedded sever.
Many thanks.
If you give your submit buttons names, it will create an extra space in the url if the method is set on GET(which you probably use):
<input type="submit" name="on" value="Switch Tile On">
<input type="submit" name="off" value="Switch Tile Off">
You will get
url/tile=x&on=Switch+Tile+On
If you hit the first button. Now you can check whether the button was "on" or "off" with
if(isset($_GET['on']))
or
if(isset($_GET['off']))
If you add a <hidden/> element to your form declaration, then you supply a value to your <hidden/> before the form is posted in order to pass along the value to the form on the server.
<form>
Select Tile For On/Off
<select id="tileSelect2" data-range="63" name="tile"></select>
<script>
var select = document.getElementById("tileSelect2");
var range = select.dataset.range;
for (var i=0; i<+range; i++) {
var node = document.createElement("option");
node.value = i;
node.text = i;
select.appendChild(node);
}
</script>
<hidden id="switchValue" name="switchValue" value="" />
<script>
function switch(val) {
document.getElementById("switchValue").value = val;
}
</script>
<input type="submit" value="Switch Tile On" onclick="switch('on')">
<input type="submit" value="Switch Tile Off" onclick="switch('off')">
</form>
Im writing a game of sorts that presents you with multiple options. Once you choose your option, all buttons, including your selection, should disappear and you move on to the next round. I have a script that allows this to be done, however for each round of buttons I would have to rewrite it to adhere to the new set of buttons. To save from having to repeat myself each time, I'm trying to get a universal script that will accomplish this
HTML
<input type="button" class="btn" id="getUp" name="answer" value="get up" onclick="this.style.display='none'; hideSleepIn(); " />
<input type="button" class="btn" id="sleepIn" name="answer" value="sleep in" onclick="this.style.display='none'; hideGetUp();" />
JavaScript
var hidden = false;
var click = onClick;
function hideSleepIn()
{
hidden = !hidden;
if(getUp === click)
{
document.getElementById('getUp').style.visibility = 'visible';
}
else
{
document.getElementById('sleepIn').style.visibility = 'hidden';
}
}
Try replacing
document.getElementById('getUp').style.visibility = 'visible';
with this
document.getElementById("getUp").style.display = 'none';
I worked the current script I was using to hide the divs, to also hide/ show the buttons on the page
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
<input type="button" class="unhidden" id="firstPath" value="get up" onclick="unhide('getUpText'); unhide('firstPath2'); unhide('firstPath');" />
text
<input type="button" class="unhidden" id="firstPath2" value="sleep in" onclick="unhide('sleepInText'); unhide('firstPath'); unhide('firstPath2');" />
text