Develop Reference

How to hide form submit button unless input is focussed (vanilla JS)

I have a form where I would like to hide the submit button unless the input is focussed/selected.
There is only one input apart from the submit.
I need to do this using pure JS (or perhaps CSS/Sass), not jQuery etc.
Basic example:
<form>
<input type="text" placeholder="Example field">
<input type="submit value="Submit">
</form>

First get references to your objects, so change the HTML for example :
<form>
<input id="input_1" type="text" placeholder="Example field">
<input id="submit" type="submit" value="Submit" />
</form>
With some CSS we will hide the submit by default:
#submit{
display:none;
}
We have added Id's, now we add the event listeners for focus on input..
document.getElementById("input_1").addEventListener('focus', function(){
document.getElementById("submit").style.display = 'block';
}
, true);
The second param into the eventListener will execute when the event is fired..
You will need to do more work on this..
https://jsfiddle.net/7uzkzr67/

Here is the pure CSS solution;
.showonfocus{
display:none;
}
.inputfield:focus + .showonfocus{
display:inline;
}
<form>
<input type="text" placeholder="Example field" class="inputfield">
<input type="submit" value="Submit" class="showonfocus">
</form>

You can use the onblur and onfocus events to manipulate your html elements. You can try something like,
HTML
<form>
<input type="text" placeholder="Example field" onblur="setVisible('hidden');" onfocus="setVisible('visible');">
<input id="submit" type="submit" value="Submit" style="visibility:hidden">
</form>
Javscript
function setVisible(state) {
document.getElementById("submit").style.visibility = state;
}
Here is the working DEMO: https://jsfiddle.net/qbotxpL6/
Hope this helps!

Disable readonly to text box onclicking the button

I have used "readonly" attribute to the textbox which makes the textbox non editable and may i know how to disable the readonly attribute on clicking the button. can we do this by using any script ?
<input type="text" name="" value="" readonly="readonly"/><br/>
<input type="submit" name="" value="update" onclick="" />

You can do two things:
Remove the readonly (case insensitive) attribute, using removeAttribute
Set the readOnly (case sensitive) property to false
HTML:
<input id="myInput" type="text" readonly="readonly" /><br />
<input id="myButton" type="submit" value="update" />
JS (option 1): [Demo]
document.getElementById('myButton').onclick = function() {
document.getElementById('myInput').removeAttribute('readonly');
};
JS (option 2): [Demo]
document.getElementById('myButton').onclick = function() {
document.getElementById('myInput').readOnly = false;
};

Well, to be simple! You can use jQuery to remove this attribute (jQuery would be simple, you can do this using JS too). Here is the code for that:
$('input[type=submit]').click(function () {
$('input[type=text]').removeAttr('readonly');
})
https://api.jquery.com/removeAttr/

You need to set readOnly property of element to false
You can use document.getElementById(), it reference to the element by its ID
HTML, Here I have added id to elements
<input type="text" id="myTextBox" name="" value="" readonly="readonly"/><br/>
<input type="submit" id="myButton" name="" value="update" />
JavaScript, Here you can see readOnly property to false.
document.getElementById('myButton').onclick = function() {
document.getElementById('myTextBox').readOnly =false;
};
DEMO
Additionally, I would suggest you to use 'type="button"' instead of type="submit"

Change form action based on submit button

I have many forms like the following on the page. Now I want change the form action based on which submit button the user clicked (and of course submit the form)
<form action="/shop/products.php" data-ajax="false" method="post">
<div data-role="fieldcontain">
<input name="submit" class="obutn" type="submit" value="Order" />
<input name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>
I tried with
$(".obtn").click(function() {
$(this).parent().parent().attr("action", "/shop/products.php");
});
$(".oEbtn").click(function() {
$(this).parent().parent().attr("action", "/shop/extras.php");
});
but the form is always submited to products.php. Can you tell me what's wrong?

Instead of setting the action attribute on the form itself, consider setting formaction attribute on each individual input element.
Docs: http://www.w3.org/TR/html-markup/input.submit.html#input.submit.attrs.formaction
<form data-ajax="false" method="post">
<div data-role="fieldcontain">
<input formaction="/shop/products.php"
name="submit" class="obutn" type="submit" value="Order" />
<input formaction="/shop/extras.php"
name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>

