I'm trying to code an onscreen keyboard but can't see why the keys when clicked do not insert the values, instead nothing happens. Sorry if this is a obvious problem, I am trying to learn.
<tr>
<td colspan="3"> <B>Search</B>
<div id="keyboard">
<br>
<input id="searchbox" type="text">
<br>
<input id="qkey" type="button" value="q" onClick="document.getElementById("searchbox").value+='q';"/>
<input id="wkey" type="button" value="w" onClick="document.getElementById("searchbox").value+='w';"/>
<input id="ekey" type="button" value="e" onClick="document.getElementById("searchbox").value+='e';"/>
<input id="rkey" type="button" value="r" onClick="document.getElementById("searchbox").value+='r';"/>
<input id="tkey" type="button" value="t" onClick="document.getElementById("searchbox").value+='t';"/>
<input id="ykey" type="button" value="y" onClick="document.getElementById("searchbox").value+='y';"/>
<input id="ukey" type="button" value="u" onClick="document.getElementById("searchbox").value+='u';"/>
<input id="ikey" type="button" value="i" onClick="document.getElementById("searchbox").value+='i';"/>
<input id="okey" type="button" value="o" onClick="document.getElementById("searchbox").value+='o';"/>
<input id="pkey" type="button" value="p" onClick="document.getElementById("searchbox").value+='p';"/>
<input id="backkey" type="button" value="Bckspc" onclick='bckspc'>
<br>
<input id="akey" type="button" value="a" onClick="document.getElementById("searchbox").value+='a';"/>
<input id="skey" type="button" value="s" onClick="document.getElementById("searchbox").value+='s';"/>
<input id="dkey" type="button" value="d" onClick="document.getElementById("searchbox").value+='d';"/>
<input id="fkey" type="button" value="f" onClick="document.getElementById("searchbox").value+='f';"/>
<input id="gkey" type="button" value="g" onClick="document.getElementById("searchbox").value+='g';"/>
<input id="hkey" type="button" value="h" onClick="document.getElementById("searchbox").value+='h';"/>
<input id="jkey" type="button" value="j" onClick="document.getElementById("searchbox").value+='j';"/>
<input id="kkey" type="button" value="k" onClick="document.getElementById("searchbox").value+='k';"/>
<input id="lkey" type="button" value="l" onClick="document.getElementById("searchbox").value+='l';"/>
<br>
<input id="zkey" type="button" value="z" onClick="document.getElementById("searchbox").value+='z';"/>
<input id="xkey" type="button" value="x" onClick="document.getElementById("searchbox").value+='x';"/>
<input id="ckey" type="button" value="c" onClick="document.getElementById("searchbox").value+='c';"/>
<input id="vkey" type="button" value="v" onClick="document.getElementById("searchbox").value+='v';"/>
<input id="bkey" type="button" value="b" onClick="document.getElementById("searchbox").value+='b';"/>
<input id="nkey" type="button" value="n" onClick="document.getElementById("searchbox").value+='n';"/>
<input id="mkey" type="button" value="m" onClick="document.getElementById("searchbox").value+='m';"/>
<br>
<input id="spacekey" type="button" value=" space " onClick="document.getElementById("searchbox").value+=' ';"/>
</center>
</div>
</tr>
You've used the wrong quotation marks in the onclick. Instead, use
<input id="qkey" type="button" value="q" onClick="document.getElementById('searchbox').value+='q';"/>
Use simple quotes, i.e. 'searchbox' in place of "searchbox". You are specifying a quoted text in another quoted text, thus you need either to use different quotes or use escaping (like \")
Related
im trying to make a form with a title, paragraph and a score out of 10. I would like make to make only one button go into database. How can i do that and conserve the current style of my buttons ?
example
User selects a button
button 1
button 2 //user chooses this button on click
User change selected button
button 1 //user changes the selected button on click
button 2
.
And when i click submit it sends button 1 into database
code:
<form method="POST" action="index.php?action=sendReview" class="redaction" enctype="multipart/form-data">
<div id="scores">
<input class="score" type="button" name="options" style="color:red;" value="1" id="option1">
<input class="score" type="button" name="options" style="color:red;" value="2"id="option2">
<input class="score" type="button" name="options" style="color:red;" value="3"id="option3">
<input class="score" type="button" name="options" style="color:orange;" value="4" id="option4">
<input class="score" type="button" name="options" style="color:orange;"value="5"id="option5">
<input class="score" type="button" name="options" style="color:orange;" value="6"id="option6">
<input class="score" type="button" name="options" style="color:orange;" value="7"id="option7">
<input class="score"type="button" name="options" style="color:green;" value="8"id="option8">
<input class="score" type="button" name="options" style="color:green;" value="9" id="option9">
<input class="score" type="button" name="options" style="color:green;" value="10" id="option10">
</div>
<input type="text"name="nameReview" class="nameReview"placeholder="Review Title">
<textarea id="story" name="review-content"rows="5" cols="33" placeholder="Write your Review here"></textarea>
<input type="submit" value="Publish" name="review" class="publish">
</form>
How it looks like
You can put your value in a hidden input. On submit of the form you can get this value by the name of the hidden field.
See below example, It will post userScore as a user selected score.
$(".score").click(function(){
var btnId = $(this).val();
$("#userScore").val(btnId);
console.log($("#userScore").val());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="index.php?action=sendReview" class="redaction" enctype="multipart/form-data">
<div id="scores">
<input class="score" type="button" name="options" style="color:red;" value="1" id="option1">
<input class="score" type="button" name="options" style="color:red;" value="2"id="option2">
<input class="score" type="button" name="options" style="color:red;" value="3"id="option3">
<input class="score" type="button" name="options" style="color:orange;" value="4" id="option4">
<input class="score" type="button" name="options" style="color:orange;"value="5"id="option5">
<input class="score" type="button" name="options" style="color:orange;" value="6"id="option6">
<input class="score" type="button" name="options" style="color:orange;" value="7"id="option7">
<input class="score"type="button" name="options" style="color:green;" value="8"id="option8">
<input class="score" type="button" name="options" style="color:green;" value="9" id="option9">
<input class="score" type="button" name="options" style="color:green;" value="10" id="option10">
</div>
<input type="hidden" name="userScore" id="userScore">
<input type="text"name="nameReview" class="nameReview"placeholder="Review Title">
<textarea id="story" name="review-content"rows="5" cols="33" placeholder="Write your Review here"></textarea>
<input type="submit" value="Publish" name="review" class="publish">
</form>
I'm having issues with my code not submitting a checkbox value when checked on form.
<form action="codetest.php" method="get">
<div class=" form-check">
<input class="form-check-input" type="checkbox" id="new-shooter" value="New"/>
<label class="form-check-label" for="new">
New
</label>
</div>
<button name="register" type="submit" value="Register" class="btn btn-primary"><strong>Register</strong></button>
<button name="register" type="submit" value="Clear" class="btn btn-primary"><strong>Clear</strong></button>
<button name="back" type="submit" formaction="registration.php" class="btn btn-primary"><strong>Back</strong></button>
</form>
When I click the checkbox then Register I get this in the address bar:
codetest.php?register=Register
Can't find any thing wrong with my code.
I'm also using bootstrap 4 for my css.
Just give your checkbox a name, say, name = "checkbox".
<form action="codetest.php" method="get">
<div class=" form-check">
<input class="form-check-input" name="checkbox" type="checkbox" id="new-shooter" value="New"/>
<label class="form-check-label" for="new">
New
</label>
</div>
<button name="register" type="submit" value="Register" class="btn btn-primary"><strong>Register</strong></button>
<button name="register" type="submit" value="Clear" class="btn btn-primary"><strong>Clear</strong></button>
<button name="back" type="submit" formaction="registration.php" class="btn btn-primary"><strong>Back</strong></button>
</form>
I have a bunch of buttons and an input text box. But they are not aligned properly as shown.
<div class="col-md-12 pull-right">
<div class="pull-right">
<button type="button" class="btn btn-default btn-xs"> << </button>
<button type="button" class="btn btn-default btn-xs"> < </button>
<button type="button" class="btn btn-default btn-xs"> > </button>
<button type="button" class="btn btn-default btn-xs"> >> </button>
<input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>
</div>
Is there a way they are alligned in one row? Also notice that the size of the input box is looking different from the others. Is there a way to fix this too?
using btn-group arranges all buttons in a row. like this
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<div class="btn-group">
<button type="button" class="btn btn-default btn-xs"><<</button>
<button type="button" class="btn btn-default btn-xs"><</button>
<button type="button" class="btn btn-default btn-xs">></button>
<button type="button" class="btn btn-default btn-xs">>></button>
<input type="number" style="width: 30px; margin-top:10px" class="form-control input-number input-xs" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>
Note: When using HTML symbols(for example <,>) as text, then encode them as I did(Just a good practice).
Docs btn-groups
And I used inline style for input type number margin-top:10px; because input[type=number] in bootstrap has margin-bottom:10px; so, to balance used margin-top. Instead you can use margin-bottom:0px
As #Mike Robinson said, even .input-append does the same . the difference is rounded borders and input-append is converted to input-group from version 3
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<div class="input-append">
<button type="button" class="btn btn-default btn-xs"><<</button>
<button type="button" class="btn btn-default btn-xs"><</button>
<button type="button" class="btn btn-default btn-xs">></button>
<button type="button" class="btn btn-default btn-xs">>></button>
<input type="number" style="width: 30px; " class="form-control input-number input-xs" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>
You need an input-group. You can add on groups of buttons to either side of the input. Here they'll be on the left:
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default"> << </button>
<button type="button" class="btn btn-default"> < </button>
<button type="button" class="btn btn-default"> > </button>
<button type="button" class="btn btn-default"> >> </button>
</div>
<input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>
Read more about it here:
http://getbootstrap.com/components/#input-groups-buttons-multiple
The form-control style on your input is the thing that's moving it to the next line. It's doing so because the form-control style in bootstrap is set to display: block. By adding a new style or doing an inline style you can get them on the same page.
For instance:
<input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" style="display: initial;" />
Or you can make a class such as:
.newInputControl{
display: inline;
}
<input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" class="newInputControl" />
You can also take care of it using bootstrap, which has built the framework to handle this by placing your form-control inside an input group.
use:
form-control-static instead of form-control in your input text
I have 3 different sets of radio buttons on the same page. The problem I am experiencing with them is that when a button in another btn-group is pressed it will toggle the state of the buttons in the previous or next btn-group. They don't seem to be independent. Here's the code:
<div id="file1" class="btn-group" data-toggle="buttons-radio" >
<button class="btn btn-primary" type="radio" name="radioGroup2" value="yes">Yes</button>
<button class="btn btn-danger" type="radio" name="radioGroup2"onClick="$('#mandatory1').val('no');">No</button>
</div>
<div id="file2" class="btn-group" data-toggle="buttons-radio" >
<button class="btn btn-primary" type="radio" name="radioGroup" value="yes">Yes</button>
<button class="btn btn-danger" type="radio" name="radioGroup" onClick="$('#mandatory2').val('no');">No</button>
</div>
When a button within div file1 is clicked it toggles the state of a button in div id file2
I've tried using button.js with this, but no luck.
I've tried various different variations of data-toggle="button"
Any ideas?
Demo
Your HTML structure for bootstrap radio buttons is wrong.
<div id="file1" class="btn-group" data-toggle="buttons" >
<label class="btn btn-primary">
<input type="radio" name="option1" /> Yes
</label>
<label class="btn btn-danger">
<input type="radio" name="option1" /> No
</label>
</div>
<div id="file2" class="btn-group" data-toggle="buttons" >
<label class="btn btn-primary">
<input type="radio" name="option2" /> Yes
</label>
<label class="btn btn-danger">
<input type="radio" name="option2" /> No
</label>
</div>
Aside:
You're using jQuery; Please don't use onClick in your HTML. You would set up those events like this (though there is a way that involves less code).
$(function(){
$('.btn').button(); // this is for the radio buttons.
// this replaces your inline JS
$('#file1 .btn-danger').on('click', function(){
$('#mandatory1').val('no');
});
$('#file2 .btn-danger').on('click', function(){
$('#mandatory2').val('no');
});
});
Demo
this should fix your problem:
<div id="file1" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active"><input type="radio" name="radioGroup2" value="yes">Yes</label>
<label class="btn btn-danger"><input type="radio" name="radioGroup2" onclick="$('#mandatory1').val('no');">No</label>
</div>
<div id="file2" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary"><input type="radio" name="radioGroup" value="yes">Yes</label>
<label class="btn btn-danger active"><input type="radio" name="radioGroup" onclick="$('#mandatory2').val('no');">No</label>
</div>
I am trying to implement a simple interface where I've got a series of buttons (checkboxes) which are part of a group.
I would like to split the groups so I can only have 3 per row max.
<div class="container">
<div class="control-group">
<p class="pull-left"><label class="control-label" for="Languages">Lingue</label></p>
<div class="controls">
<div class="btn-group btn-group-horizontal" data-toggle="buttons-checkbox">
<input type="checkbox" value="1" id="Languages_0" name="Languages" checked />
<label class="btn btn-info btn-small active" for="Languages_0">Italiano</label>
<input type="checkbox" value="2" id="Languages_1" name="Languages" checked />
<label class="btn btn-info btn-small active" for="Languages_1">Francese</label>
<input type="checkbox" value="3" id="Languages_2" name="Languages" checked />
<label class="btn btn-info btn-small active" for="Languages_2">Inglese</label>
<input type="checkbox" value="4" id="Languages_3" name="Languages" />
<label class="btn btn-info btn-small " for="Languages_3">Spagnolo</label>
<input type="checkbox" value="5" id="Languages_4" name="Languages" />
<label class="btn btn-info btn-small " for="Languages_4">Tedesco</label>
<input type="checkbox" value="6" id="Languages_5" name="Languages" />
<label class="btn btn-info btn-small " for="Languages_5">Portoghese</label>
<input type="checkbox" value="7" id="Languages_6" name="Languages" />
<label class="btn btn-info btn-small " for="Languages_6">Bulgaro</label>
<input type="checkbox" value="8" id="Languages_7" name="Languages" />
<label class="btn btn-info btn-small " for="Languages_7">Lettone</label>
</div>
</div>
</div>
</div>
I've tried to put span3 everywhere but it seems to work only in IE.
You can see the fiddle here.
You need to break up each group of three checkboxes/labels and put them in their own div with the class name controls.
<div class="container">
<div class="control-group">
<p class="pull-left">
<label class="control-label" for="Languages">Lingue</label>
</p>
<div class="controls">
<div class="btn-group btn-group-horizontal" data-toggle="buttons-checkbox">
<input type="checkbox" value="1" id="Languages_0" name="Languages" checked
/>
<label class="btn btn-info btn-small active" for="Languages_0">Italiano</label>
<input type="checkbox" value="2" id="Languages_1" name="Languages"
checked />
<label class="btn btn-info btn-small active" for="Languages_1">Francese</label>
<input type="checkbox" value="3" id="Languages_2" name="Languages"
checked />
<label class="btn btn-info btn-small active" for="Languages_2">Inglese</label>/></div>
</div>
<div class="controls">
<div class="btn-group btn-group-horizontal" data-toggle="buttons-checkbox">
<input type="checkbox" value="4" id="Languages_3" name="Languages" />
<label class="btn btn-info btn-small " for="Languages_3">Spagnolo</label>
<input type="checkbox" value="5" id="Languages_4" name="Languages"
/>
<label class="btn btn-info btn-small " for="Languages_4">Tedesco</label>
<input type="checkbox" value="6" id="Languages_5" name="Languages"
/>
<label class="btn btn-info btn-small " for="Languages_5">Portoghese</label>
</div>
</div>
<div class="controls">
<div class="btn-group btn-group-horizontal" data-toggle="buttons-checkbox">
<input type="checkbox" value="7" id="Languages_6" name="Languages" />
<label class="btn btn-info btn-small " for="Languages_6">Bulgaro</label>
<input type="checkbox" value="8" id="Languages_7" name="Languages"
/>
<label class="btn btn-info btn-small " for="Languages_7">Lettone</label>
</div>
</div>
</div>
</div>
Here's a working example on jsFiddle.