Text of textbox doesn’t update in submit button click - javascript

I have two radiobutton. If one of them be checked a textbox be active and get data.
They are in update page. In page-load fill them by data from database and I check ispostback.
If textbox have text in page load, its text change and everything work fine but if it haven’t text in first place, it keep default text and doesn’t update in submit button click.
String val = "0";
if (radiobutton2.Checked && textbox1.Text.Length != 0)
val = textbox1.Text;
in page load use this code for initialize radiobuttons:
t.ReadOnly = true;
t.BackColor = System.Drawing.Color.Gray;
and there's a javascript code for active and inactive this textbox
function CheckedChanged(rbtnelement, txtelement) {
if (document.getElementById(rbtnelement).checked) {
document.getElementById(txtelement).readOnly = false;
document.getElementById(txtelement).style.backgroundColor = "white";
}
else {
document.getElementById(txtelement).readOnly = true;
document.getElementById(txtelement).style.backgroundColor = "grey";
}
}

It’s because the textbox readonly property become false in c# code (it run in server side) and it become true in javascript (it run in client side). In server side (c# codes) textbox remain readonly and don’t send its text.
if remove one of them and manage textbox in one side (client or server) it will work fine.

Related

Cannot Disable Button from being pressed

I'm creating front end code that plays a game of Black Jack. When the user hits the hit me button, the user draws a card. I'm trying to make it though that if the user draws a card that puts them over a value of 21, then the hit me button is disabled. Yet for whatever reason the button is not being disabled.
Javascript:
if (sum > 21) {
acePresent = checkAces(array); //checks the array of cards for any aces, If so change value of ace from 11 to 1.
if (acePresent) {
sum = sum - 10;
} else {
console.log("No aces and player has busted. Disabling hit me button");
document.getElementById("drawcards").disabled = true;
}
PUG file:
#endturn.ui.red.button
| Stay
#drawcards.ui.green.button
| Hit Me
If you want to disable a button with JS, you can use
document.getElementById("drawcards").setAttribute('disabled', true);
Docs
The other parts of logic depends on you, but some suggestions:
Does your checkAces return with a boolean?
Does checkAces return with the correct value?
Does checkAces synchronous?
Try debugging, why does the function not reach the else statement.
I figured out the issue. The issue was that I needed to add the class "disabled" to the button. The correct Javascript code to do so is this:
document.getElementById("drawcards").classList.add("disabled");

How to validate present checkboxlist in a asp.net page

I have a asp.net page which has checkboxlists and radiobuttonlist. The problem is not all the checkbox list and radiobutton list are visible all the time. some are hidden some are displayed depending on the logic. At the end i have a button to submit that will do something at the server side. How can i do required field validation the all controls using javascript. i tried asp.net validation controls. What happens is it gives me error when no value is selected and right after when i provide values then it doesn't do anything and doesn't gives any error. autopost back is enabled in each control becoz i am capturing the value and storing it in server side. i have a javascript code but it works for only one control at a time.
How can i use it for all the controls present in the curernt page.
<script type = "text/javascript">
var atLeast = 1
function Validate()
{
var CHK = document.getElementById("<%=CheckBoxList1.ClientID%>");
var checkbox = CHK.getElementsByTagName("input");
var counter=0;
for (var i=0;i<checkbox.length;i++)
{
if (checkbox[i].checked)
{
counter++;
}
}
if(atLeast>counter)
{
alert("Please select atleast " + atLeast + " item(s)");
return false;
}
return true;
}
</script>

how to change display of page if errors in form submission

In my django app,I am showing a page that has a button which starts and stops a clock.The page has a form where user can input some details like name,description etc and submit.Initially the div containig this form is hidden by display:none in the css.Only the button is shown,clicking upon which a clock starts running.When user again presses the same button,the clock stops and the hidden form is made visible .
I did this by using javascript which gives a status value to the button- 'start' and 'stop'. I have written a function to if user clicked on it and change the status accordingly.
var buttonStatusChange= function(){
var buttonstatus = $('#clockbtn').attr("value");
if (buttonstatus == "start"){
$('#clockbtn').attr("value","stop");
...
hideElement("userinputdiv");
}else if (buttonstatus == "stop"){
$('#clockbtn').attr("value","start");
...
showElement("userinputdiv");
}
};
var showElement=function(elementId){
var elem_selector='#'+elementId;
$(elem_selector).show();
};
var hideElement=function(elementId){
var elem_selector='#'+elementId;
$(elem_selector).hide();
};
In my django view,I am validating the userinputform and other forms in the post .If validation fails,the original form is displayed (which now have errors next to the field).
def my_view(request,...):
if request.method=='POST' and otherform.is_valid():
...
userinputform_is_valid = userinputform.is_valid()
if not userinputform_is_valid:
return custom_render(request,context,template_name)
...
#otherwise get values from form,save etc..
def custom_render(request,context,template):
req_context=RequestContext(request,context)
return render_to_response(template,req_context)
html for page
....
<div id="userinputdiv">
....
<form ...>
<p>
<span id="myfield">Enter WholeNumber:</span>
{{my_form.myfield}}{{my_form.myfield.errors}}
</p>
...
Unfortunately,since the css has a display:none for the userinputdiv, that div is hidden and so user cannot see the errors.What he now sees is a page with just one button which can start/stop clock.If I take the source of the page ,the errors are there in <ul class="errorlist ...>
So,I am wondering how to make the userinputform visible to user if any validation errors occur during post.If I make the css for userinputdiv display:block ,the errors in page will show as expected -but with all the input fields shown , even before any clock is run..and I don't want that to happen,since I am using start and end times from the clock as hidden fields to be sent in the post and processed in my django view
In same situation i'm using Ajax and if get error from server- dynamically add this for fields(i'm write in placeholder).
And with Ajax variant you may run and stop Clock with AjaxStart- AjaxStop function of jquery.

