I want the user to click a button to add a row on my page before they post the form info.
Basically there is a button on the page which adds a string line to a div, and i want to make sure they've clicked this button at least once. If they have they can successfully post, if not i want to display an error message saying the div must have at least 1 item inside of it
Im not sure how to approach solving this issue. Should i use jQuery? Is there a way to do this with DataAnnotations
jQuery seems like a good fit for this:
/* Lets declare a global boolean variable to hold the status of having at least one item in the div */
var rowAdded = false;
// listen for the add-row click. When clicked, toggle rowAdded.
$('button').click(function() {
rowAdded = true;
});
// listen for the form submission and check rowAdded before sending the form.
$('#submit').click(function() {
if(rowAdded){
// submit the form
} else {
// user has not added a string row to the div, prompt them to add a row.
// prompt method 1, use alert()
alert('Please add a row before submitting this form.');
// prompt method 2, print string to the dom
var promptString = 'Please add a row before submitting this form.';
$('#prompt-div').append('<p>' + promptString + '</p>');
}
});
Will users know what to do?
Can you not just add a checkbox that indicates: [] check this to add a row, then a button to submit?
you can simply hide the submit button (or disable it) and show only the button to add that row and when it's clicked show the submit button
Related
I have a MVC web application with two buttons - Save and Submit.
When a user first Submits and simultaneously clicks the Save button as soon as he clicks the submit button there is a error in the data send.
I am pretty new to programming and hence have no idea how can i avoid the simultaneous clicks.
Any suggestions on how i can handle this?
Thanks
You can do the following:
Have Submit button as “Submit” button (rendered in html as input type=“submit”)
Have Save button as normal button.
To have Save button rendered as normal button (rendered as input type=“button” you can have UseSubmitBehavior: False.
You can then use OnClientClick on one of the buttons and prevent the other button from being clicked.
Here you can get creative also. You can disable the clicked button and show “Saving ...” like below:
// its a button or document.getElementById
if (button.getAttribute('type') == 'button') {
button.disabled = true;
button.className = "inactive class";
button.value = "Saving, please wait. Have some peanuts while we save...";
Try disabling the Save button in the code of the Submit button HTML onclick=" ... "
Simple solution with jQuery:
$("[type='submit']").on("click", function (e) {
// !!!IMPORTANT!!!
e.preventDefault();
var $self = $(this), $form = $self.closest("form");
// Valid - before submit
if ($form.valid()) {
// Update text in button, ex: Sending..., Loading...
$self.attr("disabled", "disabled").html("<i class='fa fa-spinner fa-pulse fa-lg fa-fw' aria-hidden='true'></i>Loading...");
// Block all inputs.
$form.find(":input:not([type=hidden])").attr("readonly", "readonly");
// Submit form.
$form[0].submit();
return true;
}
// !!!IMPORTANT!!!
return false;
});
I'm using an HtmlButton to make some HtmlTableRows that have been hidden visible. The HtmlButton is created and set up like so:
HtmlButton btnAddFoapalRow = null;
. . .
btnAddFoapalRow = new HtmlButton();
btnAddFoapalRow.Attributes["type"] = "button";
btnAddFoapalRow.InnerHtml = "+";
btnAddFoapalRow.ID = "btnAddFoapalRow";
this.Controls.Add(btnAddFoapalRow);
I then create HtmlTableCells programmatically, add those cells to dynamically created HtmlTableRows, and then add the HtmlTableRows to an HtmlTable.
Rows 3 and 4 start off life hidden under a bushel (so to speak):
foapalrow3.Style["display"] = "none";
. . .
foapalrow4.Style["display"] = "none";
The above happens server-side/C#; I respond to btnAddFoapalRow's click in jQuery to make the next hidden row, as long as there is one, unhidden/visible:
/* This makes the next hidden row visible, as long as there is one */
$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
$('[id$=foapalhtmltable]').find('tr:hidden:first').show();
});
This works slicker than Grace. The problem is that when I submit the form, the HtmlTable reverts back to only showing its initial two rows (header row and one data row); the one or two additional data rows I've added by clicking btnAddFoapalRow "go invisible" again (revert to "display:none" apparently). If I re-click btnAddFoapalRow, the rows reappear with any entered data still intact -- so they haven't really been 86'd, they're just being shy -- but how can I prevent these rows from folding up/hiding at all?
Going with what #TrueBlueAussie said in the comments, you need to have the fact that the form has been submitted persist through a page load.
You can either handle that somehow on the server side (DB Update perhaps) or to make it simpler you could just create a cookie with JavaScript.
I have an asp.net page which loads and writes values from a record to the controls on the page.
There is a link to another page and a save button.
If the user clicks save, fine, the changes are saved and they can navigate to wherever.
If they dont click save and click the link, any changes are lost.
Is there a way to check if the save has been clicked while the user has that page loaded?
I'm thinking along the lines of an OnClick Javascript function for the link such as -below, I'm not sure though how to test for the save button being clicked - can anyone point me in the right direction?
function handleHyperLinkClick(hyperlink)
{
confirm("You have not clicked save, any changes will be lost - click cancel then save your changes or ok to continue");
}
Add a bool variable, that is default false, set to true if the button has been clicked. Then check the value if user leaves the page.
You can do using hidden field. when user click on save button then set hidden field value.
You have to keep a temporary variable in javascript like state;
`
var state = 0;
//your function calls here
function yourFunction()
{
//// your coding
state =1;
//// your coding
}
`
In this case, you have to submit the value or navigate to other page when state=1, otherwise you shouldnt. This flag to be checked whilst clicking link (if its navigating via function) or onBeforeUnload event for page.
Please correct me know if you are looking for something other.
You can attach some value to a variable when the button is clicked. Then when the user tries to navigate, check whether that variable has that value. If so, it has been clicked, else not:
button = document.getElementById("button");
button.onclick = function() { clicked = true; }
document.getElementById("link").onclick = function() { if (!clicked) { alert("Sure?"); }
Assuming you are using ASP.NET server buttons like this:
<asp:Button runat="server" id="someButtonId" Click="someClickHandler" Text="Continue" />
If I were you, I would use jQuery to dynamically bind the click event of the button like this:
$(document).ready(function() {
$("input[type=button][id$=someButtonId]").on("click", function(e) {
if(!confirm("You have not clicked save, any changes will be lost - click cancel then save your changes or ok to continue"))
{
e.preventDefault()
}
});
});
Hope this helps.
I have a repeater and inside the repeater I have a textbox and button (together in an ASCX). The textbox is pre-populated with hint text, which is cleared on focus.
My issue is that if the when one textbox is filled by the user, and the user clicks the submit button, the hint text gets submitted inside the other controls.
I tried to do custom validation, but the validator tries to validate all the controls inside the repeater, and the other controls still contain the hint text, if it was not touched.
Since this is as ASCX, I don't want to go with a server-side solution that would force me to change the code of the ItemDataBound event of the page hosting the control.
Are there any client-side solutions or server-side solutions I can still keep encapsulated inside my ASCX?
If you are using public properties to pass the data out of the ASCX to the parent page for processing, you could account for the ghost text there...
public property TextValue
{
get
{
if (Textbox.Text != "Ghost Text")
{
return Textbox.Text;
}
}
}
For client side, you could bind to the click event of the button and clear the text if it matches the ghost text value...
$(function() {
$('#btnSubmit').click(function() {
var txt = $(this).siblings('txtValue');
if (txt.val() == 'Please Enter Your Name')
txt.val('');
});
})
You could register the script from your ASCX using a ScriptManager.
I have 10 textboxes in Company page. 5 of them are common in Location page.
My goal is to ask user if he wants to update just company page or even location page. If the user changes 5 textboxes
that are common in Location Page, the popup shows as "Do you want to update Location Page as well" or if the user changes the other 5, then popup shows
"Do you want to save?"
How do we determine what textboxs are changed and which popup should be shown?? Could someone help me out. Thanks all :)
One of the methods is:
install jquery (just for easier access to controls)
assign a className like class='common' to the first set of textboxes
assign another className like class='other' to the second set of textboxes
handle onblur event for 'commons':
$(":input.common").blur(function() {
if ($(this).data("changed") && confirm("Do you want to update Location Page as well?")) {
// TODO: perform update
}
}).keydown(function(e) {
$(this).data("changed", true);
}).focus(function(e) {
$(this).data("changed", false);
});
handle onblur event for 'others':
$(":input.other").blur(function() {
if ($(this).data("changed") && confirm("Do you want to save?")) {
// TODO: perform save
}
}).keydown(function(e) {
$(this).data("changed", true);
}).focus(function(e) {
$(this).data("changed", false);
});
Got an idea?