Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I came across a text that data inside disabled fields is not submitted along with the form. So i don't see why we even need to use disabled fields while writing code. Please explain the scenario in which it becomes inevitable to use disabled field.
A field that is disabled in an HTML form is unusable, unclickable and will not submit data.
The point about such a field is that something else has to happen before that field is no longer disabled - and then it becomes a normal HTML form field.
eg.
var otherReasonRadio = document.querySelector('input[value="reason-other"]');
var otherReasonInput = document.querySelector('input[name="other-reason"]');
function enableOtherReasonInput() {
otherReasonInput.removeAttribute('disabled');
}
otherReasonRadio.addEventListener('change',enableOtherReasonInput,false);
label {
display: block;
}
<form>
<label><input type="radio" name="reason" value="reason-a" />Reason A</label>
<label><input type="radio" name="reason" value="reason-b" />Reason B</label>
<label><input type="radio" name="reason" value="reason-other" />Other Reason</label>
<p><label>Please State Other Reason: <input type="text" name="other-reason" disabled></label></p>
</form>
Let's say, we have user with name, username, email and type. Now we need a single html form for both editing existing user and adding new user. While editing we don't want the email of the user to be modified. So, we can disable this field when you are editing user. Because, we actually don't want it to be submitted to the server or any other form processor. On the other hand, while adding the user, we need the email field to be added. So, while adding, we shouldn't disable the email field. That's just an example why we need to disable a field. Same form, but while editing, no email will be submitted, while adding email will be submitted.
Conditions in which you want to show the field but do not want to be submitted along the rest form fields
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
Before submitting the form user would know that model fields all mandatory that he/she as to fill out first before submitting the form.
If you want to make required fields on a form, all you have to do is add required="required" in the <input> tags.
Doing this kind of custom message can only be done in the <input> tag, using the oninvalid attribute. Do this:
<input type="text" oninvalid="alert('Hey, you missed something on modal!')" required="required">
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Note: This is a rewrite of an old post to clarify what was being asked.
Let's suppose I have a single form that displays a set of rows (for example, lines in an order), and I want to place a "delete" button besides each row, but unfortunately I can't create a single form for every row.
In addition let's say that the form goes to a "generic action route" that is the "editCart" controller.
For the sake of the example, let's assume in the form there are several other actions, like for example adding one to the quantity.
This has to be done with multiple submit buttons within the same form.
If it was only one single row, it is easy, just add a name/value to the button and boom! done!.
<form action="/process-edition" method="post">
<div>My nice things</div>
<button type="submit" name="subAction" value="delete">Delete</button>
<button type="submit" name="subAction" value="addOne">+1</button>
</form>
This is saying "hey, controller of the action /process-edition, I'm going to make the subAction delete". Or "the subAction addOne".
But when we have multiple rows, you need to say something like "delete THIS product" or "add one of THIS product".
In this case you need that the button submits like two values: a) the subAction, b) the id of the product to be edited.
<form action="/process-edition" method="post">
<ul>
<li>
Product 1234: 'orange'
<button type="submit" name="subAction" value1???="delete" value2???=1234>Delete</button>
<button type="submit" name="subAction" value1???="addOne" value2???=1234>+1</button>
</li>
<li>
Product 6789: 'lemmon'
<button type="submit" name="subAction" value1???="delete" value2???=6789>Delete</button>
<button type="submit" name="subAction" value1???="addOne" value2???=6789>+1</button>
</li>
</ul>
</form>
I think in this case delete and addOne is what the original post was asking as a "statically assigned value" and the 1234 and 6789 would be the "hidden" values that come from the database. The button "knows" about the Id but does not display the Id itself.
Of course this could be resolved by setting multiple forms to several different controllers with hidden fields in each form. But let's assume you are constricted to a layout that already has the form and you cannot create several forms in it, thus forbidding you to isolate hidden fields to be sent or not sent.
ORIGINAL TEXT OF THE POST:
one value has to be hidden from the user and another has to be displayed.The hidden value is retrieved from the database and the displayed one is statically assigned value?
You can use data- attr
<button type="submit" name="buttonname" data-value="value2" value="Value1">value</button>
then use Element.getAttribute() live DEMO
var buttom = document.querySelector("button");
var dataValue = buttom.getAttribute("data-value");
alert(dataValue);
this way you can set as much value as you want just by add data-*
the best part is you can use
<input type="submit" name="buttonname" data-value3="value3" data-value="value2" value="Value1" />
Demo if you don't like button
Yes, by using a different tool.
<button type="submit" name="buttonname" value="hiddenvalue">Shown Value</button>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 8 years ago.
Improve this question
What are the HTML elements that support submitting values to server?
If it is all input tags, then <select></select> would be an exception. I couldn't find anything in common in elements that support the submission of key - value pairs (name - value) in a form submit.
<input type="text" value="123" name="fname"/>
<input type="checkbox" value="123" name="fname"/>
<select></select>
I want to know about elements like above that would submits it data to server on post. For example, <div> is an element that won't support this.
Everything that is inside a form will be submitted. Inputs are the basic, textarea and some others are sent as well (select).
You mentioned that select is not sent to server.
Have you tried to give it a name?
Use this:
<select name="somename">
<option value="1">Hello!</option>
</select>
This will send the value of 1 for the name somename. You can try your own. When you give an input a name, you can access its value from the server, if you are using GET request method, then you will see the name in the URL of the select followed by a = and the value for that.
<input type="text" value="123" name="fname"/>
<input type="checkbox" value="123" name="fname"/>
<select></select>
Correct! You can see for yourself, you are giving a name to the input, but no name for the select. Edit it, and give it a name! Then you will get it on the serverside for processing. :)
Try this:
<input type="text" value="123" name="fname"/>
<input type="checkbox" value="123" name="fname"/>
<select name="select">
<option value="1">Hello Subin!</option>
</select>
Note that, the text inside the option tags is just for the user to see, the value sent to server is an attribute for the option tag.
http://www.w3.org/TR/html401/interact/forms.html
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I have a form with several label / input tag pairs. Within the same form I have one pair that is informational only, that is it is a name / value pair. The value is calculated and is for the user's convenience, it is not to be submitted with the form. I want to present this info to the user in a way that looks consistent with the label / input pairs. ie I want the name part of the name value pair to look like the labels, but a label in this scenario would not be semantically correct since it is not referring to an input tag. The value part I don't need to look like an input since it is not an input, but I want the spacing to be the same as with the inputs. A definition list would be perfect for this type of thing, but my concern is that this is not a list per se, it is only one item.
I saw a similar question here, but there was no conclusive / accepted answer, plus it referred to unordered lists. I think a definition list is a slightly different beast since it is probably more common to need a single term / definition pair than it would be to have a single item in a list. Maybe there is a tag for what I want, like a single term / definition pair type thing and I am just having a brain fart.
**Edit: **
Some code to illustrate (surrounding form elements for context)
<div>
<label for="PaymentDate">Payment Date</label>
<input type="text" id="PaymentDate" name="PaymentDate">
</div>
<dl>
<dt>Key</dt>
<dd>Value</dd>
</dl>
<div>
<label for="Reference">Reference</label>
<input type="text" id="Reference" name="Reference">
</div>
OR
<div>
<label for="PaymentDate">Payment Date</label>
<input type="text" id="PaymentDate" name="PaymentDate">
</div>
<div>
<span class="key">Key</span>
<span class="value">Value</span>
</div>
<div>
<label for="Reference">Reference</label>
<input type="text" id="Reference" name="Reference">
</div>
So my question is: What are the pros or cons of each approach from a semantic perspective? The downside with spans for me is that in this scenario I would likely have to add a class to the span to format it since I am already using spans for error messages, whereas I could just make a rule in my css file to format the definition list since the only purpose I would use a definition list for within a form would be for the scenario described above.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am developing a web page with rating mechanism, so I need two buttons called "dislike" and "like", once clicked, the rating information would be sent to the server to update the related rating information. What html code should I use, could you give a little code for doing this?
erm... you can't really do that with html alone, mate. You need a server-side script to handle that. Suggest Php.
After that, use a GET or POST method to carry your like or dislike vote to the server-side script.
I am leaving this answer in case if someone else faces this problem in future :
As said by Kaleb , this functionality can not be achieved by html itself, database is must for this because once you close the html page your upvote and downvote counter will be gone.
What you need to do is :
In your database , make a table say "votes" .
This table should have following columns
voteup - this should be filled with two options either yes or no
votedown - this should also be filled with two values "yes" or "no"
voteup_count -This will count the total of upvotes
vote_down - This will count the total of downvotes
Working
Before rendering your html page , check the corresponding entries into database whether the particular post is already upvoted or downvoted
If the post is upvoted and you again click the upvoted button the button text should change from upvoted to upvote and the counter should be decremented by 1 in the database as well under the voteup_count column
If the post is neither upvoted nor downvoted whenever the button is clicked it should increment the respective counter and then again change the button text either to upvoted or downvoted
of course your like and dislike button should also be dynamically created for each form.
<form name="ratings">
<input type="button" name="btnLike" value="Like">
<input type="button" name="btnDislike" value="Dislike">
</form>
Then whatever code you use to check the answer should accept the value of the button as a parameter for the update.
You should use a form. Here is an example I've copied from the Internet.
<form action="mulsub.asp" method="post">
First name: <input type="text" name="fname"><br/>
<input type="submit" name="bsubmit" value="Submit 1">
<input type="submit" name="bsubmit" value="Submit 2">
<input type="submit" name="bsubmit" value="Submit 3">
</form>
Check it out on this webpage. Programmed in ASP, I hate that language by the way :)