I want to submit Multiple Forms with 1 button and 1 action target using PHP. Is is possible ?
HTML
<form name="myform" action="test_post.php" method="post">
Name: <input type='text' name='name' />
</form>
<form name="myform2" action="test_post.php" method="post">
Class: <input type='text' name='class' />
</form>
Search
JS
function submitform()
{
document.myform.submit();
document.myform2.submit();
}
PHP (test_post.php)
echo $name = $_POST['name'];
echo $class = $_POST['class'];
I tried with that code but it just show $_POST['class'] value. For name it show error : Undefined index: name in...
Please advice.
you dont need one form per input, you can have a million in one one form so ..
<form name="myform" action="test_post.php" method="post">
Name: <input type='text' name='name' />
Class: <input type='text' name='class' />
</form>
Search
should be fine, and you don't really need js to submit. a html submit input is better supported
<input id="submit" type="submit" value="submit">
You actually want two fields on one form - which you can then submit with no problems:
<form name="myform" action="test_post.php" method="post">
Name: <input type='text' name='name' />
Class: <input type='text' name='class' />
<input type='submit'>
</form>
Or you can submit it by using some JS anyhow if you do other thigns in the JS code.
if jquery is an option, then .deferred might be what you are looking for.
function submitform(){
//define a variable where we will store deferred objects
var def = true;
$("form").each(function() {
var postResult = $.Deferred();
//.when takes a deferred object as a param.
// if we don't pass a deferred object .when treats it as resolved.
// as our initial value of def=true, the first .when starts immediately
$.when(def).then(function(){
$.post('post_destination.php', form.serialize()).done(function(){
//the chain will fail after the first failed post request
//if you want all the requests to complete in any case change the above .done to .always
post.resolve();
});
});
// now we reassign def with the deferred object for the next post request
def = postResult;
});
}
and here's the link to when I asked the question some time ago. How to submit multiple jquery posts to a page one after another if database updates successfully?
Related
I made a html and a php page. I put 3 images in html page showing different genre of movies- horror, fantasy, romance. I want the images to work as form submit button and should get redirected to the php page and the php page should get the genre of the image.
What I already tried- I tried lot of different things but nothing worked.
And I wonder how php page will take different inputs from different images using $_POST method.
Expected output-
Suppose if user clicked on image of genre 'horror', then in php page value of $genre should be Horror.
You can use an <img> tag inside a <button> element.
<form method="post">
<button name="genre" value="horror" type="submit"><img src="./img/horror.jpg"></button>
<button name="genre" value="comedy" type="submit"><img src="./img/comedy.jpg"></button>
</form>
You can access the value of the submit button in your PHP using $_POST['genre'] (or whatever the name attribute of your buttons is)
The images should have an href tag that redirects to your PHP page. Note that this method will mean that you should get the value through $_REQUEST variables and not POST or GET. For example lets say href='myphp.php?genre=horror'. and in the PHP file $genre = $_REQUEST['genre'];
You could try something similar to the following:
<input class='genre' type='image' src='/images/genres/horror.jpg' data-genre='horror' />
<input class='genre' type='image' src='/images/genres/sci-fi.jpg' data-genre='sci-fi' />
<input class='genre' type='image' src='/images/genres/chickflick.jpg' data-genre='chickflick' />
<script>
Array.prototype.slice.call( document.querySelectorAll('input.genre') ).forEach( function(input){
input.addEventListener('click', function(e){
e.preventDefault();
location.href='info.php?genre='+this.dataset.genre
});
})
</script>
Assign each input a dataset attribute which you query later in the click handler. That dataset value is then used to construct the url...
Alternatively a slightly different approach would be to POST the data by setting the value of a hidden field to the dataset attribute value- like:
<form name='genres' method='post'>
<input class='genre' type='image' src='/images/genres/horror.jpg' data-genre='horror' />
<input class='genre' type='image' src='/images/genres/sci-fi.jpg' data-genre='sci-fi' />
<input class='genre' type='image' src='/images/genres/chickflick.jpg' data-genre='chickflick' />
<input class='genre' type='image' src='/images/genres/thriller.jpg' data-genre='thriller' />
<input class='genre' type='image' src='/images/genres/adventure.jpg' data-genre='adventure' />
<input class='genre' type='image' src='/images/genres/period-drama.jpg' data-genre='period-drama' />
<input type='hidden' name='genre' />
</form>
<script>
let form=document.forms.genres;
let genre=form.genre;
Array.prototype.slice.call( document.querySelectorAll('input.genre') ).forEach( function(input){
input.addEventListener('click', function(e){
e.preventDefault();
/* set hidden input value */
genre.value=this.dataset.genre;
/* append the genre to the qction/querystring */
form.action='?genre='+this.dataset.genre;
/* go */
form.submit();
});
})
</script>
So what i want do is, have a form displayed on load where it asks user for their details such as name etc, then once the user clicks submit, i want that information to carry over to the next form, i know i have to hidden fields for that.
I want another form to be displayed after they click submit, this all has to be done using POSTBACK, so pretty much having 2 forms on one php page but only displaying the second one after the first has been submitted.
I know i can do this by creating two different php files and using header but i would like to learn how to do it via postback.
<form name="firstform" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?> " onSubmit="return validator();">
<p>Please fill in the following form</p>
<p>Given Name* <input type="text" name="fname" id="fname"/><br/>
Middle Name <input type="text" name="mname"/><br />
Family Name* <input type="text" name="lname" id="lname"/><br />
Chosen Username* <input type="text" name="uname"/>
</p>
<p><input type="submit" value="submit" id="submit"/>
</form>
<form name="secondform" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?> " >
Test* <input type = "text" name="test"/>
</form>
You can use jquery and Javascript if this is just a quick form
There is a nice form plugin that allows you to send an HTML form asynchroniously.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Hide all forms
$('form').hide();
// Show the first form
$('form').eq(0).show();
$('form').eq(0).on('submit', function() {
// Submit via ajax
// Unhide second form
$(this).hide();
$('form').eq(1).show();
return false;
});
});
</script>
I would validate that the first forms data is correct, then test to see if the form has been submitted without errors.
if (isset($_POST['submit']) && empty($errors)) {
// Output second form
} else {
// Output first form
}
You would either send the first set of data to the database or you can add them as hidden fields in the second form.
This is assuming you put any generated errors in to an array called $errors.
I use daterangepicker() to get two dates ( begginning and ending ), I'd like to put those dates in php variables.. i've succeeded to do an alert() to show those variables using a button.. but i don't know how to put them in the php.
here's my code if anyone have an idea..
<script type="text/javascript">
$(function(){
$('#rangeBa, #rangeBb').daterangepicker();
});
function test(){
var dates = new Array();
dates[0] = document.inputdate.rangeBa.value;
dates[1] = document.inputdate.rangeBb.value;
return dates;
}
</script>
<body>
<form name="inputdate" method="post">
<input type="text" value="m/jj/aaaa" id="rangeBa" name="rangeBa"/>
<input type="text" value="m/jj/aaaa" id="rangeBb" name="rangeBb"/>
</form>
<button onclick="alert(test())">Click on this button</button>
</body>
You have to add a submit input element in your form and add an action parameter in your form:
<form name="inputdate" method="post" action="yourfile.php">
<input type="text" value="m/jj/aaaa" id="rangeBa" name="rangeBa"/>
<input type="text" value="m/jj/aaaa" id="rangeBb" name="rangeBb"/>
<input type="submit" value="Click to send" />
</form>
And in yourfile.php: you get the variables by $_POST['rangeBa'] and $_POST['rangeBb']
Feel free then to use ajax method if you don't want a refresh of the page.
After you submit your form you can find the form variables by name in $_POST. for example $_POST['rangeBa']
I'm wondering how to resolve an issue where I have one text box and two buttons.
Each button needs the same data in the text box to accomplish its task.
One button is to update the existing record they are reviewing (with the new value in the text box), and the other button is used to add a new record (again, using the new value in the text).
One idea I had was to use jquery to update a hidden text box that gets updated when the visible text box is modified by the user.
So something like this: (this is just pseudocode...)
<form name="form1" method="post" action="controller1/method1">
<input type=text name=visibleTextBoxForForm1></input>
<button type=submit value=UPdate>
</form>
<form name="form2" method="post" action="controller2/method2">
<input type=hidden name=hiddenTextBoxforForm2></input>
<button type=submit value=New>
</form>
<script>
$('#visibleTextBoxForForm1').live('change', function() {
//update a hidden textbox in form2 with value of this textbox.
});
</script>
Is there a better way to do this?
Alternatively, you could do it via JQuery. Tie a clicklistener for each button and provide the correct URL to the form on click.
Here's some quick code... you'd have to correct the proper jquery queries for the correct elements.
<form name="form1" method="post">
<input type=text name=visibleTextBoxForForm1></input>
<button type=button value=Update>
<button type=button value=New>
</form>
<script>
$('update').click(function() {
$(form1).attr('action', <update url>).submit();
});
$('new').click(function() {
$(form1).attr('action', <new url>).submit();
});
</script>
If that's the only field, then simply have one form with two buttons and handle that text data based on the name of the button used to submit it.
<form name="form1" method="post" action="controller1/method1">
<input type="text" name="text" />
<input type="submit" name="insert" value="Insert New Data" />
<input type="submit" name="update" value="Update Existing Data" />
</form>
PHP (not CodeIgniter, since I'm not familiar with that framework):
if(isset($_POST['insert'])) {
// insert $_POST['text']
} else if (isset($_POST['update'])) {
// update $_POST['text']
} else {
// error
}
I'm trying to build a form which submits a URL which contains a lon/lat that has been passed over from Google Maps. I have managed to get it so the lon/lat is passed into input fields in the form, how would I go about using these values dynamically in the post URL, i.e.:
action="search.asp?[lon][lat]
If you want to get the values from the form into the URL, set the method attribute to get:
<form method="search.asp" action="get">
. This will put the values of the lon and lat fields of the form in the URL. Example:
search.asp?lat=[lat value]&lon=[lon value]
For more information, read this page. Excerpt:
If the processing of a form is
idempotent (i.e. it has no lasting
observable effect on the state of the
world), then the form method should be
GET. Many database searches have no
visible side-effects and make ideal
applications of query forms.
Using javascript you can change the action attribute of the form. So, create a form..
<form name="myForm">
<input type="hidden" name="lon" value="123" />
<input type="hidden" name="lat" value="321" />
...
<button onclick="setAction();">Submit</button>
</form>
Then in the head of the page add the setAction function..
<script type="text/javascript">
function setAction()
{
var lon = document.myForm.lon.value;
var lat = document.myForm.lat.value;
document.myForm.action = "search.php?["+lat+"]["+lon+"]"';
document.myForm.submit();
}
</script>
Hope this helps, it's how I have done this in the past!
Try using:
<form action="search.php" method="get">
<input type="hidden" name="lon" value="<?php echo $lon_fromGoogleMaps; ?>" />
<input type="hidden" name="lat" value="<?php echo $lat_fromGoogleMaps; ?>" />
<!-- The Rest of your Form... -->
<input type="submit" value="Submit!" />
</form>
Or if you want to use the form as post:
<form action="search.php?lon=<?php echo $lon_fromGoogleMaps; ?>&lat=<?php echo $lat_fromGoogleMaps; ?>" method="post">
<!-- The Rest of your Form... -->
<input type="submit" value="Submit!" />
</form>
I see you tagged this as Javascript as well, and as Google Maps relies heavily on Javascript, you may have the Lon and the Lat passed as Javascript variables...
<script type="text/javascript">
// Obviously, execute this code after the DOM has loaded...
var formAction = document.searchForm.action;
formAction = formAction + '?lon=' + lon_fromGoogleMaps + '&lat=' + lat_fromGoogleMaps;
document.searchForm.action = formAction;
</script>
<form action="search.php" method="post" name="searchForm">
<!-- The Rest of your Form... -->
<input type="submit" value="Submit!" />
</form>