Dynamically change form elements with javascript - javascript

I'm trying to change the city and state based on the zip code a user enters. This should all be done on the same page with jquery. I found some code elsewhere on this site but couldn't get it to work. Here is the code snippet:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_700.font.js"></script>
<script type="text/javascript">
$("#zip").bind("change", function(e){
$.getJSON("http://mydomain.com/code.php?zip=" + $("#zip").val(),
function(data){
$.each(data, function(i,item){
if (item.field == "city") {
$("#city").val(item.value);
} else if (item.field == "state") {
$("#state").val(item.value);
}
});
});
});
</script>
and this is my html:
<label>zip</label>
<input type="text" name="zip" maxlength="5" id="zip" class="textbox1" />
<label>first name</label>
<input type="text" name="fname" class="textbox1" />
<label>last name</label>
<input type="text" name="lname" class="textbox1" />
<label>address</label>
<input type="text" name="address" class="textbox1" />
<label>address 2</label>
<input type="text" name="address2" class="textbox1" />
<label>city</label>
<input type="text" name="city" id="city" class="textbox1" />
<label>state</label>
<input type="text" name="state" id="state" class="textbox1" maxlength="2" />
The php file outputs the json just fine.

You are trying to access the inputs by ID and your inputs don't have ID's. Either change your selector or give you inputs ID's.

