I have a text box
<p> <input type="text" name="name1" id="usethisid" maxlength="100" value=" <p>
Whatever text is in that field is then the ID right? When i tried taking usethisid and putting it elsewhere just to display whatever the user typed didn't work.
Simply, user should enter something in text field press ok button and then the ID should be saved to whatever user wrote so i can use that ID to display anywhere on the site.
Using PHP $_POST in this code - name1 is not displayed
<ul class="list-group">
<li class="list-group-item">
<span class="badge">1549pts</span>
$_POST["name1"]; //name1should be displayed
</li>
</ul>
The id attribute in an HTML tag is used to identify the tag in a more general manner, whereas the name attribute is used to process requests (get and post for example)
Depending on how are you processing your form you can use either of them.
For example if you want to retrieve the content of your text input using javascript you can use
document.getElementById("usethisid").value
I made this jsfiddle to exemplify.
However if you are using a PHP form submission you'll want to use the name attribute instead of id, and the content of your input can be retrieved by doing: $_POST["name1"];
In PHP you can try this:
In your HTML file, try the following:
<p>
<form method="post" action="something.php">
<input type="text" name="name1" id="usethisid" maxlength="100" value="some default text />
<input type="submit" value="send!" />
</form>
</p>
Then make a php file called "something.php" (noticed that I referenced it in the form tag) with the following line:
echo($_POST['name1']);
This should display whatever was written in the text input.
By the way whenever you want to print a PHP variable name in HTML the correct syntax is
<?php echo($your_variable_name); ?>
instead of just writing $your_variable_name as is, otherwise HTML will just interpret it as a text.
Related
Sometimes I see a form that is wrapped in a form tag
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
And sometimes there is no form tag, but just a div
<div class="view">
<input class="toggle" type="checkbox">
<button class="destroy"></button>
</div>
<input class="edit" value="<%= title %>">
How come sometimes the form tag is present and other times its not for forms?
Prior to submitting information via AJAX, HTML forms were the standard in sending information to a server from a web page. They include the destination and method in the form attributes. More recently, this can be handled without assigning these attributes in form and sent via Javascript; typically using AJAX. This means the form element isn't necessary but is a good idea to include where possible to be syntactically correct HTML.
The <form> tag is not used specially when developers decide not to submit data in a conventional manner. The <form> tag has the main purpose of wrapping all the inputs that will be submitted to the next page specified on the action attribute of the <form> tag, and these data is sent using either POST or GET method indicated with the method attribute.
<form action="nextpage.php" method="post">
When the inputs are not wrapped by a <form>tag it means that the data is never submitted to another page or it submitted in a different way through javascript.
JavaScript is able to read the values of all the inputs and submit this data to a next page simulating a form or simply send it to the server without changing the page, when the page never changes but the data is sent to the server is when we say it was submitted using AJAX.
Forms input types are not always used to send values, they could be use as controllers, like date difference purposes, ranges or sliders to control alpha chanel, or rotate and image, making calculators, showing or hiding stuff on the page, lots of purposes other than just submitting to other pages
Check this code for a calculator on one of posts couple hours ago, lots of buttons, but not submitting anything
<INPUT TYPE="button" ID="button-cos" VALUE="cos">
Another example using button and input type="text" online image editor tutorial
<input name="price" id="asdprice" value="" type="text">
I do not wish to use any JS if possible
As you can see the value field is empty, and I do not want to prefill it as it will be submitable.
What I want is a prefilled text area, with lets say
http://www.
as i would like that to be a valid format for that field, normally such filled input will be less opaque.
You can display a hint for the user to enter a valid URI using an input placeholder attribute:
<input name="price" id="adsprice" type="text" placeholder="http://">
However the placeholder text will disappear once the field comes into focus. You should be aware that users will enter all kinds of rubbish into form fields, so always validate the input on the server-side and prepend the http:// if it's missing.
BTW, there are valid URIs that do not begin with http://www. and not all sites redirect the www. subdomain as you would expect.
for example i have a disabled input that holds a time span, but i want to show it to user in a friendly format. just like select element, the option with in can hold a value that is different from what is displayed
<select><option value=1>Label is there</option></select>
can it be done with input ?
something like
<input type='text' value='<?=$time?>' label='<?=date('c',$time);?>' />
P.s: im not asking for a place holder.
currently im doing
<label for="app_time">Time</label>
<input type="hidden" value="2013-04-27 15:40:00" name="app_time">
<input type="text" value="27 Apr 13, 03:40" Disabled>
is there any other method ?
You can wrap an input in the label tag.
<label>Text for the input <input type="text" name="yourInput"></label>
Or you can reference the input from a label tag.
<label for="yourInput">Text for the input</label>
<input type="text" name="yourInput" id="yourInput">
You can add styling to the label element and it aids people using assistive technology as it links the description with the form element.
Not in the way you are asking, however you could always try it with a hidden element holding the real value...
Try;
<input type="text" value="<?=date('c',$time);?>" name="dummytime" />
<input type="hidden" value="<?=$time;?>" name="realtime" />
So to get $time it would be $_POST['realtime'] and to get the formatted date value it would be $_POST['dummytime'].
No, not in the way you're asking. The value of the text input is what is displayed within it.
As an alternative you could use a hidden input with the actual value, and then put the label in the text input
Your best bet is to handle converting the date to a timestamp on the server side. You'll need to ensure the submitted text is able to be converted to a timestamp, however, and show the user an error if not. There is not a built-in way for JavaScript to convert some given user-inputted string to a computer-readable date format.
Edit: I'm assuming you want the actual value to match whatever the user enters, not a static timestamp. If you want to submit a static value regardless of the user's input, simply use a hidden input (<input type="hidden">) and a secondary text input that you can ignore.
What should 'action='' be set to so that the same page is used for the submit?
When I do a submit on the following , presently I have:
action="./diag_system_page_controls.htm"
..but can I just have action="" to indicate that I want to re-load the same page?
<span hidden="hidden">
<form id="SNMP_operation_windmarks_form_id" class="body_t" action="./diag_system_page_controls.htm" method="post" >
<!-- A page-to-vxworks windmark field must be <input> and needs id= name= value=
and cannot be used bi-directionally...-->
<!----------- PAGE-TO-MM WINDMARKS GO HERE: -------------->
<!-- EXAMPLE:
<input id="SNMP_signal_element_id" type="text" name="SNMP_signal_windmark" value="$%SNMP_signal_windmark#$" />
<input id="SNMP_IP_windmark_id" type="text" name="SNMP_IP_windmark" value="$%SNMP_IP_windmark#$" />
<input id="SNMP_OID_list_windmark_id" type="text" name="SNMP_OID_windmark" value="$%SNMP_OID_windmark#$" />
<input id="SNMP_set_data_windmark_id" type="text" name="SNMP_set_data_windmark" value="$%SNMP_set_data_windmark#$" />
<input type="submit" /> -->
</form>
<!----------- MM-TO-PAGE WINDMARKS GO HERE: -------------->
<!-- EXAMPLE:
<br />SNMP_signal_done_windmark:
<span id="SNMP_signal_done_element_id" >$%SNMP_signal_done_windmark#$</span>
-->
</span>
A blank action will accomplish want you want but that's generally considered bad form. You can use your server side language of choice to provide the information for you if for some reason the page name is dynamic. In PHP it would look something like:
action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'], ENT_HTML5, 'utf-8); ?>"
Easy, it should be the same page. While you can leave it empty, it is invalid, and should be avoided. Don't rely on the browser to make the right decision.
Use action="".
According to HTML specifications, the action attribute value shall be a URL, but an empty string is a URL, interpreted as same-document reference, by Internet standard 66, clause 4.4.
The HTML5 drafts (work in progress) propose to make an empty value forbidden and, on the other hand, make the action attribute optional, defaulting the action to the empty string. Rather odd, if you ask me.
Anyway, you can either omit the attribute or set it to the empty string, with the same effect. Setting it looks more informative to me: the author did not just forget it, he intentionally created a same-page reference.
So I was having issues with the form / hidden iframe file upload technique and spent several days trying to figure out why files wouldn't upload until finally figuring out what the issue was.
When I am building the form dynamically, I insert the file input element as a child of the form:
<input type="file" id="file-select-input" />
... and I had something like this:
<form enctype="multipart/form-data" id="file-select-form" target="select-file-iframe" method="POST" action="/upload/">
<div id="file-select-button" class="">
<input type="file" id="file-select-input" />
</div>
</form>
<iframe style="display: none" id="select-file-iframe" src="javascript:false;" name="select-file-iframe"></iframe>
It turns out that when I submit the above form, the input file information was not being sent. The reason for this, is that I didn't have the name attribute specified on the file input element. So when I changed it to this:
<input type="file" id="file-select-input" name="file" />
... things worked.
So why does the name attribute of an file input element need to be set for a file to be uploaded? According to the W3C specs, the name attribute assigns the control name, but what is the control name? Why is it important?
According to the W3C specs, the name attribute assigns the control name, but what is the control name? Why is it important?
The name of the form control controls the key in the key/value pairs that make up the POSTed data or the query string.
Without knowing the name of the control, there's no way to transform it into the data to be sent to the server.