jquery dialog submit button cannot control enable/disable

I've been battling with this issue all day. I am hoping someone has an answer for me. I did a bunch of searching and can't seem to find an answer.
I have a page that has 3 forms on it. I am working within the 2nd form. None of the forms are embedded within another form.
I have a hidden div that contains two form elements, a drop down list and a text box, and a submit button that I anticipated it posting to the form it is enclosed in. On another button within the form itself (not submit button), I have javascript that launches jquery.Dialog, that code looks like this:
function showReleaseDiv() {
var div = $("#ReleaseHoldsDiv");
var f = div.closest("form");
div.dialog({ width: 270, height: 187, modal: true, title: 'Bulk Hold Resolution' });
div.parent().appendTo(f);
}
This part does function correctly. I've overcome the typical jquery issue where it pulls the contents of the dialog out of the form, so I put it back in the form, but wonder if this is causing my real issues which are:
The drop down list and text box are both required before I post, so I default the submit button to disabled, then I have an onchange event on the drop downlist, and the onkeyup on the text box call the following javascript:
function enablePopupRelease() {
var button = $("PopupReleaseButton");
if (button && button != null) {
button.attr("disabled", "disabled");
if ($("#ResolutionTypeCode").val() != "" && $("#ResolutionComments").val() != "") {
button.removeAttr("disabled");
}
}
return true;
}
Both events fire correctly and I step through the code; all seems fine, but the button disable state does not change.
Please help.
I believe you are missing a hash on this line:
Change:
var button = $("PopupReleaseButton");
to
var button = $("#PopupReleaseButton");
firstly I would clean some code as follows:
function enablePopupRelease() { var button = $("PopupReleaseButton"); if (button) { button.attr("disabled", "disabled"); if ($("#ResolutionTypeCode").val() && $("#ResolutionComments").val()) { button.removeAttr("disabled"); } } return true; }
Let me know if makes any difference please?
if you break through the code ... does it stop at button.removeAttr("disabled"); please?
Are you using the jQuery UI button widget for the form's submit button? If so, you will need to call
$("#PopupReleaseButton").button({disabled: true});
to disable the button.
disabled isn't an attribute, it's a property -- try using button.prop('disabled',true) and button.prop('disabled',false) instead.
http://api.jquery.com/prop/

Check the value of hidden field - Stay on page or Proceed to Next Page

I want to check the value of a hidden field triggered by a "h ref onClick" javascript function. If it is"empty", I want to prompt the user to rate my page using a ratings form (thereby staying on the same page and ignoring the h ref target page. If the value is "rated", I want to simply allow the user progress to their intended page.
Here is some code I've developed so far but doesn't really work that well:
function ratings_prompt(){
var checkIfRated = document.getElementById("hidden_rating");
if (checkIfRated.value == "empty")
{
alert("The Field is set to empty - please rate the form!");
checkIfRated.value=="rated";
}
}
Edit: Sorry but I cannot seem to get all the code into the codeblock.
GF
can't really help out all that much w/out seeing more code and also you didn't really say what the problem is..."doesn't really work that well" is kind of vague...but basically you would have in your link onclick your function call, and you should pass a "this" reference to the function, and you should have return false; in your onclick as well. Then in your function, if the hidden field is not empty, do like location.href = that.href
link
<script type='text/javascript'>
function yourFunction(that) {
if (document.getElementById("hidden_rating").value != "empty") {
location.href = that.href;
} else {
// didn't rate
}
}
</script>

Categories