HTML GET Form with Fixed Predefined Values - html

I want to set up an HTML Form which will submit (via GET) a combination of user-entered and predefined values.
To explain with a basic example, see this form:
<form action=“/test.html“ method=“get”>
<input type=“text” name=“foo”>
<input type=“submit” value=“SUBMIT">
</form>
This form would give the url /test.html?foo=____, where the underline is whatever the user entered.
What I want to do is also have other values which are set by me and not the user, such as /test.html?foo=____&bar=presetvalue.
I have tried setting action=“/test.html?bar=presetvalue”, but that doesn’t work.
I could potentially do this with hidden fields, but that seems like a messy way to do it.

I have tried setting action="/test.html?bar=presetvalue", but that doesn’t work.
Submitting a GET form generates a new query string which replaces any existing query string.
I could potentially do this with hidden fields, but that seems like a messy way to do it.
This is exactly what hidden fields are designed for. They are the correct tool for the job.

Related

Multiple form labels - Lightbox

I am editing html codes for web accessibility but I faced one problem about Multiple form labels. I am using Wave plugin to check web accessibility.
Errors is
Multiple form labels
What It Means
A form control has more than one label associated with it.
The problem is that there is a page user can input user info, and a button to call pop up then the pop up has all same fields again to register if user did not input the field.
Instead of changing ID of the field in popup, is there any quick and easy way to remove the error?
From W3Schools:
The id attribute specifies a unique id for an HTML element (the value
must be unique within the HTML document).
So yes, you need to define a unique ID for each and every component. This is the only clean way to solve your problem, otherwise a screenreader could read the wrong label when you focus one of your input fields.
One way to fix this other than changing IDs is to wrap the input in the label.
<label>
First Name
<input />
</label>
This is semantically correct and avoids the labels needing for and associated input id attributes.
You obviously might need to refactor some stuff and it seems like more hard work than just changing some IDs but that is an option (I know you will have probably fixed this by now, this is more for reference if someone else comes to this question.)
See: https://stackoverflow.com/a/774065/2702894

Putting HTML in a hidden form field in Django

I'm having a problem with a template: I'm trying to display a form for changing a value, in which the user enters the current value in a textarea and the old value is kept inside a hidden field for auditing purposes. This value is generally some HTML, and when I render the page this HTML in the hidden field seems to get partially rendered: the value attribute of my hidden field gets closed by the first quotation marks inside the entered HTML, and the rest of the HTML spews out onto my page. I've tried using the escape decorator but that hasn't changed anything.
Firstly, a better solution might be to keep the audit value in a separate model field defined with editable=False. You can still perform checks against the value in a form's clean method:
def clean(self):
cleaned_data = super(SomeForm, self).clean()
if instance.the_audit_field == cleaned_data['the_editable_field']:
...raise a validation error?
You can also modify the value of the audit field from within the model's save method.
Secondly, assuming you must do it the way you are now, let me address the non-escaped value in your template. I assume you're using something like the following:
<textarea value="{{ form.the_audit_field.value }}"></textarea>
You should instead use the following:
<textarea>{{ form.the_audit_field.value }}</textarea>
Note, the value goes inside the textarea, instead of in the value attribute of it.
An even better way to do it is to simply allow Django to render the field for you like the following:
{{ form.the_audit_field }}

What to render to html form If I need to send multiple (hidden) values with the same key?

Let's say I have got a form with only one visible input (a checkbox for instance) and I need to send the value of that input along with an array of ids that identifies objects that should be modified based on the value of that visible field, i.e. POST data should look something like this:
active=1
ids=1
ids=2
ids=3
...
ids=1000
I know that I can render 1000 hidden inputs for each id in ids array. But isn't there a better way (that avoids generating so much markup)?
Name each of your hidden inputs like this
<input type="hidden" name="array_input[]" value="1" />
Then on the php side use $_POST['array_input'] as ordinary array
print_r($_POST['array_input']);
Well, that's not how many inputs with the same name are sent. In reality, you're going to get something more like this:
ids=1,2,3,4
It should be pretty easy to build this value in Javascript. In fact, why do you care how the POST data is sent? Just build a string of values, send it and parse it on the server :)
Or are you using some kind of server that expects to get 100 POST values with the same key? I thought the contract was that the key should be unique? Checkboxes work that way in plain HTML...

HTML: Best practice for POSTing empty/disabled form elements

I have a form which is used as an interface for CRUD on database records. Some of the elements on the form are interdependent, such that if one field has a value of X, then other fields should be made required and filled out by the user.
A simple example might be something like a personal info section:
<select name="relationship-status">
<option value="single">Single</option>
<option value="married">Married</option>
</select>
<input type="text" name="spouse-first-name" />
<input type="text" name="spouse-last-name" />
...where the fields spouse-first-name and spouse-last-name would be required if relationship-status was set to married, and would be disabled (or hidden) otherwise.
My question is, in this example, when a person goes from married to single and wants to update their data as such, we also want to clear the spouse name values and post this back to the server so that the values are cleared in the database. We can use JavaScript to clear the fields for them when they change to single, but if we disable the form elements so that they can't edit them, then they don't get POSTed when the form is submitted.
I can think of the following solutions:
We could make them readonly instead of disabled, but that method only works for certain form controls (specifically, it does not work for other select elements), so this isn't an option.
We could duplicate each of these fields as a hidden input that would be POSTed with the form, but not editable by the user, but this seems like such a hack.
We could also enable the disabled fields right before submitting, and then re-disable them right afterwards. This is the method I'm using right now, but I feel like I'm missing something, and there has to be a better way.
Is there something I'm not thinking of, or a more sensible way of accomplishing both:
Not allowing the user to edit a field, and
Allowing the field's value to be POSTed with the form, even if blank.
My recommendation is, beside to make the validation in the client side, add in the javascript the function form.submit(), if someone disable the JS won't be able to submit the form, beside that agree with the others comments, add server validation.
I found that the most robust and least kludgy solution is to use the readonly property for all elements except <select>. For <select> elements, I just disable the <option> child elements that aren't currently selected. This effectively prevents the user from changing the value. I then color the <select> as though it were disabled with a gray background to complete the illusion. At this point, all form elements will post with the form, even with no values, and regardless of whether they're "disabled" or not.

Updating a form field with a link

I have access to form field in the administrative view.
Example
<label>Number:</label>
<input type="text" name="title" size="50"/><br/>
I do not have access to modify the html syntax, the only thing i can do is updating the form field with a value.
In the form field i want to update it with a number. I also want to have a link assigned to that number.
So when i click that number it directs us to the link.
Is there a way i can do that?
This method is tedious, but you could use the jQuery nth-selector to select the specific form element that you are dealing with.
http://api.jquery.com/nth-child-selector/
This method is risky, however, since you might add other form elements before it, altering the index of your target input element.
Afterwords, you could use the .val() jQuery method to change your input value.
Nonetheless, again, this method is not safe because the index of the form element could change. I would beg the powers of be to be able to add an ID or some identifying attribute to that form element.