How do I make the text disappear like the way some fields work here on stackoverflow once I start putting in text? I tried out the different 'on'-actions in HTML but that didn't really do what I wanted.
Thanks.
You can do it with onfocus/onblur events. For example:
<input type="text" value="search" onfocus="if(this.value=='search')this.value=''"/>
If you click on this input field, the default text "search" will disappear. The onfocus event handler checks if this input field has the value of "search" and if so then clears it, in other cases (user has already typed something in) leaves everything as is.
Presumably you mean "Labels which appear inside the input".
If you want to do this in a sane, accessible, semantic way — use a <label>, if JS is available then position it under the element, and onfocus/onblur change classes around based on the value of the element.
I knocked up a simple example at http://dorward.me.uk/tmp/label-work/example.html using jQuery (all the source that isn't part of the jQuery library is embedded in the HTML of that document for easy reading).
jQuery would make this easy work;
http://www.jsfiddle.net/TshDN/
If you are using HTML 5 you could use the placeholder attribute.
http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute
use the onFocus() in javascript
<input type="text" onfocus="if(this.value == 'value') { this.value = ''; }" value="value" />
Related
Pretty new to PHP and I'm wondering if there's a way to dynamically modify which inputs are available on an HTML form using PHP without the form data needing to be submitted. I'm making a site with a calendar for a teacher and I need to make the "duedate" input in this form gray out as soon as the user selects the option "announcement."
<form action="calendaradd.php" method="post">
Event name: <input name="eventname" type="text" autocomplete="off"/></br>
Event type: <select>
<option value="homework">Homework</option>
<option value="announcement">Announcement</option>
</select>
Event date: <input type="date" name="eventdate"></br>
Due date: <input type="date" name="duedate"></br></br>
<input name="submit" type="submit" value="Submit"/>
</form>
Many thanks. Also, am I using the select/option control correctly? Are the options supposed to use value attributes instead of name?
Bind an onchange to the select, and the if the value matches your criterium, set the input as disabled:
Using jQuery to make it easier:
$('#select').on('change',function(){
var value = $(this).val();
if(value == 'announcement'){
$('#duedate').prop('disabled',true);
}
else{
$('#duedate').prop('disabled',false);
}
});
You need to supply the proper IDs to the elements (you can get them also with DOM traversing, but an ID will be faster and easier), though. Also, your select is missing the name attribute, you need it in order to fetch the value server-side.
You might wanna take a look at some client-side scripting, since server-side (as in PHP) cannot alter a page's contents once they've been loaded. Check it out here
You can set the onTextChanged event to a javascript function that changes the attribute disabled in the input to true.
Honestly, the easiest, in my opinion, would be some jQuery animation. You could make it where when the user clicks on the announcement input the due date changes color and other attributes.
JQuery is the way to go, and easier than PHP when it comes to something like this.
I want to fill an element with data using jQuery.
Unfortunately, the element stays blank. Until now, i used a workaround and used a textarea instead of input (which is working for some reason).
I did not only try
$('#input').val("Text") ;
but also
$('#input').text("text") ;
$('#input').attr("value", "Text") ;
I do not understand this behaviour, outside of my project it works just fine.
Maybe an overlook over the complete code could help. (Excuse the codemess)
Also i've got a small sidequestion:
I'm using async: false to make the whole thing work, if i remove it, nothing will be shown. But as i know that this is deprectaed, what alternatives do i have?
Thank you very much.
there is no element with ID of input in your HTML, i think you want to change the value of input elements, change this:
$('#input').val("Text") ; // this is an ID selector
to
$('input').val("Text") ;
#input searches for an element with id input. I did not see any on the source code.
As you want to change text of a single input field , give it an unique id. Like id='sampleText' then change its value like ,
$("#sampleText").val("Your text");
Your code has some errors please check.
<form id="editForm" method="POST" action="updatedata.php">
**<input type="text" id="editHeading" name="editHeading" /></textarea><br>**
<textarea id="editAuthor" name="editAuthor" /></textarea><br>
<textarea id="editTag" name="editTag" type="text" /></textarea><br>
<textarea id="editarea" name="editarea"></textarea><br>
<input id="id" name="id">
<input id="submitEditForm" name="submitEditForm" type="submit" /><br>
</form>
FYI some general concepts
$('input').val('foo'); //updates with value foo for all input elements
$('#input').val('foo'); //updates with value foo an input element with id #input
$('span#a').val('foo'); //wont work ,here we have to use .html
$('span#a').html('foo'); //<span>foo</span>
Hell...
i found it. It's not like the value isn't be inserted, it's just not visible O_o
MY Chrome does not show the word "test" inside the input when it is hidden by jQuery before.
With FF, everything works just fine.
My Problem is in brief below: This is done using PHP, JS, Smarty and HTML
<form name="todaydeal" method="post">
<span id="fix_addonval"></span>
<input type="radio" name="offer" id="offer_{$smarty.section.mem.index+1}" value="{$display_offers[mem].offervalue}" onclick="return sel_bees(this.value);" />
<input type="submit" name="SET" value="SET" />
</form>
{literal}
<script>
function sel_bees(Val)
{
document.getElementById('fix_addonval').innerHTML='<input type="hidden" name="addon" id="addon" value='+Val+' />'
}
</script>
{/literal}
When i click on the radio button its value must be replaced via javascript innerHTML and it should be placed in the span id. When i submit the form using submit button the value which is replaced in the should be get in the next page. How can this be done ?
Any ideas will be thankful and grateful. Thanks in advance
Your code is so buggy !
Your question is not clear, but if you need to create a text box in the span using javascript you can do the following:
some mistakes you've made in your code
1) you said, you need to create a textbox so you should use (text) as the type of your input.
2) use (;) at the end of the javascript statement to run successfully in all browsers
3) use < script type="text/javascript"> for your javascript code, to make it more readable
4) you've forgot to enclose the value attribute in (") and I do it in the following code for you
jQuery:
$('fix_addonval').html('< input type="text" id="addon" value="' + Val + '"/>');
This approach looks convoluted for me. All you are trying to do is to create a dynamic hidden variable and assign a value to if the checkbox is checked. Ideally, I would keep the hidden variable in the markup and will assign the value to it if the checkbox is checked. Since it is hidden, it is not going affect your HTML markup.
I don't know if span element is supposed to contain anything else besides text, at least the XHTML way, and if the input is of type hidden it can safely reside in the page and simply replace the value.
Try it with jQuery.
http://jsfiddle.net/vXgzK/
I am using jQuery auto-complete. I have download this script from http://code.google.com/p/jquery-autocomplete/. I want to use this on multiple fields. Please help me thanks.
$("#input").autocomplete("samefile.php");
$("#input").autocomplete("samefile.php");
thanks
the hash mark means you are using IDs to select elements. there should however never be more than one element in your page with the same ID. for instance,
<input id="test" /><input id="test" />
is invalid HTML.
The second problem, is that it appears you are trying to find tag names, which means you should simply leave out the hash mark from your code, and JQuery will apply your methods to all of the tags with that tag name,
$("input").autocomplete("samefile.php");
will apply autocomplete to all input tags on your page.
Third, I would use classes instead of tag names incase you ever want to have an input on your page that does not use the same auto complete. So your html would look like this,
<input class="auto" /><input class="auto" />
and your JQuery would look like this.
$(".auto").autocomplete("samefile.php);
I also wonder where you are calling your JQuery from?
You should use a less specific selector to mark multiple fields as autocomplete in one statement.
Maybe you can assign a class of type ".autocomplete" and then use that.
<input type=textbox" name="txt1" class="autocomplete"/>
<input type=textbox" name="txt2" class="autocomplete"/>
$(".autocomplete").autocomplete("samefile.php");
I have HTML code like below
<input type = "textarea" id="sentence1"> Here is my sentence </textarea>
<input type="hidden" name="sentence2" value="This is another sentence">
PHP:
$_POST['sentence1'] //shows nothing
$_POST['sentence2'] // works fine
I want to get the value of sentence1 also But i have such a scattered code that for textarea i can't change "id" to "name" otherwise i'll have to make lot of changes in different files.
I have to transfer both sentences to PHP so please help me how can i do that?
There is no input type="textarea". You cannot use the id attribute for the name attribute. This is not how it will get transmitted and there is no way to change that from plain HTML. Form <input> elements are transmitted with their name and value attributes.
Please refresh you knowledge about HTML Form elements and attributes
Your code is wrong. You should start using a browser with HTML validation, that would've caught it.
<textarea name="sentence1" id="sentence1"> Here is my sentence </textarea>
<input type="hidden" name="sentence2" value="This is another sentence" />
Change
<input type = "textarea" id="sentence1"> Here is my sentence </textarea>
into
<textarea id="sentence1" name="sentence1"> Here is my sentence </textarea>
and your PHP will work.
I'm assuming you've corrected the <input type="textarea"> mistake. If I understand your needs correctly, you know that the form only passes the value of the name attribute, and not the id, but you can't change that easily.
My suggestion would be to add a script to either change the value of the name attribute into that of the id, or copy the entire attribute so it's available under both the name and the id:
<script>
var inputs = document.getElementsByTagName('input');
for (var i=0; i<inputs.length; i++)
inputs[i].parentNode.appendChild(inputs[i].cloneNode(false));
</script>
and add it at the end of your pages. do the same for textareas.
You can't (at least not using plain HTML). The W3C recommendation regarding form handling and processing states
A control's "control name" is given by
its name attribute. The scope of the
name attribute for a control within a
FORM element is the FORM element.
and
A form data set is a sequence of
control-name/current-value pairs
constructed from successful controls
See here.
You can use Javascript to add the name-attribute dynamically to all form elements without the respective attribute.
But i have such a scattered code that for textarea i can't change "id" to "name" otherwise i'll have to make lot of changes in different files.
Then probably that's where you should start. (Note: A input/textarea element may have both a name and an id attribute.)