Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trouble passing html form input to js for validation

    Hi,

    I want to pass the form input that the user has entered to the variables in the js function so that it can validate the values to ensure it is appropriate to be used as an email address. My end goal is to program the form to accept a phone number(input tag) and combine it with the text of the option selected of the drop-down menu, so that it can be used as an email address. Once submitted I want to pass the address to the js to ensure it is formatted correctly and then once it is send it to a php file to be emailed to a gmail account i set up. In short a subscription page but for phone numbers that enters it into a contact list in gmail. I am using Dreamweaver CS6. what am i missing and what do i need to tweak?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Subscribe Page</title>
    <script type="text/javascript"> function validate(number,carrier) {
    	var number = document.getElementById("number").value
    	var carrier = document.getElementById("carrier").value
          if (number=="") {
    		  alert("please enter phone number, it should be 10 numbers long")
    		return false;
    	  }
      else function join(number,carrier) {
    	  return number + carrier;
    	  return true;
    	  
      }
         var myresult = number.concat("carrier");
    	 document.write("myresult");
    	 return myresult;
    }
    </script>
    </head>
    
      <body>
    
        <form action="" method="post" id="subscribeForm" >Phone number:<input name="number"  type="text" />
    		<select onchange="validate(number)" id="carrier">
    			<option id="verizon"value="@vtext.com">verizon</option>
    			<option id="att" value="@txt.att.net">att</option>
    		</select>
    
    
    	<input type="submit" onclick="formsendscript.php" />
    	</form>
    </body>
    </html>
    Thank you for the help!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,211
    Thanks
    23
    Thanked 605 Times in 604 Posts
    A form goes to url supplied by the action attribute. Don't put it in the submit button.
    This
    <select onchange="validate(number)" id="carrier">
    calls a function and passes one parameter. Your function
    function validate(number,carrier) {
    is asking for two.
    But you defeat that by getting them in the function, so why ask for them?
    New programming rule for you. Always use a ';' at the end of a JS line.
    This threw me:
    }else function join(number,carrier) {
    return number + carrier;
    return true;
    You can't return twice. return true; never executes.

    To call JS to validate before submittion:
    <form id="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
    First name: <input type="text" name="fname">
    <input type="submit" value="Submit">
    </form>
    Although you have to check(validate) for more than what I show, this should give you a start:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Subscribe Page</title>
    <script type="text/javascript">
    function validateForm() {
    	var number = document.getElementById("number").value;
    	var e = document.getElementById("carrier");
    	var carry = e.options[e.selectedIndex].value;
    
    	if (number == "") {
    		alert("please enter phone number, it should be 10 numbers long")
    		return false;
    	}
    	if(carry == 'none'){
    		alert("please select a carrier");
    		return false;
    	}
    }
    </script>
    </head>
    
    <body>
    <form action="formsendscript.php" method="post" id="subscribeForm" onsubmit="return validateForm();" >
    	Phone number:<input name="number" id="number"  type="text" />
    	<select onchange="validate(number)" id="carrier">
    		<option value="none">select carrier</option>
    		<option id="verizon" value="@vtext.com">verizon</option>
    		<option id="att" value="@txt.att.net">att</option>
    	</select>
    	<input type="submit" value="Submit" />
    </form>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post

    This threw me:
    Code:
    }else function join(number,carrier) {
    return number + carrier;
    return true;
    You can't return twice. return true; never executes.
    I thought since I put in a return false statement I have to clarify what should happen upon successful validation so the function knows the difference.

    Does This look better?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Subscribe Page</title>
    <script type="text/javascript"> 
    	function validate(number,carrier) {
    		var number = document.getElementById("number").value;
    		var carrier = document.getElementById("carrier").value;
    		var combined = carrier.options[carrier.selectedIndex].value;
          		if (number=="") {
    		  		alert("please enter phone number, it should be 10 numbers long");
    				return false;
    		
    			if (combined =="none") {
    				alert("please select your carrier");
    				return false;
    	  }
    			}
         var myResult = CombinedNumber = number + carrier;
    	 document.getElementById("txtDebug").innerHTML (myResult);
    	 document.write(myResult);
    	 return myResult;
    }
    </script>
    </head>
    
      <body>
    	<div id="txtDebug">
        <form action="formsendscript.php" method="post" id="subscribeForm" >Phone number:<input name="number" "onsubmit="return validateForm();" type="text" >
    		<select onchange="validate(number)" id="carrier">
    			<option id="verizon"value="@vtext.com">verizon</option>
    			<option id="att" value="@txt.att.net">att</option>
    		</select>
    
    	<input type="submit" value="submit"/>
    	</form>
        </div>
        
    </body>
    </html>

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Don't use document.write after the document has loaded as it will overwrite the entire page including the script that issued the document.write itself.

  • #5
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    so then what should i do instead to output the address to the php file to be sent?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •