Is there a way for when the mouse has clicked on a link it calls to an input item making it appear. Then when click on anything besides the input item it makes the input item disappear again.
Edit - Added example
Edit 2 - Fixed Emample
<html>
<head>
<style>
#sch{
display:none;
}
</style>
</head>
<body>
Search
<form align = "center" id = "search">
<input id = "sch" type = "text" name = "search" placeholder = "Search Here"></br>
</form>
If its only Display purpose you can do this by JavaScript onclick function.
So With css make your input display: none when your page load but when you click on call JavaScript and make it display:Block
But if you are looking to insert some value and save them to database continue same process and add ajax with it.
For example
<div>
<a id="1">link1</a><input type="text" name="t1" class="hid" id="t1" /><br>
<a id="2">link2</a><input type="text" name="t1" class="hid" id="t2" /><br>
<a id="3">link3</a><input type="text" name="t1" class="hid" id="t3" /><br>
</div>
your CSS
<style>
.hid{
display: none;
}
</style>
Your JS
<script>
$(document).ready(function(){
$("a").on("click", function(){
$("#t1").css("display","none");
$("#t2").css("display","none");
$("#t3").css("display","none");
var Aid = $(this).attr("id");
$("#t"+Aid).css("display","block");
});
});
</script>
The HTML is for structuring the page, not for animating the page, so try to use Javascript or jQuery instead. try to use something like...
document.ready(function(){
$("a").onClick(function(){
$("sh").fadeIn(200)
});
});
I dont know if it is exactly like this, but you have the point.
Hope, that I helped you.
Related
I have created a form with a submit button, the submit button is outside the actual form but its targeting the form using the form attribute for example.
<form id="myform">
</form>
<button form="myform"></button>
I apologize for the week example. This is working accross all browsers except IE 11. IE 8-10 is working 100%. Any ideas on how I can fix this. I prefer not writing scripts. I can do this with jQuery but I prefer to just keep it clean if possible
This is a solution with just a click event and a line of css. ( Minimal )
If your button has to be outside the form due to User Interface design.
I would suggest you add an input submit/button inside the form:
<form id="myform">
<input type="button" value="Submit" class="myButton" />
</form>
<button id="outerBtn">Submit</button>
Hide the input:
.myButton {display:none;} OR {visibility:none;}
Use jQuery to trigger click the input button inside the form:
$('#outerBtn').on('click', function(e){
e.preventDefault();
$('.myButton').trigger('click');
});
Just some quick answer. Should be alright.
If you do not want to write script, I would suggest you just keep your input button/submit inside the form.
<form id="form-any-name">
<input type="button" value="Submit" class="myButton" />
</form>
<button type="submit">Submit</button>
<script type="text/javascript">
$(document).ready(function() {
$('button[type=\'submit\']').on('click', function() {
$("form[id*='form-']").submit();
});
});
</script>
Simply include document on ready submit catcher you can place that code in main js file since we catching dinamicaly form id starting with form- so in other pages you can have the different foms:)
I would like to post my answer as this post helped me a lot and I came with an idea that works if you want to add the "button outside the form" functionality on older browsers.
I use JQuery but I dont think I would be a major problem to use pure JS as it's not complicated code.
Just create a class just as some of the answers suggested here
.hiddenSubmitButton {
display: none;
}
$("body").on("click", "button[form]", function () {
/*This will get the clicks when make on buttons with form attribute
* it's useful as we commonly use this property when we place buttons that submit forms outside the form itself
*/
let form, formProperty, formAttribute, code, newButtonID;
formProperty = $(this).prop("form");
if (!(formProperty === null || formProperty === "")) {//Most browsers that don't wsupport form property will return null others ""
return; //Browsers that support the form property won't continue
}
formAttribute = $(this).attr("form");
form = $("#" + formAttribute);
newButtonID = formAttribute + "_hiddenButton";
if (document.getElementById(newButtonID) !== null) {
$("#" + newButtonID).click();
return;
}
code = '<input id="' + newButtonID + '" class="hiddenSubmitButton" type="submit" value="Submit" />';
$(form).append(code);
setTimeout(function () {
$("#" + newButtonID).click();
}, 50);
});
One thing I like about creating buttons outside the form is that they allow us to custom the design more easily and we can use this code and it will work on old browsers and also, the browser will use its HTML form validator.
IE understands 'for', you can use "label for=''".
<label for="form_one_submit">Button one</label>
<form action="" id="form_one">
<span></span>
<input type="submit" id="form_one_submit" style="visibility:hidden;">
</form>
I want to make (an HTML) 'file' input element mandatory: something like
<input type='file' required = 'required' .../>
But it is not working.
I saw this WW3 manual which states 'required' attribute is new to HTML 5. But I am not using HTML 5 in the project I am working which doesn't support the new feature.
Any idea?
Thanks to HTML5, it is as easy as this:
<input type='file' required />
Example:
<form>
<input type='file' required />
<button type="submit"> Submit </button>
</form>
You can do it using Jquery like this:-
<script type="text/javascript">
$(document).ready(function() {
$('#upload').bind("click",function()
{
var imgVal = $('#uploadfile').val();
if(imgVal=='')
{
alert("empty input file");
return false;
}
});
});
</script>
<input type="file" name="image" id="uploadfile" size="30" />
<input type="submit" name="upload" id="upload" class="send_upload" value="upload" />
As of now in 2017, I am able to do this-
<input type='file' required />
and when you submit the form, it asks for file.
You could create a polyfill that executes on the form submit. For example:
/* Attach the form event when jQuery loads. */
$(document).ready(function(e){
/* Handle any form's submit event. */
$("form").submit(function(e){
e.preventDefault(); /* Stop the form from submitting immediately. */
var continueInvoke = true; /* Variable used to avoid $(this) scope confusion with .each() function. */
/* Loop through each form element that has the required="" attribute. */
$("form input[required]").each(function(){
/* If the element has no value. */
if($(this).val() == ""){
continueInvoke = false; /* Set the variable to false, to indicate that the form should not be submited. */
}
});
/* Read the variable. Detect any items with no value. */
if(continueInvoke == true){
$(this).submit(); /* Submit the form. */
}
});
});
This script waits for the form to be submitted, then loops though each form element that has the required attribute has a value entered. If everything has a value, it submits the form.
An example element to be checked could be:
<input type="file" name="file_input" required="true" />
(You can remove the comments & minify this code when using it on your website)
var imgVal = $('[type=file]').val();
Similar to Vivek's suggestion, but now you have a more generic selector of the input file and you don't rely on specific ID or class.
See this demo.
Some times the input field is not bound with the form.
I might seem within the <form> and </form> tags but it is outside these tags.
You can try applying the form attribute to the input field to make sure it is related to your form.
<input type="file" name="" required="" form="YOUR-FORM-ID-HERE" />
I hope it helps.
All statements above are entirely correct. However, it is possible for a malicious user to send a POST request without using your form in order to generate errors. Thus, HTML and JS, while offering a user-friendly approach, will not prevent these sorts of attacks. To do so, make sure that your server double checks request data to make sure nothing is empty.
https://www.geeksforgeeks.org/form-required-attribute-with-a-custom-validation-message-in-html5/
<button onclick="myFunction()">Try it</button>
<p id="geeks"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("gfg");
if (!inpObj.checkValidity()) {
document.getElementById("geeks")
.innerHTML = inpObj.validationMessage;
} else {
document.getElementById("geeks")
.innerHTML = "Input is ALL RIGHT";
}
}
</script>
How can I submit a POST form to showMessage.jsp using just the <a href="..."> tag?
<form action="showMessage.jsp" method="post">
<%=n%>
<input type="hidden" name="mess" value=<%=n%>/>
</form>
No JavaScript needed if you use a button instead:
<form action="your_url" method="post">
<button type="submit" name="your_name" value="your_value" class="btn-link">Go</button>
</form>
You can style a button to look like a link, for example:
.btn-link {
border: none;
outline: none;
background: none;
cursor: pointer;
color: #0000EE;
padding: 0;
text-decoration: underline;
font-family: inherit;
font-size: inherit;
}
You need to use javascript for this.
<form id="form1" action="showMessage.jsp" method="post">
<%=n%>
<input type="hidden" name="mess" value=<%=n%>/>
</form>
You have to use Javascript submit function on your form object. Take a look in other functions.
<form action="showMessage.jsp" method="post">
<%=n%>
<input type="hidden" name="mess" value=<%=n%>/>
</form>
In case you use MVC to accomplish it - you will have to do something like this
<form action="/ControllerName/ActionName" method="post">
<%=n%>
<input type="hidden" name="mess" value=<%=n%>/>
</form>
I just went through some examples here and did not see the MVC one figured it won't hurt to post it.
Then on your Action in the Controller I would just put <HTTPPost> On the top of it.
I believe if you don't have <HTTPGET> on the top of it it would still work but explicitly putting it there feels a bit safer.
There really seems no way for fooling the <a href= .. into a POST method. However, given that you have access to CSS of a page, this can be substituted by using a form instead.
Unfortunately, the obvious way of just styling the button in CSS as an anchor tag, is not cross-browser compatible, since different browsers treat <button value= ... differently.
Incorrect:
<form action='actbusy.php' method='post'>
<button type='submit' name='parameter' value='One'>Two</button>
</form>
The above example will be showing 'Two' and transmit 'parameter:One' in FireFox, while it will show 'One' and transmit also 'parameter:One' in IE8.
The way around is to use hidden input field(s) for delivering data and the button just for submitting it.
<form action='actbusy.php' method='post'>
<input class=hidden name='parameter' value='blaah'>
<button type='submit' name='delete' value='Delete'>Delete</button>
</form>
Note, that this method has a side effect that besides 'parameter:blaah' it will also deliver 'delete:Delete' as surplus parameters in POST.
You want to keep for a button the value attribute and button label between tags both the same ('Delete' on this case), since (as stated above) some browsers will display one and some display another as a button label.
I use a jQuery script to create "shadow" forms for my POSTable links.
Instead of <a href="/some/action?foo=bar">, I write <a data-post="/some/action" data-var-foo="bar" href="#do_action_foo_bar">. The script makes a hidden form with hidden inputs, and submits it when the link is clicked.
$("a[data-post]")
.each(function() {
let href = $(this).data("post"); if (!href) return;
let $form = $("<form></form>").attr({ method:"POST",action:href }).css("display","none")
let data = $(this).data()
for (let dat in data) {
if (dat.startsWith("postVar")) {
let varname = dat.substring(7).toLowerCase() // postVarId -> id
let varval = data[dat]
$form.append($("<input/>").attr({ type:"hidden",name:varname,value:varval }))
}
}
$("body").append($form)
$(this).data("postform",$form)
})
.click(function(ev) {
ev.preventDefault()
if ($(this).data("postform")) $(this).data("postform").submit(); else console.error("No .postform set in <a data-post>")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-post="/some/action" data-var-foo="bar" href="#do_action_foo_bar">click me</a>
A good method for overriding the http functions, if you are using express/node.js, is to use the npm package method-override. Method-override example.
Can <div contenteditable="true">Some Text</div> be used instead of texarea and then passed trough form somehow?
Ideally without JS
Using HTML5, how do I use contenteditable fields in a form submission?
Content Editable does not work as a form element. Only javascript can allow it to work.
EDIT: In response to your comment... This should work.
<script>
function getContent(){
document.getElementById("my-textarea").value = document.getElementById("my-content").innerHTML;
}
</script>
<div id="my-content" contenteditable="true">Some Text</div>
<form action="some-page.php" onsubmit="return getContent()">
<textarea id="my-textarea" style="display:none"></textarea>
<input type="submit" />
</form>
I have tested and verified that this does work in FF and IE9.
You could better use:
<script>
function getContent(){
document.getElementById("my-textarea").value = document.getElementById("my-content").innerText;
}
</script>
NOTE: I changed innerHTML to innerText. This way you don't get HTML elements and text but only text.
Example: I submited "text", innerHTML gives the value: "\r\n text". It filters out "text" but it's longer then 4 characters.
innerText gives the value "text".
This is useful if you want to count the characters.
Try out this
document.getElementById('formtextarea').value=document.getElementById('editable_div').innerHTML;
a full example:-
<script>
function getContent() {
var div_val = document.getElementById("editablediv").innerHTML;
document.getElementById("formtextarea").value = div_val;
if (div_val == '') {
//alert("option alert or show error message")
return false;
//empty form will not be submitted. You can also alert this message like this.
}
}
</script>
`
<div id="editablediv" contenteditable="true">
Some Text</div>
<form id="form" action="action.php" onsubmit="return getContent()">
<textarea id="formtextarea" style="display:none"></textarea>
<input type="submit" />
</form>
`
Instead of this, you can use JQuery (if there is boundation to use JQuery for auto-resizing textarea or any WYSIWYG text editor)
Without JS it doesn't seem possible unfortunately.
If anyone is interested I patched up a solution with VueJS for a similar problem. In my case I have:
<h2 #focusout="updateMainMessage" v-html="mainMessage" contenteditable="true"></h2>
<textarea class="d-none" name="gift[main_message]" :value="mainMessage"></textarea>
In "data" you can set a default value for mainMessage, and in methods I have:
methods: {
updateMainMessage: function(e) {
this.mainMessage = e.target.innerText;
}
}
"d-none" is a Boostrap 4 class for display none.
Simple as that, and then you can get the value of the contenteditable field inside "gift[main_message]" during a normal form submit for example. I'm not interested in formatting, therefore "innerText" works better than "innerHTML" for me.
On one of my websites I have created a form that collects the persons name, email and a description of their idea.
I limited the characters of the description to 500 characters as I don't want to read a ton and I figured out how to have the text appear in the textarea before the user inputs what they want.
Currently the user has to delete "Description of your idea" themselves but I want to add the placeholder class where it deletes what I have written in the textarea when they click the textarea
I have looked on a few sites and couldn't figure out how to use it I placed it in my code, but usually the class just appeared as text inside my textarea.
Any help on using this class would be great thank you
Here is what I have written
Inside the head tags
<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
} else {
limitCount.value = limitNum - limitField.value.length;
}
}
</script>
Inside the body tags
<form name="form1" method="post" action="ideas.php">
Your Name: <input type="text" name="name"><br>
Your Email: <input type="text" name="email"<br>
<textarea name="desc" cols=50 rows=10 onKeyDown="limitText(this.form.desc,this.form.countdown,500);"
onKeyUp="limitText(this.form.desc,this.form.countdown,500);">Description of your idea</textarea><br>
<font size="1">(Maximum characters: 500)<br>
You have <input readonly type="text" name="countdown" size="3" value="500"> characters left.</font>
<br>
<input type="submit" name="Submit" value="Submit!"> </form>
There is a feature in HTML5 called 'placeholders', which produces exactly this feature without you having to do any coding at all.
All you need to do is add a placeholder attribute to your form field, like so:
<input type='text' name='name' placeholder='Enter your name'>
Sadly, of course, only a few browsers currently support it, but give it a go in Safari or Chrome to see it in action. The good news is that it is being added to virtually all browsers in the near future.
Of course, you still need to cater for users with older browsers, but you may as well make use of the feature in browsers that can use it.
A good way to deal with it is to use the placeholder attribute, and only fall back to the Javascript solution if the browser doesn't support the feature. The Javascript solution can take the text from the placeholder attribute, so you only need to specify it in one place.
See this page for how to detect whether the placeholder feature is supported: http://diveintohtml5.ep.io/detect.html
(or, as it says on that page, just use Modernizr)
The Javascript fall-back code is fairly simple to implement. Exactly how you do it would depend on whether you want to use JQuery or not, but here are links to a few examples:
http://www.morethannothing.co.uk/2010/01/placeholder-text-in-html5-a-js-fallback/
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
And of course Google will give you loads more if you search for html5 placeholder fallback or something similar.
Hope that helps.
Check out http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.html I think it has what you are looking for.
Here is a simple page that has an email field on it that I quickly put together (pulled mostly from the tutorial).
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Focus auto-focus fields
$('.auto-focus:first').focus();
// Initialize auto-hint fields
$('INPUT.auto-hint, TEXTAREA.auto-hint').focus(function(){
if($(this).val() == $(this).attr('title')){
$(this).val('');
$(this).removeClass('auto-hint');
}
});
$('INPUT.auto-hint, TEXTAREA.auto-hint').blur(function(){
if($(this).val() == '' && $(this).attr('title') != ''){
$(this).val($(this).attr('title'));
$(this).addClass('auto-hint');
}
});
$('INPUT.auto-hint, TEXTAREA.auto-hint').each(function(){
if($(this).attr('title') == ''){ return; }
if($(this).val() == ''){ $(this).val($(this).attr('title')); }
else { $(this).removeClass('auto-hint'); }
});
});
</script>
</head>
<body>
<form>
Email: <input type="text" name="email" id="email" title="i.e. me#example.com" class="auto-hint" />
</form>
</body>
</html>
The title text is put in the field if it's empty, and removed once the user starts typing.