I have used a multistep form and I am using "required" attribute in some of the input fields. As such
<input type="text" placeholder="Full name" id="name" name="name" required="Please enter your full name">
The user fills one form and clicks next and after three nexts he can submit.
But the required attribute triggers only when the I click the submit button.I want the user to fill all the fields before he clicks next on the form. By that I mean that the required must trigger on the next button.
You can run an function to check if the input field is empty, then add the required attribute to the input element.
Example code:
function checkValue() {
var name = document.getElementById("name");
if(name.value === "") {
var att = document.createAttribute("required");
name.setAttributeNode(att);
}
}
<form>
<input type="text" placeholder="Full name" id="name" name="name">
<button onclick = "checkValue()">Next</button>
</form>
Hope this helps !
Related
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 have this code:
<span class="field">
<input type="text" id="first-name" placeholder="First Name" required />
<label for="first-name">First Name</label>
</span>
<span class="field">
<input type="text" id="last-name" placeholder="Last Name" />
<label for="last-name">Last Name</label>
</span>
Label for the second input ("Last Name") is visible from the beginning and not only on focus like the "First Name" label. The difference between two inputs is only in attribute "required" which I don't need for the "Last Name" field.
How to make label for input without attribute "required" hidden? I need it to be shown only on focus with the transition effect. The same like this work for "First Name" field.
http://jsfiddle.net/dmitriy_kalmykov/68jmbquy
You could use the adjacent sibling selector. Add the following code to your CSS file.
input[required] + label {
display: none;
}
What about using required for the last-name field too, but overwriting the required attribute for the last-name input by javascript while submiting the form.
document.getElementById("last-name").required = false;
I know this question was asked 9 month ago, but this can help somebody in future.
I guess you can't submit the form because all fields with float labels should be with the required attribute.If you leave a field empty, the form won't submit. If you remove the attribute, the label is visible and you can submit the form, but the idea of floating labels is ruined.
If I am correct, then try this code:
$( document ).ready(function() {
$('#sub-btn').click(function validateForm() {
var isValid = true;
$('.field').each(function() {
if ( $(this).val() === '' )
$(this).removeAttr("required");
});
return isValid;
});
});
It works for me. You should set the submit button with id="sub-btn" so when you click it, it will clean the required properties.
Here is the html code for the form:
<form>
Input Twitter ID: <input type="text" name="userid" id="userid">
<button type="button" onClick="getStatuses();">Get recent tweets</button>
</form>
Currently the button activates getStatuses(). I want it so that when the user presses enter/return after inputting text, it also activates the button.
The input is used in getStatuses() and is referenced by the id of the input.
You can use the onkeyup attribute and call a function:
JS:
function checkKey(e){
var enterKey = 13;
if (e.which == enterKey){
getStatuses();
}
}
HTML:
<input type="text" name="userid" id="userid" onkeyup="checkKey(event)">
Here is a part of my html code for angularjs app
<input type="text" class="input-xlarge" id="user_name" ng-model="myModel.text"
name="user_name" rel="popover" data-content="Enter your first and last name."
data-original-title="Full Name">
<input type="text" class="input-xlarge" id="user_email" ng-model="myModel.text"
name="user_email" rel="popover" data-content="What’s your email address?"
data-original-title="Email">
Here is my controller code
function MyCtrl2($scope) {
var initial = {text1: 'initial value'};
var ini = {text2: 'initialvalue'};
$scope.myModel = angular.copy(initial);
$scope.myModel = angular.copy(ini);
}
MyCtrl2.$inject = ['$scope'];
What ever I write in first text box automatically gets populated in second text box too.Why is dat happening.How to avoid it.
Because both of your fields have the same ng-model.
To avoid it, use different values for ng-model for each input field.
Because your both input field associate with same model name myModel.text
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" />