I have a form with 2 submit buttons , I need to give 2 actions for the form based on the submit button I click,How can this be achieved in codeigniter,Thanks Friends. Here is the sample code.
<?php
$attributes = array('name' => 'frmdisplay');
echo form_open('display/goto1', $attributes);
?>
<input type="submit" class="button" value="Showone" name="goto1btn" />
<input type="submit" class="button" value="Showtwo" name="goto2btn" />
Here how can i provide action to both the pages display/goto1 and display/goto2 based on submit btn pressed. THat means if first submit button is pressed thwn action should be display/goto1 and for second submit button action should be display/goto2.
If I'm not mistaken, isn't the name of the submit button passed as a key in the post data? If so, you can just check that:
if (!empty($this->input->post("goto1btn")))
{
// goto1btn pressed
}
else if (!empty($this->input->post("goto2btn")))
{
// goto2btn pressed
}
else
{
// no button pressed
}
Related
I have 2 submit buttons- 1 for "save", 1 for "show saved list".
I want if "subbutton" is clicked, redirect to resource controller public function store(Request $request), if "list" is clicked- redirect to resource controller public function index().
My functions work well. But I dont know how to link them with different buttons.
create.blade.php
<button type="submit" value="subbutton" name="subbutton" class="btn btn-primary">SAVE</button>
<button type="submit" value="list" name="list" class="btn btn-primary">SHOW</button>
A suggestion would be to transform your listing button to an a tag
SHOW
thereby, the submit button would carry out the form submission and the anchor tag would list the resources.
I am having trouble using a Confirm pop-up when a user clicks a button.
Use-case #1: On Update button, require confirmation when form fields meet certain conditions. (See formSubmit() function.) Currently, when a user clicks the Update button, it successfully executes the "games/update" action (a Laravel route) as specified in the Form tag. I just can't get the function to fire.
Use-case #2: On Delete button, Require confirmation. (See formDelete() function.) Currently, when a user clicks the Delete button, it successfully executes the "games/delete" action (a Laravel route) as specified in the Delete button. Again, I just can't get the function to fire.
Form HTML:
<form method="post" action="/games/update" enctype="multipart/form-data">
<select id="status" class="form-control" name="status" required>
<option value="FINAL" selected>Final Score</option>
<option value="POSTPONED">Postponed</option>
<option value="OTHER">Not Final</option>
</select>
<input type="number" name="awayScore" id="awayScore" class="form-control" required/>
<input type="number" name="homeScore" id="homeScore" class="form-control" required/>
<button type="submit" id="updateBtn" onClick="formSubmit()" class="btn btn-primary pull-left">Update Game</button>
<button type="submit" id="deleteBtn" onClick="formDelete()" formaction="/games/delete" class="btn btn-danger pull-right">Delete Game</button>
</form>
Javascript:
<script>
function formSubmit() {
var status = document.getElementById('status').value;
var awayScore = document.getElementById('awayScore').value;
var homeScore = document.getElementById('homeScore').value;
if(awayScore == 0 && homeScore == 0 and status = 'FINAL') {
return confirm("You have entered a FINAL SCORE of 0-0. If this is correct, click OK. If not, click Cancel and update the Status / Score.");
}
else
{
return true;
}
}
function formDelete() {
return confirm("Are you sure you want to delete this game?");
}
</script>
Get the result once you click the button from confirm dialog.
var result = confirm("Are you sure you want to delete this game?");
if (result) {
//Logic goes here
}
Also check this: https://sweetalert2.github.io/ you can have customizable popup based on your need.
SOLVED!
First, instead of using an "onclick" on the BUTTON, I needed an "onsubmit" on the FORM tag (per my comment on the opening post).
And second, since I wanted the DELETE button to always fire a Confirm message but the UPDATE button to only fire a Confirm message in certain situations, I just separated the Delete button into its own form (since the form input fields were not relevant if user was deleting the record).
HTML:
<form method="post" action="/games/update" onsubmit="return validateForm()" enctype="multipart/form-data">
... all form fields ...
<button type="submit" id="updateBtn" class="btn btn-primary pull-left">Update Game</button>
</form>
<form method="post" action="/games/delete" onsubmit="return confirm('Are you sure you want to delete this game?');" enctype="multipart/form-data">
<button type="submit" id="deleteBtn" class="btn btn-danger pull-right">Delete Game</button>
</form>
Javascript:
function validateForm() {
var status = document.getElementById('status').value;
var awayScore = document.getElementById('awayScore').value;
var homeScore = document.getElementById('homeScore').value;
if(awayScore == 0 && homeScore == 0 && status == 'FINAL') {
var result = confirm("You have entered a FINAL SCORE of 0-0. If this is correct, click OK. If not, click Cancel and update the Status / Score.");
if (result) {
return true;
}
else {
return false;
}
}
else
{
return true;
}
}
I tried that a hundred ways, and it would never fire my function (onsubmit="validateForm()") but it would fire a simple return (onsubmit="return confirm('message')"). Finally, I found that the reason it was not firing my function is because I had a syntax problem in my function's IF statement, which must have been causing the entire function to be invalid. So I changed it:
From:
if(awayScore == 0 && homeScore == 0 and status = 'FINAL') {
To:
if(awayScore == 0 && homeScore == 0 && status == 'FINAL') {
I also found that a simple "return confirm('message');" did not work. I had to store the results of the Confirm message and then return true/false.
Please find below my code:
Template of customer search form
<script type="text/x-kendoui-template" id="customer-search-view-template">
<div class="searchform" id="searchCustomer">
<form class="frmSearch">
<input name="searchTxt" data-bind="value: customerName" class="k-textbox" />
<button class="k-button" data-bind="click: searchClicked">Search</button>
<button class="k-button" data-bind="click: newClicked">New</button>
</form>
</div>
</script>
customer-search.js where loading above template and creating viewmodel object
$(function(){
var views = {};
templateLoader.loadExtTemplate("customer-search-view-template", "../views/customer-search-template.html");
var layout = new kendo.Layout($('#customer-search-view-template').html());
layout.render($("#main"));
// Create an observable view model object.
var customer = kendo.observable({
customerName: "John",
searchClicked: function() {
this.set("customerName", "Search clicked");
},
newClicked: function() {
this.set("customerName", "New clicked");
}
});
// Bind the view model to the personFields element.
kendo.bind($('#searchCustomer'), customer);
});
When I click the search button, the text is set in the textbox but this also refresh the page with ?searchTxt=Search+clicked in the address bar.
May I know why this button click refresh the page and how do I stop refreshing the page on button click ???
I would try and place the attribute 'type' for each like so:
<button type="button" class="k-button" data-bind="click: searchClicked">Search</button>
<button type="button" class="k-button" data-bind="click: newClicked">New</button>
The page thinks that each are performing a form submit action, but by placing the type attribute, you can access the event you intended for search. You may not need your form tags if you are not going to post any data, but rather just a js event handler. Good luck.
The reason is that you are inside a <form>, which has no settings (URL, method, etc), so the browser's default behavior is probably to perform a GET to the current URL (which is a refresh). You could just use <div> instead of <form> if you just want to execute that method.
I have a directive that sets a CSS class on a form element based on its $valid value. I want to use it with a radio button list. There a multiple radio buttons in the set but I only need to add the directive to one of them because a) they all control the same model and b) the CSS ultimately will reveal a single image tag which I only want once per radio button list.
Here's some HTML:
<div ng-app="myApp">
<input required type="radio" ng-model="type" name="typeGroup" value="type1">Type 1
<input add-validation-class required type="radio" ng-model="type" name="typeGroup" value="type2">Type 2
</div>
Script:
angular.module('myApp', []).directive('addValidationClass', function() {
return {
require: '^ngModel',
link: function($scope, $element, $attrs, $ngModel) {
if (!$ngModel) return;
var update = function () {
alert($ngModel.$dirty);
$element
.removeClass()
.addClass($ngModel.$dirty ? ($ngModel.$valid ? 'valid' : '') : '');
};
$scope.$watch($attrs.ngModel, function (newValue, oldValue) {
update();
});
}
};
});
Fiddle: http://jsfiddle.net/JqBgs/
You can see from the fiddle that the watch fires update regardless of the radio button clicked on. This is what I expected because both radio buttons control the same model. However you can also see that the left radio button isn't dirty. So the CSS class isn't applied.
Why isn't it dirty?
I put this in the HTML:
<div ng-app="myApp">
<input ng-change="myForm.validateRadio.$dirty = true" required type="radio" ng-model="type" name="typeGroup" value="type1">Type 1
<input name="validateRadio" add-validation-class required type="radio" ng-model="type" name="typeGroup" value="type2">Type 2
</div>
What a ridiculous bug in Angular.
I have a JQGrid that has an 'Add' button. In my grid, when the 'Add' button is clicked, a single 'Add' form is opened. The 'Add' form has two default buttons: 'Submit' And 'Cancel'. I want to execute some code on the click event of the Cancel button. I'm not sure how to handle this does anyone have any suggestions?
If I understand you correctly, you want to execute a jquery function upon clicking the CANCEL button. This is what I would do:
<input type="button" value="Cancel" id="btnCancel" />
$('#btnCancel').on('click', function() {
//DO STUFF
});
OR
$('#btnCancel').click(function() {
//DO STUFF
});
OR you could put a function call on the input itself:
function myFunction() {
//DO STUFF
}
<input type="button" value="Cancel" id="btnCancel" onclick="return myFunction();" />