Develop Reference

JavaScript window.location.href code not working

I know this question has been asked a lot before, but none of the fixes worked for me. I made a window.location. href thing before and that worked but this one does not. I know the function runs because I tested it with an alert. Can someone see anything wrong here?
<form>
<input type="submit" name="agree" value="agree" onclick="fagree()">
<input type="submit" name="disagree" value="Decline and go to google" onclick="fdisagree()">
</form>
<script type="text/javascript">
function fagree(){
window.location.assign("index.html")
localStorage.setItem("Terms", "true")
}
function fdisagree(){
window.location.href="https://www.google.com/"
return false;
}
</script>
</body>

You can use button type instead of submit, otherwise, well, the form will be submit.
<form>
<input type="button" name="agree" value="agree" onclick="fagree()">
<input type="button" name="disagree" value="Decline and go to google" onclick="fdisagree()">
</form>
<script type="text/javascript">
function fagree(){
window.location.assign("index.html");
localStorage.setItem("Terms", "true"); //This line won't be executed, because the above line will reload the page
}
function fdisagree() {
window.location.href="https://www.google.com/"
return false; //This can be removed because the above line will redirect to google and the return false won't be executed
}
</script>
If you don't need any else form elements than those 2 buttons, you can get ride of the <form></form> and simply use <button>. In example :
<button type="button" name="agree" value="agree" onclick="fagree()">
<button type="button" name="disagree" value="Decline and go to google" onclick="fdisagree()">

Do not put it in the form if you don't have to (if that's the whole form code in the example). You are submitting it before functions have a chance to trigger.
OR:
<form>
<input type="button" name="agree" value="agree" onclick="fagree()">
<input type="button" name="disagree" value="Decline and go to google" onclick="fdisagree()">
</form>
<script type="text/javascript">
function fagree(){
window.location.assign("index.html")
localStorage.setItem("Terms", "true")
}
function fdisagree(){
window.location.href="https://www.google.com/"
return false;
}
</script>
</body>

How to disable a button by default, but then enable it with javascript?

I have a text field with a counter next to it. But beneath that is the submit form, and I want it to be inactive (grayed out, unable to submit) unless they have typed 100 characters.
I'm using a jsfiddle which I found on here and adapted to demonstrate what I'm doing:
http://jsfiddle.net/xqyWV/396/
Does not seem to be working exactly right. First of all, it's not grayed initially... but when I begin typing, it then recognizes that there aren't 100 characters and it does disable.
But, my code should re-enable the button if the length is not less than 100, i.e. when it reaches or exceeds 100 characters. However, it does not. What am I doing wrong?
$("#field").keyup(function() {
el = $(this);
$("#charNum").text(el.val().length);
if(el.val().length < 100) {
$('#submit').attr('disabled','true');
} else {
$('#submit').attr('disabled','false');
}
});

You want this in your JS:
$('#submit').removeAttr('disabled');
and this in your HTML:
<input type="submit" name="button" id="submit" value="do some stuff" disabled="disabled" style="float:left;width:160px;height:30px;"/>
Demo: http://jsfiddle.net/xqyWV/398/

To fix your html you just need to add a disabled attribute to your submit button.
<input type="submit" name="button" id="submit" value="do some stuff" style="float:left;width:160px;height:30px;" disabled="disabled" />
In you javascript the main issue is that you are setting the disabled attribute to the string "true" or "false". Change it to a Boolean true and false and you'll be all set.
$("#field").keyup(function(){
el = $(this);
$("#charNum").text(el.val().length);
if(el.val().length > 100){
$('#submit').attr('disabled', false);
} else {
$('#submit').attr('disabled', true);
}
});
JsFiddle: http://jsfiddle.net/xqyWV/400/

For completeness sake here is the same answer without jQuery:
HTML
<input type="submit" name="button" id="submit" value="do some stuff" disabled="disabled" style="float:left;width:160px;height:30px;"/>
JavaScript
document.getElementById('submit').removeAttribute('disabled');
Demo: http://jsbin.com/torug/1/edit

An easier way would just add an onclick:
<input type="submit" name="button" id="submit" value="do some stuff" style="float:left;width:160px;height:30px;"/>
and then in your <script> area, you can do:
document.getElementById('submit').setAttribute('onClick','functionname()');
By doing this you add an onClick so that the button can call a specific function.
By default the page will load it without an onClick. By adding the attribute you can the enable it.

