stay in the current page after clicking cancel button - javascript

I have a form in index.jsp and after clicking submit i am showing an alert "confirm submit?" if ok will be clicked then confirmsubmit.jsp will be displayed. I am getting text box name in confirmsubmit.jsp by request.getParameter("textboxname");But problem is if I click cancel then also confirmsubmit.jsp is opening, how can I stay in index.jsp after clicking cancel button in alert?
Any help please
index.jsp
<form action="confirmsubmit.jsp" method="POST">
<script type="text/javascript">
<!--
function confirmation() {
var answer = confirm("Confirm submit?")
if (answer){
window.location = "confirmsubmit.jsp";// goes to confirmsubmit.jsp
}
else{
//should remain in index.jsp but here also confirmsubmit.jsp is opening
}
}
//-->
</script>
<input type="text" name="textboxname"/>
<input type="submit" onclick="confirmation()"/>
</form>

Add following line in the else part:
return false;
and change your onclick to:
return confirmation();
=== UPDATE ===
Because you have the confirmsubmit.jsp in the form action, you don't need the window.location:
function confirmation() {
if (!confirm("Confirm submit?")) {
return false;
}
}
Also see this example.

<form action="confirmsubmit.jsp" method="POST">
<script type="text/javascript">
<!--
function confirmation() {
var answer = confirm("Confirm submit?")
if (answer){
window.location = "confirmsubmit.jsp";// goes to confirmsubmit.jsp
return true;
}
else{
//should remain in index.jsp but here also confirmsubmit.jsp is opening
return false;
}
}
//-->
</script>
<input type="text" name="textboxname"/>
<input type="submit" onclick="return confirmation()"/>
</form>

Take off return from onclick and add return false; if !answer
<script type="text/javascript">
function confirmation() {
var answer = confirm("Confirm submit?")
if (!answer){
return false;
}
}
</script>
<form action="confirmsubmit.jsp" method="POST">
<input type="text" name="textboxname"/>
<input type="submit" onclick="confirmation()"/>
</form>

Related

Validate before going to next page

Peeps,
I see this question has been asked but they either don't have validation function right or there are some syntax errors.
Here is my code; it is supposed to check fields are not blank then if they are not blank it passes them to the next page.
What happens with my codes is that it does check the validation but right after the Alert pop-up it goes to the next page. My intention is to not go to the next page unless all fields are filled.
Any hints would be greatly appreciated.
<html>
<head>
<script type="text/javascript">
function RegValidation() {
var txtURL,
if (!txtURL) {
alert("URL is mandatory!");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="RegisterForm" action="RegConfirm.php" method="post">
<p><input type="text" name="txtURL"></p>
<p><input type="submit" value="Register" onclick="Register()"></p>
</form>
</body>
<script type="text/javascript">
function Register() {
if (!RegValidation()) return;
}
</script>
Instead of onclick function on submit button try onsubmit in form tag..
the working code of the jsfiddle is here
<form name="RegisterForm" action="RegConfirm.php" method="post" onSubmit="return Register()">
<p><input type="text" name="txtURL" id="txtURL"></p>
<p><input type="submit" value="Register"></p>
</form>
function Register() {
return RegValidation();
}
function RegValidation() {
var txtURL = document.getElementById('txtURL').value;
if (!txtURL) {
alert("URL is mandatory!");
// txtURLFocus();
return false;
}
return true;
}
you need to assign the value of the field to the var you are testing
You need a focus function that is not defined in the code you gave.
You now only execute a function on click instead of returning it. It is not recommended to assign handlers to a submit button so I have assigned it to the submit event where it belongs
Here is an unobtrusive working version
window.onload = function() {
document.getElementById("RegisterForm").onsubmit = function() {
var txtURL = this.txtURL.valuel
if (!txtURL) {
alert("URL is mandatory!");
this.txtURL.focus();
return false;
}
return true;
}
}
<form name="RegisterForm" id="RegisterForm" action="RegConfirm.php" method="post">
<p><input type="text" name="txtURL"></p>
<p><input type="submit" value="Register"></p>
</form>

Error message will show if user is already available in the database

Im validating the textbox whether the values are already available in database or not. in the below code it is working fine also showing alert message(Notification ID Already Available).But If i click ok in the alert box,mouse cursor is going to second textbox.I want Cursor should be in the first textbox itself if i click on the ok button in the alertbox. ANy suggestions.
Please find the code below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
function checkValid(){
var flg="Y";
$.getJSON( "dynamic_content_values1.json", function( data ){
var textVal=$("#character_validation").val();
$.each( data, function( key, val ) {
if(textVal===val.notificationID){
flg="N";return false;
}
});
if(flg==="N"){
alert("Notification ID Already Available!");
//$("#character_validation").focus('');
}
else{
alert("Notification ID Available");
}
return false;
});
}
</script>
</head>
<body>
<form method="post">
<input type="text" id="character_validation" onblur="checkValid();" maxlength="10" onkeyup="this.value = this.value.replace(/[^a-zA-Z0-9-]/g, '')">
<br>
<input type="text">
<!-- <input type="submit" name="submit" value="Submit" onclick="checkValid();">-->
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
You have to use this after alert statment,
setTimeout(function(){$("#character_validation").focus('');}, 1);
I have tried in JAVASCRIPT,
function IsUserExist(txtcontrol) { //txtcontrol means this
if(txtcontrol.value == "2") {
alert("User Exist");
setTimeout(function() {
document.getElementById('txtUserName').focus();
}, 0);
return false;
}
}

Unable to get a javascript/html searchbar to work

I am unable to get my searchbar to return results, I am trying to get the search bar to take in keywords, upon submit it should search for the keywords in all the <div> in my site rather than a single page and display the matches in my searchresults.html page.
<script type="text/javascript">
document.getElementById('button-submit').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:webflicks.co ' + document.getElementById('button-submit').value;
return false;
}
</script>
<div class="parent">
<div class = "search">
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=""/>
</form>
</div>
</div>
</div>
You need to bind your submit event handler to the form, it won't fire on the button.
You'll also want to grab the value of the textbox and not the button.
Replace:
<script type="text/javascript">
document.getElementById('button-submit').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:webflicks.co ' + document.getElementById('button-submit').value;
return false;
}
</script>
with:
<script type="text/javascript">
document.getElementById('button-submit').onsubmit = function() {
window.location = "https://www.google.co.in/search?as_q="+ document.getElementById('button-submit').value +"&as_sitesearch=webflicks.co"; return false;
}
</script>
Hope this will help you..!!

