Jquery Problem for multiple text box value.

Question

0.00/5 (No votes)

See more:

Hi,
I am getting problem while validating multiple text box of same class.
can you please tell me a solution.my html code is as follows.
<input type="text" placeholder="Country Code" class="phone" /><input type="text" placeholder="phone number" class="phone" />

I just want to validate.

Posted 30-Aug-13 2:45am

project virus

Add a Solution

Comments

TrushnaK 30-Aug-13 8:55am

you not given ids to both textboxes then how could you identify perticular textbox.

what you want to validate?

project virus 30-Aug-13 9:01am

We can not use id for multiple textbox.one id for one textbox.that's why I used class.To identify particular textbox i used document.getElementByClassname("phone");

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

cyber_addicted · Answer 1 · 2013-08-30T02:57:00

Solution 1

use id in your text boxes and select text box by their respective id instead of class.

HTML

<input id="t1" type="text" placeholder="Country Code" class="phone" />
<input id="t2" type="text" placeholder="phone number" class="phone" />

JavaScript

$(document).ready(function(){
$('#t1').......; //selector as id
$('#t2').......; // select as id
});

Posted 30-Aug-13 2:57am

cyber_addicted

Comments

project virus 30-Aug-13 9:05am

yes but i want to display same msg for same span and also want to insert into database of same column via php

[no name] 30-Aug-13 9:07am

give me your whole form which you want to validate and insert via php.

project virus 30-Aug-13 9:12am

<form action="mail.php" class="contactForm" name="cform" method="post">
<p>Enquire Anything.We’ll get back to you shortly.</p>
<div class="input_boxes">
<p><label for="name">Name</label><span class="name-missing">Please enter your name</span><br />
<input id="name" type="text" value="" name="name" /></p>
<p><label for="phone">Phone</label><span class="phone-missing">Please enter your phone number with country code</span><br />
<input id="phone" class="phone" type="text" value="" name="phone[]" style="width:50px;" placeholder="Code" maxlength="5" /> <input id="phone" class="phone" type="text" value="" name="phone[]" maxlength="15" /></p>
<p><label for="e-mail">E-mail</label><span class="email-missing">Please enter a valid e-mail</span><br />
<input id="e-mail" type="text" value="" name="email" /></p>
<p><label for="message">Message</label><span class="message-missing">Say something!</span><br />
<textarea id="message" rows="6" cols="6" name="message"></textarea></p>
</div>
<input class="submit" type="submit" name="submit" value="Submit Form" önfocus="this.blur()" />
</form>

[no name] 30-Aug-13 9:16am

id "phone" must be unique means "phone1" and "phone2"
and please tell me what u want right now hv write any jquery yet for validation ?

project virus 30-Aug-13 9:20am

<span class="phone-missing">Please enter your phone number with country code</span> should be display when both fields are null and it should be numeric

project virus 30-Aug-13 9:13am

$(document).ready(function(){
//function for contact form dropdown
function contact() {
if ($("#contactForm").is(":hidden")){
$("#contactForm").slideDown("slow");
$("#backgroundPopup").css({"opacity": "0.7"});
$("#backgroundPopup").fadeIn("slow");
}
else{
$("#contactForm").slideUp("slow");
$("#backgroundPopup").fadeOut("slow");
}
}

//run contact form when any contact link is clicked
$(".contact").click(function(){contact()});

//animation for same page links #
$('a[href*=#]').each(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($(this.hash).length) {
$(this).click(function(event) {
var targetOffset = $(this.hash).offset().top;
var target = this.hash;
event.preventDefault();
$('html, body').animate({scrollTop: targetOffset}, 500);
return false;
});
}
}
});

//submission scripts
$('.contactForm').submit( function(){

var elements = document.getElementsByClassName("phone");
var phone = '';
for(var i=0; i

[no name] 30-Aug-13 9:18am

USE document.getElementsByID("phone1") INSTEAD OF document.getElementsByClassName("phone");
AND PHONE ID MUST UNIQUE THEN CHECK PHONE1 AS STD CODE AND PHONE2 AS PHONE NUMBER

project virus 30-Aug-13 9:32am

Okie Dokie