I have a form with two submit buttons. based on the button clicked i've to process the values on the post page. so i set the value for action attribute on the button click.
In firefox, it posts form fields and the submit button. but in chrome it only posts the form fields and not the button.. This is the code i've used:
<html>
<script src='jquery-1.6.2.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('#one,#two').click(function(){
$("#myform").attr("action", "index.php");
$("#myform").submit();
});
});
</script>
<?php
echo "<pre>";print_r($_POST);echo "</pre>";
?>
<form method="POST" name='myform' id='myform' >
<input name="iint" value="hiox" type="text">
<input name="one" value="hiox" type="submit" id='one'>
<input name="two" value="hiox" type="submit" id='two'>
</form>
</html>
On post firefox outputs like this:
Array
(
[iint] => hiox
[one] => hiox
)
And in chrome14 [linux version],
Array
(
[iint] => hiox
)
I need to check what button gets clicked. Any help, greatly appreciated. Thanksl!
try simulating the button click with function $('#buttonelement').click(); instead of using submit();
Ah, and as click(); is a standard javascript funcion, you maybe you need to use use GetDocumentByID instead of #id jquery selector.
$('#ElementClickedThatCallOne').click(function(){
$("#myform").attr("action", "index.php");
document.GetDocumentByID('one').click();
});
$('#ElementClickedThatCallTwo').click(function(){
$("#myform").attr("action", "index.php");
document.GetDocumentByID('two').click();
});
as a followup for the comment I added:
then (you have another action also) that's because in post you will only have the button that submits the form.. but you submit it with javascript..
in ff it works because the javascript runs after the submit button (I guess)..
you should consider approaching another solution like: make them input type="button" (and not submit), on click set the value for a hidden input that can be used in php.. the value for that hidden input will always be available, but will change depending on the button you click
your form would become something like
<html>
<script src='jquery.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('#one,#two').click(function(){
$("#myform").attr("action", "index.php");
$("#who_submitted_the_form").attr('value',this.id);
$("#myform").submit();
});
});
</script>
<?php
echo "<pre>";print_r($_POST);echo "</pre>";
?>
<form method="POST" name='myform' id='myform' >
<input name="iint" value="hiox" type="text"/>
<input name="who_submitted_the_form" id="who_submitted_the_form" value="" type="hidden">
<input name="one" value="hiox" type="button" id="one">
<input name="two" value="hiox" type="button" id="two">
</form>
</html>
This is because the submit button is only included in the form submission traditionally when said submit button is clicked.
since you're not submitting the form via the traditional input="submit" button, no value is included.
You can use this method before form.submit(). call the submit button with click function. so, it traditionally calls the submit button.
document.form name.submit button name.click();
Related
I have a form that has one hidden input field, the hidden field includes the value of email.
the problem when the button clicked, the form didn't submit any values at all and nothing happens at all.
the HTML form as shown below:
<form method="post" class="table-responsive" action="alerts.php">
<?php foreach ($admins as $key => $admin): ?>
<input type="hidden" name="email" value="<?php echo $admin['email']; ?>">
<?php endforeach;?>
<button type="submit" class="btn btn-outline-light btn-lg btn-block add"
name="e_conf">confirm</button>
</form>
i tried to test if the form submit the values or not but set output message in the server side:
if(isset($_POST["e_conf"])){
echo "test";
}
but nothing displayed at all which I understood that the form didn't submit any values.
I hope someone can figure out this problem
thanks
Can you try below jquery code to submit form, Make sure jquery is included in your project.
<script>
$(".add").click(function(){
$(".table-responsive").submit();
});
</script>
i got this annoying problem i can't figure out how to solve
After a quick research i found those links bellow, which i could partially make work
verifying if checkbox is checked in php
How to read if a checkbox is checked in PHP?
This is my html:
<form method="post">
<!-- CHECK BOX TIPO DE PRODUTO (INTEIRO/PEDAÇO) !-->
<input type="checkbox" name="stipo" id="stipo" value="1" onchange="document.getElementById('tipo').disabled = !this.checked;">Tipo
<select name="tipo" id="tipo" disabled="false">
<option value="Inteiro">Inteiro</option>
<option value="Pedaço">Pedaço</option>
</select><br>
<input type="submit" href="/consulta/consulta_produto.php" class="loader" value="Consultar">
</form>
and this is my php:
if ($_POST['stipo'] == 1){
echo "123";
} else {
echo "456";
}
Because at the Html code im using form like this:
<form method="post">
</form>
and making the post with a submit button like that:
<input type="submit" href="/consulta/consulta_produto.php" class="loader" value="Consultar">
It doesn't work due to the Href at the submit button.
However, if i do the Html code like this:
<form action="/consulta/consulta_produto.php" method="post">
<input type="submit" class="loader" value="Consultar">
</form>
It will work. But, the problem of the form above is that my script stop working. I Cant use the method above because i need Href into the submit button, because when i submit the form, im loading the next page inside a Div
Just in case it helps, this is my Javascript and why i need the Href
<script type="text/javascript">
$(function() {
$('.loader').click(function(event) {
event.preventDefault(); // stop the link loading the URL in href
$('#content').load($(this).attr('href'));
});
});
</script>
Anyone got some idea on how to make the POST method works with href instead of action on the form?
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
Why wont this work?
<form action="" method="POST">
<input type="text" class="searchBar" name="domain" /><input type="button" value="SEARCH" class="searchButton" id="srch" />
</form>
<? print $_POST['domain']; ?>
I have tried putting it into a var too. I just got an error.
Thanks
Edit:
Suggestions have been made of changing button to submit, but my jQuery bug's up.
<script type="text/javascript">
$('#srch').click(function(){
$('#notActive').attr('id','Active');
});
$(document).ready(function(){
// Hide div 2 by default
$('#Active').hide();
$('#srch').click(function(){
$('#notActive').hide();
$('#Active').fadeIn();
});
});
</script>
I have managed to change the Button to Submit by using the action as javascript: void(0); for my form.
The form cant submit if contains no type="submit" input.
<input type="button" /> cant submit form. You should add <input type="submit" /> to form.
You can't access the posted variable before a form is submitted.
if (isset($_POST['domain'])) {
// a form is submitted that contains the 'domain' parameter
print $_POST['domain'];
}
Try setting an action:
<form action="index.php" method="POST">.
Also, change your second line to this:
<? if (isset($_POST['domain'])) echo ($_POST['domain']); ?>
I'm using a WordPress sidebar widget to capture email addresses. The thing is, it redirects after form submission. I want the visitor to stay on the page they were on after form submission with just a hidden div giving a successful signup message.
I've tried something with javascript like this --
<script type="text/javascript">
function showHide() {
var div = document.getElementById("hidden_div");
if (div.style.display == 'none') {
div.style.display = '';
}
else {
div.style.display = 'none';
}
}
</script>
And that works perfectly for showing the hidden div on submit, but the actual form then doesn't work :(
The form (with what I was trying to do) is like this --
<div id="wp_email_capture"><form name="wp_email_capture" method="post" onsubmit="showHide(); return false;" action="<?php echo $url; ?>">
<label class="wp-email-capture-name">Name:</label> <input name="wp-email-capture-name" type="text" class="wp-email-capture-name"><br/>
<label class="wp-email-capture-email">Email:</label> <input name="wp-email-capture-email" type="text" class="wp-email-capture-email"><br/>
<input type="hidden" name="wp_capture_action" value="1">
<input name="submit" type="submit" value="Submit" class="wp-email-capture-submit">
</form>
<div id="hidden_div" style="display:none"><p>Form successfully submitted.</p>
</div>
The problem is coming in somewhere between 'return false' and the form action (which is where the plugin's coder has made it redirect I think). If I remove 'return false', it redirects. With 'return false' there, the form doesn't work. I can't figure out a way to get the form to work but not redirect, ie. just show the hidden div, work, and that's it! No redirect :) Would appreciate your help.
I will show how to submit the form with jQuery, as this is what you have available to you:
First of all, you should make one small change to the form HTML. Namely, change showHide() to showHide(this), which will give showHide() access to the form element. The HTML should be:
<div id="wp_email_capture"><form name="wp_email_capture" method="post" onsubmit="showHide(this); return false;" action="<?php echo $url; ?>">
<label class="wp-email-capture-name">Name:</label> <input name="wp-email-capture-name" type="text" class="wp-email-capture-name"><br/>
<label class="wp-email-capture-email">Email:</label> <input name="wp-email-capture-email" type="text" class="wp-email-capture-email"><br/>
<input type="hidden" name="wp_capture_action" value="1">
<input name="submit" type="submit" value="Submit" class="wp-email-capture-submit">
</form>
<div id="hidden_div" style="display:none"><p>Form successfully submitted.</p>
</div>
The javascript to submit the form and display the div on successful submit is:
function showHide(form) {
var serial = $(form).serialize();
$.post(form.action, serial, function(){
$('#hidden_div').show();
});
};
What this does:
Serializes the form data, i.e. converts it to one long string such as wp-email-capture-name=&wp-email-capture-email=&wp_capture_action=1 that is stored in serial.
Submits the serialized data to the the form's action url (form.action)
If the form submit was successful, it runs the success handler, which is the third parameter to $.post(). This handler takes care of displaying the hidden div. I changed the code to use jQuery's .show() function, which takes care of browser inconsistencies.
Hope this is helpful.