I'm using Bootstrap theme and my form is this:
<form class="navbar-form" role="search" method="get" action="<?=$domain?>search" onsubmit="DoSubmit();">
<div class="input-group">
<input type="text" class="form-control input" placeholder="Search" name="q">
<div class="input-group-btn">
<button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
The original page where is placed is
http://www.domain.com/toys/search/Electronics for Kids/
when i search into form "test" and press enter, it sends me to
http://www.domain.com/toys/search/?q=test
With what should i replace the code to send me to:
http://www.domain.com/toys/search/test
Thanks in advance!
I assume you use JQuery if you use bootstrap.
So do following:
HTML:
<form class="navbar-form" role="search" method="get" action="<?=$domain?>search" id="searchFrom">
<div class="input-group">
<input type="text" id="searchField" class="form-control input" placeholder="Search" name="q">
<div class="input-group-btn">
<button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
JS:
$('body').on('submit','#searchFrom', function(e) {
e.preventDefault();
location.href = $(this).attr('action')+'/'+encodeURIComponent($('#searchField').val());
});
Related
I have this form
<div class="row">
<div class="col-lg-8 offset-2">
<form class="form-signin" method="POST">
{{ csrf_field() }}
<div class="form-label-group mt-1">
<label class="text-dark-orange" for="name">Naam</label>
<input type="text" id="name" name="name" class="form-control sentje-inputfield-payment" placeholder="Vul hier uw naam in" required>
</div>
<div class="form-label-group mt-1">
<label class="text-dark-orange" for="note">Notitie</label>
<textarea type="text" id="note" name="note" class="form-control sentje-inputfield-payment" placeholder="Vul hier eventueel een notitie in"></textarea>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-8 offset-2">
<button type="submit" class="btn btn-block btn-lg sentje-button">Betalen</button>
</form>
</div>
</div>
When I click the button it sends the $paymentrequest with it. (I already sent that parameter to the view) How would I also pass on the data that has been putted in the form?
Give your form an ID and make the action that of the <a> URL:
<form action="{{ route('paymentrequest.preparePayment', [$paymentrequest->unique_link, $paymentrequest]) }}" id="my-form" class="form-signin" method="POST">
Change your <a> to just button with the type="submit" and a form="<form-id>"
<button type="submit" form="my-form" class="btn btn-block btn-lg sentje-button">Betalen</button>
Using the form property allows you to close your form tag and keep the button outside and allows you to still submit it and keep your code neater.
I am a bit new to PHP and I'm having a bit of difficulties here and there. I am developing a form and wish to display an error box if any of the fields are empty when the 'Submit' Button is pressed. I've tried the following code but the echo is still not appearing. Any suggestions ?
Form Code:
<div style="padding-top:40px">
<div style="text-center; padding-right:25%; padding-left:25%">
<div class="form-area">
<form role="form" method="$_POST" action="searchEmployee.php">
<br style="clear:both">
<h3 style="margin-bottom:25px; text-align: center;">Visitor Form</h3>
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
</div>
<div class="form-group">
<label>Surname:</label>
<input type="text" class="form-control" id="surname" name="surname" placeholder="Surname" required>
</div>
<div class="form-group">
<label>ID Card:</label>
<input type="text" class="form-control" id="idCard" name="idCard" placeholder="ID Card No" required>
</div>
<div class="form-group">
<label>Visitor Card Number:</label>
<input type="text" class="form-control" id="cardNumber" name="cardNumber" placeholder="Card No" required>
</div>
<div class="form-group">
<intput type="button" id="submit" name="submit" class="btn btn-primary pull-right">Sign In Visitor</button>
</div>
</form>
</div>
</div>
</div>
PHP Code:
<?php
if (isset($_POST['submit'])) {
$required = array('name', 'surname', 'ID', 'visitorCard');
// Loop over field names, make sure each one exists and is not empty
$error = false;
foreach($required as $field) {
if (empty($_POST[$field])) {
$error = true;
}
}
if ($error) {
echo "All fields are required.";
}
}
?>
You are using method as $_POST in your form attribute,
It should be only POST.
So, replace your form line with,
<form role="form" method="POST" action="searchEmployee.php">
and also, change Submit button line to,
<input type="submit" name="submit" value="Sign In Visitor" class="btn btn-primary pull-right" />
Here are few mistakes:
You are using method as $_POST in your form attribute, It should be only POST.
Your form will not submit because your button is not a submit type. it should
<input type="submit" id="submit" name="submit" class="btn btn-primary pull-right" value="Sign In Visitor" />
Or
<button type="submit" id="submit" name="submit" class="btn btn-primary pull-right">Sign In Visitor</button>
You need to make 2 change as below
Change button type like this
<input type="submit" id="submit" name="submit" class="btn btn-primary pull-right" value="Sign In Visitor">
Change Form method
<form role="form" method="POST" action="searchEmployee.php">
Change this
<intput type="button" id="submit" name="submit" class="btn btn-primary pull-right">Sign In Visitor</button>
To
<input type="button" id="submit" name="submit" value="submit" class="btn btn-primary pull-right" />Sign In Visitor
and Also
this
<form role="form" method="$_POST" action="searchEmployee.php">
To
<form role="form" method="POST" action="searchEmployee.php">
How will you get POST['submit'] value when you have not even set, that means your if code won't execute it and so it won't echo or alert it.
For Best practice of debugging always try to do this whenever such instances occurs while coding.
print_r($_POST);
This will show you an array of POST variables
change $_POST to POST and put <input type="submit" instead of <input type = "button"
<div style="padding-top:40px">
<div style="text-center; padding-right:25%; padding-left:25%">
<div class="form-area">
<form role="form" method="post" action="searchEmployee.php"> <br style="clear:both"> <h3 style="margin-bottom:25px; text-align: center;">Visitor Form</h3> <div class="form-group"> <label>Name:</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required> </div>
<div class="form-group"> <label>Surname:</label>
<input type="text" class="form-control" id="surname" name="surname" placeholder="Surname" required> </div> <div class="form-group"> <label>ID Card:</label>
<input type="text" class="form-control" id="idCard" name="idCard" placeholder="ID Card No" required>
</div>
<div class="form-group">
<label>Visitor Card Number:</label> <input type="text" class="form-control" id="cardNumber" name="cardNumber" placeholder="Card No" required>
</div> <div class="form-group">
<input type="submit" id="submit" name="submit" class="btn btn-primary pull-right" value="Sign In Visitor">
</div> </form> </div>
</div> </div>
Php Code:::searchEmployee.php
<?php if (isset($_POST['submit'])) { $required = array('name', 'surname', 'idCard', 'cardNumber');
// Loop over field names, make sure each one exists and is not empty
$error = false;
foreach($required as $field) { if (!isset($_POST[$field])) {
$error = true;
} }
if ($error) {
echo "All fields are required."; } }
?>
First think change button type="submit".
Second think change PHP array
$required = array('name', 'surname', 'idCard', 'cardNumber');
I have two forms in my webpage, one with a field and a button and the other with two fields and a button.
I have a hard time checking which form's button is pressed, any advice is welcome on how to handle this.
<form class="form-inline" action="somewhere.php" method="post">
<div class="form-group">
<label for="date">Date:</label>
<input type="text" class="form-control" name="date" id="date" placeholder="abc">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<form class="form-inline" action="somewhere.php" method="post">
<div class="form-group">
<label for="date1">Date 1:</label>
<input type="text" class="form-control" name="date1" id="date1" placeholder="abc>
</div>
<div class="form-group">
<label for="date2">Date 2:</label>
<input type="text" class="form-control" name="date2" id="date2" placeholder="abc">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
And what is supposed to check what button is pressed.
$date = $_POST['date'];
$date1 = $_POST['date1'];
$date2 = $_POST['date2'];
if (!empty(date)) {
//do something
}
if (!empty($date1) && !empty($date2)) {
//do something else
}
First give name attribute in button.
<button type="submit" name="button1" class="btn btn-default">Submit</button>
<button type="submit" name="button2" class="btn btn-default">Submit</button>
now php side check which button is pressed:
if(isset($_POST['button1']){
//Do something.
}
else if(isset($_POST['button2'])
{
//Do something.
}
HTML
<button type="submit" name="btn1" class="btn btn-default">Submit</button>
<button type="submit" name="btn2" class="btn btn-default">Submit</button>
PHP
if(isset($_POST['btn1']){
//put code here.
}else{
//put code here.
}
Does anybody know why this piece of code is not posting?
<form class="form-horizontal" action="./admin/addImages.php" method='post'>
<div class="form-group">
<label for="slika1" class="col-sm-2 control-label">Image</label>
<div class="col-sm-9">
<input id="slika1" name="slika1" type="text" class="form-control" placeholder="Image URL">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button name='saveForm' type="submit" class="btn btn-success">Add image</button>
</div>
</div>
</form>
I also have this php code which should get the posted input, but its not working:
<?php if (isset($_POST['saveForm'])) {
$img = $_POST['slika1'];
echo "$img";
} else {
echo "nothing posted";
}
?>
Any help is much appreciated.
Your URL has a period, not sure if this would cause it not to post, but try without.
action="/admin/addImages.php"
replace $_POST['saveForm'] with $_POST['slika1']
or another alternative can be.
You replace
<button name="saveForm" type="submit" class="btn btn-success">Add image</button>
with
<input name="saveForm" type="submit" class="btn btn-success" value="Add Image">
I have tried to post on same page and its working fine and i got data.
<form class="form-horizontal" action="" method='post'>
<div class="form-group">
<label for="slika1" class="col-sm-2 control-label">Image</label>
<div class="col-sm-9">
<input id="slika1" name="slika1" type="text" class="form-control" placeholder="Image URL">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button name='saveForm' type="submit" class="btn btn-success">Add image</button>
</div>
</div>
</form>
<?php if (isset($_POST['saveForm'])) {
$img = $_POST['slika1'];
echo "$img";
} else {
echo "nothing posted";
}
?>
I have entered "www.google.com".
Output
www.google.com
TESTED As it is, it should work. The problem has to be somewhere else. Maybe the image name that you are posting is empty.
I want to use a button group in an HTML form rather than for example check boxes or radios.
I am using this code:
<form class="form-horizontal" role="form" action="client/index" method="post">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="nickname">Nickname</label>
<div class="col-sm-10">
<input id="nickname" name="nickname" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="gender">Gender</label>
<div class="col-sm-10">
<div class="btn-group">
<button type="button" class="btn btn-default" value="Female" name="username">Female</button>
<button type="button" class="btn btn-default" value="Male" name="username">Male</button>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-sm-2 control-label" for="button"></label>
<div class="col-sm-offset-2 col-sm-10">
<button id="button" class="btn btn-lg btn-primary" type="submit">Enter</button>
</div>
</div>
</fieldset>
</form>
but <?php echo $_POST['username']; ?> is null.
What am I doing wrong?
A <button> is not an <input>, so you can't send that button data to the server, unless you use something like JavaScript to have its value copied into a <input type="hidden">, or submit the form via Ajax and pull the value on submit.
The only button value that is included in the form is the value of the button that was used to submit the form.
If you don't use those buttons to submit the form, you need to include the value in the form in a different way, for example using Javascript to put the value in a hidden field when then button is clicked:
<input type="hidden" name="username" id="username">
Then:
<button type="button" class="btn btn-default" value="Female" onclick="document.getElementById('username').value = this.value;">Female</button>
<button type="button" class="btn btn-default" value="Male" onclick="document.getElementById('username').value = this.value;">Male</button>
You still have the usability problem, though. The button might have focus right after you clicked it, but if the user does anything else in the form the selection is not visible. If you want to use buttons that way you might consider changing the apperance of the selected button.
It's a BAD idea. I repeat a bad idea, but it can be done with javascript and a hidden form field. A rough version:
<input type="hidden" id="username" name="username" />
<div class="btn-group">
<button type="button" class="btn btn-default" value="female" name="btnUsername"
onClick="document.getElementByID('username').value='Female';">Female</button>
<button type="button" class="btn btn-default" value="male"
onClick="document.getElementByID('username').value='Male';"
name="username">Male</button>
</div>
Why is it a BAD IDEA? Because it breaks the normal user expectation of buttons, provides no feed back on what has been selected and has no obvious way of undoing the selection. Radio buttons or check boxes do this so much better. If you don't like the way they look find one of the many ways of improving their look on the internet.
Button types as button will not work with a POST method, you need to use a submit type.
What I changed:
<button type="button" to <button type="submit" and action="" for testing purposes.
PHP
<?php
if($_SERVER['REQUEST_METHOD'] == "POST"){
$gender = $_POST['username'];
echo $gender;
}
?>
<form class="form-horizontal" role="form" action="" method="post">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="nickname">Nickname</label>
<div class="col-sm-10">
<input id="nickname" name="nickname" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="gender">Gender</label>
<div class="col-sm-10">
<div class="btn-group">
<button type="submit" class="btn btn-default" value="Female" name="username">Female</button>
<button type="submit" class="btn btn-default" value="Male" name="username">Male</button>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-sm-2 control-label" for="button"></label>
<div class="col-sm-offset-2 col-sm-10">
<button id="button" class="btn btn-lg btn-primary" type="submit">Enter</button>
</div>
</div>
</fieldset>
</form>
<button type="button" is used in conjunction with JS.
Plus, you haven't provided any PHP in your question besides
<?php echo $_POST['username']; ?>
Answer
It's possible, in pure HTML like so:
<div class="form-group">
<label class="col-sm-2 control-label" for="gender">Gender</label>
<div class="col-sm-10">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-lg">
<input type="radio" name="username" value="Female" id="username"> <i class="fa fa-female"></i> Female
</label>
<label class="btn btn-default btn-lg">
<input type="radio" name="username" value="Male" id="username"> <i class="fa fa-male"></i> Male
</label>
</div>
</div>
</div>