Send value with submit from output element - html

I am using the output element in my html to show a oninput calculations i have put in the
I workes - but when submitting, only the input values are sent - and not the output value.
How do I sent the output value or the oninput value?
<form action='upload.php' nmethod='post' enctype="multipart/form-data" oninput="price.value = (5 * product.value)">
<output type="number" id="totalprice" name="totalprice"></output>
<input id='sendprice' type='submit' value='SEND'>
</form>

Add a hidden input field to your form that contains the data like so:
<input type="hidden" name="onInput" value="--Your oninput value--" />

Related

Can't get textarea value

I'm trying to get the textarea value from a HTML form with Go, but it always returns as blank/null.
HTML form:
<form method="POST" action="/tickets/" name="ticketForm">
<textarea rows="3" cols="50" class="form-control" name="ticketDescription" id="ticketDescription" form="ticketForm" required> </textarea>
</form>
Golang method to capture form data:
inputDescription := r.PostFormValue("ticketDescription")
If I choose ' input="text" ', for example, it gives me the value. It's just from textarea that goes with blank/null. I've used "fmt.Println(inputDescription)" just to see if Go is retrieving the value, and it goes as a blank value too.
The form attribute of <textarea> must be the id attribute of a <form>, not name. Also, form is not necessary if the <textarea> is inside the <form>.
Since in your example your <form> has no id attribute and you provided form for your <textarea>, its value will not be sent when the form is submitted.
So do it like this:
<form method="POST" action="/tickets/" name="ticketForm">
<textarea name="ticketDescription" id="ticketDescription" required> </textarea>
</form>
Or:
<form method="POST" action="/tickets/" id="ticketForm">
</form>
<textarea name="ticketDescription" id="ticketDescription"
form="ticketForm" required> </textarea>
Also don't forget that in your handler you must call Request.ParseForm() before you can access form values (Request.Form), or use Request.FormValue() or Request.PostFormValue() (which call Request.Parseform() if necessary).

Adding additional string to an existing value in a HTML form's input box before submission

I have a form with an input box and I want to change the value before submit.
Example:
<form action="savefiends.php" method="post">
<input type="text" name="id" value="123456"><br>
<input type="submit">
</form>
How can I save the value as 123456#example.com without editing savefiends.php?
P.S. user can edit the value
You can use the onsubmit attribute as shown in the snippet below.
Note: I added extra checking to avoid appending "#example.com" if already present. Also I replaced the action attribute content by "#" to avoid form submission.
function resetId(){
var idInput = document.getElementById("id");
var suffix="#example.com";
// just to check if #example.com is already present
var checkRegExp=new RegExp(suffix + "$");
if (!idInput.value.match(checkRegExp)) idInput.value +="#example.com";
alert("Value before submit:" + idInput.value);
}
<form action="#" method="post" onsubmit="resetId();return false">
<input type="text" name="id" value="123456" id="id"><br>
<input type="submit">
</form>

Validate Form Input using pattern match in html5 form

how to do validate form with input pattern . i have looked into w3schools pattern attribute but not able to get how to implement it in my way. i want to match my form input in this way. this is the appid = "EVISA2505550816" . this pattern should match in input field. where in every id IVISA is common then next 10 digits will be.
<form method="post" action="#">
<input type="text" id="appid" name="appid" pattern="" required>
<input type="submit" name="submit">
</form>
You only have to write a regular expression in the pattern attribute :
\d means that you want a digit and {10} means that you want that char 10 times.
Note that if the first letter is not always E, you can write [A-Z]VISA\d{10}
<form method="post" action="#">
<input type="text" id="appid" name="appid" pattern="EVISA\d{10}" required>
<input type="submit" name="submit">
</form>

HTML generate URL from Input

i am working on a search function, herefore i need the value of an input to generate the final url (which shows the results)
Let's say the user enters the content he is looking for here:
Name: <input type="text" id="myText">
now i need to generate a hyperlink from
http://constant/constant?query=NAME&someotherconstantthings
here, the NAME needs to be replaced from the content of the input
Try to use PHP, you could add a action to the Form Element to post the entered informations to the PHP file, then generate ur hyperlink.
<form action="phpfilename.php" method="post">
Name: <input type="text" id="myText" name="myText">
<input type="submit" value="Search">
</form>
<?php
$name = $_POST['myText'];
$hyperlink = 'http://constant/constant?query='.$name;
?>
You need something like this:
<form action="URL" method="get">
Enter your name here: <input type="text" name="query" value="">
<input type="submit" value="Search">
</form>
You need to replace the keyword URL with the path to the page which performs the search. You can remove the keyword URL if want to submit the form to the same page.

How can I make an input field read only but still have it send data back to a form?

I have an input field:
<input cid="Topic_Created" name="Topic.Created" size="25" type="text" value="6/5/2011 8:22:45 AM" />
I want the field to display on my form but don't want the user to be able to edit the field. When the user clicks submit I want the form value to be sent back to the server.
Is this possible. I tried different combinations of disabled = "disabled", readonly = "readonly". Seems I always get nothing sent back for the field.
Adding a hidden field with the same name will sends the data when the form is submitted.
<input type="hidden" name="my_name" value="blablabla" />
<input type="text" name="my_name" value="blablabla" disabled="disabled" />
With Chrome browser on Windows 10 just having name="your_name" and the readonly attributes works fine: client cannot change a value, but it is sent to the server.
On the assumption you're using a script to create the form, I'd suggest using <input type="hidden" /> which will submit the variable with the form, but also use a regular <input type="text" readonly="readonly" /> to show the variable to the user. This won't submit the value, obviously, but will make it visible (while the hidden input will submit the value, but not show the value).
You could also do this with JavaScript:
var theForm = document.getElementsByTagName('form')[0];
var inputs = document.getElementsByTagName('input');
for (i=0; i<inputs.length; i++){
if(inputs[i].type == 'hidden'){
var newInput = document.createElement('input');
newInput.type = 'text';
newInput.setAttribute('disabled');
newInput.value = inputs[i].value;
theForm.appendChild(newInput);
}
}
Clumsy JS Fiddle demo.
alternatively u can make a little manipulation with javascript, remove the disabled property before form submitted
<form action="target.php" method="post">
<input type="text" id="anu" name="anu" value="data anu" disabled="disabled" />
<button onclick="document.getElementById('anu').disabled=''">send</button>
<script type="text/javascript">
function myFn(event) {
event.stopPropagation(); event.preventDefault();
}
</script>
<input onkeydown="myFn(event)" >
You can add 'readonly'='true' in the input element. With this the user cant edit and also send the value back to the server.
<input cid="Topic_Created" name="Topic.Created" size="25" type="text" value="6/5/2011 8:22:45 AM" readonly='true' />
You should consider using input type="hidden" when submitting read-only fields. Otherwise, if you still need the value of input field to be visible, you should create another input (type=text) with a different name.
<input cid="Topic_Created" name="Topic.Created" type="hidden" value="6/5/2011 8:22:45 AM" />
<!--This is visible: -->
<input cid="Topic_Created" name="doesntmatter" size="25" type="text" value="6/5/2011 8:22:45 AM" />