The case :
<form id='frm' name ='frm' action='test.php'>
<div style='display:none'>
<input type='text' name='name' value ='' />
</div>
<input type='submit' value='Submit' />
</form>
For example , How can i submit the from given above with its inputs ?
Issue : The "name" input wont be passed !
Programatically, you can just trigger the submit event on the form element:
$('#frm').submit();
Edit: Actually, after reading your markup more carefully, you are using an input named name, this element can cause "clashing" problems with the form's name attribute.
Consider changing the name of your input.
See also:
Unsafe Names for HTML Form Controls
As a user, you'd just click the submit button. The visibility of a form element doesn't change the fact that it gets submitted with the form.
Programmatically:
document.getElementById('frm').submit();
If you're not trying to show the input, why not use type="hidden" and dispense with the style?
document.getElementById('frm').submit();
Here is how to submit hidden variables in a FORM:
<input type='hidden' name='name' value ='' />
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>
When I click submit button of form I get two variables with same name in url. Why this happens.
The form is following
<select name='name1' form='select_form'>...</select>
<select name='name2' form='select_form'>...</select>
<form id='select_form' action='index.php' method='get'>
<input type='text' name='date_start' value='val1' id='datepicker1'>
<input type='text' name='date_end' value='val2' id='datepicker2'>
<button id='submit' type='submit' value='Submit'>Select</button>
</form>
When I click submit button I can see the following url
index.php?name1=val_name1&name2=val_name2&date_start=2016-08-01+00%3A00%3A00&date_start=&date_end=2016-08-03+00%3A00%3A00&date_end=2016-08-03+00%3A00%3A00
As you can see there are two date_start variables. What is the reason?
This has very bad impact, because when I change only one value (for example only date_start) then after clicking submit I have the following
index.php?name1=val_name1&name2=val_name2&date_start=2016-08-01+00%3A00%3A00&date_start=&date_end=2016-08-03+00%3A00%3A00&date_end=
So second value of date_end is empty.
I have a form that contains a WYSIWYG editor, and two submit buttons :
<input type='submit' name='pdf' value='PDF Preview'/>
<input type='submit' name='save' value='Save'/>
"pdf" action displays the content of the editor as a PDF output. "save" action is a regular form submit. I want the PDF output to open in a new tab, and can't figure how to do that.
There is no "target" attribute for "input" tag. I could add a "target=_blank" to the "form" tag, but that would submit my "save" action in a new tab as well, which I don't want.
I tried to replace the "pdf" submit button with this :
<a href="same_page" target="_blank" onclick="submitForm();">
That didn't work. The form is submitted in its current tab and the new tab query receives nothing in $_POST.
Is there a magic trick I don't know yet ?
Note : server-side code is PHP
Use button and onclick event with jQuery.
<button type='submit' name='pdf' onclick="$('form').attr('target', '_blank');">PDF Preview</button>
<button type='submit' name='save' onclick="$('form').attr('target', '');">SAVE</button>
So in short you have one form + two submit buttons
first button: open in same tab
second button : open in new tab
after submit you want to know which one is submitted
Solution:
add two submit buttons with different behavior is impossible
so you need JS help or Jquery ( Ravi Hirani solution is perfect )
To know which button is submitted, you should give different names ( newage comment is perfect)
So this is just simple example does the magic you are looking for:
<?php
//print the post data
var_dump($_POST);
?>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<form action="test.php" method="POST">
<!-- just simple textarea -->
<textarea rows="4" cols="50" name="textarea">
text here
</textarea>
<!-- new tab submit button -->
<input type="submit" name="New_Window" value="New Window" onclick="$('form').attr('target', '_blank');" />
<!-- same tab submit button -->
<input type="submit" name="Same_Window" value="Same Window" onclick="$('form').attr('target', '');" />
</form>
You could maybe try using jQuery for this.
For example when the PDFPreview button is clicked jQuery could save the values of the form inputs into cookies. Then it would redirect to the PDFPreview page in a new tab. The PDFPreview page would then read the cookies.
E.g:
<script>
var input1 = null;
function previewPdf()
{
input1 = $("#input1").text();
document.cookie = "input1=" + input1;
window.open("/path/to/pdfPreview.php", '_blank')
}
</script>
<form action="whateverpage" method="post">
<input type="text" name="input1" id="input1">
<input type="button" onClick="previewPdf();" value="Preview PDF">
<input type="submit" value="Save">
</form>
You can use HTML5 formtarget attribute of input tag to change form behavior. This won't work with outdated browsers, however. In your case it will look something like:
<input type='submit' name='pdf' formtarget="_blank" value='PDF Preview'/>
<input type='submit' name='save' formtarget="_self" value='Save'/>
It can be used with button tag either.
References:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit#formtarget
https://www.w3schools.com/tags/att_input_formtarget.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes
I have a HTML form that acts as a "confirm deletion?" page and my "Back" button is playing up.
$string = "foo.php?id=" . $_POST['fooid'] . "&id2=" . $_POST['barid'];
<!-- ^^ this ends up being "foo.php?id=1&id2=2" -->
<form action='<?php echo $string; ?>'>
<input type='submit' value='Back'>
</form>
the problem is, when the button is pressed it links to foo.php without any of the $_GET data in my string, even though the string contains "id=1&id2=2"
P.S I changed the code above so people could better understand it, here is the raw code:
<?php
$string = "xrays.php?id=" . $_POST['visitid'] . "&id2=" . $_POST['patientid'];
?>
<form action='delete.php' method='post'>
<input type='hidden' name='xrayid' value='<?php $_POST['xrayid']?>'>
<input type='submit' name='submit' value='Confirm Delete?'>
</form>
<form action='<?php echo $string; ?>'>
<input type='submit' value='Back'>
</form>
Maybe it's not the best answer but I would like do something like that:
$string = "foo.php?id=" . $_POST['fooid'] . "&id2=" . $_POST['barid'];
<!-- ^^ this ends up being "foo.php?id=1&id2=2" -->
<form action='foo.php'>
<input type="hidden" name="fooid" value ="<php echo $_POST['fooid']; ?>" />
<input type="hidden" name="barid" value ="<php echo $_POST['barid']; ?>" />
<input type='submit' value='Back'>
</form>
This should work properly.
EDIT: change $_GET na $_POST
You need to put the get variable in the form hidden inputs, like so:
<form action='foo.php'>
<input type="hidden" name="id" value="1" />
<input type="hidden" name="id2" value="2" />
<input type='submit' value='Back'>
</form>
Or you could use a link:
Back
Let's start with form submission in general. W3C: Form Submission
Next, let's review $_GET and $_POST. PHP Manual: $_GET | PHP Manual: $_POST
In summary, inside of your <form> tag, use either method="get" or method="post". Only one of the superglobal arrays will be populated by successful controls, based upon your method of sending the data. I believe the query string must result from a GET request url (which may be the default), not just a plain string slapped into the action="" attribute. I could be wrong about the query string, but you have another problem. You are using two forms on one page. Presently, I think only one form's controls can be submitted successful at a time.
<form action='delete.php' method='post'> <!-- FORM 1 -->
<input type='hidden' name='xrayid' value='<?php $_POST['xrayid']?>'>
<input type='submit' name='submit' value='Confirm Delete?'>
</form>
<form action='<?php echo $string; ?>'> <!-- FORM 2, add a method="" attribute -->
<input type='submit' value='Back'>
</form>
Upon adding a method="get" to form two, it should become clear that a composite $_POST + $_GET request is not possible in the two form approach, and that you need to start with making a single, monolithic form instead of two modular ones. Using the type="hidden" attribute of an <input /> tag, inside of one form, as in #machineaddict's answer, will help. However, what will really help is if you explicitly use all the correct attributes of each tag so that you can spot errors like this in the future.
In a situation like this, it is helpful to know that the $_SERVER['QUERY_STRING'] element would hold the complete query string if your web server received one.
PHP Manual: $_SERVER
<form action='login.php' method='post'>
<center> Username : <input type='text' name='username'> Password : <input type='password' name='pass'> <input type='submit' value='Login'></center>
</form>
<input type='submit' value='Registration'>
I wondering if it is possible to have my Registration button next to the login without having anything to do with the login.php. If I move it inside of the form then it's going to the login.php and not the reg.php.
Do not use submit button in anchor(<a></a>) tag
Just provide a text in it
Registration
If you want a button in it
Try to use type button not submit (Untested from me)
<input type='button' value='Registration'>
If you can - you may consider changing the form action to some "formHandler.php", giving both of the submits the same name, and testing the inputs value (each one has to be different) in the formHanlder.php
$real_action=$_REQUEST['submit_input_name'];
switch ($real_action){
case 'register':.....
case 'login':.......
}