Submit to same page with an anchor - php

I am trying to understand how forms work , so far I understood that I could submit the form and refresh to the same page through
> action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
and then catch the errors or not have blank inputs.
However, let's say I have anchors in the page (sections in other words like #ContactUs) how could I refresh the page using action to get to that specific place instead of going back to top of page?
Thanks for all in advance
Here is part of the code:
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<h2>SEND US A MESSAGE!</h2>
<span>We'd be happy to hear from you.</span>
<input name="contactname" placeholder="Name" type="text" value="<?php echo $contactname;?>"/> <span class="error"> <?php echo $contactnameErr;?></span>
<input name="contactemail" placeholder="Email" type="text" value="<?php echo $contactemail;?>" /><span class="error"> <?php echo $contactemailErr;?></span>
<input name="contactphone" placeholder="Phone #" type="text" value="<?php echo $contactphone;?>" /><span class="error"> <?php echo $contactphoneErr;?></span>
<input name="contactsubject" placeholder="Subject" type="text" value="<?php echo $contactsubject;?>" /><span class="error"> <?php echo $contactsubjectErr;?></span>
<textarea name="contactmessage" placeholder="Message"><?php echo $contactmessage;?></textarea><span class="error"> <?php echo $contactmessageErr;?></span>
<input type="submit" name="submit" value="Send" class="contact-button" />
</form>

You should have a validation for it for example
<?php
if(isset($_POST['submit'])){
//then do something
header("Location: #contactus");
}
?>
So this way even if you load, it does not give you empty and does not ask you to resubmit

You can Use jQuery as i given below
<?php
if(isset($_POST['submit']))
{
//
//sql query and display
//
?>
<script>
$(function() {
$('html, body').animate({
scrollTop: $("#contactus").offset().top
}, 2000);
});
</script>
<?php
}
?>

Related

I could not display dynamic input fields with values when the page loads?

