Member Avatar for cloud09

I have a form at the bottom my website's homepage. I was wondering if there was a way, when you clicked the submit button, especially if there were errors with the form, to send you directly to the bottom of the page with either, javascript, php, or html. The code is not fully finished (esp the form validation)

<?php
       	       if(!isset($_POST['submit'])) {
       	       
       	       $name = "Name";
       	       }
       	       ?>
       	       <td class="form">
       	       <?php
           	   
           	   	 if (isset($_POST['submit'])) {
           	   	 
           	   	 $error = '';
           	   	 
           	   	 if(trim($_POST['Name'] == '')) {
           	   	 	$error .="Please enter a name.</br>";}
           	   	 	
           	   	 if($error == '') {
           	   	            	   	 
           	   	 $name = $_POST['Name'];
           	     $email = $_POST['Email'];
           	     $company = $_POST['Company'];
           	     $city = $_POST['City'];
           	     $message = $_POST['Message'];
           	     
				 $headers = "$name\n $email\n $company\n $city\n";
           	     
           	     mail('a****@s**************.n**', 'form', $message, $headers);
           	     
           	     echo 'Your form has been submitted.';
           	       }
           	       
           	       else {
           	       
           	       $name = 'Name';
           	       
           	       	echo $error;
           	       	}
           	     }
           	   ?>
     	       
       	       <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" name="form">
       		    <input name="Name" type="text" class="textfield"
       		  	 value="<?php echo $name; ?>" 
       		  	 	 onfocus="if (this.value == 'Name') {this.value=''}"
		      	 	 onblur="if (this.value == '') {this.value='Name'}" />&nbsp; &nbsp; 
		      <input name="Email" type="text" class="textfield"
		      	 value="E-mail" 
		      	 	 onfocus="if (this.value == 'E-mail') {this.value=''}"
		      	 	 onblur="if (this.value == '') {this.value='E-mail'}"/><br/><br/>
              <input name="Company" type="text" class="textfield"
              	 value="Company" 
              	 	 onfocus="if (this.value == 'Company') {this.value=''}"
		      	 	 onblur="if (this.value == '') {this.value='Company'}"/>&nbsp; &nbsp; 
		      <input name="City" id="City" type="text" class="textfield"
		      	 value="City (only for quote)"
		      	 	 onfocus="if (this.value == 'City (only for quote)') {this.value=''}"
		      	 	 onblur="if (this.value == '') {this.value='City (only for quote)'}" /><br/><br/>
              <textarea name="Message" id="Message" rows="4" class="textarea"
              		 onfocus="if (this.value == 'Message/Project Description') {this.value=''}"
              		 onblur="if (this.value == '') {this.value='Message/Project Description'}"
              >Message/Project Description</textarea><br/><br/>
           	  <input name="submit" type="image" src="Home/Form/Send.png" value="submit"
           	  		 onclick="clearFields() "/>
           	 </form>
  • 2 Contributors
  • 1 Reply
  • 116 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by Lsmjudoka

Dani AI

Generated

asked how to return the user to the bottom (the form) after submit when there are validation errors. was right to suggest client-side checking and anchors — both are useful. Below are two practical, reliable approaches (client-side pre-submit + scrolling, and server-side Post/Redirect/Get) and a quickfix for a PHP validation bug spotted in your snippet.

Use unobtrusive client-side validation to catch errors before the browser leaves the page. Prevent the submit when errors exist, then smoothly bring the first invalid control into view and focus it so the user can correct it:

var form = document.querySelector('form[name="form"]');
form.addEventListener('submit', function(e) {
  var firstInvalid = this.querySelector('.error, :invalid');
  if (firstInvalid) {
    e.preventDefault();
    firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
    firstInvalid.focus();
  }
});

For server-side validation (and to avoid duplicate POSTs), use the Post/Redirect/Get pattern: validate on POST, save errors/old input in the session, then redirect back to the page with a fragment ID. On the GET rebuild the form from session data and optionally run a small on-load script to scroll to the error block. Example server redirect:

// after finding errors
$_SESSION['errors'] = $errors;
$_SESSION['old'] = $_POST;
header('Location: /index.php#contact-form');
exit;

Note and quick fix: your PHP check mixes parentheses — use trim($_POST['Name']) == '' or empty(trim($_POST['Name'])) so you trim the field value, not the boolean result. Also prefer HTML5 placeholder instead of onfocus/onblur hacks, always revalidate server-side, and show errors inline next to the fields so scrolling is effective.

Element scrolling: Element.scrollIntoView. Location header and PRG: Location header, .

Member Avatar for Lsmjudoka

I have a form at the bottom my website's homepage. I was wondering if there was a way, when you clicked the submit button, especially if there were errors with the form, to send you directly to the bottom of the page with either, javascript, php, or html. The code is not fully finished (esp the form validation)

Using JavaScript, you can check the form before the user leaves the page with an "onsubmit" call in the <form> tag. This way if there are errors with the form, the user is notified before he/she actually submits the form.

Ask here: http://www.daniweb.com/forums/forum117.html
I'm sure someone there can help you further.


Alternatively, if you want to send the user to the bottom of the page upon submitting the form(regardless of circumstances), you can create an html anchor and add it to the form submit link. Example:

<a name="page_bottom" /> <!--Put at bottom of page near form-->
<form action="<?php echo $_SERVER['PHP_SELF'] . "#page_bottom"; ?>" >
Edited by Lsmjudoka because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.