How to submit a form with the label values? - html

I'm new to web development
I want to submit a form with the label names.
I mean in my html page i have shown some details of a person. Those details are showing using labels. After clicking submit button i want to submit that details to another HTML page
Anyone have a Idea how to do that?

Use the concept of hidden fields.
http://www.w3schools.com/tags/att_input_type.asp

Why not style input fields to look like labels? You could even stop them from being editable. That way a form submit will ensure they get posted.

You can use hidden field with labels
input type="hidden"

I'll give You an example of my way of solving this:
I declare two html elements as this:
<label name="importe_label" id="importe_label" />
<input type="hidden" id="importe" name="importe" value=""/>
Then, for example, I set both of them with jQuery:
$("#importe_gravado").val(99.99);
$("#importe_gravado_label").text(99.99);
So, when I submit the form, I get the value I need in back-end (In the "importe" parameter, in this case).
I don't know if is this the best way, but It works! :)
Hope It helps anybody. Best regards!

Related

Is there a way to identify whether a form is submitted in html, WITHOUT JAVASCRIPT?

I have a form with few fields, validated only in html.
I want to avoid users to click multiple times on the submit button.
Just want to block the button after submitting, so its blocked from second time.
Please let me know if i can achieve this just using HTML and CSS.
As others have said, this is not possible without JavaScript.
The most minimalist JavaScript scenario I could see to disable the button would be an inline onclick attribute on the button.
e.g:
<input type="submit" onclick="this.disabled = true;" value="Click Me">
This is not possible.
If you want to avoid client-side JS then, with server-side code, you could generate a unique identifier in a hidden input that you can use to check for duplicate submissions on the server.

HTML submit multiple values through one check box?

Hello I have a form that allows the user to check as many options as they like and then hit submit. Is there any way to have the input type 'checkbox' submit more than one value?
For example right now I have:
<input type="checkbox" value="testuser">
But I want something like:
<input type="checkbox" value="testuser" valuetwo="1">
Is there any way to achieve this second option?
Thanks!
Since there is no way to submit to values, is there a way to submit them both in value one?
For example:
<input type="checkbox" value="testuser,1">
And if so how would I separate the value into two?
From your comments, it sounds like you have some JavaScript that handles the data before it's submitted. If that's the case, you can add a data attribute to the checkbox. To use your example, you could call it data-valuetwo.
<input type="checkbox" value="testuser" data-valuetwo="1">
Then, your JavaScript can use getAttribute to retrieve the value in your data-valuetwo attribute and handle it appropriately. It could look something like this:
var valuetwo = checkbox.getAttribute("data-valuetwo");
I found a way to do this without JavaScript or Libraries using a hidden form-field instead:
<input name="selectedValue" type="hidden" value="defaultValue">
<input name="selectedValue" type="checkbox" value="secondValue">
Now, if the checkbox is not selected, the hidden value is sent, if it is selected, the hidden value is overridden.
You might try alternative using select2, see: https://select2.github.io/examples.html (Tagging support, use two options limit). Again, there is no enough information supplied to fully satisfy Your question.
Another approach with select box and JSON is Can an Option in a Select tag carry multiple values? (can be rewritten for checkbox)

Is it acceptable for a submit button to have a name attribute?

Usually, a submit button works fine without a name attribute. However, there are occasions where there's a need to have two submit buttons for the same form, hence making use of the name attribute to identify which button was clicked on the server side.
To clarify I am talking about: <input type="submit" name="foo">
Yes, it is entirely acceptable.
The specification has explicit rules for how to determine which submit button was successful, which would be useless if you couldn't give the element a name.

Exclude radio buttons from a form submit, without disabling them

I'm using some radio buttons to influence the behavior states of a jQuery widget.
That widget can be used in a form but, since these radios don't contain any actual data, I don't want them to submit noise to the server, or cause naming conflict to whoever will use the widget in his form.
Here are two potential solution starts, not yet satisfying though :
remove the name attribute : seems to work fine for other inputs, but turns my radios into checkboxes : it kills the link between them so selecting one doesn't unselect the others. Is there an HTML way (i.e. other than Javascript event) to bind them without a name attribute ?
disable the input : As expected, nothing is submitted, but the radios become grey and can't be clicked. Is there any way that they stay clickable yet unsubmittable, like disabled at submit time ?
As far as possible, I'm rather looking for a cross-browser solution.
Try call a function before submit, that disables the radio buttons.
function disableBtn() {
document.getElementById('idbtn1').setAttribute('disabled', 'disabled');
document.getElementById('idbtn2').setAttribute('disabled', 'disabled');
return true;
}
Then, in form:
<form action="file" method="post" onsubmit="return disableBtn()">
Try this:
<form>
<input type="radio" name="group1" value="1" form="">
<input type="radio" name="group1" value="2" form="">
</form>
This still uses the name attribute which is required for radio buttons, and it also leaves the inputs enabled for interaction. No JavaScript code, no during-submit patching of the document in hope that the submit will turn out fine and destroying the document before submit will leave no visible traces.
The form="" attribute indicates that these input elements are not included in their parent form. Actually you're supposed to put the ID of another existing <form> element in this attribute, but then again, by the HTML standard, you're probably not supposed to exclude radio buttons from a form. So this hack is the only solution to the problem. (Doesn't work in Internet Explorer, but what does today.)
I'm intending to use this method for radio button groups that are in a data table which is populated from a <template> element. In this case, there will be a radio group in each table row, so their number is unknown. But since the name attribute is the only way to build radio button groups, they'll need to get counting names assigned. Since the table data is put in a JSON field before submitting anyway, I don't need field names for a form submit. Radio buttons do need names for themselves, but this method will still exclude them from being submitted.

HTML Form submit buttons

I know, this might be a very basic question but I am not 100% sure on the topic.
When submitting forms, is there a precise value that needs to be passed in order to inform that a certain button was pressed...
or can any value be passed in relation to the submit button's name?
Any ideas?
Edit:
Thank guys! I found out how to deal with the problem.
As variables are passed to the servers and are pretty much open to interpretation, depending on how they are read by the server,
I just decided to check the data being posted on various forms and just decided to mimic them.
Everything works now, thanks for your help!
You could pass any value and you can check based on various possibilities whether form was submitted. For example, this is how we check in php whether or not form was submitted:
<input type="submit" name="submit" value="whatever" />
if (isset($_POST['submit']))
{
// form was submitted !!
}
You should pass the <input type="submit">'s value attribute.
For example, if the user clicks the following submit button, the browser must send GoNext=Next+Step
<input type="submit" name="GoNext" value="Next Step" />
For more information, read the specification