is it possible to have this form submit when someone presses enter
<div class="form-group">
<?= lang("reference_note", "reference_note");?>
<?php echo form_password('reference_note', $reference_note, 'class="form-control kb-pad" id="reference_note" autofocus="autofocus"');?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal"> <?=lang('close')?> </button>
<button type="button" id="suspend_sale" class="btn btn-primary"><?= lang('submit') ?></button>
</div>
the field requires input of a pincode and then when enter is pressed it should submit the form.
now the code is entered and it only submits when the button is pressed
Are you using JQuery? If so, this will do the trick:
$("input").keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
$("form").submit();
}
});
Otherwise, you can use pure javascript to accomplish it by doing this:
<script type="text/javascript">
function submitOnEnter(inputElement, event) {
if (event.keyCode == 13)
{
inputElement.form.submit();
}
}
</script>
Then on your input element, add this:
onkeypress="submitOnEnter(this, event);"
Related
I'm trying to create a modal popup that contains a confirmation delete button when I press delete on my index view, that button contains the ID of the object you are going to delete, I get it with jquery and replace the form action with it.
My problem is replace it not just replacing the placeholder ID on my action form, its replacing whole route with something like http://localhost/project/public/logout.
Delete button on my index.blade.php:
<button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#deleteModal" data-id="{{$category->id}}"><i class="far fa-trash-alt"></i> Delete</button>
Form on modal:
<form action="{{route('categories.destroy', ['id' => 'placeHolderId'])}}" method="POST">
#csrf
#method('DELETE')
<button type="button" class="btn" data-dismiss="modal">Cancel</button>
<button class="btn btn-danger" type="submit">Delete</button>
</form>
Jquery function that replaces the placeholderId on form action attribute:
$(document).ready(function() {
$('#deleteModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var placeHolderId = button.data('id');
var modal = $(this);
var action = $('form').attr('action');
modal.find('form').attr("action", action.replace('placeHolderId', placeHolderId));
});
});
Result:
<form action="http://localhost/project/public/logout" method="POST">
Expected result:
<form action="http://localhost/project/public/manager/categories/1" method="POST">
give the submit form another id, and on jQuery find the form by that Id, cause right now, its gettign the first form on the DOM and thats logout form
basically put id="categoriesForm" and on jQuery $("#categoriesForm").submit()
$(document).ready(function() {
$('#deleteModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var placeHolderId = button.data('id');
var modal = $(this);
var action = $('#categoryForm').attr('action');
modal.find('#categoryForm').attr("action", action.replace('placeHolderId', placeHolderId));
});
});
or what you can do, is capture when the form is submit, then prevent the default, do the confirmation pop up and then submit
<form action="{{route('categories.destroy', ['id' => 'placeHolderId'])}}" method="POST" id="categoryForm">
#csrf
#method('DELETE')
<button type="button" class="btn" data-dismiss="modal">Cancel</button>
<button class="btn btn-danger" type="submit">Delete</button>
</form>
$(document).ready(function() {
$("#categoryForm").on('submit', function(e) {
e.preventDefault();
var confirmDelete = confirm("Are you sure you want to delete this category!");
if(confirmDelete) {
$(this).submit()
}
})
});
I want to get clickMe buttons value to confirm thing's from users by showing them confirm's modal.
Button:
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<button type="submit" class="btn btn-primary" value="clickMeValue" name="clickMe">Click Me</button>
</form>
PHP:
<?php
if (isset($_POST['clickMe'])){
echo "<script>$(document).ready(function(){
$('#confirmModal').modal('show');
});</script>"; // showing modal from php
//after shoeing modal from php
if(isset($_POST['confirm'])){
echo $_POST['confirm'];
echo "<br/>";
echo $_POST['clickMe']; //this is not echoing
}
}
?>
How can i get clickMe value inside of bootstraps modals confirm thing.
Add an ID to the button and then here is how you can access the value of the clicked button ..
<button type="submit" id="my-button" class="btn btn-primary" value="clickMeValue" name="clickMe">Click Me</button>
And then ..
$(document).ready(function() {
$('#my-button').click(function() {
var the_value = $(this).val();
alert(the_value);
});
});
I want to remove selected div part by click on cancel button php code
while($fetch_user_info= mysqli_fetch_assoc($query_client))
{
<div class="col-sm-12 m-t-20 insight_box">
<button type="button" class="btn btn-default btn-sm cancel_insights" value="<?php echo $c_id;?>">Cancel</button>
<button type="button" class="btn btn-info btn-sm " onclick="window.open('<?php echo $url.'?pan='.$jh1_pan ?>', '_blank')">Yes, On board now!</button>
</div>
}
?>
Jquery :
$('.cancel_insights').click(function() {
var c_id = $(this).val();
$.post('url', {
'c_id': c_id,
'action': 'action'
}, function(data, status) {
if (data == 'true') {
$(this).find('.insight_box').fadeOut();
}
});
});
change
$(this).find('.insight_box').fadeOut();
into this
$(this).parent().fadeOut();
You could add an event so when the button is clicked it gets its parent and removes it, like so
$(".cancel_insights").click(function() {
$(this).parent().remove();
});
How do you show/hide content in a form with jquery? When I click this button it just wants to submit.
$(document).ready(function(){
$( ".hide1" ).toggle();
$( ".show_next_div" ).click(function() {
$( ".hide1" ).toggle();
});
});
<form method="post" action="form_submit_action.php">
<button class="btn btn-primary show_next_div">Next Step</button>
<div class="hide1">
<p>something here hidden, now show with button press</p>
</div>
</form>
just add type="button" to the button tag to stop the submit action
<form method="post" action="form_submit_action.php">
<button type="button" class="btn btn-primary show_next_div">Next Step</button>
<div class="hide1">
<p>something here hidden, now show with button press</p>
</div>
</form>
Note : there is another option like stop event or return false onsubmit at the form
A button usually triggers the form action unless you override it.
So it is better to use input type="button"
Use the below in the form code - This should work !
<form method="post" action="form_submit_action.php">
<input type = "button" class="btn btn-primary show_next_div" value="Next Step" ></input>
<div class="hide1">
<p>something here hidden, now show with button press</p>
</div>
</form>
You can stop the propagation and default action of the click event in the event listener closure.
$(".show_next_div").click(function(e) {
e.preventDefault();
e.stopPropagation();
$(".hide1").toggle();
});
I have a problem in my codes. So the idea is I have two modals that triggered when user Click OK or Fail
So when the user click ok the modal is
<div class="modal-body">
This is the confirmation window to PASS all the Quality Control for, <br/><br/>
Project : <b>'.$row['PROJECT_NAME'].'</b><br/>
HeadMark : <b>'.$row['HEAD_MARK'].'</b><br/>
ID : <b>'.$row['ID'].'</b>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" name="acceptButton" id="acceptButton" class="btn btn-success">Confirm PASS!</button>
and when user click FAIL its still the same body but with different button action,
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" name="rejectButton" id="rejectButton" class="btn btn-danger">Confirm REJECT!</button>
</div>
and my jQuery corresponded with those buttons are,
$('#acceptButton').click(function() {
var myData = $('#data_field');
$.post("acceptClass.php",{
acceptProjectName : myData.attr("data_project"),
acceptHeadMark : myData.attr("data_headmark"),
acceptId : myData.attr("data_id")
},function callback(result){
window.location = "update_fabrication_qc_pass.php";
});
});
$('#rejectButton').click(function() {
var myData = $('#data_field');
$.post("rejectClass.php",{
projectName : myData.attr("data_project"),
headMark : myData.attr("data_headmark"),
id : myData.attr("data_id"),
reasonReject : $("#reasonForRejection").val()
},function callback(result){
window.location = "update_fabrication_qc_pass.php";
});
});
Variables that are to be passed are stored in the hidden input,
echo "<input type='hidden' data_project='$row[PROJECT_NAME]' data_headmark='$row[HEAD_MARK]' data_id='$row[ID]' id='data_field'></input>";
So the problem is, all the buttons only work with the (#rejectButton). So even if I click accept button, only the action in the rejectClass.php are applied to the database. It supposed to be when user click acceptButton, actions in the acceptClass.php that are applied.
Please help me, im so confused.