I'm trying to type invoice number as input type i.e. 123456789
After I click Print Record button, the value of invoice number disappears like this:
Aslo I have wrote
<div class="form-group row">
<label for="invoice_no" class="col-sm-2 col-form-label">Inovice Number</label>
<div class="col-sm-10">
<input type="text" class="form-control col-sm-4" name="InvNumber" id="InvNumber" value="{{request()->input('InvNumber')}}">
</div>
</div>
And the Print button looks like:
<div class="form-group row">
<div class="col-sm-12 dol-12" >
<button class="btn btn-secondary float-right" onclick="printDiv()">Print Record</button>
</div>
And printDiv() function is:
<script type="text/javascript" language="javascript">
function printDiv(divName) {
var printContents = document.getElementById('printableArea').innerHTML;
document.body.innerHTML = printContents;
window.print();
}
Clicking a submit button will submit the form it is in.
Presumably, your form's action is the current URL, so it reloads the page.
The new page doesn't have the data in the form fields that you had typed into the previous page.
If you don't want to submit the form, use the type attribute to change the <button> from its default of submit.
As per the documenation, if you don't specify type of button it assumes it as submit button that is why your form is being submitted by default.
Add type="button" in your button
<button type="button" class="btn btn-secondary float-right" onclick="printDiv()">Print Record</button>
submit: The button submits the form data to the server. This is the
default if the attribute is not specified for buttons associated with
a form, or if the attribute is an empty or invalid value.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
Related
I Am trying to open datepicker from textbox. Datepicker open but not showing properly. ( Check Ref Image ).
Can anyone help me ....
Script:-
<script>
$('#milksaledate').datepicker({
format: 'yyyy-mm-dd',
autoclose: true
});
</script>
Modal Text Box
<div class="col-md-3">
<div class="form-group">
<label>Date of Sale <span class="validate">*</span> :</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
<input type="text" class="form-control" name="milksaledate" id="milksaledate">
</div>
</div>
</div>
Script
<script src="plugins/datatables/jquery-3.5.1.js"></script>
<script src="plugins/jquery-ui/jquery-ui.min.js"></script>
[![enter image description here][1]][1]<script src="plugins/jquery-ui/jquery-ui.js"></script>
There could be multiple reasons for this:
Is it maybe possible you have multiple inputs where the id is milksaledate? I think in general it's better to use something like $('.datepicker').datepicker(..) and add class='datepicker' to each input which uses the datepicker.
When are you calling $('#milksaledate').datepicker(..)? Is it on page load, or after the modal has opened? Because if you call this code before a modal has initialized, the datepicker will not affect the modal.
Another reason could be due to z-index or other style issues concerned specifically to jquery-ui
I am building a web application using the ASP.NET Core 3.1 MVC and Razor pages.
I am new to Razor pages.
I created a basic application using above. I created a registeration form having following three fields -
User name
User email address
Verification code
There are two buttons -
Send Code
Register
I am providing a feature in which the user can verify its email address before clicking on the "Register" button.
A verification code will be sent to the user to the email address, when user clicks on the "Send Code" button.
The user should then enter the code in the "Verification code" field and submit the form by clicking on the "Register" button.
Issue
When user clicks on the "Send Code" button, the code is send but the form data gets cleared i.e. "User name" and "User email address" fields values get erased. I used Ajax to call the "Send verification code" function. Following is the code -
Index.cshtml
<form class="form-horizontal" method="post">
<div class="form-row">
<label class="col-sm-2 control-label">Credentials</label>
</div>
<div class="form-group row">
<label asp-for="user.UserName" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<input type="text" asp-for="user.UserName" class="form-control" id="UserName"
name="UserName" placeholder="Enter Full Name"
value="">
</div>
</div>
<div class="form-group row">
<label asp-for="user.UserEmailAddress" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<input type="text" asp-for="user.UserEmailAddress" class="form-control"
value=""
name="UserEmailAddress" placeholder="Enter Email Address" id="UserEmailAddress">
<div class="form-inline">
<button id="btn1"
class="btn btn-primary mb-sm-1">
#Model.EmailVerifCodeLabel
</button>
<div id="grid" class="col">
<input type="text" asp-for="user.EmailVerifCode"
class="form-control" id="Emailverifcode" placeholder="Enter code">
</button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</div>
</form>
#section Scripts {
<script type="text/javascript">
$("#btn1").click(function () {
var UserName = $("#UserName").val();
var UserEmailAddress = $("#UserEmailAddress").val();
alert(UserName);
alert(UserEmailAddress);
$.ajax({
url: "#Url.Page("/Register")?handler=SendEmailVerificationCode",
method: "GET",
data: { UserName: UserName, UserEmailAddress: UserEmailAddress }
})
});
</script>
}
Index.cshtml.cs
public JsonResult OnGetSendEmailVerificationCode(string UserName, string UserEmailAddress)
{
Random generator = new Random();
String verifCode = generator.Next(0, 999999).ToString("D6");
_configuration.GetSection("ConnectionStrings").GetSection("DefaultConnection").Value;
HttpContext.Session.SetString("verifCode", verifCode);
_myemailSender = new EmailSender();
var emailresult = _myemailSender.SendEmailAsync(UserName, UserEmailAddress, verifCode, _configuration);
return null;
}
Question: What is the reason for the razor pages form data getting erased even after using Ajax call?
When user clicks on the "Send Code" button, the code is send but the form data gets cleared i.e. "User name" and "User email address" fields values get erased.
<button id="btn1" class="btn btn-primary mb-sm-1"> Model.EmailVerifCodeLabel</button>
You do not specify the type attribute for above <button> tag within your <form>, it would work as a submit button, which cause form submit and user inputs cleared.
To fix it, you can try to explicitly specify type="button" for btn1 button.
<button id="btn1" type="button"
class="btn btn-primary mb-sm-1">
#Model.EmailVerifCodeLabel
</button>
Or call preventDefault() method to prevent it from submitting a form.
$("#btn1").click(function (evt) {
evt.preventDefault();
var UserName = $("#UserName").val();
//...
I´m trying to make an admin panel where the rights of the user are turned off and on with a switch. I can see that my data is beeing passed to the modal, but th rights on the DB are not beeing updated.
My view looks like this:
<script>
$('#edit').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget);
var id = button.data('id'); // Extract info from data-* attributes
var Admin = button.data('Admin');
var modal = $(this);
$('#edit_form').attr('action', '{{URL::to('/')}}/AdminPanel/'+id);
modal.find('#is-Admin').val(Admin);
});
</script>
and my modal looks like this:
<div class="form-group row">
<label for="Admin" class="col-md-4 col-form-label text-md-right">{{__('Admin?') }}</label>
<div class="col-xs-8 col-sm-7 col-md-6">
<label class="switch">
<input id='is-Admin' name='Admin' type="checkbox">
<span class="slider round"></span>
</div>
</div>
I found a workaround, giving my slider an initial value of 0 (no rights) and defining the value when checked (1), I can pass the right values to the DB.
<input name='Admin' type='hidden' value='0'>
<input id='is-Admin' name="Admin" type="checkbox" value='1'>
I have a settings form that I want to ensure the user doesnt make changes by mistake. When the user is done they will click the save button which will pop up a modal (Bootstrap modals) prompting the user to enter their password to continue with processing the original form.
If the password entered is correct then the first form is submitted, else the page is reloaded / redirected back to itself. The first form will include many fields, but i am just using the one for testing.
<form action="http://localhost.testing/render_confirm_with_password.php" method="POST" id="validation-form" class="form-horizontal confirm-form">
<div class="form-group">
<label for="deletion_reason" class="col-xs-3 col-lg-4 control-label">Enter Your Value</label>
<div class="col-sm-9 col-lg-6 controls">
<input type="text" name="value" placeholder="yourname#email.com" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3 col-lg-6 col-lg-offset-4">
<!-- <button type="submit" class="btn btn-primary"><i class="icon-ok"></i> Process</button> -->
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#password_confirm_modal" data-modal-type="password_confirm" data-modal-title="Delete Transaction" data-modal-text="Are you sure you want to delete this transaction?"><i class="icon-ok"></i> Process</button>
</div>
</div>
</form>
When the user clicks save it will pop up the modal with the form inside is as shown below. This form is processed using jQuery $.ajax()
<form action="#" method="POST" id="validation-form" class="form-horizontal">
<div class="modal-body">
<div class="form-group">
<label for="deletion_reason" class="col-xs-3 col-lg-4 control-label">Password</label>
<div class="col-sm-9 col-lg-6 controls">
<input type="text" name="password" id="password" placeholder="your password" class="form-control" />
</div>
</div>
<p>PASSWORD RESULT -> <span id="password_result"></span></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button id="password_confirm_submit" class="btn btn-primary">Process</button>
</div>
</form>
The ajax code is shown below. Once the modals process button is clicked it sets the password before posting it through to the php page to be processed. In the php I check if the password matches the stored password and echo back MATCH or NO MATCH which gets shown in the modal. If the ajax result equals MATCH I then process the first form with $('.confirm-form').submit(); Im sure I haven't done this in a secure manner.
$('#password_confirm_submit').click(function(e){
var password = $('#password').val();
e.preventDefault();
$.ajax({
type: 'POST',
data: {password: password},
url: 'http://localhost.testing/process_confirm_with_password.php',
success: function(result){
$('#password_result').html(result);
if(result == "MATCH"){
// process form_1
$('.confirm-form').submit();
}else{
// back to form_1
}
}
})
});
I tried redirecting from within the PHP if the passwords didnt match but it still processed form one.
Don't worry, its hard coded just for testing
$password = "password";
if(isset($_POST['password'])){
$pw = $_POST['password'];
if($password == $pw){
// process form_1
echo "MATCH";
}else{
// return to form_1
header('Location: http://localhost.testing/confirm_with_password.html');
echo "NO MATCH";
}
}else{
// return to form_1
echo "NOT SET";
}
What the header function in your PHP code that handles the AJAX request does, is it redirects only the AJAX request and not the page in your browser. Remove the redirect as it will not return to form 1.
If you want to close the bootstrap modal box when the password was entered incorrectly, you'd call $("#password_confirm_modal").modal("hide"); or location.reload(); to refresh/reload the page from within your AJAX callback in your else statement where you handle the incorrect password response, but using the latter you would lose all the data entered into the form.
Instead of doing either of the two you could display a warning in the modal box about the password having been entered incorrectly, and let the user try entering the password again. As for the security aspect, you might want to add the correct password as a hidden field into your original form just before it is submitted, so that when saving the actual data the password can be verified.
I am trying to click a button which is actually a submit without a form which looks some thing like this and store the result in an object
<div class="searchBar-input">
<input id="front-page-search" value="Enter Keyword(s)" type="text">
</div>
<div class="searchBar-submit">
<input id="searchBtn" value="Search" type="submit">
</div>
I have tried puts page.forms and I am getting nothing as there is no form on the page. Its just a text box whose value I have to submit.
I have googled but I found everything about form submit and links. How can I click this? Any suggestions.Thanks in advance
try this :
<div class="searchBar-submit">
<input id="searchBtn" value="Search" type="submit" onclick="document.forms[0].submit();" ></div>