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>
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--" />
I'm facing the well known Chrome's "not-focusable-input" error but my situation is different from the explained in the other post I could find there.
I have this error message duplicated first on a well pointed input, this input has no required attribute:
The code:
<fieldset>
<label>Total (montaje incl.)</label>
<input type="number" id="priceFinal" name="priceFinal"> €
</fieldset>
The error:
An invalid form control with name='priceFinal' is not focusable.
While the user is filling the form this field gets its value by a js script with jquery. The user type a size in another input, the script do its maths with the size value and then put the outcome in the 'priceFinal' input with the jquery function: .val()
In the browser we can see that the input is correctly filled and no errors are displayed at that time. And with the 'novalidate' solution everything goes fine, so it couldn't be responsible for the nofocusable error, I think.
Then I got the same error with an input with no name which I didn't write and doesn't exist in my DOM:
An invalid form control with name='' is not focusable.
This is weird because the only input without name in my form is the type:submit one
<input type="submit" class="btn btn-default" value="Ver presupuesto" />
I have a few required fields but I've always checked that their are all filled when I send the form. I paste it just in case it could help:
<fieldset>
<input type="text" id="clientName" name="clientName" placeholder="Nombre y apellidos" class="cInput" required >
<input type="text" id="client_ID" name="client_ID" required placeholder="CIF / NIF / DNI" class="cInput">
</fieldset>
<fieldset>
<input type="text" id="client_add" name="client_add" placeholder="Dirección de facturación" class="addInput" required >
</fieldset>
<fieldset>
<input type="text" id="client_ph" name="client_ph" placeholder="Teléfono" class="cInput" required>
<input type="email" id="client_mail" name="client_mail" placeholder="Email" class="cInput" required>
</fieldset>
The novalidate solution clears the error but it doesn't fix it, I mean there must be a way to solve it with no hacks.
Any one have any idea of what's might going on?
Thanks
I had the same problem, and everyone was blaming to the poor hidden inputs been required, but seems like a bug having your required field inside a fieldset.
Chrome tries to focus (for some unknown reason) your fieldset instead of your required input.
This bug is present only in chrome I tested in version 43.0.2357.124 m.
Doesn't happen in firefox.
Example (very simple).
<form>
<fieldset name="mybug">
<select required="required" name="hola">
<option value=''>option 1</option>
</select>
<input type="submit" name="submit" value="send" />
</fieldset>
</form>
An invalid form control with name='mybug' is not focusable.
The bug is hard to spot because usually fieldsets don't have a name so name='' is a WTF! but slice piece by piece the form until I found the culprid.
If you get your required input from the fieldset the error is gone.
<form>
<select required="required" name="hola">
<option value=''>option 1</option>
</select>
<fieldset name="mybug">
<input type="submit" name="submit" value="send" />
</fieldset>
</form>
I would report it but I don't know where is the chrome community for bugs.
Thanks to this post, I saw that my problem also rested with Chrome trying to focus on my fieldsets, instead of the input field.
To get a better response from the console:
Assign every DOM element a new name
Set every input & select style.display to 'block'
Changed the type of input[type="hidden"] elements to 'text'
function cleanInputs(){
var inputs = document.getElementsByTagName( 'input' ),
selects = document.getElementsByTagName( 'select' ),
all = document.getElementsByTagName( '*' );
for( var i=0, x=all.length; i<x; i++ ){
all[i].setAttribute( 'name', i + '_test' );
}
for( var i=0, x=selects.length; i<x; i++ ){
selects[i].style.display = 'block';
}
for( var i=0, x=inputs.length; i<x; i++ ){
if( inputs[i].getAttribute( 'type' ) === 'hidden' ){
inputs[i].setAttribute( 'type', 'text' );
}
inputs[i].style.display = 'block';
}
return true;
}
In the console, I ran cleanInputs() and then submitted the form.
The result, from the console, was:
An invalid form control with name='28_test' is not focusable.
An invalid form control with name='103_test' is not focusable.
Then, switching over to the Web Developer "Elements" view, I was able to find "28_test" and "103_test" (both fieldsets) -- confirming that my problem was a required input field, nested inside a fieldset.
While I was writting the question I realized one thing: the value the script was putting into the 'priceFinal' field sometimes was a decimal number.
In this case the solution was to write the step attribute for this input:
... step="any" ...
Step on w3s
So this 'nofocusable' bug is not only a required and hidden fields issue, it's also generated by format conflicts.
Nach gave me the best pointer... (y) I also had a input type="number" with step="0.1" and the console shows me this error while validating: An invalid form control with name='' is not focusable.
remove the step="0.1" on the element and now the form can be validated
I had the same issue so I removed required="required" from the troublesome fields.
If you get the error when jQuery function is executed, try to put "return false" on your function, or function(e) { e.preventDefault(); ... }
i had this issue once. to fix it, add
novalidate
as an attribute to the form. e.g
<form action="" novalidate>
....
</form>
In my case, the input element did not have a required attribute but it was hidden. and the problem was while it was hidden, it had a value in it. I guess if an input field is hidden it shouldn't have a value too, aside required attribute.
When I remove the value through my javascript code, everything works fine.
Element is hidden, No required Attribute, No value. Worked
Here is the solution....
<form>
<input type="text" ng-show="displayCondition" ng-required="displayCondition"/>
</form>
Many people do not realize that passing false into ng-required disables the directive.
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.
Consider a form in Html:
<form action="demo_form.asp" method="get">
<div class="form-group" style="margin-top:7px;">
<label class=".... </label>
<input type="text" name="prefersite1" placeholder="http://www.website.com">
<input type="text" name="prefersite2" cla....;">
<input type="text" name="prefersite3" cl....">
<input type="text" name="prefersite4" c....">
<input type="text" name="prefersite5" cla....">
</div>
On using a 'submit' type button, is there a way to get appended prefersite_list[] or comma separated string in the url
The button I used is just:
<button type="submit">
Submit
</button>
I am working on django platform and use this url to extract variables by request.GET.get method in python. Is there a way to change name=prefersite[0], [1] etc so that I will get a single long string.
Instead of /?prefersite1=&prefersite2=&prefersite3=.. , I need a single /?prefersite=.
Using prefersite[] as name seems to be working for post forms, but I need to use get forms.