We Keep Coding

How to directly type into a button?

There are a lot of buttons in my HTML. And each time when I click on one button, that button is activated (other buttons are deactivated). And I want that, letters can be directly typed onto that specific button like a textbox (type="text"). Is that possible with javascript? Or do I need other things like JQuery, etc?? Thanks!

Something like this?
<button contenteditable="true">Foobar</button>

One way is to add an input element inside a button element.
For example:
<button>
<input type="text" placeholder="type somthing here" />
Send
</button>
See the working version:
https://jsbin.com/lomufaqoxe/edit?html,output

You can wrap an input tag around a button tag and style it with CSS so that it merges with your button.

Prevent user from submit button click

I have got one Kendo UI dropdown box and combobox both are cascading and loading items from DB... and then few more textbox controls and then submit button also....
I made required validation for two textboxes and dropdownList and we can edit items that we are selected in combobox(we can remove also). Some times user clicks the submit button with out properly loading the items in Combobox then I am getting error like Required validation error ....
Is there any way to prevent the user from button click until the all the controls are fully loaded ...
I tried two ways ..
Approach 1 : i have put button property as hidden and then in combobox Databound event made visible the button ... But this approach didn't work..
Approach 2 :
I have tried the suggestions given in this link
$("#submit").prop("disabled", false)
this approach didn't worked for me..
Is there any other approach to prevent user from clicking the submit button until all controls are loaded...
Many thanks in advance...

You can do this:
<input type='submit' id='submit' value='submit' disabled />
<!--disable the button on default-->
and add this js:
$(window).load(function(){
$("#submit").prop("disabled", false); // enable it when page loaded.
});
this solution requires jquery.

On some projects i've used the css visibility property to hide show elements at appropriate times:
http://www.w3schools.com/css/css_display_visibility.asp
This might be what you want.

A display:none style until validation doesn't work for you?
$("#submit").css("display", none)
or
$("#submit").hide()

IE compatible outer input referring form

Situation
I have a form
<form action="." method="POST" id="my_form">
<!-- Form stuff here -->
</form>
<p onclick="confirmUpdate();">Update</p>
The confirmUpdate() function generates a confirmation message and the following input tag:
<input type="submit" name="my_name" value="Yes. Update the data.">
using the following JavaScript:
inputYes.type = 'submit';
inputYes.name = 'my_name';
inputYes.value = 'Yes. Update the data.';
inputYes.form = 'my_form';
The page is created as intended, but the input element has no form="my_form" on it.
Condition
The HTML generated with Javascript has to be shown as a nice "HTML pop-up" (not an alert box) to ask the user if the info is correct before submitting.
Questions
Why isn't it working?
The JavaScript generated HTML doesn't appear on the Page Source. Will it be able to submit the data from the form?
Thank you in advance.

You should use setAttribute instead:
inputYes.setAttribute('form', 'my_form');

If the goal is to get your input button to work, then inside your method confirmUpdate(), make the following additions/changes:
Updated fiddle here: http://jsfiddle.net/B7QAc/4/
//add this
var theform = document.getElementById('my_form');
//change this
document.body.appendChild(screenDiv);
//to this
theform.appendChild(screenDiv);

While the previous answers were correct, I found a better solution for my problem. I had to update the question in order to make it more clear. The HTML generated with Javascript was intended to show as a nice "pop-up" to ask the user if the info is correct before submitting.
Therefore, the <input> tag has to be outside of the <form> and reference its id="my_form" via a form="my_form attribute.
Here is the updated JSFiddle for it.
While inputYes.form = 'my_form'; doesn't add the form attribute, inputYes.setAttribute('form', 'my_form'); does the job.
Notice though that it only works at the end of the script, only after it is appended to the HTML Document. It would not work otherwise (at least in this script).
Even though I lack the technical knowledge to explain it better, those are my observations.
This would be the accepted answer. I will promptly accept any other answer that is more complete than this one.

"clicking" submit button with no ID using javascript

Here is the submit button i would like to 'click' using javascript.
<input type="submit" name="REG_BTN" value="Submit Changes">
I am trying to use something along the lines of...
document.getElementsByTagName('submit')[0].click();
to 'click' the button, but it does not work. I am writing a script to run in browsers so i do not have the ability to change any of the aspects of the submit button. I am new to javascript so it may just be something simple that i am not picking up. Is there another way to achieve this?

The tagName for that element is INPUT; there are no elements with tag name submit. Try this:
document.getElementsByName('REG_BTN')[0].click();

If page is complete loading first, and use querySelector (CSS) and click.
'
if (document.readyState=='complete'){
document.querySelector('input[type*="submit"]').click();
}
'

How Does Digg remove "&x=0&y=0" from their Search Results URL?

I'm using an image as the submit button for a search form, i.e.:
<input id="search" type="image" alt="Search" src="/images/searchButton.png" name=""/>
This has an unfortunate side effect in Chrome and Firefox--the parameters &x=0&y=0 appear on the end of the search results URL, for example if I search for "food" I am directed to the page:
main/search?search=food&x=0&y=0
Some hunting around online has indicated that this is standard behavior when you use an image to submit a form.
I noticed that Digg.com uses an image to submit its search form but avoids this behavior. I can't figure out how they do it. They don't seem to be using Javascript to submit the form. Can anyone tell?

Digg is using JavaScript to do that. Try submitting the search form with JavaScript disabled in your browser.

Instead of using an <input type="image">, you could use a <button> element:
<button type="submit" style="border: 0; background: transparent">
<img src="image.png"></img>
</button>

Those parameters denote the location in which the click was exercised upon the image, which is the default behavior of most if not all browsers when it comes to using images as submit buttons. You can use a workaround that basically goes through JavaScript to submit your form, much like what you see in watain's example. Or you can create a submit button thats not a form element, by utilizing form.submit() as the action attached to that image.

You could use Javascript to submit the form like that, it's still the easiest way:
<script>
yourForm.onSubmit = function() {
location.href = 'main/search?search=' + encodeURIComponent(yourForm.elements['query'].value);
return false;
}
</script>
Unfortunately I don't know how they do it without Javascript.
EDIT: Btw you could also use a simple which will submit the form when it gets clicked.