I have a routine that performs a Form action if OK is clicked on a webpage alert:
SCRIPT
<script language="JavaScript" type="text/javascript">
function checkDelete(){
return confirm('Are you sure you want to delete this record?');
}
</script>
HTML
<form action="https://website/delUser.php" method="Post">
<input value="Delete" type="submit" onclick="return checkDelete()" class="submitButton">
</form>
In an attempt to make the alert a little more attractive I have tried to use jAlert:
JALERT SCRIPT
<script type="text/javascript">
$(document).ready( function()
{
$("#confirm_button").click( function()
{
jConfirm('Delete this user?', 'Title', function(result)
{
jAlert('Pressed: ' + result, 'Results'); //This displays the result as an alert - true or false
});
});
});
</script>
The new alert displays but I am unsure how to change the HTML so that the Form action only runs if the alert returns true.
Try something like this:
HTML
<form name="test_form" action="action.php">
<input type="button" value="Delete" class="submitButton" id="confirm_button">
</form>
JS
$("#confirm_button").click( function()
{
jConfirm('Delete this user?', 'Title', function(result)
{
if(result){
// FORM ACTION HERE
test_form.submit();
}
});
});
Related
I'm having a bit of trouble with figuring out how to get a post from Javascript to work, to my Python Flask server.
Here's the important part of what I've got in my html file
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js </script>
<script type=text/javascript>
$('a#test').bind('click', function() {
var textBox = document.getElementById('targetTextArea').value;
$.post('/postmethod', {text: textBox} );
});
</script>
<!--textarea-->
<textarea rows="1" cols="20" id="targetTextArea">
</textarea>
<!--button-->
<form method="post" role="form">
<a href=# id=test>
<input type="button" value="submit" id="submit" onClick="writeOut()">
</a>
</form>
and here's what I've got in my Python flask file
#app.route('/postmethod', methods = ['POST'])
def postmethod():
data = request.form['text']
print "Hello world!"
print data
return data
When I run my python script the textarea and button are there as they should be, but when I type into the textarea and click the button nothing is printed. Please help.
You try with the long way?
Replace $.post('/postmethod', {text: textBox} );
for
$.ajax({
method: "POST",
url: "postmethod", //here can be '/postmethod'
dataType: 'text',
data: {text: textBox},
success: function(result) {
// example
$('body').html(result)
}
});
This should print on page the content of the variable "data" of python code.
Another thing,
I see that you are using two ways for the submit button, if you use
$('a#test').bind('click', function() { //code });
then, the onClick="writeOut()" is not neccessary.
I hope you find it useful, regards.
id's value should be in quotes
<a href="#" id="test">
<input type="button" value="submit" id="submit" onClick="writeOut()">
</a>
The solution I found was to add
$(function() {
});
around it
$(function() {
$('a#test').bind('click', function() {
var textBox = document.getElementById('targetTextArea').value;
$.post('/postmethod', {text: textBox} );
return false;
});
});
and also the return false prevents the page of redirecting
sorry guys, I'm new to Javascript. Thank you very much!
I'm trying to set up a JQuery Progress Bar to update when the user submits a form (the final code will be more complex and dynamic, but I'm just trying to learn how the progress bar works first).
The simple code that I'm trying to debug is:
<body>
<form id="form1" method="GET" runat="server">
<div>
<h1>Test</h1>
<input type="submit" value="Start Test"/>
</div>
</form>
<div id="progressbar"></div>
<script type="text/javascript">
$("#progressbar").progressbar({
value: 25
});
$("#progressbar > div").css({ 'background': 'Green' });
$(document).ready(function () {
$("#form1").submit(function () {
$("#progressbar").progressbar({ value: 75 });
});
});
</script>
</body>
It's just a simple form that initializes a progress bar to 25%, and runs a .submit function that sets the value to 75%. I know that the submit code is getting called because if I click the Submit button repeatedly, I see the 75% value flash on and off in the progress bar.
My question is: How do I get the value to stay selected once it's changed by the .submit function?
Thanks In Advance!
UPDATE:
Thanks for the advice #charlietfl :-) New to the whole posting thing :-)
Here is the ajax-based code I have...
<body>
<form id="form1" method="GET" runat="server">
<div>
<h1>Test</h1>
<input type="submit" value="Start Test"/>
</div>
</form>
<div id="progressbar"></div>
<script type="text/javascript">
$("#progressbar").progressbar({
value: 25
});
$(document).ready(function () {
$("#form1").submit(function () {
$.ajax({
url: "JQueryProgressTest.aspx/GetProgress",
type: "GET",
success: function (data) {
$(".selector").progressbar({value: data});
}
});
});
});
</script>
</body>
Still not updating...don't even see the value flash anymore.
Thanks!
Bob
FINAL UPDATE: Needed to also add some JSON stuff to get the callback from the aspx page to work. Below is the fully working code for anyone else who needs it:
ASPX Code-Behind:
public partial class JQueryProgressTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static int GetProgress()
{
// Put any code to update the progress bar here
return 50;
}
}
And the body of the aspx page itself:
<body>
<form id="form1" method="GET" runat="server">
<div>
<h1>Test</h1>
<input type="submit" value="Start Test"/>
</div>
</form>
<div id="progressbar" style="border-color: lightgreen;"></div>
<script type="text/javascript">
$("#progressbar").progressbar({
value: 25
});
$("#progressbar > div").css({ 'background': 'Green' });
$(document).ready(function () {
$("#form1").submit(function (event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "JQueryProgressTest.aspx/GetProgress",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$("#progressbar").progressbar({ value: response.d });
},
failure: function(response) {
alert("Error in calling Ajax:" + response.d);
}
});
});
});
</script>
</body>
Thanks again to #charlietfl for all the help!
There is no state saving between page loads. When you submit the form it will reload page based on the form action.
Some choices are:
Use ajax to submit form so user doesn't leave page
Use a javascript variable defined in your server code and passed to script tag to set progress, adjust variable according to submit or not
Store state in cookie or localStorage and set value based on stored value
I have a an HTML page with an input area and a submit button.
I am using jQuery to alert the user of what their input is. (Really I am trying to store that in a variable but that will be trivial once I get this working).
Can someone help me understand why it is not working, as well as a solution? Thanks.
The HTML form is as follows:
<html>
<head>
</head>
<body>
<form>
<input type="text" class="grid_size">
<button type="submit">Submit Me!</button>
</form>
<!-- Add jQuery -->
<script src="js/jquery.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
The custom jQuery I am using is this:
$(document).ready(function() {
$("form").submit(function() {
alert( grabUserInput )});
});
function grabUserInput() {
return $("form").find(".grid-size").val();
}
You named your class grid_size, and search for a class grid-size in javascript code.
This code should fix a typo:
$(document).ready(function() {
$("form").submit(function() {
alert( grabUserInput() );
});
});
function grabUserInput() {
return $("form").find(".grid_size").val();
}
Try this -- grabUserInput is a function, not a variable -- so you have to include () to invoke the function:
$(document).ready(function() {
$("form").submit(function() {
alert( grabUserInput() );
});
});
And your markup has to match your selector:
<input type="text" class="grid-size">
BONUS:
In case all you want is to alert the value, and you do not want to submit the form use the following:
$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault()
alert( grabUserInput() );
});
});
why not try to put some id
<input id="input_grid_size" type="text" class="grid_size">
<button id="button_submit" type="submit">Submit Me!</button>
and jq
$(document).ready(function() {
$("#button_submit").click(function() {
alert($('#input_grid_size').val()); }); });
it seem your code also forgot the ";" and "()" in the alert
I have looked on here and around the internet for over 5 hours and I cannot figure out what I am doing wrong. It is probably something really simple. Here is my code so far:
<script type='text/javascript'>//<![CDATA[
window.addEvent('load', function() {
document.getElementsByClassName('submitformlisting')[0].onclick = function(){
window.btn_clicked = true;
};
window.onbeforeunload = function(){
if(!window.btn_clicked){
return 'If you leave now, your information will be lost.';
}
};
});//]]>
</script>
And my submit button looks like this:
<input type="submit" name="submit" id="submitformlisting" class="id="submitformlisting"" value="Add Listing" tabindex="4" onclick="return doSubmit();" />
You messed the class in your html. Change class="id="submitformlisting"" to class="submitformlisting".
But you'd better use the id instead of the class.
Change
document.getElementsByClassName('submitformlisting')[0].onclick = function(){
to
document.getElementById('submitformlisting').onclick = function(){
This is my HTML
<form id="procurar-novo">
<input type="text" name="procurar" placeholder="Pesquisar no Site" value="">
<input id="procurar-submit" type="button" value="›">
</form>
And this is my jQuery
<script type="text/javascript">
$(document).ready(function(){
$('#procurar').submit(function(e) {
e.preventDefault();
//edited
window.open = ('http://www.psicotropicus.org/'+'/busca'+encodeURIComponent($('#procurar-submit').val()), '_blank');
return false;
});
});
</script>
The ideai is that by clicking on submit, the javascript/jquery will get the #procurar-submit value and add it on the URL and redirect the user.
The _blank still not works
Thanks in advance.
Use window.open with second parameter _blank
window.open('url', '_blank');
Try this also:
<script type="text/javascript">
$(document).ready(function(){
$('#procurar').submit(function(e) {
e.preventDefault();
//edited
window.open = ('http://www.psicotropicus.org/'+'/busca'+encodeURIComponent($('#procurar-submit').val()), '_blank');
return false;
});
});
</script>
Last edit:
<script>
$(document).ready(function(){
$('form#procurar-novo').submit(function(e) {
//e.preventDefault();
//edited
var url = 'http://www.psicotropicus.org'+'/busca'+ encodeURIComponent('&' + $('input[name=procurar]').val());
window.open(url, '_blank');
return false;
});
});
</script>
<form id="procurar-novo">
<input type="text" name="procurar" placeholder="Pesquisar no Site" value="">
<input id="submitsss" type="submit" value="›">
</form>
Please consider names and ids of the form elements :)
Looks like you don't have an action specified on your form tag. Why not just change the second input element from type=submit to type=button. Then you can bind a click event on that button and have full control of what happens next. You don't have to worry about preventing a default submit action. You could do the following:
$(document).ready(function(){
$(document).on('click', '#procurar-submit', function() {
window.location.href = 'http://www.psicotropicus.org/busca'+$('input[name="procurar"]').val();
});
});
To open a new window like on a '_blank' you could change the code to be:
$(document).ready(function(){
$(document).on('click', '#procurar-submit', function() {
window.open('http://www.psicotropicus.org/busca'+$(input[name="procurar"]).val(), '_blank');
});
});
But be careful with pop-up blockers
EDIT
I changed the selector that gets the value of the text field.
I would maybe add a class or id on that text field so it can be identified apart from others. See this fiddle