Good morning/afternoon/evening to all of you, Sir/Ma'am, I have a question regarding my code below. What my code does is to validate the textbox without postback. What I wanted to do is to show alert "hello" if the textbox has a value of "set". I'm truly grateful if you do reply and answer my question. I'm really sorry if my code below is kind of rubbish because I'm new to javascript and jquery.
$(document).ready(function () {
var fset = document.getElementById('<%=fname.ClientID%>').value;
if(fset.value=="set"){alert("hello");}
else{}
});
You either do the validation on form submit, onblur of the field or on keyup on the field. There other places that I'm not thinking of that you could do the client side as well.
Here's a version of on key up:
$(document).ready(function() {
$("#<%=fname.ClientID%>").on("keyup", function() {
if ( $(this).val() == "set" ) {
alert("hello");
}
});
});
If you have a form you could do:
$(document).ready(function() {
$("form").on("submit", function() {
if ( $("#<%=fname.ClientID%>").val() == "set" ) {
alert("hello");
}
});
});
Related
I have some code where I'm trying to prevent a form from being submitted multiple times. I found this code on another Stack thread but it doesn't work. Instead it submits the form infinite times and lags the entire server!
$(document).ready(function() {
$('form').submit(function() {
console.log("hi")
if ($(this).valid()) {
$(this).submit(function(){
return false;
});
return true; //Tried with an without
}
});
});
Here is a picture of the output in the console:
This keep submitting the form. I just took a picture at that number.
The thread that I found the code above from is the accepted answer on this question and it has many upvotes.
Note that I have multiple forms per page, and many pages with many forms! A solution to one specific form is not sufficient. I need a global solution. Also I'm using Codeigniter.
Try passing in the event and using e.preventDefault()
$(document).ready(function() {
$('form').submit(function(e) {
e.preventDefault();
console.log("hi")
if ($(this).valid()) {
$(this).submit(function(){
return false;
});
}
});
});
Correct me if I'm wrong but, shouldn't you just return; if it's valid, else stop submission like in the jQuery documentation's example.
$(document).ready(function() {
$('form').submit(function(event) {
console.log("hi")
if ($(this).valid()) {
return;
}
event.preventDefault();
});
});
You need to cancel the initial form submission so that you only do it after you've validated it. But frankly, HTML5 won't submit if a form is not valid, so your code seems redundant.
Here is a working example that takes most of the JQuery out of the mix. It only submits the form one time.
You can also test it here: https://jsfiddle.net/5oyp6aa0/6/
$(function() {
var theForm = document.querySelector("form");
theForm.addEventListener("submit",function(evt) {
// First, cancel the form's submission:
evt.preventDefault();
evt.stopPropagation();
console.log("Navitve Submit Cancelled")
if (theForm.checkValidity()) {
// Then, only if it's valid, submit
console.log("Manual Submit Triggered");
theForm.submit();
}
});
});
After none of these answers worked I decided to give it another shot. This works for me.
$(document).ready(function() {
$("form").submit(function (e) {
var attr = $(this).attr('submitted');
if (typeof attr === typeof undefined || attr === false) {
if ($(this).valid()) {
$(this).attr('submitted', 'submitted');
$(this).submit();
} else {
e.preventDefault();
}
} else {
e.preventDefault();
}
});
});
I'm using (all right, just starting to learn) bootstrap and javascript and jQuery. I have a rather extensive experience in other programming languages, and I like understanding what happens.
so I have a dialog box containing just one input box, and I do not want a POST action to be fired when the user hits enter. I am using a dirty trick according to me, and I'm wondering how to do this more neatly.
<div class="modal-body">
<form enctype="multipart/form-data" class="well">
<input id="empty" name="empty" type="hidden"/></form>
<table width="100%">
<tr><td width="30%">accession#.plant#</td>
<td><input id="addendum" name="keyword" type="text"/></td></tr>
</table>
</div>
the unused "empty" form, it's the dirty trick that works for me on firefox 27.0.1
I have tried disabling the enter key completely, as suggested by answers to similar questions, but it has a non desirable side effect according to me: when entering data in a input element, the browser will give hints. disabling the enter key makes difficult selecting among them.
It's hard to tell without seeing the JavaScript, but you should be able to call preventDefault on the event object in JavaScript. This keeps the form from submitting, but shouldn't interfere with the type ahead behavior in browsers.
Give the form an id and then put the id in the keypress function... It should work.
<script type="text/javascript">
$(document).ready( function() {
$('#[formid]').keypress(function (e) {
if (e.which == 13) {
e.preventdefault();
return false;
}
});
});
</script>
You can use this, it will prevent form submission if no field have been inputed.
$( ".well" ).on( "submit", function() {
var has_empty = false;
$(this).find( 'input' ).each(function () {
if ( ! $(this).val() ) { has_empty = true; return false; }
});
if ( has_empty ) { return false; }
});
EDIT: Biding it to the enter listener:
$(".well").bind("keyup keypress", function(e) {
var code = e.keyCode || e.which;
if (code == 13) {
e.preventDefault();
var has_empty = false;
$(this).find( 'input' ).each(function () {
if ( ! $(this).val() ) { has_empty = true; return false; }
});
if ( has_empty ) { return false; }
}
});
I have an input field I want cleared. My jQuery works there but if I click the input field and then click off of it the value is back. What's the fix?
$('input').val('');
$('input').click( function() {
$('input').val('');
});
JS fiddle here. http://jsfiddle.net/thomasp423/HqvmD/
It seems that normally the one line I have would work BUT I'm working with some software that probably has js overriding this and adding it back on. Does anyone have a solution?
$('input').click( function() {
$(this).val('');
});
What you're saying is: clear all inputs when clicked on one input.
I think this is what you are looking for http://jsfiddle.net/HqvmD/1/
//$('input').val('');
$('input').focus( function() {
if ($(this).val() == 'search' ) {
$(this).val('');
}
});
$('input').focusout(function () {
if ($(this).val() == '' ) {
$(this).val('search');
}
});
This should happen
If the user clicks on one of the two input boxes, the default value should be removed. When the user clicks elswhere on the webpage and one text field is empty, it should be filled with the default value from the data-default attribute of the spefic element.
This happens
When somebody clicks somewhere on the page and the field is empty, the field will be filled with the right value, but when somebody clicks in the field again the text isn't removed. It seems like the $(document) click event is blocking the $(".login-input") click event, because the $(".login-input") is working without the $(document) click event.
JSFiddle
A sample of my problem is provieded here: JSFiddle
Tank you for helping!
When you click on the input, the script is working, but since the input is in the document, a click on the input is a click on the document aswell. Both function will rune, document is the last one.
That is called event bubblingand you need to stop propagation :
$(document).ready(function () {
$(".login-input").click(function (e) {
e.stopPropagation()
$(this).val("");
});
});
Fiddle : http://jsfiddle.net/kLQW9/3/
That's not at all how you solve placeholders, you do it like so :
$(document).ready(function () {
$(".login-input").on({
focus: function () {
if (this.value == $(this).data('default')) this.value = '';
},
blur: function() {
if (this.value == '') this.value = $(this).data('default');
}
});
});
FIDDLE
Preferably you'd use the HTML5 placeholder attribute if really old browsers aren't an issue.
EDIT:
if you decide to do both, check support for placeholders in the browser before applying the javascript :
var i = document.createElement('input'),
hasPlaceholders = 'placeholder' in i;
if (!hasPlaceholders) {
// place the code above here, the condition will
// fail if placeholders aren't supported
}
Try below code
$(document).ready(function () {
$(".login-input").click(function () {
$(this).val("");
});
});
$(document).ready(function () {
$(".login-input").each(function () {
if ($(this).val() === "") {
$(this).val($(this).attr("data-default"));
}
});
$(".login-input").blur(function () {
if ($(this).val() === "") {
$(this).val($(this).attr("data-default"));
}
});
});
Check fiddle
Why not to use focus and blur events?
$(document).ready(function () {
$(".login-input").focus(function () {
$(this).val("");
});
});
$(document).ready(function () {
$(".login-input").blur(function () {
if ($(this).val() === "") {
$(this).val($(this).attr("data-default"));
}
});
});
http://jsfiddle.net/kLQW9/5/
P.S. In yours, and this code, on focus all data fro input will be cleared. If you need to clear only default text, add proper condition for that.
I have a form with two submit buttons on it. Buttons must be of submit type and I can't change it.
How can I make jquery not to validate but submit the form when first button is pressed and validate and submit when second button is pressed?
thank you
Ok, I found a solution which is ridiculously easy as usual, the only thing I need to do is to set class="cancel" to the first button and it'll skip validation on submit.
Found here http://forum.jquery.com/topic/stop-a-specific-button-calling-validation
event.originalEvent.explicitOriginalTarget is a Gecko-specific property (see this question and answer).
The following should work:
var doValidate;
$('#validating-button').click(function () { doValidate = true; });
$('#non-validating-button').click(function () { doValidate = false; });
$('#form').validate({
rules: {
myinputname: {
required: function () { return doValidate; }
}
}
});
EDIT: check questioneer's answer :)
First btn clicked, do validation stuff and check validation (just try it/improve it)... Second Btn clicked, just do nothing (submit form)
$('#formid').submit(function(event) {
if (event.originalEvent.explicitOriginalTarget.id == "firstButtonID") {
$(this).validate();
if(!$(this).valid()){
event.preventDefault();
return false;
}
}
});