I am trying to find a means to "collect" the input from the user, say if the user presses "OK" in a JS confirm window, I want to receive a "True" in python's flask, and "False" if users presses "Cancel".
I have this part for the JS function:
<script>
function confirmBooking(elem) {
if(confirm('Are you sure you want to book this slot?') == true) {
//elem = 1;
alert("its done: " + elem);
}
else {
return 0;
}
}
</script>
Now on "form" side I have this:
<form method="post">
<button type="submit" name="free_button" value="free_button" onClick="confirmBooking('{{ booking_slot }}')"> Free </button>
</form>
So, here, booking_slot is a python variable containing some string. I would like some means to set a True/False value to a variable in the Flask side if the user selects "OK" or "cancel" respectively.
Any way to achieve this? Thanks.
You need to create a function that will collect or fetch the input from your frontend to the backend. I usually do this technique.
<form action="{{url_for('/collect')}}" method="post">
<input type="hidden" id="userInput" name="userInput">
<button type="submit" name="free_button" value="free_button" onClick="confirmBooking('{{ booking_slot }}')"> Free </button>
</form>
<script>
function confirmBooking(elem) {
if(confirm('Are you sure you want to book this slot?') == true) {
//elem = 1;
alert("its done: " + elem);
document.getElementById("userInput").value = "True";
}
else {
document.getElementById("userInput").value = "False";
return 0;
}
}
</script>
#app.route('/collect',methods=["POST"])
def collect():
if request.method =="POST":
userInput = request.form.get("userInput")
return render_template('<template here>',userInput=userInput)
Related
A php page has a jquery interface.
an on submit button dynamically writes an alert.
the confirm box is of the style : return confirm.
in other words there is a script on the page that does something like this:
confirm (okay cancel );
I need a way of listening for when the alert has been dynamically written so I can confirm it dynamically.
any ideas?
is there an event listener for 'confirm'?
<html>
<head>
<script>
function getConfirmation() {
var retVal = confirm("Do you want to continue ?");
if( retVal == true ) {
document.write ("User wants to continue!");
return true;
} else {
document.write ("User does not want to continue!");
return false;
}
}
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getConfirmation();" />
</form>
</body>
</html>
You can use window.confirm = function() { } to intercept the confirm command.
Returning true would be the same as clicking the "ok" button.
window.confirm = function() { return true; }
if (window.confirm("Delete everything?") == true)
{
alert("Deleting all your files as you confirmed")
}
I hope someone can help me.
I have two buttons on my page in my form. "Save" and "Publish". This is the HTML:
<button type="submit" class="button">Save</button>
<button type="button" class="button" name="publish" value="true" onclick="publishAlbum({{ album.id }}, '{{ album.title }}')">Publish</button>
The first one saves the album, the second one sends an e-mail to the owner. The second one ("Publish") needs to trigger a confirm first ("Are you sure?"). When you click "Ok", the form should submit, but if you click "Cancel" (in the confirm box), it should do nothing.
Here is my JS:
function publishAlbum(album_id, album_title)
{
var result = confirm('Are you sure you want to publish this album?');
if(!result)
{
return;
}
}
I tried literally everything (prevent default, return etc), but every time I click "Cancel", the form still submits and the e-mail is sent.
Can someone help me?
Publish
$('.publish-button').on('click',function(e){
e.preventDefault();
let albumId = $('#selectYourAlbumId');
let albumTitle = $('#selectYourAlbumTitle');
var result = confirm('Are you sure you want to publish this album?');
if(!result)
{
return;
}
// POST your form through an AJAX call
})
You need to get the event object somehow (e.g. by adding an event listener to the button). Then you are able to prevent the form submission, like so:
const album = {
id: 1,
title: 'Test',
};
document.querySelector('[name=publish]').addEventListener('click', function(e) {
if (!publishAlbum(album.id, album.title)) {
e.preventDefault();
}
});
function publishAlbum(album_id, album_title) {
var result = confirm('Are you sure you want to publish this album?');
if (!result) {
return false;
}
// do your stuff
return true;
}
<form action="https://example.org" method="POST">
<button type="submit" class="button">Save</button>
<input type="submit" class="button" name="publish" value="Publish" />
</form>
Assuming you have these buttons inside a form tag, you can try this:
<html>
<body>
<h2>JavaScript Confirm Box</h2>
<button type="submit" class="button">Save</button>
<button type="button" class="button" name="publish" value="true" onclick="publishAlbum()" id="myButton">Publish</button>
<script>
function publishAlbum() {
var txt;
if (confirm("Press a button!") == true) {
$("#myButton").trigger('submit');
} else {
txt = "You pressed Cancel!";
alert(txt)
}
}
</script>
</body>
</html>
I used this:
$(document).ready(function() {
$('#form-publish .button-publish').on("click", function(e) {
var c = confirm("Are you sure?");
if (c) {
return;
} else {
e.preventDefault();
}
});
});
I wants to check, if entered field's value is valid or not using onchange before submitting the page. I have written like below.It validates well.But how to activate 'NEXT' button when there is no error on input entries.
<div><input type="text" name="your_name" id="your_name" onchange = "validate_Name(this,1,4)" />
<span id="your_name-error" class="signup-error">*</span>
</div>
<div><input type="text" name="your_addr" id="your_addr" onchange = "validate_Name(this,1,4)" />
<span id="your_addr-error" class="signup-error">*</span>
</div>
<input class="btnAction" type="button" name="next" id="next" value="Next" style="display:none;">
<script type="text/javascript" src="../inc/validate_js.js"></script>
<script>
$(document).ready(function() {
$("#next").click(function() {
var output = validate(); //return true if no error
if (output) {
var current = $(".active"); //activating NEXT button
} else {
alert("Please correct the fields.");
}
});
}
function validate() {
//What should write here?I want to analyse the validate_js.js value here.
}
</script>
Inside validate_js.js
function validate_Name(inputVal, minLeng, maxLeng) {
if (inputVal.value.length > maxLeng) {
inputVal.style.background = "red";
inputVal.nextElementSibling.innerHTML = "<br>Max Characters:" + maxLeng;
} else if (!(tBox.value.match(letters))) {
inputVal.style.background = "red";
inputVal.nextElementSibling.innerHTML = "<br>Use only a-zA-Z0-9_ ";
} else {
inputVal.style.background = "white";
inputVal.nextElementSibling.innerHTML = "";
}
}
If by "activating" you want to make it visible, you can call $('#next').show().
However if you want to simulate a click on it, with jQuery you can simply call $('#next').click() or $('#next').trigger('click') as described here. Also, you might want to put everything in a form and programmatically submit the form when the input passes validation.
You could possibly trigger the change event for each field so it validates each one again.
eg.
function validate() {
$("#your_name").trigger('change');
$("#your_addr").trigger('change');
}
If a user tries to leave a page without saving it they get a message telling them.
But they also get it if they have saved the form too.
$("#locForm").change(function () {
mod = 1;
});
window.onbeforeunload = function confirmExit() {
if (mod == 1) {
return "information not saved.";
}
}
$("input[name='commit']").click(function () {
mod = 0;
});
This is my save button:
<button type="submit" class="btn btn-sample btn-md reset" id="send" name="commit"><b>Save</b></button>
How can it only warn user if they haven't saved the form?
You're using the wrong selector. Use:
$("button[name='commit']")
This is my code:
<input type="submit" value="Delete" onclick="del('Are you sure you want to Delete?')">
<script language="JavaScript">
function del(display)
{
var inputs = document.myform;
if(inputs[5].value != '')
{
confirm(display);
}
}
</script>
When I click either the "ok" or the "cancel", they both did the same way (the OK way)
How can I make the "cancel" do what it is supposed to do?
NOTE: I have a form there that I didn't include for the simplicity of question.
change your code like this.
onclick="return del('Are you sure you want to Delete?')"
if(inputs[5].value != '')
{
return confirm(display);
}
<input type="submit" value="Delete" onclick="return del('Are you sure you want to Delete?')">
<script language="JavaScript">
function del(display)
{
var inputs = document.myform;
if(inputs[5].value != '')
{
return confirm(display);
}
}
</script>
you need to add two return in your code (both onclick attribute and inside del() function). You should also return something if your condition inputs[5].value != '' is false
Do it like this;
onclick="return del('Are you sure you want to Delete?')"