Here is my javaScript:
<script type="text/javascript">
$(function () {
$('#first_name, #second_name, #third_name, #fourth_name').bind("change keyup",
function () {
if ($("#first_name").val() && $("#second_name").val() != "" && $("#third_name").val() != "" && $("#fourth_name").val() != "")
$(this).closest("form").find(":submit").removeAttr("disabled");
else
$(this).closest("form").find(":submit").attr("disabled", "disabled");
});
});
</script>
And here is my HTML:
<form method="post" id="myForm" name="myForm">
<div id="terms_area">
<ul>
<li>
<label>Print your name</label>
<input id="first_name" type="text" />
</li>
<li>
<label>Print your surname</label>
<input id="second_name" type="text" />
</li>
<li>
<label>Print your surname</label>
<input id="third_name" type="text" />
</li>
<li>
<label>Print your surname</label>
<input id="fourth_name" type="text" />
</li>
</ul>
<center>
<input class="terms_button" type="submit" value="I accept the terms of this agreement" disabled title="please fill in all required fields to accept the terms" />
</center>
</div>
</form>
Is there any way I can get the JavaScript to target the form name of 'myForm' as I have multiple forms on one page?
IDs have to be unique, and an ID selector will always target the first element with that ID on the page. Reusing IDs in different forms won't work. Use classes instead.
<form method="post" id="myForm" name="myForm">
<div id="terms_area">
<ul>
<li>
<label>Print your name</label>
<input class="first_name" type="text" />
</li>
<li>
<label>Print your surname</label>
<input class="second_name" type="text" />
</li>
<li>
<label>Print your surname</label>
<input class="third_name" type="text" />
</li>
<li>
<label>Print your surname</label>
<input class="fourth_name" type="text" />
</li>
</ul>
<center>
<input class="terms_button" type="submit" value="I accept the terms of this agreement" disabled title="please fill in all required fields to accept the terms" />
</center>
</div>
</form>
Then you can target the elements in a specific form with:
$("#myForm").find(".first_name, .second_name, .third_name, .fourth_name").on("change keyup", function() {
$("#myForm :submit").prop("disabled",
$("#myForm .first_name").val() == "" ||
$("#myForm .second_name").val() == "" ||
$("#myForm .third_name").val() == "" ||
$("#myForm .fourth_name").val() == "");
});
Related
I have tried multiple ways in order to make my code works but I failed. I want to make the input text of the form show up in the list(id="contact") after submit it, like adding a new contact on a contact list. This is my code, I really appreciated your help!
my HTML:
<div>
<ul id="contactlist" class=ppl>
<ol id="demo"></ol>
<li id="pplli"><img id="wetalk" class="talkbox" src="img/talkbox.png"><p class="contactname">Aiden</p> </li>
<li id="pplli"> <img id="wetalk1" class="talkbox" src="img/talkbox.png">Jaimie </li>
<li id="pplli"><img id="wetalk2" class="talkbox" src="img/talkbox.png">Jimmy</li>
<br>
<buttom id="clearBtn" style="position:absolute;right:0px;bottom:0px;"></buttom>
<br>
<img id="plus" src="img/plus.png">
</ul>
</div>
<section id="addform">
<form name="myform" id="myform">
<label for="fname">First name:</label><br>
<input type="text" id="fname" class="myfname" placeholder="ex : Jen" name="fname" required><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" class="mylname" placeholder="ex : Shen" name="lname" required ><br>
<label for="pname">Phone:</label><br>
<input type="text" id="pname" class="mypname" placeholder="ex : 333-333-333" name="pname" required >
<input type='button' onclick='addName' class="btn" value='Submit' />
</form>
</section>
This is my javascript:
var demo = document.getElementById("demo");
function addName(){
var fname = document.getElementById("fname").value;
var entry = document.createElement("li");
entry.appendChild(document.createTextNode(fname));
demo.appendChild(entry);
}
Thank you very much!
The only thing you are doing wrong is
change
<input type='button' onclick='addName' class="btn" value='Submit' />
to
<input type='button' onclick='addName()' class="btn" value='Submit' />
you need to pass your function name with ().
Hope this helps!
I'm making a web app and I'm struggling with replacing the page.
In the function myPage(), when I put the location.replace("file.html"); in the start, it works if I don't insert inputs on the web app, but when I put the location.replace("file.html"); in the if statement then doesn't work at all, and is there where I need to put the location.replace.
Please help me.
js code:
var submit = document.getElementById("submit");
submit.addEventListener("click",myPage);
function myPage(){
//location.replace("file.html"); // here this is working
var name=document.formId.nameRadio.value;//name="abc"
if (name=="abc"){
location.replace("file.html");//but here not
}
}
html code:
<form id="formId" name="formId" >
<label>sth </label><br><br>
<label for="name"> name </label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio" >
<li> <input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li> <input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="submit" type="submit" value="next" >
</form>
change your button type to button. your browser submits first.
var submit = document.getElementById("submit");
submit.addEventListener("click",myPage);
function myPage(){
//location.replace("file.html"); // here this is working
var name=document.formId.nameRadio.value;//name="abc"
alert(name);
if (name=="abc"){
location.replace("file.html");//but here not
}
}
<form id="formId" name="formId" >
<label>sth </label><br><br>
<label for="name"> name </label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio" >
<li> <input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li> <input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="submit" type="button" value="next" >
</form>
You can stop the usual form submission by adding preventDefault() to your onClick function.
var submit = document.getElementById("submit");
submit.addEventListener("click", myPage);
function myPage(e) {
//prevent form submission
e.preventDefault();
var name = document.getElementById('formId').nameRadio.value;
if (name == "abc") {
location.replace("file.html");
}
}
<form id="formId" name="formId">
<label>sth </label><br><br>
<label for="name"> name </label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio">
<li> <input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li> <input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="submit" type="submit" value="next">
</form>
It seems that you want more control over the form submit.
You can change the input type from submit to button; Also rename that button to avoid confusion with submit method of the form.
You can also simplify the code, by using the click event directly on the input.
Here is something you can try:
<html>
<body>
<form id="formId" name="formId">
<label>sth</label><br><br>
<label for="name">name</label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio">
<li><input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li><input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="btnSubmit" type="button" value="next" onclick="mySubmit()">
</form>
<script>
function mySubmit()
{
var name = document.formId.nameRadio.value;
if (name == "abc"){
location.replace("file.html");
} else {
// Submit a form
document.formId.submit();
}
}
</script>
</body>
</html>
I'm trying to build a search box were students can search for course reserves based on their course code or faculty members names. What is missing is the part where you can change the form action url based on the checkbox you mark. I took the javascript code from the previous search box where it was used on a dropdown selection. I knew it wouldn't work on input but that's where my javascript understanding ends. Btw, I have a javascript running which allows only one checkbox to be selected. My code goes like:
<form name="frm" method="get" action="http://path1" />
<input name="SEARCH" value="" type="text" autocomplete="off" />
<input type="submit" value="" />
<ul>
<li>
<input type="checkbox" value="http://path1" checked="checked"/>
<label for="course">Course Code</label>
</li>
<li>
<input type="checkbox" value="http://path2"/>
<label for="faculty">Faculty Member</label>
</li>
</ul>
</form>
<script language="javascript">
var objForm = document.search;
if (objForm.type.checked)
{
objForm.removeChild(objForm.searchType);
objForm.submit();
}
</script>
Thanks in advance
Since you have only two option I have made it radio but still if you want checkbox then change it:
<form name="frm" id="myForm" method="get" action="http://path1" >
<input name="SEARCH" value="" type="text" autocomplete="off" />
<input type="submit" value="" />
<ul>
<li>
<input type="radio" name="frmact" value="http://path1" checked="checked" onclick="formaction(this)"/>
<label for="course">Course Code</label>
</li>
<li>
<input type="radio" name="frmact" value="http://path2" onclick="formaction(this)"/>
<label for="faculty">Faculty Member</label>
</li>
</ul>
</form>
</body>
<script>
function formaction(checkbox){
document.getElementById("myForm").action = checkbox.value;;
}
</script>
here i use a same address option in my page
when i click on checkbox for same address my other input must disable
my code:
<ul><input type="checkbox" name="same-address" /> Click for same address <br />Enter Address here: <input type="text" name="address" /> Enter City here: <input type="text" name="city" /> </ul>
Try this
$('#same').click(function () {
if ($(this).is(':checked')) {
$(this).parents('ul').find('li input[type="text"],select').attr('disabled', 'disabled');
} else {
$(this).parents('ul').find('li input[type="text"],select').removeAttr('disabled')
}
});
DEMO Fiddle
You can use attribute equals selector to select the input by type and use .prop to update the disabled state of your input:
$('input[type="checkbox"]').click(function() {
$('input[type="text"]').prop('disabled',this.checked);
});
Fiddle Demo
You can use input selector for selecting all the input elements and in conjunction use Prop for disabling the controls.
$('input[type="checkbox"]').click(function() {
$('input[type="text"]').prop('disabled',this.checked);
})
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('.SameAsBillingAddress').on('click',function(){
if($(this).prop('checked'))
{
$('.Address2').prop('disabled', true);
}
else
{
$('.Address2').prop('disabled', false);
}
});
});
</script>
</head>
<body>
<div>
<ul>
<div style="height:30px; width:80%; margin-left:30px; clear:both;">
<input name="" type="checkbox" value="" class="SameAsBillingAddress" />Same as Billing Address</div>
<li>
<label>House No.:</label>
<input type="text" name="house no" class="Address2" placeholder="House No" />
</li>
<li>
<label>Street:</label>
<input type="text" name="street" class="Address2" placeholder="Your Street" />
</li>
<li>
<label>City</label>
<input type="text" name="city" class="Address2" placeholder="Your City" />
</li>
<li>
<label>Zip:</label>
<input type="text" name="zip" class="Address2" placeholder="Your Zip" />
</li>
<li>
<label>Country:</label>
<select class="Address2">
<option>India</option>
</select>
</li>
<li style="float:right;">
<label></label>
<input type="submit" name="save" class="Address2" value="Save Details" />
</li>
</ul>
</div>
</body>
</html>
I made a form in html and want the user to be able to press submit when some fields are filled. So my button is disabled in the beginning, but for some reason my button doesn't become clickable when things are filled.
This is the form in my html:
<fieldset>
<legend>U gegevens</legend>
<form name="signup" action="index.html" method="post">
<ul>
<li> <label>Naam</label>
<input type="text" name="name" size="30" />
</li>
<li> <label>Voornaam</label>
<input type="text" name="voornaam" size="30" />
</li>
<li> <label>Adress</label>
<input type="text" name="adress" size="30" />
</li>
<li> <label>Gemeente</label>
<input type="text" name="gemeente" size="30" />
</li>
<li> <label>Postcode</label>
<input type="text" name="postcode" size="30" />
</li>
<li>
<p>Ik wens een alternatief facturatieadres <input type="checkbox" id="be1"onclick="if(this.checked){displayFac()}"></p>
</li>
<li style="display:none;" id="fac1"> <label >Adress</label>
<input type="text" size="30" />
</li>
<li style="display:none;" id="fac2"> <label >Gemeente</label>
<input type="text" size="30" />
</li>
<li style="display:none;" id="fac3"> <label>Postcode</label>
<input type="text" size="30" />
</li>
<li>
<p>Ik wens een alternatief leveringsadress <input type="checkbox" id="be2" onclick="if(this.checked){displayLe()}"></p>
</li>
<li style="display:none;" id="le1"> <label >Adress</label>
<input type="text" size="30" />
</li>
<li style="display:none;" id="le2"> <label>Gemeente</label>
<input type="text" size="30" />
</li>
<li style="display:none;" id="le3" > <label>Postcode</label>
<input type="text" size="30" />
</li>
<li><label for="submit"></label>
<button type="submit" id="submit" disabled>Verzenden</button>
</li>
</ul>
</form>
</fieldset>
And this is the javascript i use to check if there is something filled:
function validateForm()
{
while (true){
var a=document.forms["signup"]["name"].value;
var b=document.forms["signup"]["voornaam"].value;
var c=document.forms["signup"]["adress"].value;
var d=document.forms["signup"]["gemeente"].value;
var e=document.forms["signup"]["postcode"].value;
if (a!=null && a!="" && b !=null && b!="" && c!=null && c!= "" && d!=null && d!="" && e!=null && e!="")
{
document.getElementById("submit").disabled=false;
}
}
}
Thanks in advance!
Remove the while loop from validateForms() function and call it on every inputs onblur event and also if the checkbox checked. hope this helps.
try this:
function validateForm()
{
var a=document.forms["signup"]["name"].value;
var b=document.forms["signup"]["voornaam"].value;
var c=document.forms["signup"]["adress"].value;
var d=document.forms["signup"]["gemeente"].value;
var e=document.forms["signup"]["postcode"].value;
if ( a!="" && b!="" && c!= "" && d!="" && e!="")
{
document.getElementById("submit").disabled=false;
}
}