We Keep Coding

Get value without onclick

I want to make a WhatsApp share button for my Android app. All is set, the only problem is that I can get the textarea value only when I click on a button:
<button onclick="GetValue ();">Get the value of the textarea!</button>
I want to GetValue(); without the onclick.
This is my WhatsApp code:
Share
I want the textarea value in the data-text attribute and I am using it like above but it doesn’t work.
This is my textarea:
<textarea id="input_output" style="width:95%;" rows="10" wrap="soft">Enter Text Here..
</textarea>
Is there any way to get the value without clicking the button?
This is my function:
GetValue () {
var area = document.getElementById ("input_output");
alert (area.value);
}

Using javascript
document.getElementById("input_output").value
Using jQuery
$('#input_output').val();
EDIT:
Probably misunderstood, but it's very hard to understand your question.
As a javascript click event always fires before the "href" sets in, you can set the value when the link is clicked.
$('a').click(function(){
$(this).attr('data-text', $('#input_output').val());
return true;
});

How to remove all spaces when pasting using jQuery or JavaScript instantly?

When a user pastes some text into a field I want to be able to remove all spaces instantly.
<input type="text" class="white-space-is-dead" value="dor on" />
$('.white-space-is-dead').change(function() {
$(this).val($(this).val().replace(/\s/g,""));
});
http://jsfiddle.net/U3CRg/22/
This code from another example works. But doesn't update until a user clicks on something besides the textbox. I am using MVC with jQuery/JavaScript.

Switch the event change for input, which will trigger whenever something is inputted into the field, even if text is being pasted.
$('.white-space-is-dead').on('input', function() {
$(this).val($(this).val().replace(/\s/g,""));
});
Take a look at jQuery Events to understand better what options you have.
Edit: updated the answer based on OP's comment and what I found on this answer.