Just add this in your HTML:
disabled="true"
... change it for this
<input type="submit" name="button" id="submit" disabled="true" value="do some stuff" style="float:left;width:160px;height:30px;" />
and add this in your JS:
$('#submit').removeAttr('disabled');

Change a button value via Jquery

Sorry but I'm quite a noob if it comes to Javascript with HTML.
I'm trying to make a button that will change the value of it when a multiple checkboxes are checked.
Example:
If one checkbox is checked = Button: Delete 1 row
If two checkboxes are checked = Button: Delete 2 rows
etc.
And I want this to happen automaticly when I check all checkboxes. The only problem is that it won't change anything.
JS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('input[type="checkbox"]').click( function() {
$("input[type=submit]").val("Delete "+$('input:checkbox:checked').length+" rows");
});
</script>
HTML:
<input type="submit" name="submit" class="btn btn-success" value="Verwijder" />
The server-side of this(PHP) does work(deleting the rows).
Thank you for helping and your time!

First you must put your code inside this block:
$(document).ready(function(){
// your code
});
We use this because:
The document.ready handler is triggered when the DOM has been loaded
by the browser and ready to be manipulated.
Second:
<input type="submit" name="submit" class="btn js-button btn-success" value="Verwijder" />
$(".js-button").val("Value that you need");

Try this.
Fiddle Demo
HTML
<input type="submit" name="submit" class="btn btn-success" value="Verwijder" />
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
JS Code
$('input[type="checkbox"]').on('change', function(){
var rows = $('input[type="checkbox"]:checked').length,
value = rows < 1 ? 'Verwijder' : 'Delete '+rows+(rows<2 ? ' row':' rows');
$('.btn').attr('value', value);
});

Using Jquery to hide/unhide the textbox if button is clicked

I have input button , what I want is if a user clicks on the button then textbox should appear.
Below is the code which is not working :
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" />
$("#driver").click(function() {
$('#text').show();
}
});
Also the textbox should not be visible initially

You can use toggle instead;
$('#text').toggle();
With no parameters, the .toggle() method simply toggles the visibility of elements

try this:
$(document).ready(function(){
$("#driver").click(function(){
$("#text").slideToggle("slow");
});
});

Here's an example using toggle:
http://jsfiddle.net/x5qYz/

<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" style="display:none;" />
$("#driver").click(function() {
$('#text').css('display', 'block');
});

$(function()
{
// Initially hide the text box
$("#text").hide();
$("#driver").click(function()
{
$("#text").toggle();
return false; // We don't want to submit anything here!
});
});

Try this:
<script type="text/javascript">
jQuery(function ($) {
$('#driver').click(function (event) {
event.preventDefault(); // prevent the form from submitting
$('#text').show();
});
});
</script>
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" />

Make the textbox hidden when the page loads initially like this
Code:
$(document).ready(function () {
$('#text').hidden();
});
Then your should work the way you want.

how to convert a button into save button by clicking that button

i have a text box with value in readonly and a button if i click that button the text box has to change into editable and the button into save... using javascript or jquery

Here's a demo on jsFiddle http://jsfiddle.net/KTYWT/
HTML
<input id="textbox" type="text" readonly="readonly" />
<input type="button" id="textbutton" value="Edit" />
jQuery
$('#textbutton').click(function(e) {
var text = $('#textbox');
if (text.is('[readonly]')) {
text.removeAttr('readonly');
$(this).val('Save');
} else {
text.attr('readonly', 'readonly');
$(this).val('Edit');
}
});

An example using jquery here : http://jsfiddle.net/jomanlk/azGPf/
<input id='thebox' type='text' readonly="readonly" value='locked'>
<button id='thebutton'>The Button</button>
$('#thebutton').click(function(){
$('#thebox').removeAttr('readonly');
$(this).html('save');
})
Renames the button and makes the text editable.
EDIT Answer edited to show 'readonly' as Eli points out

Do this using removeAttr function.
For readonly add property readonly="readonly" to text and remove it on script too.
<script>
function func1(button)
{
$(button).val('Save');
$('input[type=text]').removeAttr('disabled')
}
</script>
<input type="text" disabled="disabled"></input>
<input type="button" onclick="func1(this)" value="enable"/>
demo here