I have question,this is the following code.
<form action="" method="post" id="search">
<div class="row collapse">
<div class="ten columns mobile-three">
<input type="text" size="25" name="search" value="<?php echo $this->search ?>"/>
</div>
<div class="two columns mobile-three">
<input type="submit" name="/search/index/keyword/" value="Search"; ?>" class="button expand postfix" id="search_button"/>
</div>
</div>
</form>
when I click the submit button,the url should be
from id/ to id/search/index/keyword/(here's the search key)
HTML
<form action="" method="post" id="search" name="search" onsubmit="submitForm();">
<div class="row collapse">
<div class="ten columns mobile-three">
<input type="text" size="25" name="search" id="search_value" value="<?php echo $this->search ?>"/>
</div>
<div class="two columns mobile-three">
<input type="hidden" value="/search/index/keyword/" id="search_url"/>
<input type="submit" name="search" class="button expand postfix" id="search_button"/>
</div>
</div>
</form>
JS
<script>
function submitForm()
{
var search_button = document.getElementById('search_url').value;
var search_text = document.getElementById('search_value').value;
document.searchForm.action = search_button + '/' + search_text;
document.searchForm.submit();
return false;
}
</script>
PHP
<?php
if (isset($_POST['search'])) {
// add action code here
}
?>
I'd use a server-side language for that. Make a process page (unless you're familiar with AJAX), get the values by $_POST and make the process page redirect.
I'm pretty sure that it's possible using JavaScript as well, but I'm really bad at it so don't count on my solution.
You can use JS to accomplish your goal.
1) make a function that runs when user clicks submit button.
2) function grabs the word from search box.
3) function changes the "action" attribute on the form element
4) form is submitted
Related
hi can anyone tell me whats problem in this form . its not show varible in url
<form class="navbar-form navbar-left" method="post" action="test.php?q=<?php echo $searchb;?>" role="search" style="padding: 3.5px 90px;">
<div class="form-group">
<input type="text" name="searchb" class="form-control" autocomplete="off" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
php code here
if (isset($_POST['searchb'])) {
$searchb = $_POST['searchb'];
}
when something input in form and action url not show any value
test.php?q=
but we echo variable its show value .
First time that form loaded $_POST['searchb'] is empty so action is equal test.php?q= after load form when you submit form then $_POST['searchb'] to be filled
The Part: action="test.php?q=<?php echo $searchb;?>" is first illogical and most importantly unnecessary since you are POSTing your form. It would have been valid if $searchb was pre-defined. However, since it is a part of the Form; it will always be NULL since it was never declared but expected to be dynamically added on Form-Submit, which wouldn't happen. You do it in one of the 2 ways:
OPTION #1 - PASSING q VIA HIDDEN INPUT:
<!-- YOU DON'T NEED THE echo $searchb PART IN YOUR FORM'S ACTION BECAUSE -->
<!-- THAT VALUE IS NOT PART OF THE ACTION AS IT IS NOT EVEN SET AT ALL -->
<form class="navbar-form navbar-left" method="post" action="test.php" role="search" style="padding: 3.5px 90px;">
<div class="form-group">
<input type="text" name="searchb" class="form-control" autocomplete="off" placeholder="Search" />
<!-- ADD THE q AS HIDDEN INPUT ELEMENT WITH A VALUE -->
<input type="HIDDEN" name="q" value="Some value" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<?php
// INSIDE OF test.php SCRIPT; DO;
if (isset($_POST['searchb'])) {
$searchb = $_POST['searchb'];
}
OPTION #2: USING GET & SETTING Q TO A PRE-DEFINED VALUE
<?php $param = "some-predefined-value"; ?>
<form class="navbar-form navbar-left" method="GET" action="test.php?<?php echo $param;?>" role="search" style="padding: 3.5px 90px;">
<div class="form-group">
<input type="text" name="searchb" class="form-control" autocomplete="off" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<?php
// INSIDE OF test.php SCRIPT; DO;
// BUT REMEMBER TO CHECK INSIDE THE `GET` GLOBAL
if (isset($_GET['searchb'])) {
$searchb = $_GET['searchb'];
}
BETTER OPTION FOR YOUR USE-CASE: USING GET & SETTING Q FROM THE INPUT
<!-- STILL NO NEED FOR SETTING QUERY PARAMETERS MANUALLY-->
<!-- THE GET METHOD WOULD TAKE CARE OF THAT FOR YOU ONCE THE FORM IS SUBMITTED -->
<form class="navbar-form navbar-left" method="GET" action="test.php" role="search" style="padding: 3.5px 90px;">
<div class="form-group">
<!-- NOTICE THAT THE NAME OF THE INPUT FIELD CHANGED TO; q HERE -->
<input type="text" name="q" class="form-control" autocomplete="off" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<?php
// INSIDE OF test.php SCRIPT; DO;
// BUT REMEMBER TO CHECK INSIDE THE `GET` GLOBAL
if (isset($_GET['q'])) {
$searchb = $_GET['q'];
}
I know this question has been asked before, but read through to see why what I'm asking is different.
My first form is like this where newsearch.php is the name of the php file which the form is included in. I want to listen to any POST calls inside this php file since I have my if(isset($_POST code here.
<form action="newsearch.php" method="post">
So, I'm using bootstrap to layout the page, and I have another form I want to include in a <div class="row"> which is inside the form I mentioned before. What I'm asking is, can I add the form html code somewhere else in the php file and call it to appear inside the <div>?
What I want is a way to do this:
<div class="row">
<div class="col-lg-6" align="center">
<h4>Search For Galleries</h4>
<form action="newsearch.php" method="post">
<br>
<input type="text" name="valueToSearch" placeholder="Search"><br><br>
<input type="submit" name="search" value="Search"><br><br>
</div>
<div class="col-lg-6" align="center">
<h4>Create new Gallery</h4>
<!-- HOW CAN I INCLUDE A FORM HERE? -->
</div>
</div>
As you can see, the first form is not closed. That's coz it's closed way below in the file.
My second form is this:
<form action="inserttogal.php" method="post">
Gallery Name: <input type="text" name="gname" /><br><br>
Gallery Type: <input type="text" name="gtype" /><br><br>
<input type="submit" name="newgal"/>
</form>
Instead of using two <form> constructs (and nested, to boot) why not:
(1) Change the forms to ordinary DIVs
(2) Use jQuery to trap a button click
(3) Read the values into variables (this allows you to do any required field validation without negating the form's default action)
(4) Using javascript/jQuery, construct a composite HTML <form> (combining the two forms) in a variable, then
(5) Use jQuery to append() the form to the bottom of the page, and use
(6) $('form').submit() to submit the composite form.
A bit more work, but it will work. Note that Bootstrap uses/requires jQuery, so the library is already loaded. Might as well use it.
Code example:
Obviously, this example is not appropriate for your application, just showing you what you can do and how to get around your <form> problem, via jQuery/javascript.
$('#btnOne').click(function(){
var fn = $('#fn').val();
var ln = $('#ln').val();
var ag = $('#age').val();
if (ln==''){
alert('Please complete all fields');
return false;
}
var myFrm = '\
<form id="myForm" action="postFile.php" method="post">\
<input name="fname" value="' +fn+ '" />\
<input name="lname" value="' +ln+ '" />\
<input name="age" value="' +ag+ '" />\
</form>
';
$('body').append(myFrm);
$('#myForm').submit();
});
#frmOne{}
#frmTwo{background:wheat;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="frmOne">
First Name: <input id="fn" type="text" /><br>
Last Name: <input id="ln" type="text" /><br>
<div id="frmTwo">
Age: <input id="age" type="text" />
</div>
</div>
<button id="btnOne">Form One Clicker</button>
You should also look into AJAX (what it is, why use it -- it's quite simple!) and see if it could be of use. This post contains a link to another post with some simple examples that you should study. I included both posts because each has something you might find informative. Twenty minutes of poring of these examples could save you days of design frustration.
No form can having another form inside, I tried before.
Suggest apply Ajax or XMLHttpRequest (XHR)
<div class="row">
<div class="col-lg-6" align="center">
<h4>Search For Galleries</h4>
<form action="newsearch.php" method="post">
<br>
<input type="text" name="valueToSearch" placeholder="Search"><br><br>
<input type="submit" name="search" value="Search"><br><br>
</div>
<div class="col-lg-6" align="center">
<h4>Create new Gallery</h4>
<a href="#" data-toggle="modal" data-target="#new"><!--bootstrap modal-->
</div>
</form>
<form name="new_form" id="new_form" method="post" action="">
<div class="modal fade" id="new" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog">
<div class="modal-dialog" role="document" >
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span style="font-size:21px;margin:-15px -10px 0 0;display:inline-block" aria-hidden="true">×</span></button>
<h3 style="">create gallery</h3>
<input type="button" name="create" id="create" class="btn btn-default" value="Create Gallery" />
</div>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript">
$(function(){
$("#create").click(function(){
$.ajax({
type: "POST",
url: "new.php",
data: { data:data },
success:
function(){
alert('success');
},
error:
function(){
alert('Error!');
}
});
});
});
</script>
I am wondering if there is a way to show a title box containing a message when you click a button,or as a better example,you have an input,and after php script evalute the value,and it's wrong,a title box will show up , saying "Wrong" ... Any ideas? Just with php if its possible!!
EDIT:
What i am looking for,is not for a simple message like:
echo '<p></p>';
Of course i know how to do that,its basic...
I was just wondering if a TITLE box can show up,like this:
<input type=text title='Wrong'>
but after the value its evaluated...
You could achieve this by setting a GET or POST value with the button:
html:
<form method="post">
<input type="hidden" name="postvalue" value="yes">
</form>
php:
<?php
if(isset($_POST['postvalue'])){
echo "<p>messageboxtoshow</p>";
}
?>
however a solution with javascript would work way better and would look way more userfriendly, and this only works on page refresh.
Try this sample one
<?php
if(isset($_POST['submit'])){
echo "<p> Your message</p>";
}
?>
<form action=<?php $_SERVER['PHP_SELF']?> method="post" >
<input type="submit" name="submit" value="submit">
</form>
Do you mean validation per input field?
You can use JQuery for that.
I made a fiddle to give you a visual idea: http://jsfiddle.net/4b3tzreo/
For example, if this is your form:
<div class="container">
<div class="left">
Username
</div>
<div class="right">
<input type="text" name="username" id="username" />
</div>
</div>
<div class="container">
<div class="left">
Password
</div>
<div class="right">
<input type="password" name="password" id="password" />
</div>
</div>
<div class="container">
<div class="left">
<button id="submit">Submit values</button>
</div>
</div>
You can add a class to it when the input value is empty, like this:
$('#submit').click(function(){
var username = $('#username').val();
var password = $('#password').val()
if(username === '') {
$('#username').addClass('error');
alert('username is not filled');
}
if(password === '') {
$('#password').addClass('error');
alert('password is not filled');
});
I just created a form submit without refreshing using this plugin : http://malsup.github.com/jquery.form.js
The simple example can be seen at
http://jquery.malsup.com/form/
I don't what I was doing, it was worked fine before until I modified something that I don't remember.
When I click SAVE, it should be processed on the background and it should stay on the same page. But now, it doesn't and it redirect me to the action page (process-001.php)
I created another page using the same method, and it works just fine.
Can you see if I'm doing it wrong?
Here is the form :
<div id="submit-form">
<form action="web-block/forms/process-001.php" id="select-block" class="general-form" method="post" enctype="multipart/form-data">
<div class="input-wrap">
<input class="clearme" name="Headline" value="<?php echo $Headline;?>" id="headline"/>
</div>
<div class="input-wrap">
<textarea class="clearme" name="Sub-Headline" id="subheadline"><?php echo $SubHeadline ;?></textarea>
</div>
<label>Bottom Left Image</label>
<div class="up-mask">
<span class="file-wrapper">
<input type="file" name="Pics" class="photo" id="pics" />
<span class="button">
<span class="default-txt">Upload Photo</span>
</span>
</span>
</div><!-- .up-mask -->
<input type="hidden" name="Key" id="Key" value="<?php echo $Key;?>"/>
<input type="submit" class="submit-btn" value="SAVE" />
<span class="save-notice">Your changed has been saved!</span>
</form>
</div>
The Javascript :
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#select-block').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
Don´t know if my english is sufficient to explain this right:
I have made a Form that is needs 4 or 5 pages until final submit comes.
On every change the Post is added to the new page as a hidden field and a new script is called.
<form method="post" action="form4.php">
My problem is i dont want the browser to show the url to the new script and ideally keep it at the origin url.
I dont know the right terms to search on google or here for a solution. Maybe you can give me a hint how to accomplish this?
Another option is to handle the form by the same script in stages.
<form action="formhandler.php" method="post">
<input type="hidden" name="form_stage" value="1" />
....
</form>
and within the formhandler.php:
switch($_POST['form_stage']) {
case 5:
// handle the stage 5 stuff here
break;
case 4:
// handle stage 4 stuff here, output form for stage 5
break;
case 3:
// handle stage 3 stuff here, output form for stage 4
break;
case 2:
// ditto
break;
case 1:
default:
// display initial form here
}
Of course, you don't have to use a switch for this. A long sequence of if/else if works just as well, it comes down to personal preference/code complexity. But this basic workflow allows you to keep the same url and still display multiple different forms without having to resort to AJAX/javascript.
If the action of the form is form4.php, then you can't change which URL the form posts to. However, you can do a redirect immediately after processing the data of the post to the URL you want the user to be at.
Alternately, you can change your form actions so they all post to the same page and just allow for multiple types of posting in your PHP.
You can use Ajax and pass data from form to php script and than load new form. Or you can pass argument(hidden or not) to file:
<form action="form.php?p=1" method="post">
...
</form>
Hidden parameter:
<form action="form.php" method="post">
<input type="hidden" value="4" name="p">
...
</form>
Depending on p value you load proper form and do things with rest of data.
Load your php site inside an iframe within some page.. The url of this page will always remain.
think i found another solution and want to share it:
the solution with the switch and the solution with ajax made me think about how to solve this easier. why not make the form on one page and hide the different parts. what waas before a button to submit the part is now a button to hide previous part and show next.
<script type="text/javascript">
window.addEvent('domready', function()
{
$$('.blau').set('text', 'Erkennen Sie die Heilpflanze?');
$('page_2').slide('hide');
$('page_3').slide('hide');
$('page_4').slide('hide');
$('page_5').slide('hide');
var togglePrefix = 'toggle_', boxPrefix = 'page_', emptyPrefix = '';
$$('.submit_box a').addEvent('click', function(e)
{
e.stop();
var id = $(this.get('id').replace(togglePrefix,emptyPrefix));
var id_new = parseInt($(this).get('id').replace(togglePrefix, emptyPrefix)) + 1;
var next = ('page_'+id_new);
var id_old = $(this.get('id').replace(togglePrefix,boxPrefix));
$(id_old).set('slide', {duration: 'long', transition: 'linear'});
$(id_old).slide('out');
$(next).slide('in');
if (next == 'page_1')
{
}
if (next == 'page_2')
{
}
if (next == 'page_3')
{
}
if (next == 'page_4')
{
$$('.blau').set('text', '....und die letzte ist?');
}
if (next == 'page_5')
{
$$('.blau').set('text', 'Nur noch ein paar Daten:');
}
});
});
</script>
the html:
<form id="gewinnspiel" name="gewinnspiel" method="post" action="<?=$_SERVER[PHP_SELF]; ?>">
<div id="page_1">
<div class="inhalt-gewinn">
<div class="gewinn_bild"></div>
<div class="gewinn_form">
<div class="input_box">
<div><input type="radio" name="frage1" value="Kamille" /><span>Kamille</span></div>
<div><input type="radio" name="frage1" value="Kaktus" /><span>Kaktus</span></div>
<div><input type="radio" name="frage1" value="Krokus" /><span>Krokus</span></div>
</div>
<div class="submit_box"><a id="toggle_1" class="frage">nächste Frage...</a></div>
</div>
<div class="gewinn_werbung"></div>
</div>
</div>
<div id="page_2">
<div class="inhalt-gewinn">
<div class="gewinn_bild"></div>
<div class="gewinn_form">
<div class="input_box">
<div><input type="radio" name="frage2" value="Ringelblume" /><span>Ringelblume</span></div>
<div><input type="radio" name="frage2" value="Rotklee" /><span>Rotklee</span></div>
<div><input type="radio" name="frage2" value="Ringelkraut" /><span>Ringelkraut</span></div>
</div>
<div class="submit_box"><a id="toggle_2" class="frage">nächste Frage...</a></div>
</div>
<div class="gewinn_werbung"></div>
</div>
</div>
<div id="page_3">
<div class="inhalt-gewinn">
<div class="gewinn_bild"></div>
<div class="gewinn_form">
<div class="input_box">
<div><input type="radio" name="frage3" value="Enzian" /><span>Enzian</span></div>
<div><input type="radio" name="frage3" value="Eisenkraut" /><span>Eisenkraut</span></div>
<div><input type="radio" name="frage3" value="Eiche" /><span>Eiche</span></div>
</div>
<div class="submit_box"><a id="toggle_3" class="frage">nächste Frage...</a></div>
</div>
<div class="gewinn_werbung"></div>
</div>
</div>
<div id="page_4">
<div class="inhalt-gewinn">
<div class="gewinn_bild"></div>
<div class="gewinn_form">
<div class="input_box">
<div><input type="radio" name="frage4" value="Wollblume" /><span>Wollblume</span></div>
<div><input type="radio" name="frage4" value="Tulpe" /><span>Tulpe</span></div>
<div><input type="radio" name="frage4" value="Rose" /><span>Rose</span></div>
</div>
<div class="submit_box"><a id="toggle_4" class="frage">nächste Frage...</a></div>
</div>
<div class="gewinn_werbung"></div>
</div>
</div>
<div id="page_5">
<div class="inhalt-gewinn">
<div class="gewinn_bild"></div>
<div class="gewinn_form">
<div class="input_box_ende">
<?php echo '<input name="date" type="hidden" value="', time(), '" />'; ?>
<div class="nosee">eMail:<input name="email" type="text" id="email" value="<?=$_POST['email']; ?>" size="30" /></div>
<div><span>Vorname:</span><input type="text" name="vorname" value="<?=$_POST['vorname']; ?>"/></div>
<div><span>Nachname:</span><input type="text" name="nachname" value="<?=$_POST['nachname']; ?>"/></div>
<div><span>Strasse:</span><input type="text" name="strasse" value="<?=$_POST['strasse']; ?>"/></div>
<div><span>Ort:</span><input type="text" name="ort" value="<?=$_POST['ort']; ?>"/></div>
<div><span>PLZ:</span><input type="text" name="plz" value="<?=$_POST['plz']; ?>"/></div>
<div><span>eMail:</span><input type="text" name="imehl" value="<?=$_POST['imehl']; ?>"/></div>
</div>
<div class="submit_box"><input id="submit" name="senden" type="submit" value="Senden" /></div>
</form>
</div>
</div>
</div>
all working ! thx for the inspiration!