The subdomain is inaccurate (as I said in my email). change
...
$.getJSON("http://mydomain.com/code.php?zip=" + $("#zip").val(),
...
to
...
$.getJSON("http://www.mydomain.com/code.php?zip=" + $("#zip").val(),
...

Related

Multiple datepickers on a form

I need to have 102 datepickers on a page where people will indicate a start date and an end date for an ad listing.
This works, but I have to create 102 instances of "datepicker"
datepicker
datepicker1
datepicker2
etc
Not a huge deal to do it that way, but wonder if there is an easier way to do the script
I'm using the jquery datepicker
This is a portion of my current code:
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
$(document).ready(function() {
$("#datepicker2").datepicker();
});
$(document).ready(function() {
$("#datepicker3").datepicker();
});
$(document).ready(function() {
$("#datepicker4").datepicker();
});
$(document).ready(function() {
$("#datepicker5").datepicker();
});
$(document).ready(function() {
$("#datepicker6").datepicker();
});
$(document).ready(function() {
$("#datepicker7").datepicker();
});
</script>
<input type="checkbox" id="Alabama" name="alabama" value="X">
<label for="Alabama"><b>Alabama</b></label><br>
Start <input type="text" name="AL_date_s" value="" id="datepicker2" size="15" />
End <input type="text" name="AL_date_e" value="" id="datepicker3" size="15" /><br>
<br>
<input type="checkbox" id="Alaska" name="alaska" value="X">
<label for="Alaska"><b>Alaska</b></label><br>
Start <input type="text" name="AK_date_s" value="" id="datepicker4" size="15" />
End <input type="text" name="AK_date_e" value="" id="datepicker5" size="15" /><br>
<br>
<input type="checkbox" id="Arizona" name="arizona" value="X">
<label for="Arizona"><b>Arizona</b></label><br>
Start <input type="text" name="AZ_date_s" value="" id="datepicker6" size="15" />
End <input type="text" name="AZ_date_e" value="" id="datepicker7" size="15" /><br>
<br>

Trying to validate my form with error messages, doesn't seem to work

I want to pass in different element IDs with the same function
function validate(idname, spnname) {
var getId = document.getElementById(idname);
if(getId === null || getId === undefined || getId === "") {
var getSpn = document.getElementById(spnname).innerHTML = "Required Field";
}
}
validate('firstname', 'spnfirstname');
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get" >
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname"/><span id="spnfirstname"></span><br />
<input type="text" name="lname" placeholder="Last Name" s="textbox" id="lastname"/><span id="spnlastname"></span><br />
<input type="date" name="Birthday" value="" class="textbox" id="birthday"/>
<span id="spnbirthday"></span><br />
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email"/><span id="spnemail"></span><br />
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep"/><span id="spnhomep"></span><br />
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp"/><span id="spncellp"></span><br />
//is there another way to do this onClick event in javascript that may help?
<input id ="btn" type="button" value="Submit" onClick = "return validate()"/>
</form>
</div>
I am receiving an error for my second var and my html onClick. My question is different because there is no answer here responding to this issue correctly. I have tried everything. I have no idea why I am getting this error message.
Two things:
1.- Use the 'value' property to get the actual value from the input:
var getId = document.getElementById(idname).value;
2.-Set the function to the 'click' event, addEventListener can be useful if you want to use plain javaScript, just right after the form:
<script>
document.getElementById('btn').addEventListener('click', function(){validate('firstname', 'spnfirstname');});
</script>
This is how i get it work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validate(idname, spnname){
var getId = document.getElementById(idname).value;
console.log(getId);
if(getId === null || getId === undefined || getId === ""){
var getSpn = document.getElementById(spnname).innerHTML = "Required Field";
}
}
</script>
</head>
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get">
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname"/><span id="spnfirstname"></span><br/>
<input type="text" name="lname" placeholder="Last Name" class="textbox" id="lastname"/><span id="spnlastname"></span><br/>
<input type="date" name="Birthday" value="" class="textbox" id="birthday"/>
<span id="spnbirthday"></span><br/>
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email"/><span id="spnemail"></span><br/>
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep"/><span id="spnhomep"></span><br/>
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp"/><span id="spncellp"></span><br/>
//is there another way to do this onClick event in javascript that may help
<input id ="btn" type="button" value="Submit"/>
</form>
<script>
document.getElementById('btn').addEventListener('click', function(){validate('firstname', 'spnfirstname');});
</script>
</body
</html>
If you are trying to validate all your elements on submit click.
You can select all using querySelector and and then check each element for its value. If value is "" then change the innerHTML of sibling span element.
var submit = document.querySelector("#btn")
submit.addEventListener("click", function() {
var elements = document.querySelectorAll("input");
for (var i = 0; i < elements.length; i++) {
if (elements[i].value === "") {
elements[i].nextElementSibling.innerHTML = "Required Field";
}
}
});
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get">
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname" /><span id="spnfirstname"></span>
<br />
<input type="text" name="lname" placeholder="Last Name" class="textbox" id="lastname" /><span id="spnlastname"></span>
<br />
<input type="date" name="Birthday" value="" class="textbox" id="birthday" />
<span id="spnbirthday"></span>
<br />
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email" /><span id="spnemail"></span>
<br />
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep" /><span id="spnhomep"></span>
<br />
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp" /><span id="spncellp"></span>
<br />
<input id="btn" type="button" value="Submit" />
</form>
</div>

jQuery to populate array-named form fields based on first entered text box value

I have a form with variable number of inputs as an array
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
The idea is when i put some value in the first field (foo[1]) i need the jQuery or Javascript copy the value from #foo[1] into #foo[2], #foo[3], etc depending on the array.
Do you need following behavior :
$(document).ready(function(){
$("input[id^=foo\\[]").prop("disabled",true); //disable all elements first
$("input#foo\\[1\\]").prop("disabled",false); //then enable the first one
$("input#foo\\[1\\]").change(function(){
var source = $(this);
var currentVal = $(source).val();
$("input[id^=foo\\[]").each(function(){
if(!$(this).is(source))
$(this).val(currentVal);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value=""/>
<input type="text" id="foo[3]" name="foo[3]" value=""/>
<input type="text" id="foo[4]" name="foo[4]" value=""/>
<input type="text" id="foo[5]" name="foo[5]" value=""/>
</form>
$('input').on('input', function(){
$(this).siblings().val($(this).val());
});
Couldn't tell if you just wanted the first or all. If just the first, you can target with an id or jQuery.
$('input').eq(0).on('input', function(){});
Something like this
HTML
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
JavaScript
$("input[id=foo\\[1\\]").on("input", function (){
$(this).siblings().val($(this).val());
});
And if you want the other to be readonly:
$("input[id^=foo\\[]:not([id=foo\\[1\\]])").attr("readonly", "readonly");

How to clone input text into the other input text using Javascript?

I want to make the first input clone into the second input.
<label for="text-basic">Harga 1 gram emas murni : </label>
<input type="text" name="emas" id="emas" value="">
<label for="textinput-1">Nisab :</label>
<input disabled="disabled" type="text" name="nisab" id="nisab" placeholder="" value="" >
The quickest and easiest way would be to use jQuery.
Include the library:
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
HTML:
<input type="text" id="textOne" onkeyup="clone();" />
<input type="text" id="textTwo" />
Javascript:
function clone() {
$("#textTwo").val($("#textOne").val());
}
Here is a demo: http://jsfiddle.net/5c8a9w39/

I want to pass same value on multiple input boxes

I want to pass same value on multiple input boxes. At the moment below script only display in one box but want show main box result in all multiple input boxes
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#main').change(function() {
$('#catt1').val($(this).val());
});
});//]]>
Main input box
<input type="text" name="name" id="main" />
Multiple inputs
<input type="text" name="name" id="catt1" />
<input type="text" name="name" id="catt1" />
<input type="text" name="name" id="catt1" />
<input type="text" name="name" id="catt1" />
<input type="text" name="name" id="catt1" />
For example for one - http://jsfiddle.net/SDHNY/
http://jsfiddle.net/SDHNY/319/
$('#name').change(function() {
$('input').val($(this).val());
});
id should only be used once per page.
If you want to give multiple items an identifier use class
class="catt1"
from this your code would then change to
$('#name').change(function() {
$('.catt1').val($(this).val());
});
where the '.' before catt1 signifies to jquery that you are looking for classes not id's
DEMO : http://jsfiddle.net/SDHNY/321/
You should not use same id for multiple input. Use class for this types of purposes.You should have different name for each input field if you not get value in the jquery by its id and submit it.
TRY THIS:
Main: <input type="text" name="name_main" id="main" />
<input type="text" name="name" class="catt1" />
<input type="text" name="name1" class="catt1" />
<input type="text" name="name2" class="catt1" />
<input type="text" name="name3" class="catt1" />
<input type="text" name="name4" class="catt1" />
JQUERY:
$('#main').change(function() {
$('.catt1').val($(this).val());
});
Already a few answers are there, here I am trying to provide a solution using pure javascript without any additional plugins like jQuery,etc..
document.getElementById("main").addEventListener("input",function(){
document.querySelectorAll(".catt1").forEach((e) => e.value = this.value);
});
<input type="text" name="name" id="main" />
<input type="text" name="name" class="catt1" />
<input type="text" name="name" class="catt1" />
<input type="text" name="name" class="catt1" />
<input type="text" name="name" class="catt1" />
<input type="text" name="name" class="catt1" />

Categories

Resources