This is my code:
<asp:Button ID="btnSave" runat="server" OnClick="Save" CssClass="StylizedButton" resourcekey="btnSave" />
<div id="lbltot"></div>
JavaScript code:
$(document).ready(function() {
$("#<%= btnSave.ClientID %>").click(function() {
var functionReturn = true;
var focusElement = null;
var tot = $("<%= lblTotal.ClientID %>").val();
var txt1 = $("<%= txt1.ClientID %>").val();
var txt2 = $("<%= txt2.ClientID %>").val();
var txt3 = $("<%= txt3.ClientID %>").val();
var txt4 = $("<%= txt4.ClientID %>").val();
var cal = parseInt(txt1) + parseInt(txt2) + parseInt(txt3) + parseInt(txt4);
if (cal == 100)
{ return true; }
else {
$("lbltot").html("Total must be equal to 100%");
focusElement = tot;
functionReturn = false;
}
});
});
On the client side validation, I have to check the value of the TextBox, and the total should be equal to 100. If true, I should allow it to execute. If not, I need to throw an error stating the total should be 100.
What happens is that, after triggering the submit button, it show the text message only until the postback, and then it disappears. This part:
else {
$("lbltot").html("Total must be equal to 100%");
focusElement = tot;
functionReturn = false;
}
Is there any better way to display the error that persist?
You should return that functionReturn so that the submit action won't happen
Related
I have the following script. After a user clicks submits I want to redirect the user to the same page and populate the drop down and input box with parameter values from the url. Unfortunately they are not populating once the redirect completes. I also need to strip off * from the FilterMultiValue parameter so that the textbox has the orginal value entered?
I've checked the parameter values using an alert function and that works?
<script type="text/javascript">
function getUrlParams() {
var paramMap = {};
if (location.search.length == 0) {
return paramMap;
}
var parts = location.search.substring(1).split("&");
for (var i = 0; i < parts.length; i ++) {
var component = parts[i].split("=");
paramMap [decodeURIComponent(component[0])] = decodeURIComponent(component[1]);
}
return paramMap;
}
function RedirectUrl() {
var tb = document.getElementById("tbSearch").value;
var cs = document.getElementById("sfield").value;
var url = "";
if (tb != "") {
url = "FilterName=" + cs + "&FilterMultiValue=*" + tb + "*";
window.location.href = "mypage.aspx?" + url;
var params = getUrlParams();
alert(params.FilterName);
document.getElementById("sfield").value = params.FilterName;
document.getElementById('tbSearch').value = params.FilterMultiValue;
}
else {
return false;
}
}
function ClearUrl() {
window.location.href = "mypage.aspx";
document.getElementById("sfield").value = "";
document.getElementById('tbSearch').value = "";
}
</script>
Search Field:
<select id="sfield">
<option selected value="Title" >Title</option>
<option value="Body">Body</option>
</select>
Search Text:
<input type="text" id="tbSearch" />
<input type="button" id="btnSearch" value="Search" onclick="return RedirectUrl();" />
<input type="button" id="btnClear" value="Clear" onclick="return ClearUrl();" />
window.location.href = "mypage.aspx?" + url;
reloads the page, which will result in all code after that not beeing executed.
What you want to do is to add code for pageload and check if the parameters are given, then populate the textbox.
Something like:
window.addEventListener('load', function(){
var params = getUrlParams();
if(typeof params.FilterName !== 'undefined'){
// removes the first and the last char from the string
var t = params.FilterMultiValue.substr(1, params.FilterMultiValue.length-2);
document.getElementById("sfield").value = params.FilterName;
document.getElementById('tbSearch').value = t;
}
});
the correct or wrong answer outputs and quickly disappears. How do I get the answer to remain on the screen. I want to keep the html and js files separate. What I want to do later is add other phrases to the program.
INDEX.HTML
<head> </head>
<body>
<form name="myForm">
<div id ="phrase"></div>
<input type = "text" id = "textinput">
<button id="myBtn">Click here</button>
<div id ="feedback"></div>
</form>
<script src = "phraseScrambler.js"></script>
</body>
</html>
PHRASESCRAMBLER.JS
var words = ['how', 'are', 'you', 'today?'];
var correctInput = "how are you today";
var userInput = 'how are you today?';
var newWords = words.slice(0);
shuffle(newWords);
question();
function question() {
var el = document.getElementById('phrase');
el.textContent = newWords.join(' ');
document.getElementById("myBtn").onclick = checkAnswer;}
function checkAnswer() {
var elMsg = document.getElementById('feedback');
if (document.myForm.textinput.value == correctInput) {
elMsg.textContent= "correct";}
else {
elMsg.textContent= "wrong answer";}}
function shuffle(newWords) {
var counter = newWords.length, temp, index;
while (counter > 0) {
index = Math.floor(Math.random() * counter);
counter--;
temp = newWords[counter];
newWords[counter] = newWords[index];
newWords[index] = temp;}
return newWords;}
First of all don't bind click event if you want to handle form submission, forms have dedicated event called onsubmit. When form is submitted default browser behavior is to navigate to form action (in your case reload the page). You need to prevent this by returning false from the onsubmit handler.
Corrected HTML will be (I gave an id to the form):
<form name="myForm" id="myForm"> ... </form>
And then event handling will look like (note return false; in checkAnswer function):
var words = ['how', 'are', 'you', 'today?'];
var correctInput = "how are you today";
var userInput = 'how are you today?';
var newWords = words.slice(0);
shuffle(newWords);
question();
function question() {
var el = document.getElementById('phrase');
el.textContent = newWords.join(' ');
document.getElementById("myForm").onsubmit = checkAnswer;
}
function checkAnswer() {
var elMsg = document.getElementById('feedback');
if (document.myForm.textinput.value == correctInput) {
elMsg.textContent = "correct";
} else {
elMsg.textContent = "wrong answer";
}
return false;
}
function shuffle(newWords) {
var counter = newWords.length,
temp, index;
while (counter > 0) {
index = Math.floor(Math.random() * counter);
counter--;
temp = newWords[counter];
newWords[counter] = newWords[index];
newWords[index] = temp;
}
return newWords;
}
<form name="myForm" id="myForm">
<div id ="phrase"></div>
<input type = "text" id = "textinput" />
<button>Click here</button>
<div id ="feedback"></div>
</form>
I have here a form validation. I used this validation in multiple editing records in php. I have two textbox that comparing it's value. I tried to mix my validation script and comparing value script but isn't working properly.
This what I have now but I'm having problem with this when I tried to input lower value in n_quanity field the validation error message is not working and it allowed the form to submit. I want to display error in span not alert the message. Help please?
var textBox1 = $(".n_quantity");
var textBox2 = $(".pr_total");
$('.qty').each(function(){ // use $.each for all project class
qty = this.value;
for (var i = 0,len=textBox1.length; i < len;i++) {
if(qty == "") {
$(this).next("span.val_qty").html("This field is Required.").addClass('validate');
validation_holder = 1;
} else if (parseInt(textBox2[i].value) > parseInt(textBox1[i].value)) {
$(this).next("span.val_qty").html("This field is Required.").addClass('validate');
validation_holder = 1;
return false;
} else {
$(this).next("span.val_qty").html("");
}
}
});
And this is my full code
<script>
jQuery(function($) {
var validation_holder;
$("form#register_form input[name='submit']").click(function() {
var validation_holder = 0;
$('.qty').each(function(){ // use $.each for all project class
qty = this.value;
if(qty == "") {
$(this).next("span.val_qty").html("This field is Required.").addClass('validate');
validation_holder = 1;
} else {
$(this).next("span.val_qty").html("");
}
});
if(validation_holder == 1) { // if have a field is blank, return false
$("p.validate_msg").slideDown("fast");
return false;
} validation_holder = 0; // else return true
/* validation end */
}); // click end
}); // jQuery End
</script>
<script>
$('#sbtBtn').on('click', function () {
var textBox1 = $(".n_quantity");
var textBox2 = $(".pr_total");
for (var i = 0,len=textBox1.length; i < len;i++) {
if (parseInt(textBox2[i].value) > parseInt(textBox1[i].value)) {
alert('value is greater than quantity');
return false;
} else {}
}
});
</script>
<p> <label for="">PR Quantity</label> <input name="n_quantity[]" id="n_quantity" class="qty n_quantity" type="text"/><span class="val_qty"></span> </p>
<p style="display:none;"><input id="pr_total" class="pr_total" type="text"></p>
I have this javascript and its work good in asp.net,,, but I try this script in the same example in php but not work whats the wrong ?
I have lable include value ,, I try get the lable value and insert it in hidden field ,
this is my script
<script type="text/javascript">
function Calculate() {
var Txt_Percent = document.getElementById('<%= txt_Percent.ClientID %>');
var Txt_Fix = document.getElementById('<%= txt_Fix.ClientID %>');
if (document.getElementById('<%= rad_Fix.ClientID %>').checked == true) {
document.getElementById('txt_Percent').disabled = true;
var lblReadCost = document.getElementById('<%= lbl_Read_Cost.ClientID %>');
var lblReadCostValue;
var Lab_Read_Net = document.getElementById('<%= lbl_Read_Net.ClientID %>');
var hf_Read_Net = document.getElementById('<%= hf_Read_Net.ClientID %>');
if (navigator.appName == 'Netscape')
lblReadCostValue = lblReadCost.textContent;
else
lblReadCostValue = lblReadCost.innerText;
if (navigator.appName == 'Netscape')
Lab_Read_Net.textContent = (eval(lblReadCostValue) - eval(Txt_Fix.value));
else
Lab_Read_Net.innerText = (eval(lblReadCostValue) - eval(Txt_Fix.value));
hf_Read_Net.value = (eval(lblReadCostValue) - eval(Txt_Fix.value));
if (document.getElementById('<%= txt_Fix.ClientID %>').value == '') {
Lab_Read_Net.innerText = (eval(lblReadCostValue));
}
}
if (document.getElementById('<%= rad_Percent.ClientID %>').checked == false) {
Txt_Percent.value = "";
}
}
</script>
<script type="text/ecmascript">
function Calculate1() {
var Txt_Fix = document.getElementById('<%= txt_Fix.ClientID %>');
var Txt_Percent = document.getElementById('<%= txt_Percent.ClientID %>');
if (document.getElementById('<%= rad_Percent.ClientID %>').checked == true) {
document.getElementById('txt_Fix').disabled = true;
var lblReadCost1 = document.getElementById('<%= lbl_Read_Cost.ClientID %>');
var lblReadCostValue1;
var Lab_Read_Net = document.getElementById('<%= lbl_Read_Net.ClientID %>');
var hf_Read_Net = document.getElementById('<%= hf_Read_Net.ClientID %>');
if (navigator.appName == 'Netscape')
lblReadCostValue1 = lblReadCost1.textContent;
else
lblReadCostValue1 = lblReadCost1.innerText;
if (navigator.appName == 'Netscape')
Lab_Read_Net.textContent = (eval(lblReadCostValue1) - eval(Txt_Percent.value));
var x = (eval(lblReadCostValue1) * eval(Txt_Percent.value) / 100);
Lab_Read_Net.innerText = (eval(lblReadCostValue1) - parseInt(x));
hf_Read_Net.value = (eval(lblReadCostValue1) - parseInt(x));
if (document.getElementById('<%= txt_Percent.ClientID %>').value == '') {
Lab_Read_Net.innerText = (eval(lblReadCostValue1));
}
}
if (document.getElementById('<%= rad_Fix.ClientID %>').checked == false) {
Txt_Fix.value = "";
}
}
</script>
This does not work in PHP:
<%= txt_Percent.ClientID %>
Because you don't have these objects. Input fields are just static HTML in php. You have to set the ID's you set in your PHP yourself in the Javascript.
You need to change the asp response.write (<%=xxxx %>) for php echos <?php echo $xxx; ?>
Do something like
// ASP
var Txt_Percent = document.getElementById('<%= txt_Percent.ClientID %>');
Convert your objects into array then use like
// PHP
var Txt_Percent = document.getElementById("<?php echo $txt_Percent['ClientID']; ?>");
I have a page of thirty text boxes with Id's roughly correlating to _Q0/_Q1/_Q2/_Q3 etc.
I'm trying to design a JS code that will hide all but the first box, and then will reveal the next textbox as the previous one is filled in.
Here is my code:
$(function () {
for(var i=1;i<30;i++){
var t = i
document.getElementById("_Q" + t).style.visibility = 'hidden';
};
var idNumber = 0
document.getElementById("_Q"+idNumber).onKeyUp(function(){return boxAdder()});
function boxAdder(){
idNumber = idNumber+1;
document.getElementById("_Q" + idNumber).style.visibility = 'block';
document.getElementById("_Q" + idNumber).onKeyUp(function(){return boxAdder()});
};
});
So far all the boxes are hidden excluding the first box. However when I write into the first box nothing happens. I'm not entirely sure where this code is going wrong.
Edit: sample JSFiddle: http://jsfiddle.net/8b7pH/3/
Solved! Here is the final code:
$(function () {
for(var i=1;i<=5;i++){
var t = i;
document.getElementById("_Q" + t).style.visibility = 'hidden';
// document.getElementById("_Q" + idNumber).onkeyup = function(){console.log("hi"); return boxAdder(t+1);};
}
var idNumber = 0;
document.getElementById("_Q0").onkeyup = function(){console.log("hi"); return boxAdder(0);};
function boxAdder(numm){
console.log("ho");
//idNumber = idNumber+1;
document.getElementById("_Q" + numm).style.visibility = 'visible';
document.getElementById("_Q" + numm).onkeyup = function(){return boxAdder(numm+1);};
}
});
This does what you want:
$(function () {
var $boxes = $("[id^=_Q]").hide().keyup(function(){ //Hide all, then attach keyup
var i = $(this).index(); //Index of the box being typed
$boxes.eq(i+1).show(); //Get and show next textbox
});
$boxes.first().show(); //Show next textbox
});
Btw $("[id^=_Q]") selects all elements whose id starts with _Q
Working OK here: http://jsfiddle.net/edgarinvillegas/8b7pH/7/
Cheers
My suggestion is that you assign a function to the onchange event of the text boxes, and give each one an id as follows:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function textChange(){
// Get the number of the caller's id
var inputNumber = $(event.target).attr('id').split("txt")[1];
// Select the next input by increasing the inputNumber and set its "display" attr to block
$("#txt" + ++inputNumber).css("display", "block");
}
</script>
<from>
<input type="text" id="txt1" onchange="textChange()" />
<input type="text" style="display:none;" id="txt2" onchange="textChange()" />
<input type="text" style="display:none;" id="txt3" onchange="textChange()" />
<input type="text" style="display:none;" id="txt4" onchange="textChange()" />
<input type="text" style="display:none;" id="txt5" onchange="textChange()" />
</form>
A working example can be found here:
http://jsfiddle.net/WChd8/
Thanks for the fiddle. I've updated it to a working one.
Here's the code:
$(function () {
for(var i=1;i<=5;i++){
var t = i;
document.getElementById("_Q" + t).style.visibility = 'hidden';
}
var idNumber = 0;
document.getElementById("_Q" + idNumber).onkeyup = function(){console.log("hi"); return boxAdder();};
function boxAdder(){
console.log("ho");
idNumber = idNumber+1;
document.getElementById("_Q" + idNumber).style.visibility = 'visible';
document.getElementById("_Q" + idNumber).onkeyup = function(){return boxAdder();};
}
});
The significant change was the syntax for onkeyup: element.onkeyup = function(). Other than that, there were a bunch of missing semicolons that didn't matter. I added console.logs that can obviously be removed.
EDIT
Edgar found a valid bug, so I put in a fix. Basically, remove the onkeyup event as soon as it's called:
document.getElementById("_Q" + idNumber).onkeyup = function(){this.onkeyup = null; return boxAdder();};
function boxAdder(){
idNumber = idNumber+1;
document.getElementById("_Q" + idNumber).style.visibility = 'visible';
document.getElementById("_Q" + idNumber).onkeyup = function(){this.onkeyup = null; return boxAdder();};
}
Note the new this.onkeyup = null; in two places.
This is a javascript only approach, based on what you already had, that also checks for the content written in the input. If is blank, it hides the next one again.
for(var i=0;i<30;i++){
var element = document.getElementById("_Q" + i);
if(element != null)
{
element.onkeyup = function() {
var next = parseInt(this.id.replace("_Q", "")) + 1;
document.getElementById("_Q" + next).style.visibility = (this.value != "" ? "visible" : "hidden");
}
}
if(i>0)
element.style.visibility = 'hidden';
};