Validation before Submitting on prompt page - javascript

I am trying to use some sort of script on prompt page using HTML Item, what i am trying to accomplish is after clicking finish button script checked if there is nothing left black. Nothing means any of the prompt/filter (text, prompt, date/time) and if it is than it doesn't go through.
Hope i made things clear.
Thank You

Personally I think the fastest and easiest way if you don't already have a js framework is jQuery validate... check out this page, see the examples and give this a go. I should think the description you've provided will be covered in the basic usage examples for this plugin.
http://docs.jquery.com/Plugins/Validation

If you don't want to use jQuery as in Ben's answer, you can use the form's onSubmit event:
<form id="datform" action="http://path.to/action.script" onsubmit="return isValidated()">
...
...
'</form>
You'll then use a javascript function, ala
<script type="text/javascript">
function isValidated(){
var so=false;
return so;
}
</script>
Personally, I prefer jQuery but this allows for some on-the-fly validation

Related

How to use jQuery dialog() instead of confirm() from within C# code?

I am a Frontenddeveloper without further knowledge of C#, so please excuse my maybe stupid question. I am currently trying to use jQuery UI Dialog to replace the common JavaScript alert() and confirm() boxes. This is working good so far in the Frontend but now I found this snippet in one of the C# pages and I don't know what's the best way to switch this from confirm() to jQuery dialog(). Any ideas?
string delCode = "javascript:"
+ "if ( confirm(\'Are you sure you wish to delete this?\')){ "
+ this.Page.ClientScript.GetPostBackEventReference(this, string.Empty)
+ ";} else { return false; }";
EDIT:
After playing around a bit more I found out, that it will not work without adding an OnClientClick Attribute to prevent the Postback when clicking the button. How do I add this Attribute from within the Code behind?
btnDelete.Attributes.Add("OnClientClick","foo");
does not work for me. What's the right way to solve this?
Here ist what I want to have, it's just simple JS so far (you see the C# snippet for the Button as a comment above the HTML content in the Fiddle):
https://jsfiddle.net/SchweizerSchoggi/xts01hrx/16/
Sadly, to push JavaScript from server to client inside of Web-Form's you'll need to utilize the current code you have to implement. Often, to avoid the excessive Postback issue, I would force server side controls, like the LinkButton to disable the form submission.
<asp:LinkButton id="lbExample" runat="server" OnClientClick="launch(); return false;" Text="Launch Dialog" />
<script type="text/javascript">
function launch() {
$('[data-rel="Example-Modal"]').dialog({
// Dialog logic.
}
}
</script>
This way it would work more like a traditional JavaScript in a web-page, or single page application. The official documentation based on the code above, which is correct extra functionality can be found here. As you denoted above, your only option to dynamically add:
ClientScript.RegisterOnSubmitStatement(this.GetType(), "ConfirmSubmit", jQuery);
You would simply create the button progmatically or find the button in the page, from code behind. I'll use the create, to show you what I mean:
public void Page_Load(...)
{
var lb = new LinkButton();
lb.OnClientClick = "launch();"
}

kicking off ajax query to php mysql DB by use of onblur

I'm trying (and failing) to make an ajax process work when people leave a form input field. I need it to happen for each input field, of any type, on the form.
I'm trying to modify the following (which does work):
$("document").ready(function() {
$("#getcontent").click(getContent);
});
function getContent() {
$("#example").load("sampletextcontent.txt");
}
(there would be a button with id="getcontent" in the html, and a div with id="example" also in the html. When button clicked, contents of external file sampletextcontent.txt is displayed within said div)
jquery IS being used, version 2.0.3 jquery.min.js
So I am trying (and this is where I am failing) is to convert the above to become:
$("document").ready(function() {
$("#input_1_1").onblur(doSend);
$("#input_1_2").onblur(doSend);
$("#input_1_3").onblur(doSend);
$("#input_1_4").onblur(doSend);
$("#input_1_5").onblur(doSend); // etc for as many fields there are
})
function doSend() {
// Do some ajax stuff to send the entire value of all form fields in here
}
But it does not seem to like the concept of using the replacement of the ".click" to ".onblur" here. Why is this? Isn't onblur a valid JS function/item?
Sorry I'm not a JS guru, I have great problems understanding JS.
C
Edit - sorry I was not clear about the code I am trying to get working. There is no button in the version I want to work, it's just wanting to trigger by when a user clicks/tabs away from each input field. Sorry about not making that clear before.
For dynamic jQuery event binding, I would try switching out the .click and .blur functions with the .on function.
As an example, I would try the following:
$('body').on('click', '#getcontent', function(){
DoSomething();
});
and
$('body').on('blur', '#input_1_1', function(){
DoSomething();
});
The documentation for the on function can be found http://api.jquery.com/on/.
Here is another Stack Overflow article that also explains this: Event binding on dynamically created elements?.
Thanks to the comments and answer attempts. However the answer that I'm using, that actually does answer the specific question is the following. Simply change:
$("document").ready(function() {
$("#input_1_1").onblur(doSend);
$("#input_1_2").onblur(doSend);
$("#input_1_3").onblur(doSend);
$("#input_1_4").onblur(doSend);
$("#input_1_5").onblur(doSend); // etc for as many fields there are
})
To become:
$("document").ready(function() {
$("#input_1_1").blur(doSend);
$("#input_1_2").blur(doSend);
$("#input_1_3").blur(doSend);
$("#input_1_4").blur(doSend);
$("#input_1_5").blur(doSend); // etc for as many fields there are
})
And it works. This retains the ability to call different functions per field if I so wish, and is very straightforward for a JS novice like me to work with.
A better cleaner solution may be implemented later, but for now this will do and directly answers the original question.

How to send a value from a search box to a URL?

I have a search box and I have no clue how to append the string that the user searches to url after a user clicks search.
How would this work?
I have a reference code but I want to know how to append the value that a user searches:
onclick="location.href = $(this).attr('href')+'?q1=Asustablet&x=70&y=14=siys';return false"
Here is my jsFiddle
yu can't use jquery inline. you can use its events like this:
$('#search-button-4').click(function(){
window.location.href = $(this).attr('href')+'?q1=Asustablet&x=70&y=14=siys';
});
DEMO
May I suggest using PHP as it will be much easier,
Add this inside PHP tags and set the variable for $user_search_input
header("Location: ".$_SERVER['REQUEST_URI']."?search=".$user_search_input);
I'm sorry if you needed a Javascript version but if not I highly suggest PHP for it has a lot of functionality being very powerful and has a lot of potential.

Confirm dialog box with anchor tag

My friend done this below coding for custom control
click
now i want to show confirm dialog box while click this anchor link.
Is it possible?. i want to write script as inline.
Do this :
click
But at some point, you'd want to stop using only inline code and have a look at other clearer ways to add javascript in your code.
You may use a script block like this in the HEAD of your HTML file :
<script>
function doOnClick(){
if (window.confirm('Really?')){
__doPostBack('id','msg');
};
}
</script>
And then your link becomes
click
Of course, this doesn't feel much simpler with only one function but it helps you put all your functions in the same place and make lighter and clearer html.
An alternative would be to use jQuery, so that you may totally avoid putting javascript in the html part.
The html is then
<a id=myLink>click</a>
And your script, now at the end of the body, is this one :
<script>
$(document).ready(function(){
$('#myLink').click(function(){
if (window.confirm('Really?')){
__doPostBack('id','msg');
};
});
// other codes will come here
});
</script>
You're not at all required to code it this way now, as you only have a very light function, but if your code grows I suggest you start considering it and look at the jquery tutorials.
Of course. Here is a small snippet, not elegant but it works...
click
I actually had to look this up because I haven't used confirm, alert and prompt in a very long time.
confirm returns true/false depening on what the user selected (OK/Cancel, respectively).
So your resulting code would be
click

web2py: How do I add javascript to Web2py Crud form?

Working with Web2Py. I'm trying to attach some javascript either to a field (onchange) or to the form (onsubmit), but I see absolutely no way to pass such argument to crud.create or to form.custom.widget.
Anyone has an idea?
Of course there is a way. The appropriate way is to ask people on the web2py mailing list who know how to, as opposed to generic stack overflow users who will guess an incorrect answer. :-)
Anyway, assume you have:
db.define_table('image',
Field('name'),
Field('file', 'upload'))
You can do
def upload_image():
form=crud.create(db.image)
form.element(name='file')['_onchange']='... your js here ...'
form.element('form')['_onsubmit']='... your js here ...'
return dict(form=form)
Element takes the css3/jQuery syntax (but it is evaluated in python).
I do not believe there is a way to do this directly. One option is just to manipulate web2py generated HTML, it is just a string. Even cleaner, in my opinion, is just to bind the event using jQuery's $(document).ready() function.
Say you have a database table (all is stolen from web2py's docs):
db.define_table('image',
Field('name'),
Field('file', 'upload'))
With form:
def upload_image():
return dict(form=crud.create(db.image))
Embedded in a view (in the simplest manner):
{{=form}}
And you want to add an onblur handler to the name input field (added to the view):
<script type="text/javascript">
$(document).ready(function(){
$("#image_name").blur(function(){
// do something with image name loses focus...
});
});
</script>

Categories

Resources