Javascript setting value of textbox by function, without getting reset

My goal is to have a text box and a button. If I enter "Hello" in the text box and press the submit button I would like to have see the text box filled with "World.
For the moment the value of the text box will be changed betweeen the
<html>
<body>
<script>
function validateForm() {
var x = document.forms["myForm"]["Input"].value;
if (x == "Hello") {
alert("test");
document.getElementById("Input").value = "World";
alert("test2");
}
}
</script>
<form name="myForm" action="test.html" onsubmit="return validateForm()" method="post">
Input: <input type="text" id="Input"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The problem is that the form gets submitted right after the validation. So you are redirected to test.html again.
If you don't want that to happen, add event.preventDefault(); to your Event Handler (check out the fiddle to see it working):
<html>
<body>
<script>
function validateForm(event) {
event.preventDefault();
var x = document.forms["myForm"]["Input"].value;
if (x == "Hello") {
alert("test");
document.getElementById("Input").value = "World";
alert("test2");
}
}
</script>
<form name="myForm" action="test.html" onsubmit="return validateForm(event)" method="post">
Input: <input type="text" id="Input"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
You can learn more about event.preventDefault() at MDN.
Just as a sidenote: It is generally better to use addEventListener instead of the onsubmit attribute (Better separation of concerns, you can add multiple event listeners, etc.).
When you submit your page, then the content in the action page will be loaded.
In your case test.html will be loaded.
If you want the value "World" to be shown in the text box on hitting the submit, then return false on your validateForm() method.
Use return false; to stay on the same page and stop form submission.
function validateForm() {
var x = document.forms["myForm"]["Input"].value;
if (x == "Hello") {
document.getElementById("Input").value = "World";
return false;
}
}

validate hyperlink and checkbox before submit

For eaxmple in case the checkbox is not checked and the user hits the submit we need to show the error message "please check the checkbox". in case if the checkbox is checked and the hyper link is not clicked by the user we need to show the error message "Please click the link".
My Code
<script>
var state = 0;
$("#AcceptMe").click(function()
{
state=1;
});
if(state == 0)
{
alert("please click");
}
</script>
</head>
<body>
<form>
<a id="Link1" href="#">click</a>
<input type="checkbox" id="AcceptMe">
<input type="submit" name="submit">
</form>
This is not a good solution, because when the user clicks twice, he/she unchecks the checkbox, but the "state" would still be 1.
Check if the checkbox is checked like this:
var isChecked = $('#AcceptMe').is(':checked')?true:false;
Now the "isChecked" variable will contain true or false so you should first give the submit button an ID and type="button" (otherwise it will try to submit):
<input type="button" value="submit" name="submit" id="submitForm"/>
Add a clickHandler for the link like this:
var linkClicked = false;
$('#Link1').click(function(){
linkClicked = true;
});
Then under that function your javascript add a clickhandler to the submitbutton:
$('#submitForm').click(function(){
var isChecked = $('#AcceptMe').attr('checked')?true:false;
if(isChecked){
alert('checked!');
if(linkClicked){
alert('Link clicked!');
}
else{
alert('Click link first!');
}
else{
alert('please check the checkbox!');
}
});
JSFiddle here: http://jsfiddle.net/8o4an9xf/
Please note that you should add target="_blank", because the link will otherwise override the document.location. Or you could open the content you want to show in a modal window (which is nicer).
I think you must use "return false"
My code is clear and simple.
If its not matter for you to have in-line code try below:
<body>
<form>
<a id="Link1" href="#" onclick="$('#Link1').addClass('visited');
alert('add \'visited\' class to \'#Link1\'');">
</a>
<input type="checkbox" id="AcceptMe" />
<input type="submit" name="submit" onclick="
if( $('#AcceptMe').is(':checked')){
alert('checkbox is :' + $('#AcceptMe').is(':checked'));
if(!$('#Link1').hasClass('visited')){
alert('please visit link1');
return false;
};
}else{
return false;
}
" />
</form>
</body>

Categories

Resources