There are two typos:
obtn instead of obutn
oEbtn instead of oEbutn
Another suggestion is to use closest("form") to get the form that contains the clicked button.
$(".obutn").click(function() {
$(this).closest("form").attr("action", "/shop/products.php");
});
$(".oEbutn").click(function() {
$(this).closest("form").attr("action", "/shop/extras.php");
});
$("form").on("submit", function () {
alert($(this).attr("action"));
});
JSFIDDLE

Capture the submit event and determine which button was clicked. From that, you can change the action of the form.
Here's a link on how to do that.
How can I get the button that caused the submit from the form submit event?

Also, don't give the form the action until the click happens at all, it is superfluous.
<form data-ajax="false" method="post">
<div data-role="fieldcontain">
<input name="submit" class="obutn" type="submit" value="Order" />
<input name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>

What if you try it out with a switch instead? Something like:
<input name="submit" id = "1" class="obutn" type="submit" value="Order" />
<input name="submit" id = "2" class="oEbutn" type="submit" value="Extras" />
And then in JavaScript we have:
//param: The Id attr of the button that was clicked
function postTo(id){
switch(id){
case 1: postProducts();
break;
case 2: postExtras();
break;
default: //Do something else
}
}
Just an idea. Haven´t tested that yet, but maybe it could be helpful. I hope so.

ajax label on click text

I want to display the content of a label in a text fieldwith onClick event how can I do it,
Is there any specific method to do it or is there any other way.
Please help I am new to ajax.
Thanks

NO need of ajax for this you can do this by using jquery instead simply
In html:
<input type="text" name="txt1" value="" id="txt"/>
<label for="checking" id="label">checking</label>
<input type="submit" name="submit" value="Click" id="butt" />
In Javascript:
$("#butt").click(function(){
var lab_val = $("#label").text();
document.getElementByID("txt").value =lab_val;
// or $("#txt").val(lab_val);
});

Jquery accessing appended element id with another js script

Im trying to call a js function on a HTML element which I have appended to the page using JQUERY.
<body>
<div id='father'>
</div>
<input type="submit" value="choice one" onclick='choice_one()'/>
<input type="submit" value="choice two" onclick='choice_two()'/>
<input type="submit" value="choice three" onclick='choice_three()'/>
</body>
My jQuery is in a js function..
<script>
function choice_one(){
var container = "<div id='field'>
<form>
<input type="text" id='choice_one_answer' value="" />
<input type="submit" value="submit" onclick='answer_one()'/>
</form>
</div>";
$('ul#field').remove();
$("div#father").append(container);
}
function choice_two(){
var container = "<div id='field'>
<form>
<input type="text" id='choice_two_answer1' value="" />
<input type="text" id='choice_two_answer3' value="" />
<input type="submit" value="submit" onclick='answer_two()'/>
</form>
</div>";
$('ul#field').remove();
$("div#father").append(container);
}
</script>
So the third part is using the answers and with js then reloading anther field. Then loading another function --> new answer field.
<script>
function answer_one(){
var answer = document.getElementById('choice_one_answer');
do something with answer...
choice_two();
}
function answer_two(){
var answer_one = document.getElementById('choice_two_answer1');
var answer_two = document.getElementById('choice_two_answer2');
do something with answer...
choice_one();
}
other functions....
</script>
So when I try to call the js functions eg answer_one()/ answer_two() the function cannot grab the variable from the input Id's ---> i presume their is because the element were not loaded when the page loaded!
Is there a jQuery/ js workaround for this... any thoughts??
Is there a work around for something like this??

I think it's a good practice to append html in one line, like this:
var container = "<div id='field'><form><input type="text" id='choice_one_answer' value="" /><input type="submit" value="submit" onclick='answer_one()'/></form></div>";
Don't have the time to test anything, but the jQuery workaround for accessing inserted code is .live()

Why are you using jQuery but not using $()/jQuery() selector for selecting the element?
Try to comment out the //$('ul#id').remove() line and dupm $('ul#id').size() to console in order to know that your element exists.