html — отправка формы PHP с возможностью переключения вкладки Bootstrap

Question

html — отправка формы PHP с возможностью переключения вкладки Bootstrap

Привет всем,

этот это сайт, который я создаю, используя Функция начальной вкладки Bootstrap обрабатывать контент, который я хочу показать (на правой стороне).
Моя проблема возникает, когда я хочу отправить контактную форму с помощью php, потому что возможные ошибки правильно отображаются на странице контактов, но форма автоматически перенаправляет на домашнюю страницу, так как отсутствует соответствующая ссылка на саму страницу контактов. Вопрос может быть глупым, но я не могу найти способ перенаправления на той же странице контактов, когда я отправляю форму. Любая помощь?

Здесь HTML код:

    <div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h3><a href="#home" data-toggle="tab">MARCELLO GIOVENCO PHOTOGRAPHY</a></h3>
</div>
</div>

<!-- Menu -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">PROJECTS</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#napoli" tabindex="-1" data-toggle="tab">NAPOLI</a></li>
<li><a href="#portraits" tabindex="-1" data-toggle="tab">PORTRAITS</a></li>
</ul>
</li>
<li><a href="#bio" data-toggle="tab">BIO</a></li>
<li><a href="#contact" data-toggle="tab">CONTACT</a></li>
<li><a href="#blablabla" data-toggle="tab">BLABLABLA</a></li>
</ul>
</div>
</div>
<!--  Content -->
<div class="col-sm-9">
<div id="myNavbar" class="tab-content">
<div class="tab-pane fade active in" id="home">
<p>home</p>
</div>
<div class="tab-pane fade" id="napoli">
<p>napoli</p>
</div>
<div class="tab-pane fade" id="portraits">
<p>portraits</p>
</div>
<div class="tab-pane fade" id="bio">
<p>bio</p>
</div>
<div class="tab-pane fade" id="contact">
<?php include('contact.php');?>
</div>
</div>
</div>
</div>
</div>

и это PHP код для contact.php

    <?php
if ($_POST["submit"]) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$human = intval($_POST['human']);
$from = 'www.marcellogiovenco.com';
$to = '[email protected]';
$subject = "$name sent you a message!";

$body = "From: $name\n E-Mail: $email\n Message:\n $message";

// Check if name has been entered
if (!$_POST['name']) {
$errName = 'Please enter your name';
} else {
$name = test_input($_POST["name"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$errName = "Only letters and white space allowed";
}
}// Check if email has been entered and is valid
if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
$errEmail = 'Please enter a valid email address';
}

//Check if message has been entered
if (!$_POST['message']) {
$errMessage = 'Please enter your message';
}
//Check if simple anti-bot test is correct
if ($human !== 5) {
$errHuman = 'Your anti-spam is incorrect';
}

// If there are no errors, send the email
if (!$errName && !$errEmail && !$errMessage && !$errHuman) {
if (mail ($to, $subject, $body, $from)) {
$result='<div class="alert alert-success">Thank You for the message! I will be in touch</div>';
} else {
$result='<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later</div>';
}
}
}

function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>

<form id="myForm" class="form-horizontal" role="form" method="post" action="">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="<?php echo htmlspecialchars($_POST['name']); ?>">
<?php echo "<p class='text-danger'>$errName</p>";?>
</div>
<div class="col-sm-5"></div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="email" name="email" placeholder="[email protected]" value="<?php echo htmlspecialchars($_POST['email']); ?>">
<?php echo "<p class='text-danger'>$errEmail</p>";?>
</div>
<div class="col-sm-5"></div>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-5">
<textarea class="form-control" rows="4" name="message"><?php echo htmlspecialchars($_POST['message']);?></textarea>
<?php echo "<p class='text-danger'>$errMessage</p>";?>
</div>
<div class="col-sm-5"></div>
</div>
<div class="form-group">
<label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
<?php echo "<p class='text-danger'>$errHuman</p>";?>
</div>
<div class="col-sm-5"></div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-2">
<p>All fields are required.</p>
</div>
</div>
<div class="form-group">
<div class="col-sm- col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-2">
<?php echo $result; ?>
</div>
</div>
</form>

0

forms html php tabs twitter-bootstrap

Решение

Другие решения

Используйте contact.php в качестве действия для формы. Затем в конце if перенаправьте пользователя на страницу подтверждения или в форму (в случае ошибок) с помощью функции header ().

0

Вы можете использовать jQuery для отправки формы с помощью ajax.
http://api.jquery.com/jquery.ajax/

$('#myForm').on('submit', function() {
$.ajax({
url: 'some-url',
type: 'post',
dataType: 'json',
data: $('form#myForm').serialize(),
success: function(data) {
// Show success message
}
});
});

0

Источник

Accepted Answer

Из того, что я понимаю, ваша проблема заключается в том, что при нажатии на кнопку «Отправить» перенаправляется на индекс или на первую вкладку. Когда я работал, пока не получил этот скрипт, он перенаправляет меня на вкладку, где находится кнопка отправки, которую я нажал.

$(document).ready(function() { if(location.hash) { $('a[href=' + location.hash + ']').tab('show'); } $(document.body).on("click", "a[data-toggle]", function(event) { location.hash = this.getAttribute("href"); }); }); $(window).on('popstate', function() { var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href"); $('a[href=' + anchor + ']').tab('show'); });

Надеюсь, что это поможет вам.

1