Here is my php code:
<?php
try{
//Need to make a connection
$con=new PDO("mysql:host=localhost;dbname=courseraassignment","root","");
$statementUpdate=$con->prepare("select * from position
where profile_id=:profile_id");
$statementUpdate->execute(array(
':profile_id'=>$_REQUEST['profile_id']
));
foreach($statementUpdate as $row){
echo $row['year'];
echo $row['description'];
echo "<br>";
}
}catch(PDOException $e){
echo "error".$e->getMessage();
}
?>
From this PHP code, I wanted to achieve data including the year and description of the position table from the database.
Here is my complete html code:
<div class="container">
<h1>Ashiful Islam Prince's Resume Registry</h1>
<h1>Editing Profile for UMSI</h1>
<?php
if(isset($_SESSION['profile_error'])) {
$error = $_SESSION['profile_error'];
unset($_SESSION["profile_error"]);
echo '<span class="text-danger">';
echo $error;
echo '</span>';
}
?>
<form method="post">
<p>First Name:
<input type="text" name="first_name" value="<?php
echo $firstName;
?>"
></p><br>
<p>Last Name:
<input type="text" name="last_name" value="<?php
echo $lastName;
?>"</p>
<p>Email:
<input type="text" name="email" value="<?php
echo $Email;
?>"</p><br>
<span class="text-danger">
<?php
if(isset($email_sign_error))
echo $email_sign_error;
?>
</span>
<p>Headline:<br/>
<input type="text" name="headline" value="<?php
echo $Headline;
?>"</p>
<p>Summary:<br/>
<textarea name="summary" rows="8" cols="80">
<?php
echo $Summary;
?>
</textarea>
<p>Position : <input type="button" class="add_position" id="add_position"
name="addPosition" value="+">
<div class="position_fields" id="position_fields">
</div>
<p>
<input type="submit" value="Save" name="btn" class="btn btn-primary">
<input type="submit" name="cancel" value="Cancel">
</p>
</form>
</div>
</div>
</div>
Here is the part of code from above:
<div class="position_fields" id="position_fields">
</div>
In this part, I want to show these fetched values(The year and the description).
Here is my JQUERY code:
<script type="text/javascript">
$(document).ready(function(){
var countPos=0;
var add_button=$('#add_position');
var wrapper=$('#position_fields');
window.console && console.log('Document ready called');
//When the user clicks on the add button then It inserts these input fields
function addField(event){
if ( countPos >=9 ) {
alert("Maximum of nine position entries exceeded");
return;
}
countPos++;
window.console && console.log("Adding position "+countPos);
$(wrapper).append(
'<div id="position'+countPos+'"> \
<p>Year: <input type="text" name="year'+countPos+'" value="" /> \
<input type="button" value="-" \
onclick="$(\'#position'+countPos+'\').remove();return false;"></p> \
<textarea name="desc'+countPos+'" rows="8" cols="80"></textarea>\
</div>');
}
$(add_button).click(function(event){
addField();
});
addField();
});
</script>
This code is developed for handling the dynamic input field issues. When the user clicks to the add button then dynamic input fields will be displayed and these fields will be shown at the time of page loads as well.
I want to achieve:
Everything will be done as same as it is. But when the page loads these dynamic input fields will be displayed with values. How can I achieve my goal?

Ajax not displaying validation messages

I have got a PHP contact form where I'm trying to implement Ajax to it to make it more user friendly because the contact form is a pop-up form using javascript/jQuery, so everytime the form is submitted it refreshes the page and you have to go back in the form to view the validation message.
Could you check what am I missing here please? I've been on it for sometime now and it still doesn't work. Please let me know if you want me to add the PHP script.
Ajax code:
jQuery(document).ready(function ($) {
$("#ajax-contact-form").submit(function () {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "demoform.php",
data: str,
success: function (msg) {
if (msg == 'OK') {
result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';
$("#fields").hide();
} else {
result = msg;
}
$("#note").html(result);
}
});
return false;
});
});
HTML FORM
<center>
<p>Please complete the form below <br />to request a <br/> <span id="free_demo">FREE DEMO</span></p>
<div id="note"></div>
<div id="fields">
<form id="ajax-contact-form" enctype="multipart/form-data">
<div><input type="text" placeholder="Name" name="fullname" id="vpbfullname" value="<?php echo strip_tags($_POST["fullname"]); ?>" class="vpb_input_fields"> <?php echo $submission_status1; ?></div>
<div><input type="text" placeholder="E-Mail" name="email" id="email" value="<?php echo strip_tags($_POST["email"]); ?>" class="vpb_input_fields"><?php echo $submission_status2; ?></div>
<div><input type="text" placeholder="Company" name="company" id="company" value="<?php echo strip_tags($_POST["company"]); ?>" class="vpb_input_fields"><?php echo $submission_status3; ?></div>
<div><input type="text" placeholder="Telephone" name="phone" id="telephone" value="<?php echo strip_tags($_POST["phone"]); ?>" class="vpb_input_fields"><?php echo $submission_status4; ?></div>
<div class="vpb_captcha_wrappers"><input type="text" placeholder="Security Code" id="vpb_captcha_code" name="vpb_captcha_code" class="vpb_input_fields"> </div>
<br/><br/><br/>
Refresh Security Code</font>
<br/><br/>
<div class="vpb_captcha_wrapper"><img src="vasplusCaptcha.php?rand=<?php echo rand(); ?>" id='captchaimg' ></div><br clear="all"><br/>
<br clear="all">
<div><?php echo $submission_status; ?></div><!-- Display success or error messages -->
<div> </div>
<input type="hidden" id="submitted" name="submitted" value="1">
<input type="submit" class="vpb_general_button" value="Submit"></form> </div>
<br clear="all">
</center>
Any help would be great.. Thanks
Use preventDefault();
$("#ajax-contact-form").submit(function (e) {
e.preventDefault();
//....
};
This is preventing the form submit, but ajax call will happens.
you have to write onsubmit="return false" in your form tag like

Scroll down to contact form at bottom of page when form is submitted with errors

What I'm trying to accomplish is when a user tries to submit the form with errors and the error messages are added/page reloads I need the page to automatically scroll down to the bottom of the page to the contact form location.
I currently have the form within my footer.php and I'm including it in on each page like this: <?php include('includes/footer.php') ?>
here is my html for the form:
<form method="post" action="#">
<input name="name" placeholder="Name*" type="text" value="<?php echo htmlspecialchars($name);?>">
<span class="error"><?php echo $nameErr;?></span>
<input name="email" placeholder="Email*" type="email" value="<?php echo htmlspecialchars($email);?>">
<span class="error"><?php echo $emailErr;?></span>
<input name="phone" placeholder="Phone #" type="tel" />
<textarea name="message" placeholder="Message*"><?php echo $message;?></textarea>
<span class="error"><?php echo $messageErr;?></span>
<input id="submit" type="submit" name="submit" value="Send" />
</form>
EDIT -
Based on the answer below this is what fixed my problem...
<form method="post" action="#footer">
//everything here
</form>
While redirect to the page with error msg, add #id_of_form_or_div in your url.
Add id to your form or div which containing the form. If you add their id in url, then page will move to that particular section.
For example, You have id for footer as footer. Then you url will be
www.domain.com/index.php#footer
You can also print a javascript variable to know if there are errors, then with javascript scroll to the form.
something like:
var erros = "<?php echo $errors ?>";
<script>
if (errors) {
document.getElementById("form_id").scrollIntoView();
}
</script>

Keep form data inside the field after submission using php

I am using below code for a html form.(it has two forms) I am able to keep the textarea field after the first and second form submission. but issue I am facing here is the dropdown menu selection.
Code:
<html>
<body>
<div class="emcsaninfo-symcli-main">
<form id="form1" name="form1" action=" " method="post" >
<div class="input">Your Name</div>
<div class="response"><span><input class="textbox" id="myname" name="myname" type="text" value="<?php if(isset($_POST['myname'])) { echo htmlentities ($_POST['myname']); }?>" /></span> </div>
<div class="input">Your Place</div>
<div class="response"><span><input class="textbox" id="myplace" name="myplace" type="text" value="<?php if(isset($_POST['myplace'])) { echo htmlentities ($_POST['myplace']); }?>" /></span> </div>
<div class="input-quest">Graduation Status</div>
<div class="input-resp"><select id="graduation" name="graduation" OnChange="CMT();"><option class="dropdown-options">Graduate</option><option class="dropdown-options">Non Graduate</option></select></div>
<div class="submit">
<input id="first_submit" type="submit" name="first_submit" value="first_submit" />
</div>
</form>
<?php
if(!empty($_POST['myname']) && !empty($_POST['myplace']) || !empty($_POST['output_textarea'] ) )
{
$myname = $_POST['myname'];
$myplace = $_POST['myplace'];
$graduation = $_POST['graduation'];
?>
<form id="form2" name="form2" action=" " method="post" >
<textarea onclick="this.select()" name="output_textarea" id="output_textarea" cols="100" rows="25" readonly value="<?php if(isset($_POST['output_textarea'])) { echo htmlentities ($_POST['output_textarea']); }?>">
<?php
echo "My name is $myname and I am from $myplace, and I am $graduation";
?>
</textarea>
<input id="submit1" type="submit" name="name_field" value="submit1" />
<input id="submit2" type="submit" name="place_field" value="submit2" />
<input id="myname_hidden" name="myname" type="hidden" value="<?php if(isset($_POST['myname'])) { echo htmlentities ($_POST['myname']); }?>"/>
<input id="myplace_hidden" name="myplace" type="hidden" value="<?php if(isset($_POST['myplace'])) { echo htmlentities ($_POST['myplace']); }?>" />
<input id="graduation_hidden" name="graduation" type="hidden" value="<?php if(isset($_POST['graduation'])) { $graduation = $_POST['graduation']; }?>" />
</form>
<?php
function name()
{
echo $_POST["output_textarea"];
}
if(isset($_POST['name_field']))
{
name();
}
function place()
{
echo $_POST["output_textarea"];
}
if(isset($_POST['place_field']))
{
place();
}
}
?>
</div>
</html>
</body>
For example if I put name = John, place : UK and selecting graduation status as graduate, it will will give me first form output as in my output textarea
My name is John and I am from UK, and I am Graduate
I have two seperate submit button for second form, using that I am doing some other function with help of the output textarea
If I press any of the second button,I m able to keep entries my name and place area, but it not keeping the dropdown selection. so it will only display like after submitting submit1 or submit2
My name is John and I am from UK, and I am
Here,
How can I keep the the dropdown selection also with the output text area
Will I able to show only the output_textarea content after second form submission without keeping the first form data ?
PHP FIDDLE
You have an error in logic in the hidden input for the "graduate" element.
This is what you have at lines 53-55. Line 55 doesn't have an echo instead it has an $graduation = $_POST['graduation']; which won't help you:
<input id="myname_hidden" name="myname" type="hidden" value="<?php if(isset($_POST['myname'])) { echo htmlentities ($_POST['myname']); }?>"/>
<input id="myplace_hidden" name="myplace" type="hidden" value="<?php if(isset($_POST['myplace'])) { echo htmlentities ($_POST['myplace']); }?>" />
<input id="graduation_hidden" name="graduation" type="hidden" value="<?php if(isset($_POST['graduation'])) { $graduation = $_POST['graduation']; }?>" />
instead of that, this code should work:
<input id="myname_hidden" name="myname" type="hidden" value="<?php if(isset($_POST['myname'])) { echo htmlentities ($_POST['myname']); }?>"/>
<input id="myplace_hidden" name="myplace" type="hidden" value="<?php if(isset($_POST['myplace'])) { echo htmlentities ($_POST['myplace']); }?>" />
<input id="graduation_hidden" name="graduation" type="hidden" value="<?php if(isset($_POST['graduation'])) { echo htmlentities($_POST['graduation']); }?>" />

HTML & PHP - How to make multiple forms submittable

I have the following code which loops through an array to create forms that are filled with values (which the user will be able to edit) on a single page. There are as many forms as there are loops in the array, which is always changing.
<body>
<div id="main">
<?php
foreach($articles as $item) { ?>
<div id='container'>
<form>
Title: <input type="text" name="title" size="80" value="<?php echo $item[0]; ?>">
<br>
URL: <input type="text" name="url" size="80" value="<?php echo $item[1]; ?>">
<br>
End Date: <input type="text" name="endDate" value="<?php echo substr($item[7], 14, strpos($item[7], '#') - strlen($item[7])); ?>">
<br>
<?php
if (substr($item[8], 0, 2) === 'Su'){
} else {
?>
Start Date: <input type="text" name="startDate" value="<?php echo substr($item[8], 7, 9); ?>">
<?php } ?>
</form>
</div>
<?php } ?>
</div>
</body>
Now, I want the user to have a single submit button at the bottom of the page which will submit ALL the forms on the page to MySQL database. The problem is I don't know how to do that.
I know the submit button takes the format of
<input type="submit" value="Submit">
I am assuming I need to give each form in the loop a unique name but from there I am at a loss as to what my next step should be to actually send and receive the information from these multiple forms.
Any help would be appreciated. Thanks.
You can't submit more than one form at once. What is wrong with putting all sets of <input>s into a single form?:
<body>
<div id="main">
<form>
<?php
$inpCnt = 0;
foreach($articles as $item) {
$inpCnt++; ?>
<div id='container'>
Title: <input type="text" name="title_<?php echo $inpCnt; ?>" size="80" value="<?php echo $item[0]; ?>">
<br>
URL: <input type="text" name="url_<?php echo $inpCnt; ?>" size="80" value="<?php echo $item[1]; ?>">
<br>
End Date: <input type="text" name="endDate_<?php echo $inpCnt; ?>" value="<?php echo substr($item[7], 14, strpos($item[7], '#') - strlen($item[7])); ?>">
<br>
<?php
if (substr($item[8], 0, 2) === 'Su'){
} else {
?>
Start Date: <input type="text" name="startDate_<?php echo $inpCnt; ?>" value="<?php echo substr($item[8], 7, 9); ?>">
<?php } ?>
</div>
<?php } ?>
</form>
</div>
</body>
You need to be able to define each of these inputs aswel. So I've used the loop to give each one a unique name.

Categories