When I press search button my JS code will work.
But when I use enter to submit form Bellow code will not work.
Use of code in magento.
Html
<form action="<?php echo $this->getUrl('storelocator/index/searchbydistance') ?>" method="GET" id="search_by_distance">
<button type="button" onclick="storeSearch.submit(this)"><?php echo $this->__('Search') ?></button></form>
Javascript
<script type="text/javascript">
//<![CDATA[
storeSearch.submit = function(button, url) {
alert('hi');
}.bind(storeSearch);
//]]>
For the enter keypress form submission behaviour to work you need to have submit button within the <form> element. As all your current button does is submit the form through JS, you could simply change its type:
<form action="<?php echo $this->getUrl('storelocator/index/searchbydistance') ?>" method="GET" id="search_by_distance">
<button type="submit"><?php echo $this->__('Search') ?></button>
</form>
<script type="text/javascript">
storeSearch.submit = function(button, url) {
alert('hi');
}.bind(storeSearch);
</script>
give some id to to button and then use code like following:
document.getElementById("id_of_button")
.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode == 13) {
document.getElementById("id_of_button").click();
//OR submit your form.
}
});
Related
I am search the other result of related question and that i implement in my code but that not working ,i have 2 button in a form
my form
<form id="InVoice" action="<?php echo base_url('Staff/add_invoice_spare');?>" method="post" class="form-horizontal">
/*-- content herer--*/
<button style="float:right;" type="submit" name="ready" value="Ready For Bill" class="btn btn-danger" style="border-radius:60px;">Add to Ready for Bill</button>
<button style="float:right;margin-left:15px;" type="submit" name="print" class="btn btn-danger" style="border-radius:60px;">Print</button>
<?php echo form_close(); ?>
and used script is
<script type="text/javascript">
$(document).ready(function() {
$("form#InVoice").submit(function() {
alert();
$('button[type=submit]').prop('disabled',true);
return true;
});
});
</script>
this my controller for inserting
public function add_invoice_spare()
{
$bill=$this->input->post('ready');
if($bill)
{
$reg=$this->input->post('rno');
$data=array(
/*-----------datas here-----*/
);
$ans=$this->Bill_model->check_registration($reg);
$form_data= $this->input->post();
$result=$this->Bill_model->invoice_dtls_ready($form_data,$data);
if($result){
redirect('Staff/list_invoice/'.$result);
}
}else{
$reg=$this->input->post('rno');
$data=array(
/*-----------datas here-----*/
);
}
$form_data= $this->input->post();
$result=$this->Bill_model->invoice_dtls($form_data,$data);
if($result)
{
?>
<script type="text/javascript" language="Javascript">
window.open('invoice_pdf/<?PHP echo $result ?>', '_blank');
window.location.href = "invoice_labour";
</script>
<?php }
}
}
but in double click or single click the Add to Ready for Bill button the print button is work why that redirect?
any way to solve this issue and only one time submitte the data ?
thanks in advance!!!
Both the buttons that you are clicking on are of the type submit or they are submit buttons. So the only way to differentiate this will be at the backend.
For eg, according to the above example when you submit the $_POST array will have the submit button value. It is based on this value that you have to build your code logics.
If you click on Print then $_POST['submit'] will be the value will be print and when you click on "Add to Ready for Bill" the $_POST['submit'] value will be ready.
If you want to control it in the Frontend i.e., jQuery end you can by using the preventDefault (the example of which is given by #pradeep) but I suggest you modify the Backend as well to differentiate between these 2 submit buttons.
Hope this helps.
I need a form with one input (eg. "number") that after sumbit redirects the broswer to http://staticurl/[number].html
How can I do?
header('location: http://staticurl/'.$_POST['number'].'html');
Maybe?
Assume a HTML form like
<form action="" method="POST">
<input type="number" name="number">
<input type="submit" name="submit" value="submit">
</form>
Now using php you can redirect
<?php
if(isset($_POST['submit'])){
header("Location: http://staticurl/".$_POST['number'].".html");
}
?>
If header() returns any error then you can do it with javascript inside php like
<?php
if(isset($_POST['submit'])){
echo '
<script>
window.location.href = "http://staticurl/'.$_POST['number'].'.html";
</script>
';
}
?>
Validate the form data before processing it.
Solved with
<script type="text/javascript">
function goTo()
{
var NUM= document.forms[0].NUM.value;
var URL = 'http://staticurl/'
window.location = URL+NUM+'.jpg';
return false;
}
</script>
And
<form action="" method="get" onsubmit="return goTo()">
I would like to achieve that when I click on submit button, it doesn't refresh the page.
My submit button only calls set of codes if is submitted.
But when it is submitted, it refreshes the page and my variables lose its values.
I know this can be achieved with java-script or ajax but this is where I have no knowledge yet. Need to start learning it.
I have tried to use some other suggestion with JavaScript but it didn't work for me as the JavaScript code was build for most advance form not only one submit button.
My Button:
<form action='{$_SERVER['PHP_SELF']}' method='post'>
<input type='submit' class='submit' name='confirm_points' value='Confirm Points' />
</form>";
My code which executes when submit button is pressed:
if(isset(&_POST['confirm_points'])) {
// my code is here
}
Thanks for any help
Here's a simple example:
<?php
if (isset($_POST['points'])) {
echo "I'm AJAX and I have " . $_POST['points'];
exit();
}
?>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('form').submit(function(event){
event.preventDefault();
$.ajax({
type: $(this).attr('method'),
data: $('form').serialize(),
success: function(data) {
$('#result').html(data);
}
});
});
});
</script>
</head>
<body>
<form method="POST">
<input type="text" name="points" placeholder="Some data" value="25 points"/>
<input type='submit' class='submit' name='confirm_points' value='Confirm Points' />
</form>
<div id="result"></div>
</body>
</html>
Page with the form that should submit by ajax
<html>
<head></head>
<body>
<form id="my-form">
<input type="text" name="username" /> <br/>
<input type="submit" value="Save" />
</form>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function () {
$('#my-form').submit(function (e) {
var $data = $(this).serialize();
var $url = 'path_to_processing_script';
$.post($url, $data, function ($response, $status ) {
if ( $status == 'success' ) {
alert($response);
}
});
e.preventDefault();
});
});
</script>
</body>
</html>
The processing script
<?php
var_dump($_POST);
?>
First to stop refreshing, change your form header to:
<form action='{$_SERVER['PHP_SELF']}' method='post' onsubmit="javascript:return false;" id="myform">
Next, to submit form using ajax:
<script src="path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myform").submit(function(){
var elem1=$("#elem1").val(); //get values of inputs for validation
if(elem1.length<5){alert("Length too short!");}//Sample Validation
else{
$.ajax({
url:"verify.php",//link to your submission page
type:"post", //change to your needs
data:{"elem1":elem1}, //add all variable
success:function(response){alert(response);} //Manage Response
});
});
});
</script>
I have a small problem loading a php function if(isset... to a page where is form with onsubmit function :
function functionlol() {
$('#phptestlol').load('system/phptest.php');
}
Now, the phptest.php contains this :
if(isset($_POST['test'])){
echo "Working with submission also";
}
echo "Working";
and html with form looks like this:
<span id='phptestlol'></span>
<form method='POST' onsubmit='functionlol()' target='test'>
<input type='submit' name='test' value='Submit'>
</form>
I did target='test' because I don't want page to be refreshed.
When I click the submit button, it loads the php file, but it shows only the "Working" echo, and doesn't echo that "Working with submission also"... what am i supposed to do to make it work? Thanks!
EDIT
WHOLE HTML:
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$('form').submit(function(event) {
event.preventDefault();
$('#phptestlol').load('system/phptest.php', {test:1});
});
</script>
</head>
<body>
<iframe name='test' style='display:none;'></iframe>
<span id='phptestlol'></span>
<form method='POST' target='test'>
<input type='submit' name='test' value='Submit'>
</form>
</body>
</html>
PHP (phptest.php):
<?php
error_reporting(E_ALL); ini_set('display_errors', 1);
if(isset($_POST['test'])){
echo "submitted";
}
?>
Let's make some adjustments and take advantage of jQuery all the way through. First the HTML -
<span id='phptestlol'></span>
<form method='POST' target='test'>
<input type='submit' name='test' value='Submit'>
</form>
Note the removal of any inline JavaScript. Now for the PHP -
if(isset($_POST['test'])){
echo "submitted";
}
Now for the cherry on top of the cake, the jQuery
$(document).ready(function() {
$('form').submit(function(event) {
event.preventDefault(); // prevents the default action of the submit button
$('#phptestlol').load('system/phptest.php', {test:1});
});
});
Here we prevent the default action of clicking the submit button. We also send a value for the $_POST array ({test:1}) so the isset($_POST['test']) will work as we expect.
I want to create 2 forms in a view. Only 1 form is visible.
The another one is hidden.
Hence, I want to have only 1 submit button for both form.
Code:
<?php echo $this->Form->create('Payment', array('type' => 'post', 'url' => 'https://uat.pbbank.com/payment/dpayment.jsp'));
echo $this->Form->hidden('merchant_id', array('value'=>'3242', 'name'=>'merchant_id', 'id'=>'merchant_id'));
echo $this->Form->end(__('Submit')); ?>
<?php echo $this->Form->create('Payment');
echo $this->Form->hidden('merchant_id', array('value'=>'3242', 'name'=>'merchant_id', 'id'=>'merchant_id'));
echo $this->Form->end(__('Submit')); ?>
The best way to achieve this would be with Ajax, or JS/Jquery.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#submit").click(function () {
$.post($("#addToDB").attr("action"), $("#addToDB").serialize(),
function () {
alert('Add to Database submitted');
});
$.post($("#paymentGateway").attr("action"), $("#addToDB").serialize(),
function () {
alert('Payment Gateway submitted');
});
});
});
</script>
The form:
<form id="addToDB" action="addtodatabase.php" method="post">
<input type="button" id="submit" value="Submit" />
</form>
<!-- Hidden form for payment gateway -->
<form id="paymentGateway" action="paymentgateway.php" method="post">
<!-- Payment gateway input fields -->
</form>
Clicking the button with id="submit" calls function to post both forms by form id.
you better wrap your form data and send your request with ajax to (https://uat.pbbank.com/payment/dpayment.jsp) and your action normal click event.