I have the following HTML where Address is shown using Kendo Window
<form id="myform">
<input id="firstName" class="form-control" />
<input id="lastName" class="form-control" />
<button id="btnOpenWindow" type="button" class="btn btn-info">Click Me To Edit Address</button>
#(Html.Kendo().Window()
.Name("mywindow")
.Title("My Window")
.Width(400)
.Visible(false)
.Modal(true)
.Content("<input id=\"address\" class=\"form-control\">")
.Draggable(false))
<button id="btnSubmit" type="submit" class="btn btn-info">Save</button>
</form>
<script src="~/js/test.js"></script>
test.js file
$("#btnOpenWindow").click(function () {
$("#mywindow").getKendoWindow().open().center();
});
ISSUE
Even though kendo window is defined inside the form it always renders at the end of the page just before body tag, along with its content. So address does not render inside the form. So when user clicks Save, the address information does not get submitted to server.
How do get kendo window's content render inside form?
Related
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();
//...
here is the website http://www.checker.freeproxy.ru/checker/
am trying to fill in the textbox using webbrowser how ever the textbox in webbrowser does not have any id at all here is the html source to the textbox.
<p class="lead">paste proxies you'd like to check below (100 max per time)</p>
<form method="post" action="/checker/" id="checker-form">
<fieldset>
<textarea rows="3"></textarea>
</fieldset>
<p id="checker-form-toolbar">
<button type="submit" class="btn btn-primary btn-block" data-checking-text="Checking proxies...">Check proxies</button>
</p>
i even tried
wb.Document.getElementById("textarea").focus
wb.Document.getElementById("textarea").innerText = Text4.Text
it dont work
im experiencing a weird issue. I have this form basically it just sends data to another cfm file that processes the inputs and updates a database. Today ive added an input type="file" so to process EXIF data from it and extract GPS info. The result page will copy a div to the specified target div. All works fine, data gets extracted and updated, but the div with the response does not appear anymore. As soon as i remove the input="file" div target div gets updated. Seems a response header issue, but i have no idea how to fix it. Thanks.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
$(document).ready(function() {
// bind form using ajaxForm
$('#sede-form').ajaxForm({
// target identifies the element(s) to update with the server response
target: '#htmlExampleTarget',
// success identifies the function to invoke when the server response
// has been received; here we apply a fade-in effect to the new content
success: function() {
$('#htmlExampleTarget').fadeIn('slow');
}
});
});
</script>
<cfoutput query="dett_cli">
<form id="sede-form" enctype="multipart/form-data" action="modifica_sede_response.cfm" method="post" class="form-inline">
<input type="hidden" name="codice" value="#url.codice#" />
<input type="hidden" name="id_sede" value="#url.id_sede#" />
... [other fields]...
<input type="hidden" name="sed_coordinate_o" value="#sed_coordinate#" class="input-large">
<div class="control-group">
<label class="control-label" for="sed_coordinate">JPG Coordinate GPS </label>
<div class="controls">
<div class="input-prepend">
<input type="file" name="sed_coordinate" id="sed_coordinate" class="input-large">
</div>
</div>
</div>
... [other fields]...
<!-- END div.row-fluid -->
<div class="form-actions">
<button type="reset" class="btn btn-danger"><i class="icon-repeat"></i> Resetta</button>
<button type="submit" class="btn btn-success"><i class="icon-ok"></i> Aggiorna</button>
<div id="htmlExampleTarget"></div>
</div>
</form>
</cfoutput>
Try putting the following back into your ajaxForm options.
iframe:true,
forceSync:true,
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>
I have a simple form with a submit button. I would like to use the submit button using an image something like,
<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">
How can I use the image as submit button? Then what I want to change in jquery initialisation?
<form action='#' id='freeForm' method='post' autocomplete="off">
<a>
<input style='border: none' type='submit' value='Submit' />
</a>
</form>
jQuery
$("#freeForm").submit(function()
{
});
Thanks!
jQuery isn't necessary, as an image button already submits a form.
<form>
<input type="image" src="foo.png" />
</form>
Fiddle: http://jsfiddle.net/jonathansampson/AkR95/
u can do some thing like this
$("#image").onclick(function()
{
$("#freeForm").submit();
});
#image is the id of element containing your image.
Try this one:
<input type="submit" value="Enter" name="submit" style="background:url('/imgBG.jpg') no-repeat;width:100;height:50;border:none;"/>