I have a form on my website with multiple user data fields; 'name', 'phone', 'email'.
By default, I want the page to load with the fields set to 'readonly'.
Then, I want to be able to click an 'edit button' to remove the 'readonly' attribute from all of the fields, so they may each be edited if need be.
I am using this bit of javascript, which I can set to select the inputs by either the generic ('input'), by the id ('#any_shared_id'), or by the class ('.any_shared_class').
However, so far... no matter which selector I use, I can only get this script to effectively remove the 'readonly' attribute from the first input.
The Form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit Test Form</title>
</head>
<body>
<button id="removeAttribute" name="editBtn">Edit</button><br><br>
<form action="" method="POST">
<label>Name:</label><br><input type="text" id="name" class="inputField" name="name"
value="John Smith" readonly><br><br>
<label>Phone:</label><br><input type="phone" id="phone" class="inputField" name="phone"
value="555-555-5555" readonly><br><br>
<label>Email:</label><br><input type="email" id="email" class="inputField" name="email"
value="jsmith#email.com" readonly><br><br>
<button type="submit" name="submit">Submit</button>
</form>
</body>
</html>
The Script:
<script>
var editButton= document.querySelector('#removeAttribute');
var get= document.querySelector('#name');
editButton.addEventListener('click', () => {
get.removeAttribute('readonly');
});
</script>
Your code is correct but it works only for the first input field.
Just use querySelectorAll, select all input fields, and remove the readonly attribute on all fields.
const elements = document.querySelectorAll("input");
elements.forEach(element => {
element.removeAttribute("readonly");
});
const button = document.querySelector("#removeAttribute");
const elements = document.querySelectorAll("input");
button.addEventListener("click", () => {
elements.forEach(element => {
element.removeAttribute("readonly");
});
});
<button id="removeAttribute" name="editBtn">Edit</button><br><br>
<form action="" method="POST">
<label>Name:</label><br><input type="text" id="name" class="inputField" name="name"
value="John Smith" readonly><br><br>
<label>Phone:</label><br><input type="phone" id="phone" class="inputField" name="phone"
value="555-555-5555" readonly><br><br>
<label>Email:</label><br><input type="email" id="email" class="inputField" name="email"
value="jsmith#email.com" readonly><br><br>
<button type="submit" name="submit">Submit</button>
</form>
Related
<!DOCTYPE html>
<head lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</head>
<body>
<section><b><b>
<form action="" target="_blank">
Bill No: <input type="text" name="bill no" size="">
<input type="submit" class="button" value="Add">
<input type="submit" class="button" value="Complete all entries">
<br><br>
Bill Details: <input type="text" name="bill no" size="50">
<br><br>
Amount: <input type="text" name="amount" pattern="[0-9]+" title="please enter amount"size="53">
<br><br>
<textarea rows="5" cols="50"></textarea>
<br><br>
<label for="To Pay">To Pay:</label>
<select name="mydropdown" id="To Pay">
<option value="Director">Director</option>
<option value="Cheif">Cheif</option>
<option value="RPC">RPC</option></select>
Cheque No: <input type="text" name="Cheque No">
<br><br>
Amount: <input type="text" name="amount" pattern="[0-9]+" title="please enter amount"size="15">
Date: <input type="date" placeholder="dd-mm-yyyy" name="Dated">
<input type="submit" class="button" value="Ok">
</form>
</article>
</section>
</body>
</html>
i want to crate a form in which i have two buttons on the top when i click on add button then it will be work as bill ,details bill no and amount = textbox(textarea) then these all entry are shown in the textarea and add another entry that all are show as a tablewhen when i complete my all entries i click on complete all entries and than total amount off all entries are show on the bottom of textarea and this total amount automatically show in the bottom amount field. please suggest how can i do this task
As you know the usage of jquery, so I use jquery to get the element:
$(document).ready(function(){
var total=0;
var temp="";
var tempResult=$("#tempResult");
$("#btn1").click(function(){
var billNo=$("#billNo").val();
var billDetails=$("#billDetails").val();
var amnt=$("#amnt").val();
tempResult.val(tempResult.val()+ billNo + "-" +billDetails+ "-" +amnt+"\n");
total+=parseFloat(amnt);
});
$("#btn2").click(function(){
tempResult.val(tempResult.val()+ total);
$("#totalAmount").val(total);
});
});
And I change :
<input type="text" name="amount" pattern="[0-9]+" title="please enter amount"size="15">
to
<input type="text" name="amount" id="totalAmount" pattern="[0-9]+" title="please enter amount"size="15">
That all.
First, you need to give an id for every element for example:
<input type="text" id="billNo" size="">
<textarea id="tempResult" rows="5" cols="50"></textarea>
And then add function to capture the button click event.
Change the following HTML:
<input type="submit" class="button" value="Add">
To:
<input type="submit" class="button" value="Add" onclick="addEntry()">
after that add a function:
function addEntry()
{
}
In this function,using the following coding to get the value of the element:
var billNo=document.getElementById("billNo").value;
Finally, using the following coding to write what you want to add to textarea:
var tempResult=document.getElementById("tempResult");
tempResult.value=billNo
For append value to textarea:
tempResult.value+=*what you want to add to textarea*
To parse input value as an integer, you need to use parseInt function, for decimal no. you may use parseFloat function.
Now, you have all the ingredient to complete your function.
For the total amount, ha ha, let you try first.
Why is the hidden form not shown when it looses focus? The alert is coming up nicely when leaving the input but the other hidden form is still not there.
html
<body>
<input type="text" id="myinput" value="">
<input type="hidden" id="validation_message_email" value="enter a valid email">
</body>
javascript
window.onload = function() {
$("#myinput").blur(myAlert);
};
function myAlert() {
alert("This input field has lost its focus.");
$("#validation_message_email").show();
}
You can't display a hidden input like that.A span will suit better for this purpose,
<input type="text" id="myinput" value="">
<span style="display:none" id="validation_message_email">enter a valid email</span>
validation_message_email doesn't have its display style property as none, so show() will not make it visible from type="hidden".
You need to replace
$("#validation_message_email").show();
with
$("#validation_message_email").attr( "type", "text" );
However, if the intent is to only show a message, then you don't need to use a hidden input for the same.
<body>
<input type="text" id="myinput" value="">
</body>
and
window.onload = function() {
$("#myinput").blur(function(){
alert("This input field has lost its focus.");
$(this).append('<span id="emailValidationMessage">enter a valid email</span>')
});
$("#myinput").focus(function(){
$("#emailValidationMessage").remove();
});
};
No need to use type="hidden" as hidden elements are not display:none they are hidden by default.
Use type="text" and hide it with css and show where you want
<input type="text" id="myinput" value="" style="display:none;">
use like this
<input type="text" id="myinput" value="">
<input type="hidden" id="validation_message_email" value="enter a valid email">
<script>
window.onload = function() {
$("#myinput").blur(myAlert);
};
function myAlert() {
$("#validation_message_email").attr("type","text");
}
</script>
<div class="form-group" id="usernamediv">
<input class="form-control" name="username" id="username"
placeholder="Username" type="text" required=""> </div>
<div class="form-group" id="passworddiv">
<input name="password" class="form-control" id="password" placeholder="Password" type="password" required="">
</div>
<button id="#loginButton">Login</button>
<button id="#forgotpassword">Forgot Password</button>
<script>
$("#forgotpassword").hide();
$("#forgotpassword").click(function(e){
$("#loginButton").hide();
$("#usernamediv").show();
$("#passworddiv").hide();
})
</script>
Check this jsfiddle link, it might help you.
$("#myinput").blur( function(){
myAlert();
});
function myAlert() {
$("#validation_message_email").attr("type", "text");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type="text" id="myinput" value="">
<input type="hidden" id="validation_message_email" value="enter a valid email">
I would like to add a function that generates multiple fields to my form.
This is how my form looks like:
<form action="form_sent.php" method="post">
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
<button>Add more fields</button><br><br>
<input type="submit">
</form>
In my case I want 3 new fields (name, phone, email) when clicking on "Add more fields".
How can I do this?
https://jsfiddle.net/374cxt5s/
Try this: https://jsfiddle.net/Twisty/q8zj00s0/1/
HTML
<form action="form_sent.php" method="post">
<ul id="fieldList">
<li>
<input name="name[]" type="text" placeholder="Name" />
</li>
<li>
<input name="phone[]" type="text" placeholder="Phone" />
</li>
<li>
<input name="email[]" type="text" placeholder="E-Mail">
</li>
</ul>
<button id="addMore">Add more fields</button>
<br>
<br>
<input type="submit">
</form>
CSS
ul {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
}
JQuery
$(function() {
$("#addMore").click(function(e) {
e.preventDefault();
$("#fieldList").append("<li> </li>");
$("#fieldList").append("<li><input type='text' name='name[]' placeholder='Name' /></li>");
$("#fieldList").append("<li><input type='text' name='phone[]' placeholder='Phone' /></li>");
$("#fieldList").append("<li><input type='text' name='email[]' placeholder='E-Mail' /></li>");
});
});
This allows you to store the results in array when you submit the form. Since you could have 5 names, phones, and emails, an array is the best way to address that. Then in PHP, you would have $_POST['name'][0] as the first one.
I'm assuming you probably want to create a dynamic form that allows you to add multiple contacts, etc.
CodePen Example
http://codepen.io/anon/pen/yeVRgw
The Basic HTML Setup
So that you can loop through things, and for sake of your own sanity, you'll probably want to segment out each chunk within the form. We'll also set up a hidden input to track how many partitions of name,phone,email have been created. We'll default at 1
<form action="form_sent.php" method="POST">
<input type="hidden" name="contacts" id="contacts" value="1">
<div class="form-contacts-container">
<div class="form-contact" id="form-contact-1">
<input type="text" name="name-1" id="name-1" placeholder="Name">
<input type="text" name="email-1" id="email-1" placeholder="E-mail">
<input type="text" name="phone-1" id="phone-1" placeholder="Phone">
</div>
<!-- We'll be adding additional inputs here -->
</div>
<div class="form-contacts-add">
<input type="button" value="Add More Fields" id="add-fields">
</div>
<div class="form-contacts-submit">
<input type="submit" name="submit" id="submit" value="Submit">
</div>
</form>
The JavaScript
This assumes you are using jQuery, so ensure that this is in your <head>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Now we need to do a few things - firstly, attach an event listener to our button and secondly, add a new <div class="form-contact"> with included fields to our form. We'll also need to ensure that we're counting up to make sure each section has a unique name/id, and we'll increase the hidden input value to count how many contacts have been added in total.
<script type="text/javascript">
var total = 1; // Our default for how many contacts we have
$( document ).on( 'click', '#add-fields', function() {
var addBlockId = total = total + 1;
var addBlock = document.createElement('div');
$(addBlock).addClass('form-contact');
$(addBlock).attr('id','form-contact-' + addBlockId);
var inputName = document.createElement('input');
$(inputName).attr('type','text');
$(inputName).attr('name','name-' + addBlockId);
$(inputName).attr('id','name-' + addBlockId);
$(inputName).attr('placeholder','Name');
$(inputName).appendTo($(addBlock));
var inputEmail = document.createElement('input');
$(inputEmail).attr('type','text');
$(inputEmail).attr('name','email-' + addBlockId);
$(inputEmail).attr('id','email-' + addBlockId);
$(inputEmail).attr('placeholder','E-mail');
$(inputEmail).appendTo($(addBlock));
var inputPhone = document.createElement('input');
$(inputPhone).attr('type','text');
$(inputPhone).attr('name','phone-' + addBlockId);
$(inputPhone).attr('id','phone-' + addBlockId);
$(inputPhone).attr('placeholder','Phone');
$(inputPhone).appendTo($(addBlock));
$(addBlock).appendTo($('.form-contacts-container'));
$('#contacts').val(total);
});
</script>
Processing your Form
The last piece of the puzzle is to process your form properly. Not goign to give you all the answers here, but the basic logic would be to grab the $_POST['contacts'] value we've been updated and run a loop through to grab all of your inputs and associated values. For instance in PHP:
$total = $_POST['contacts'];
$contacts = array();
for( $i = 1; $i < $total; $i++ ) {
$this_contact = $array(
'Name' => $_POST['name-' . $i],
'Email' => $_POST['email-' . $i],
'Phone' => $_POST['phone-' . $i]
);
array_push($contacts, $this_contact);
}
var_dump( $contacts );
try something like this :
(function() {
var button=document.getElementById("add-user");
button.addEventListener('click', function(event) {
event.preventDefault();
var cln = document.getElementsByClassName("user")[0].cloneNode(true);
document.getElementById("users").insertBefore(cln,this);
return false;
});
})();
<form id="users" action="form_sent.php" method="post">
<div class="user">
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
</div>
<button id='add-user'>Add more fields</button><br><br>
<input type="submit">
</form>
https://jsfiddle.net/9955n4fo/
It might not be a bad idea to wrap your input fields in a div just so when you append the other inputs they appear consecutively. Try something like this in your html
<form action="form_sent.php" method="post">
<div id="fields">
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
</div>
<button>Add more fields</button><br><br>
<input type="submit">
</form>
and then your javascript can be completed as so
$(function() {
$('button').click(function() { addFields(); });
});
function addFields() {
var html = "<input name='name' type='text' placeholder='Name'><br>
<input name='phone' type='text' placeholder='Phone'><br>
<input name='email' type='text' placeholder='E-Mail'><br><br>";
$('#fields').append(html);
}
You need to implement jQuery to change the HTMLs DOM.
So, you add this in your <head></head> tags:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
You need to modify your HTML like this:
<form action="form_sent.php" method="post">
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
<button extra="0">Add more fields</button><br><br>
<input type="submit">
</form>
Then you need to use this jQuery code:
<script>
$("button").on("click",function(){
var extra = $(this).attr("extra") + 1;
$("form").append("<input type='text' placeholder='Other Field' name='field' />");
$(this).attr("extra",extra);
}
</script>
This is the end!! :)
Try This :
Jquery append() function seems to sort out your answer
HTML Code should be as follow :
<form action="form_sent.php" method="post">
<div class = 'xyz'>
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
</div>
<button>Add more fields</button><br><br>
<input type="submit">
</form>
you JS should be as follow :
$(button).click(function(event){
$('.xyz').append("<input type ='text' class ='name' placeholder = 'Enter name'/><br/>");
$('.xyz').append("<input type='text' class='phone' placeholder='Enter phone'/><br/>");
$('.xyz').append("<input type='mail' class='phone' placeholder='Enter e-mail'/><br/>");
event.preventDefault();
});
This is how I would solve it.
HTML:
<form action="form_sent.php" method="post">
<div id="inputHolder">
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
</div>
<button id="addMoreFields">Add more fields</button><br><br>
<input type="submit">
</form>
JS:
$( document ).ready(function() {
$("#addMoreFields").click(function(event) {
event.preventDefault();
$("#inputHolder").append('<input name="name" type="text" placeholder="Name"><br>');
$("#inputHolder").append('<input name="phone" type="text" placeholder="Phone"><br>');
$("#inputHolder").append('<input name="email" type="text" placeholder="E-Mail"><br><br>');
});
});
https://jsfiddle.net/r71odb7t/
First you want to clone the elements you want to be adding. Do that when the page loads. Then when the button is clicked, clone the copy and add a copy to the page. And, you could either add type="button" to the button or use e.preventDefault() so your form does not get submitted when the button is clicked.
$(function() {
var inputs = $('form > button').prev().prev().prevUntil().clone().add('<br><br>');
$('form > button').on('click', function(e) {
e.preventDefault();
$(this).before(inputs.clone());
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="form_sent.php" method="post">
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
<button>Add more fields</button><br><br>
<input type="submit">
</form>
I am trying to get value of input using js but it doesn't work. Where is my mistake?
Alert doesn't work.
<body>
<form name="inputform" id="form1" action="html_form_action.asp" method="get" style="visibility:hidden">
Email: <input type="text" name="email" ></input>
<input type="button" value="Gönder" onclick="CreateU()"></input>
</form>
</body>
js file:
var xmail="";
CreateU = function(){
var xx = "";
xmail=document.getElementById('email').value;
alert(xmail);
xx= myAddress + xmail + ans + tf;
window.location.assign(xx);
}
Your email input doesn't have an ID:
<input type="text" name="email" id="email" />
Add id to your "Email" input: <input type="text" name="email" id="email" ></input>
Have a look: http://jsfiddle.net/K8kp9/
Note that now you possibly see nothing because of style="visibility:hidden" at your form tag..
Have some reading: Difference between id and name attributes in HTML
email is a name, just change 'name' to 'id' ^^
please set the id in email
<body>
<form name="inputform" id="form1" action="html_form_action.asp" method="get" style="visibility:hidden">
Email: <input type="text" name="email" id="email" ></input>
<input type="button" value="Gönder" onclick="CreateU()"></input>
use id attribute in the input to get the value by using document.getElementById().
<input type="text" name="email" id="email" ></input>
you forgot to mention id='email' in your input element.
Would like to disable the validation rules for certain fields depending on user input.
Working with jquery validator plugin, is that possible at all? The JSfiddle is here: http://jsfiddle.net/webhelpla/3eQam/
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#form").validate();
});
</script>
</head>
<body>
<form id="form" method="get" action="">
<p>
<label>Validate all
<input type="radio" name="fields_to_validate" value="all" id="fields_to_validate_0">
</label>
</p>
<p>
<label> Validate name only
<input type="radio" name="fields_to_validate" value="name" id="fields_to_validate_1">
</label>
</p>
<p>
<label for="cname">Name</label>
*<input id="cname" name="name" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cemail">E-Mail</label>
*<input id="cemail" name="email" size="25" class="required email" />
</p>
<p>
<input class ="submit" type="submit" value="Submit"/></p></form>
</body>
</html>
What youre looking for is a condition argument to the field
I believe it goes like this, remove the hard coded required classes from your input elements, name the two radio buttons denoting your required fields as different names like name_only and:
$('form').validate({
rules:
name:{
required: function() {
return $("input:radio[name='nameonly']:checked").val() == 'yes';
}
}
});
so its not determining what should be required by direct user inputs dynamically, its the inputs becoming required based on conditional inputs