We Keep Coding

How to make javascript toggle button?

I have this code but it doesn't work:
HTML:
<button id="btn_search">Search</button>
<input id="srh" type="search">
JS:
var btnSearch = document.getElementById("btn_search");
var search = document.getElementById("srh");
if (document.addEventListener) {
btnSeach.addEventListener('click',activeSearch);
} else if (document.attackEvent) {
btnSearch.attackEvent('onclick',activeSearch);
}
function activeSearch (event) {
event.preventDefault();
if (search.style.width == '0') {
search.style.width = '14.8em';
search.style.opacity = '1';
} else if (search.style.width == '14.8em') {
search.style.width = '0';
search.style.opacity = '0';
}
I need a toggle button
What should I do?

I might think about using a CSS class and toggle() to show/hide you element.
var btnSearch = document.getElementById("btn_search");
btnSearch.addEventListener('click', function(event){
var search = document.getElementById("srh");
search.classList.toggle("hidden");
event.preventDefault();
});
#srh { width: 14.8em; }
#srh.hidden { display: none; }
<button id="btn_search">Search</button>
<input id="srh" type="search" />

You can simply use JQuery to simplify all the proccess. Make all the code as simple as:
function magictoggle(a) {
if (a == 1) {
$("#btn1").attr("onclick", "magictoggle(0)");
$("#searchbox").hide(1000);
//1000 Are the miliseconds will take the box to hide
} else {
$("#btn1").attr("onclick", "magictoggle(1)");
$("#searchbox").show(1000);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1" onclick="magictoggle(1)">Search</button>
<input type="text" id="searchbox" placeholder="A search Box">

Disable navigating to next page if inputField isn't filled in

I want to prevent the user from accessing the next page if there is an empty
inputField. The alert does show when the field is empty and i click the button, but i can click 'ok' and i get taken to the next page.
<script type="text/javascript">
window.onload = function(){
function checkFilled(inputField) {
if(inputField.value.length > 1) {
return true;
}
else {
alert('field1 is not filled in');
$("#button1").click(function(e){
e.preventDefault();
});
return false;
}
};
document.getElementById('button1').onclick = function() {
var field1 = document.getElementById('field1');
checkFilled(field1);
};
};
</script>
<input type="text" name="field1" id="field1"/>
<a href="nextpage.html">
<div id="button1"></div>
</a>

You used an a tag where the href attribute is set and gets you immediately to the next page, although the inputField is empty. This should do what you want:
window.onload = function(){
function checkFilled(inputField) {
if(inputField.value.length > 1) {
return true;
}
else {
alert('field1 is not filled in');
return false;
}
};
document.getElementById('button1').onclick = function() {
var field1 = document.getElementById('field1');
return checkFilled(field1);
};
};
<input type="text" name="field1" id="field1"/>
<form action="nextpage.html">
<input id="button1" type="submit" value="next">
</form>
Or if you prefer to use an a tag instead of a button:
function checkFilled() {
if(document.getElementById("field1").value.length > 1) {
window.location.href="nextpage.html";
}
else {
alert('field1 is not filled in');
return false;
}
}
<input type="text" name="field1" id="field1"/>
next

Confirmation dialog

I like to add confirmation dialog. like"confirm adding (the amount)?" if yes it will proceed to addcontribution.php and if no it will go back to itself and reset the field.
<form form="CONTRIFORM" name='contribution' method="POST" Action="addcontribution.php" onSubmit="return formvalidation2();">
<center>
Amount:
<input type="text" name="contriamnt" id="contriamnt" size="15" placeholder=" Amount"></br></br>
<button id="searchbutton" type="submit" name="submit" value="Submit">ADD</button></br>
</center>
</form>
<script>
function formvalidation2() {
var amntDATA = document.contribution.contriamnt;
if(allnumber(amntDATA)) {
if(ChangeText()) {
if(new_tab()) {
}
}
}
return false;
}
function allnumber(amntDATA) {
var x = /^[0-9]+$/;
if(amntDATA.value.match(x)) {
return true;
} else {
alert('Invalid Amount.');
return false;
}
}
</script>

Example
if (confirm('Confirm Adding (the amount)?')){
window.location = "http://www.google.com/"; // your Custom Link
}else{
document.getElementById('contriamnt').value="";
}

how to make the radio buttons work in javascript?

I am learning the basics of JavaScript and still get some of the basics wrong and I tried to make it work, but failed. I am trying to make the message change font weight when one of the radio button is checked. JSfiddle: http://jsfiddle.net/Eg87P/
HTML/JavaScript Code:
<div id="prob2">
<h1>Radio Buttons</h1>
<p id="msg">Message</p>
<input type="radio" value="bold" name="rdFontStyle" id="bold"/>Bold<br/>
<input type="radio" value="italic" name="rdFontStyle" id="italic"/>Italic<br/>
<input type="radio" value="underline" name="rdFontStyle" id="underline"/>Underline<br/>
<input type="radio" value="regular" name="rdFontStyle" id="regular"/>Regular<br/>
<script type="text/javascript">
function msg1
{
var msg = document.getElementById("msg");
if(document.getElementById("bold").checked)
{
if(msg.hasAttribute("style"))
{
msg.removeAttribute("style");
}
msg.style.fontWeight = "bold";
}
else if(document.getElementById("italic").checked)
{
if(msg.hasAttribute("style"))
{
msg.removeAttribute("style");
}
msg.style.fontWeight = "italic";
}
else if(document.getElementById("underline").checked)
{
if(msg.hasAttribute("style"))
{
msg.removeAttribute("style");
}
msg.style.fontWeight = "underline";
}
else if(document.getElementById("regular").checked)
{
if(msg.hasAttribute("style"))
{
msg.removeAttribute("style");
}
msg.style.fontWeight = "normal";
}
}
msg1();
</script>
</div>

Open your JavaScript console and read the error message:
Uncaught SyntaxError: Unexpected token {
function msg1 should be function msg1()
when one of the radio button is checked
If you want to react to a radio button being checked then you need to listen for an event before running your function. At the moment you are running it immediately.
document.getElementById('prob2').addEventListener('change', msg1);
msg.style.fontWeight = "italic";
Italic isn't a font-weight. It is a font-style.
msg.style.fontStyle = "italic";
msg.style.fontWeight = "underline";
Underline isn't a font-weight. It is a type of text-decoration.
msg.style.textDecoration = "underline";
msg.style.fontWeight = "normal";
Normal is a font-weight, but it makes little sense to set it explicitly here since it is the default and you've just removed the other styles.

You're not running the msg1() function when the user clicks on the radio button, only once at script loading.Add a onClick on each radio button which calls msg1();And your function definition as previously commented.

var msg = document.getElementById("msg");
document.getElementById("bold").addEventListener("change", function() {
if (msg.hasAttribute("style")) {
msg.removeAttribute("style");
}
msg.style.fontWeight = "bold";
})

You never call the javascript function on the change of the radio buttons. I suggest adding the following:
<input type="radio" value="bold" name="rdFontStyle" id="bold" onchange="msg1()"/>Bold<br/>
<input type="radio" value="italic" name="rdFontStyle" id="italic" onchange="msg1()"/>Italic<br/>
<input type="radio" value="underline" name="rdFontStyle" id="underline" onchange="msg1()"/>Underline<br/>
<input type="radio" value="regular" name="rdFontStyle" id="regular" onchange="msg1()"/>Regular<br/>
Give that a try and see what happens =)
EDIT: You also need to add () after your declaration of the function:
function msg1()
{
...
}
Furthermore, you should use the correct style properties. The following works:
<script type="text/javascript">
function msg1()
{
var msg = document.getElementById("msg");
if(document.getElementById("bold").checked)
{
if(msg.hasAttribute("style"))
{
msg.removeAttribute("style");
}
msg.style.fontWeight = "bold";
}
else if(document.getElementById("italic").checked)
{
if(msg.hasAttribute("style"))
{
msg.removeAttribute("style");
}
msg.style.fontStyle = "italic";
}
else if(document.getElementById("underline").checked)
{
if(msg.hasAttribute("style"))
{
msg.removeAttribute("style");
}
msg.style.textDecoration = "underline";
}
else if(document.getElementById("regular").checked)
{
if(msg.hasAttribute("style"))
{
msg.removeAttribute("style");
}
msg.style.fontStyle = "normal";
}
}
</script>

jquery - Add exception onclick

I have the following input fields:
<input type="text" value="5" maxlength="12" id="qty" class="input-text qty" name="qty2050" tabindex="1">
and
<input type="text" value="0" maxlength="12" id="qty" class="input-text qty" name="qty2042" tabindex="1">
I use this code to prevent the user from losing inserted data (upon quitting the page):
<script>
window.onbeforeunload = function() {
var showAlert = false;
jQuery('.input-text.qty').each(function (){
//console.log("fonction 1");
var val = parseInt(jQuery(this).val(),10);
if(val > 0) { showAlert = true; }
//alert(val);
});
//console.log("fonction 2");
//console.log(showAlert);
if (showAlert == true) {
console.log("fonction 3");
return 'You have unsaved changes!';
}
}
</script>
I want to add an exception to my submit button, and to not show the alert message when there is a quantity > 0 in one of my input fields.
My problem is in adding this exception!
Thanks for help.

You can use bool confirmUnload. Like here: http://jonstjohn.com/node/23
<script>
var confirmUnload = true;
$("submit").click(function(){ confirmUnload = false; });
window.onbeforeunload = function() {
if (confirmUnload)
{
var showAlert = false;
jQuery('.input-text.qty').each(function (){
//console.log("fonction 1");
var val = parseInt(jQuery(this).val(),10);
if(val > 0) { showAlert = true; }
//alert(val);
});
//console.log("fonction 2");
//console.log(showAlert);
if (showAlert == true) {
console.log("fonction 3");
return 'You have unsaved changes!';
}
}
}
</script>

is this what you want:
<SCRIPT>
function checkForm(e) {
if (!(window.confirm("Do you want to submit the form?")))
e.returnValue = false;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="theForm" action="0801.html"
onSubmit = "return checkForm(event)">
<INPUT type=submit>
</FORM>
your checks will go into the checkForm method in this case