I have a form with one input field, but two buttons. The idea is to check in or out with a code. The process comes to the php file, where it ends with just a blank page. What´s wrong?
EDIT
I changed "btn_in" to "inputAnst_nr" And now it works to reg in. BUT, how to i fetch wich button is pressed?
HTML
<form class="form-inline well" id="usr_stamp" name="usr_stamp" method="post" action="php/usr_time_reg.php">
<div class="control-group">
<input id="inputAnst_nr" name="inputAnst_nr" class="form-control input-lg" placeholder="Ange Anst. nr" type="tel">
<button id="btn_in" name="btn_in" class="btn btn-lg btn-info primary col-sm-offset-1" type="submit">In</button>
<button id="btn_out" name="btn_out" class="btn btn-lg btn-danger primary col-sm-offset-1" type="submit">Ut</button>
</div>
</form>
JS
$(document).ready( function () {
$("#btn_in").on('click', function() {
$("#usr_stamp").attr("action", "php/usr_time_reg.php");
});
$("#btn_out").on('click', function() {
$("#usr_stamp").attr("action", "php/usr_time_reg.php");
});
});
PHP
//Check if POST is empty
if(!empty($_POST)){
//Check if POST is "inputAnst_nr"
if(!empty($_POST['inputAnst_nr'])){
//Put POST_btn_in in variable
$posted_anst_nr = $_POST['inputAnst_nr'];
You could just use the same name attribute value for both buttons, just make sure you designate the appropriate value. Example:
<?php
if(isset($_POST['btn_in_out'])) {
$status = $_POST['btn_in_out']; // In or Out depending on which one you clicked
echo $status;
}
?>
<form class="form-inline well" id="usr_stamp" name="usr_stamp" method="post">
<div class="control-group">
<input id="inputAnst_nr" name="inputAnst_nr" class="form-control input-lg" placeholder="Ange Anst. nr" type="tel">
<button id="btn_in" name="btn_in_out" type="submit" value="In">In</button>
<button id="btn_out" name="btn_in_out" type="submit" value="Out">Ut</button>
</div>
</form>
Sample Output
Related
I created the following HTML form inside a jqxWindow widget for a Laravel project:
<div id="provinceWindow">
<div id="provinceWindowHeader"></div>
<div id="provinceWindowContent">
<form id="provinceForm" method="POST" action="{{route('province.store')}}">
{{ csrf_field() }}
<input type="hidden" name="provinceId" id="provinceId" value=""/>
<div class="form-group row">
<div class="col-6"><label>English province name</label></div>
<div class="col-6"><input type="text" name="provinceNameEn" id="provinceNameEn" maxlength="20"/></div>
</div>
<div class="form-group row">
<div class="col-6"><label>Spanish province name</label></div>
<div class="col-6"><input type="text" name="provinceNameSp" id="provinceNameSp" maxlength="20"/></div>
</div>
<br/>
<div class="form-group row justify-content-center">
<input type="button" value="Submit" id="submitBtn" class="btn btn-sm col-3" />
<span class="spacer"></span>
<input type="button" value="Cancel" id="cancelBtn" class="btn btn-sm col-3" />
</div>
</form>
</div>
</div>
This is the javascript file:
$(document).ready(function () {
var datarow = null;
$.ajaxSetup({
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
});
//-----------------------------
// Window settings
//-----------------------------
$('#provinceWindow').jqxWindow({
autoOpen: false,
isModal: true,
width: 400,
height: 160,
resizable: false,
title: 'Province name',
cancelButton: $('#cancelBtn'),
initContent: function () {
$('#submitBtn').jqxButton();
$('#submitBtn').on('click', function () {
$('#provinceForm').submit();
});
}
}).css('top', '35%');
The file routes\web.php has only one resourse route defined for this page:
// Routes for province maintenance
Route::resource('province', 'provinceController');
Checking the available routes with php artisan route:list command, I get these:
Method URI Name Action
GET|HEAD / APP\Http\Controllers\homeController#index
GET|HEAD province province.index APP\Http\Controllers\provinceController#index
POST province province.store APP\Http\Controllers\provinceController#store
GET|HEAD province/create province.create APP\Http\Controllers\provinceController#create
GET|HEAD province/{province} province.show APP\Http\Controllers\provinceController#show
PUT|PATCH province/{province} province.update APP\Http\Controllers\provinceController#update
DELETE province/{province} province.destroy APP\Http\Controllers\provinceController#destroy
GET|HEAD province/{province}/edit province.edit APP\Http\Controllers\provinceController#edit
My controller action:
public function store(Request $request)
{
$fields = $request->all();
if ($request->provinceId == '') {
$province = new province($fields);
$validator = Validator::make($fields, $province->rules());
if ($validator->fails()) {
return redirect('')->withErrors($validator)->withInput();
}
else {
$province->save();
}
return view('province/index');
}
}
The form is shown on top of a jqxGrid widget, as a modal window, in order to capture the required information and perform the CRUD operations for the corresponding DB table.
The problem is, when I click the "Submit" button the window is closed and nothing else happens. The form is not posted to the indicated action and the data entered get lost.
It does not matter if I initialize the submitBtn inside the initContent or outside of it. The form is never posted.
I also tried the Close event of the jqxWindow to no avail.
If I take a look to the generated HTML it looks like this:
<form id="provinceForm" method="POST" action="http://mis:8080/province">
<input type="hidden" name="_token" value="Y9dF5PS7nUwFxHug8Ag6PHgcfR4xgxdC43KCGm07">
<input type="hidden" name="provinceId" id="provinceId" value="">
<div class="form-group row">
<div class="col-6">
<label>English province name</label>
</div>
<div class="col-6">
<input type="text" name="provinceNameEn" id="provinceNameEn" maxlength="20">
</div>
</div>
<div class="form-group row">
<div class="col-6">
<label>Spanish province name</label>
</div>
<div class="col-6">
<input type="text" name="provinceNameSp" id="provinceNameSp" maxlength="20">
</div>
</div>
<br>
<div class="form-group row justify-content-center">
<input type="button" value="Submit" id="submitBtn" class="btn btn-sm col-3 jqx-rc-all jqx-button jqx-widget jqx-fill-state-normal" role="button" aria-disabled="false">
<span class="spacer"></span>
<input type="button" value="Cancel" id="cancelBtn" class="btn btn-sm col-3">
</div>
</form>
Pressing the submit button takes me to the home page and nothing gets added to the DB table.
I guess the issue has something to do with Laravel routes because I get no errors.
What is missing or what is wrong with this approach?
Any light is appreciated.
Alright, because I erroneously added in my Model a validation, that was not needed, for a column (there was already a constraint defined at the DB table level), it was not possible to fulfill the validator when saving a new record. I commented that line in my Model and, that was it!
protected $rules = array(
'provinceNameEn' => 'required|alpha|max:20',
'provinceNameSp' => 'required|alpha|max:20'
//'deleted' => 'required|in:M,F' // This is already validated in a DB constraint.
);
I noticed the control was returned to my home page but without any message or error, but if you pay attention to my controller it was precisely the behavior programmed. However, there is no implementation to display the error messages, so I added dd($validator); before that return statement. There I read the message and finally found the solution.
wondering if anyone can help. As part of a form, i'm using a selection of buttons to capture satisfaction, rather than radio or dropdown. I'm using a jquery to capture the value of the button and adding it to a hidden field - the field the form is using to submit the information.
All works fine, however, i want to put validation, to make sure an answer is captured - but HTLM5 validation does not support buttons or hidden fields. Is there a was i can use JS to check if a button has been pressed on submit, and if not, toggle the html validator for that field?
Here the code i have so far;
<div class="form-group">
<label class="control-label required input_satisfaction" for="feedbackQuestions[56]">Please rate the venue facilities: <span class="required ">*</span></label>
<input required="required" type="hidden" name="feedbackQuestions[56]" id="feedbackQuestions_56">
<div id="feedbackQuestions_56_group" class="row">
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][0]" value="Excellent">Excellent</button></div>
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][1]" value="Good">Good</button></div>
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][2]" value="Satisfactory">Satisfactory</button></div>
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][3]" value="Poor">Poor</button></div>
</div>
<script>
$('#feedbackQuestions_56_group .satisfactionBtn').click(function (e) {
e.preventDefault();
$('#feedbackQuestions_56_group .satisfactionBtn').each(function( index ) {
$( this ).removeClass('active');
});
var thisval = $(this).val();
$('#feedbackQuestions_56').val(thisval);
$(this).addClass('active');
});
</script>
</div>
I know i need to add a trigger to the submit button futher down the page, so i can do a jquery .click() and then prevent the event until i've checked, but not sure how to actually check or how to trigger the validation.
I would actually store it as a global JS variable rather than a hidden field. you can reparse this value to the hidden field through jQuery if you want, but I don't see a use in that. Also divs are selectable in JS as well, so you do not need them to be just one or the other.
var isSelected = false;
$('#feedbackQuestions_56_group .satisfactionBtn').click(function (e) {
e.preventDefault();
$('#feedbackQuestions_56_group .satisfactionBtn').each(function (index) {
$(this).removeClass('active');
});
var thisval = this.id;
console.log("thisval: " + thisval);
$('#feedbackQuestions_56').val(thisval);
$(this).addClass('active');
isSelected = true
});
$('#onSubmit').click(function () {
console.log(isSelected);
//
// Look into ajax post command
//
if (isSelected == true) {
// ajax call here
}
else {
alert("Please select a rating")
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="form-group">
<label class="control-label required input_satisfaction" for="feedbackQuestions[56]">Please rate the venue facilities:
<span class="required ">*</span>
</label>
<div id="feedbackQuestions_56_group" class="row">
<div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block" name="Questions[56][0]" id="Excellent">Excellent
</div>
<div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block" name="Questions[56][1]" id="Good">Good
</div>
<div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block" name="Questions[56][2]" id="Satisfactory">Satisfactory
</div>
<div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block" name="Questions[56][3]" id="Poor">Poor
</div>
<div class=" btn btn-primary btn-lg btn-block" id="onSubmit">Submit</div>
</div>
Since that hidden field value is filled by code not user, code should validate the value(or no need to validate).
It sounds really strange that the hidden field need to be validated.
Edited
If you really need to validate hidden field, the original way is not working, but you can do it tricky by just add opacity:0 style.
Add such style make it invisible but not hidden, so the validate should work fine as usual.
But just remember you must change the type="hidden" to type="text"
I have a problem regarding bootstrap modal: I have an input box and a button, in the input box, the user should type their code, then click the check button:
<form class="form-inline" action="" method="post">
<div class="form-group">
<input type="text" class="form-control input-sm input-inverse" name="appcode" required="" data-form-field="appcode" placeholder="Insert Your Code"></div>
<div class="buttons-wrap">
<button name="Xcheck" class="btn btn-secondary display-4 " type="submit" role="button" data-toggle="modal" data-target="#modalID">Check</button>
</div>
</form>
When the button is clicked, it will run a PHP code in the same page, also check either the inserted code exists in the database or not.
Here is the php code:
<?php
$con= mysqli_connect("localhost", "root", "");
mysqli_select_db($con, "cobathesis");
if (isset($_POST['Xcheck'])){
$appcode= $_POST['appcode'];
$check=mysqli_query($con,"select * from applicantdata where appcode='$appcode'");
$checkrows=mysqli_num_rows($check);
if($checkrows>0) {
// the modal should be loaded here
}else{
echo "<script>alert('You Inserted either the wrong Code or the Code is unregistered'); location.href='';</script>";
}
}
?>
Is it possible to use the same button (check button) to post the value and load the modal at the same time?
Thank you for your response.
You could use something like
$('#myForm').on('submit', function(e){
$('#myModal').modal('show');
e.preventDefault();
});
CodePen by Hana Piers
How can I disable button using javascript or jquery? I want to disable a button if certain action is happened. Example If the order_status is Accepted then the Accept button is disabled. I searched in internet but I dont quiet understand why my code doesn't work for me. I tried both javascript and jquery (See codes below) but nothings happen, the button didn't disable.
HERE MY CODES
<div class="form-group">
<label for="order_status" class="col-sm-2 control-label" style="width:20%;">Order Status</label>
<input type="text" class="form-control" name="order_status" id="t_order_status" style="width:80%;" placeholder="" value="" required="required" readonly>
</div>
<button type="button" input style="background-color:#4CAF50;color:white;border-color:#000000;" name="submitDelivered" id="submitDelivered" class="btn btn-success" data-toggle="modal" data-target="#myDeliverModal" onclick="deliver('<?= $_POST['order_id'] ?>')" > Delivered </button>
<button type="button" input style="background-color:#0000FF;color:white;border-color:#000000;" name="submitAccept" id="submitAccept" class="btn btn-success" data-toggle="modal" data-target="#myAcceptModal" onclick="accept('<?= $_POST['order_id'] ?>')" > Accept </button>
<button type="button" style="background-color:#FFFF00;color:black;border-color:#000000;" class="btn btn-success" data-toggle="modal" data-target="#myDropdown" onclick="send('<?= $_POST['order_id'] ?>')"> Send </button>
<button type="button" input style="background-color:#f44336;color:white;border-color:#000000;" name="submitCancel" id="submitCancel" class="btn btn-success" data-toggle="modal" data-target="#myCancelModal" onclick="cancel('<?= $_POST['order_id'] ?>')">Cancel</button>
<script>
function viewOrder(order_id, order_id, user_id, order_date, order_time, order_deliveryCharge, order_totalAmount, address, coordinates, driver_number, order_status) {
document.getElementById("t_order_id").setAttribute("value", order_id);
document.getElementsByName("ORDER_ID_MODAL_2")[0].setAttribute("value", order_id);
document.getElementById("t_user_id").setAttribute("value", user_id);
document.getElementById("t_order_date").setAttribute("value", order_date);
document.getElementById("t_order_time").setAttribute("value", order_time);
document.getElementById("t_order_deliveryCharge").setAttribute("value", order_deliveryCharge);
document.getElementById("t_order_totalAmount").setAttribute("value", order_totalAmount);
document.getElementById("t_address").setAttribute("value", address);
document.getElementById("t_coordinates").setAttribute("value", coordinates);
document.getElementById("t_drivers_number").setAttribute("value", driver_number);
document.getElementById("t_order_status").setAttribute("value", order_status);
document.getElementById("ORDER_MODAL_ACCEPT").setAttribute("value", order_id);
document.getElementById("ORDER_MODAL_DELIVER").setAttribute("value", order_id);
document.getElementById("ORDER_MODAL_CANCEL").setAttribute("value", order_id);
}
function accept() { //THIS IS MY CODE FOR JAVASCRIPT
var x = document.getElementById("order_status").value;
if(x == "Accepted"){
document.getElementById("submitAccept").disabled = true;
}
}
THIS IS MY CODE FOR JQUERY
$(document).on("click", ".submitAccept", function (e) {
$(".submitAccept").attr("disabled", true);
}
I ALSO TRIED THIS
$(function () {
($("#order_status").keyup(function (){
if ($("#order_status").val() == 'Accepted') {
('#submitAccept').prop('disabled',true);
}else{
('#submitAccept').prop('disabled', false);
}
})
)};
);
</script>
My mind is blank, Im struggling right now. I hope you understand me guys. I hope can help me guys with my problem, I needed it so badly for the transaction for our ordering system.
If you are trying to select an element by its id using JQuery you have to use # selector : see jQuery selectors.
If you are using jQuery 1.6+ use prop() instead of attr()
$(document).on("click", "#submitAccept", function () {
$(this).prop("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="form-group">
<label for="order_status" class="col-sm-2 control-label" style="width:20%;">Order Status</label>
<input type="text" class="form-control" name="order_status" id="t_order_status" style="width:80%;" placeholder="" value="" required="required" readonly>
</div>
<button type="button" input style="background-color:#0000FF;color:white;border-color:#000000;" name="submitAccept" id="submitAccept" class="btn btn-success" data-toggle="modal" data-target="#myAcceptModal" > Accept </button>
Try Below code
$(document).on("click", "#submitAccept", function (e) {
$(this).attr("disabled", true);
}
You can try like this if you want target class
<button type="button" class="accepted" >Accepted</button>
<button type="button" class="not-accepted">Not Accepted</button>
$(document).ready(function() {
$(".accepted").attr("disabled",true);
});
here is js fiddle running example
I'm wondering how I can make this work, unfortunately my code doesn't work. I want my form to have two buttons; one goes to the other PHP file, and the other goes to another PHP file.
The first button, SUBMIT, is working fine. But the second button, SEE RANK, is not working, nothing happens after clicking it
<section class="small-section bg-gray-lighter" id="start">
<div class="container relative">
<!-- FORMS -->
<form id="format" class="form align-center" action="Algorithms/article.php" method = "GET">
<form id="rank" class="form align-center" action="Algorithms/Main2.php" method = "GET">
<div class="row">
<div class="col-md-8 align-center col-md-offset-2">
<div class="newsletter-label font-alt">
Type the description of your case below
</div>
<div class="mb-20">
<!-- INPUT TEXT FIELD -->
<input placeholder="Start typing here" name = "caseInput" class="newsletter-field form-control input-md round mb-xs-12" type="text" required/>
</form>
</form>
<!-- BUTTONS -->
<button form="format" type="submit" class="btn btn-mod btn-medium btn-round mb-xs-10">
Submit
</button>
<button form="rank" type="submit" class="btn btn-mod btn-medium btn-round mb-xs-10">
See rank
</button>
<!-- END OF BUTTONS -->
</div>
<div class="form-tip">
<i class="fa fa-info-circle"></i> Ex. "The father killed her daughter."
</div>
<div id="subscribe-result"></div>
</div>
</div>
</div>
</section>
And it looks like this:
First, it doesn't make sense to use <form> inside <form>. There are couple of ways to do this:
Method 1
Use 2 forms instead.
<form method="post" action="php_file_1.php" id="form1">
<!-- Your further HTML Code Goes Here... -->
</form>
<form method="post" action="php_file_2.php" id="form2">
<!-- Your further HTML Code Goes Here... -->
</form>
Method 2
Use a single PHP file. But perform different function on each button click.
<form method="post" action="functions.php" id="form">
<!-- Your further HTML Code Goes Here... -->
<input type="submit" name="action_1" id="button1">
<input type="submit" name="action_2" id="button2">
</form>
Then in your functions.php file:
if(isset($_POST['action_1'])){
action1(); // Your Function Name...
}
elseif(isset($_POST['action_2'])){
action2(); // Your second function
}
You cannot have a form inside a form. (This is why your second buton does not work)
So, your solution will be to have 2 'submit' elements with different names in your form. Then, on form submission, detect and process accordingly depending on which button was pressed.
<!-- BUTTONS -->
<input type="submit" name='submitAction1' class="btn..." value='Submit'>
<input type="submit" name='submitAction2' class="btn..." value='See rank'>
if(isset($_POST['submitAction1'])){
// process form 1
} elseif (isset($_POST['submitAction2'])){
// process form 2
}
From XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) - B. Element Prohibitions
form must not contain other form elements
Implementation example with a javascript function which changes the form's action:
<html>
<body>
<script>
function mySubmit(wtf) {
if ('article' == wtf ) {
document.forms['myForm'].action = 'Algorithms/article.php';
} else if ('Main2' == wtf ) {
document.forms['myForm'].action = 'Algorithms/Main2.php';
} else
return false;
document.forms['myForm'].submit();
}
</script>
<form name="myForm">
<input type ="button" value="submit article" class="btn btn-mod btn-medium btn-round mb-xs-10" onClick="mySubmit('article')">
<input type ="button" value="submit Main2" class="btn btn-mod btn-medium btn-round mb-xs-10" onClick="mySubmit('Main2')">
</form>
</body>
</html>