The regex wasnt doing what you wanted. This works but does not fire until the text input loses focus.
$('.white-space-is-dead').change(function() {
$(this).val($(this).val().replace(/ /g,''));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="white-space-is-dead" value="dor on" />

Adding inputs on the fly jquery

I was wondering if I could get some help with jquery. This is the html I have now:
http://jsfiddle.net/spadez/9sX6X/4/
<form name="input">
<input id="current" type="text" name="content" placeholder="content">
<input type="submit" value="Add" id="add">
</form>
What I want to do is when the user clicks "add" and as long as the input field isnt empty, I want to do the following:
Change that input field id to "accepted" and remove the add button
next to it and replace it with a remove button
Add an input field below the original one with the id to "current"
with an add button next to it
I want this process to happen every time the add button is clicked so more and more input boxes can spawn under each other. As far as I got was trying to spawn input boxes but even that doesn't work.
function addField(){
$('#add').append('<input type="text" name="myinput" />');
return false;
}
Can anyone please show me how this should be achieved.

I think it isn't a good solution to clone existing elements every time. Instead I would suggest cloning ... well... clones )) The original input and button remain the same, only visually shifted.
Is this behavior needed? - http://jsfiddle.net/skip405/9sX6X/6/

Use before()
$('#add').before('<input type="text" name="myinput" />');
since you need to append the new input just before your submit button (and not into it, which is not possible here, since it's an input element)

A working example http://jsfiddle.net/steelywing/9sX6X/12/
$('form').on('click', '.add', function () {
var row = $(this).closest('div'),
new_row = row.clone();
row.find('input:text').addClass('accepted');
row.find('.add')
.removeClass('add')
.addClass('remove')
.val('Remove');
new_row.find('input:text').val('');
row.after(new_row);
}).on('click', '.remove', function () {
$(this).closest('div').remove();
});

How can I change the form on clicking "Save", and then submit the final version of the form?

I have a form with a variable number of textboxes, and when I click Save (the submit button), I want it to remove the empty ones and then save the form without the empty boxes.
But it's only half-working. When I click Save, the empty boxes are visually removed. Moreover, usually there's a validation error when boxes are left empty, but with removeEmptyBoxes() there is no validation error so I know the boxes are somehow successfully removed before submit. But when the page refreshes, the empty boxes reappear. On the other hand, if I divide it into two buttons and use one button to removeEmptyBoxes() and then click the other button to Save, that works fine and the deleted boxes stay deleted.
I'm sure I can get round this in a completely different way, but it's frustrating that it doesn't work the way I want it to. Is there any way to do this?
My form is made using Ajax.BeginForm. My button looks like this:
<input name="xiSubmit" type="submit" value="Save" onclick="removeEmptyBoxes()" />
function removeEmptyBoxes() {
$('div.box').each(function () {
var content = $(this).find('.box-content').val();
if (content == '') {
removeElement(this);
}
});
return true;
}
solution: my removeElement() function consisted of a slideUp to hide the box nicely and then removing the box completely. I removed the slideUp bit and it all worked fine. Not sure why it didn't work with the slideUp.

For a form with id myForm:
$('#myForm').submit(function(ev){
ev.preventDefault(); // prevent the original form submit
// do your thang
$(this).submit(); // submit form with your changes
});

Given this simple form:
<form id="theForm" method="post">
<div class="box">
<div class="box-content">
Test
</div>
</div>
<input name="xiSubmit" type="submit" value="Save" />
</form>
You can add javascript like this:
$(function() {
$("#theForm").submit(function() {
$('.box-content',$('div.box')).remove();
});
});​
The above submit handler is executed before the form is actually submitted, so you can do any pre-processing you'd like.
Here's a JSFiddle you can play around with: http://jsfiddle.net/cTwMW/. Notice I added return false at the end of the fiddle javascript so the form doesn't submit (allowing you to see the jquery remove the element).

Remove disabled attribute onClick of disabled form field

I have a form field that starts out disabled and has an onClick to enable it. The onClick doesn't fire (at least in FF) nor does a simple alert(1);.
The hacky version is to show a fake form field in its place that "looks" like it's disabled (grayed out style) and onClick, hide it and show the correct field enabled, but that's ugly.
Example Code
This works:
<input type="text" id="date_end" value="blah" onClick="this.disabled=true;">
This works:
<label for="date_end_off" onClick="document.getElementById('date_end').disabled=false">Test</label>
<input type="text" id="date_end" value="blah" onClick="alert(1);" disabled>
This fails:
<input type="text" id="date_end" value="blah" onClick="alert(1);" disabled>
This fails:
<input type="text" id="date_end" value="blah" onClick="document.getElementById('date_end').disabled=false" disabled>

I came across this thread in another forum so I assume I'll have to go about it a different way.
http://www.webdeveloper.com/forum/showthread.php?t=186057
Firefox, and perhaps other browsers,
disable DOM events on form fields that
are disabled. Any event that starts at
the disabled form field is completely
canceled and does not propagate up the
DOM tree. Correct me if I'm wrong, but
if you click on the disabled button,
the source of the event is the
disabled button and the click event is
completely wiped out. The browser
literally doesn't know the button got
clicked, nor does it pass the click
event on. It's as if you are clicking
on a black hole on the web page.
Work around:
Style the date fields to look as if
they are disabled.
Make a hidden "use_date" form field
with a bit value to determine
whether to use the date fields during processing.
Add new function to onClick of the date fields which will
change the style class to appear
enabled and set the "use_date" value
to 1.

Use readonly instead of disabled
For checkboxes at least, this makes them look disabled but behave normally (tested on Google Chrome). You'll have to catch the click and prevent the default action of the event as appropriate.

Using jQuery, I attach an event handler to the parents of my input controls.
<script type="text/javascript">
$(function() {
// disable all the input boxes
$(".input").attr("disabled", true);
// add handler to re-enable input boxes on click
$("td:has(.input)").click(function() {
$(".input", this).removeAttr("disabled");
});
});
</script>
All of my input controls have the class "input" and they exist in their own table cells. If you at least wrapped your input tags in a div, then this should work without a table as well.

Citing Quirksmode.org:
"A click event on a disabled form field does not fire events in Firefox and Safari. Opera fires the mousedown and mouseup events, but not the click event. IE fires mousedown and mouseup, but not click, on the form. All these implementations are considered correct."
Quirksmode's compatibility table is great to find out more about such problems.

I recently had a very similar problem and solved it by placing the input in a div and moving the onClick to the div.
<div onClick="myEnableFunction('date_end');">
<input type="text" id="date_end" value="blah" disabled>
</div>

Enabling a disabled element on click kind of defeats the purpose of disabling, don't you think? If you really want the behavior you're describing, just style it 'disabled' and remove those styles on click.

Don't implement the logic of the onClick event in the onClick's value of the input field. That's probably why it's not working in Firefox. Instead define a function as the onClick's value. For example:
<input type="text" id="date_end" value="blah" onClick="doSomething()" disabled>
<script type="text/javascript">
function doSomething()
{
alert("button pressed");
}
</script>
It will also be worth looking into JQuery. You can use it to add or remove attributes from elements and all kinds of other stuff. For instance you can remove the disabled from the the input field by writing a function like this:
<script type="text/javascript">
function doSomething()
{
alert("button pressed");
$("#date_end").removeAttr('disabled'); //removes the disabled attribut from the
//element whose id is 'date_end'
}
</script>
OR you can add it as follows:
$("#date_end").attr('disabled','true');
The Jquery site is here

You can add a div over the input that is disabled: check it out
<div onclick="javascript:document.forma.demo1.disabled=false;" style="border:0px solid black; padding:00px;">
<input type=text name="demo1" disabled style="width:30;">
</div>

In order to enable a disabled element on the client side, lets say in response to a checkbox checked or something, I ended up having to use a combination of JS and jQuery, see below:
//enable the yes & no RB
function enable()
{
var RBNo = "rbnBusinessType";
var RBYes = "rbnBusinessType";
//jQuery approach to remove disabled from containing spans
$("#" + RBYes).parent().removeAttr('disabled');
$("#" + RBNo).parent().removeAttr('disabled');
//enable yes and no RBs
document.getElementById(RBYes).disabled = false;
document.getElementById(RBNo).disabled = false;
}
After postback then, you'll need to access the request like the following in order to get at the values of your client side enabled elements:
this._Organization.BusinessTypeHUbZoneSmall = Request.Params["rbnBusinessTypeHUbZoneSmall"] == rbnBusinessTypeHUbZoneSmallYes.ID;
Inspiration taken from:
https://stackoverflow.com/questions/6995738/asp-javascript-radiobutton-enable-disable-not-included-in-postback-ajax for more information

If you simply want to prevent the user from typing data in your field, but instead want the field to populate on an event, my hack solution was to not disable the input field at all, but instead after running my onclick or onfocus functions, to call blur() so the user can not edit the field.