I have a form which I display when someone clicks a button using the onclick="", and if they submit it, and the information is all correct, then they are redirected to the another page, however if the information is incorrect then the errors are displayed. My problem is people always have to click the button to show the form to even show the error, is there a way I can do mysite/index.php# show_form_by_default Or something that I can redirect to so that they can view the form without having to click it assuming there are errors in it.
<a id="button1" class="submit" onclick="$('#form').show('slow'); $(this).hide('slow');">Form</a></p>
<div class="box" id="form" style="text-align: center; display: none;">
<form class="notice" action="form.php" method="post">
form stuff here
</form>
</div>
Basically if there a way to display the form via the URL by default?
try this:
<script type="text/javascript">
$(document).ready(function(){
var hash = window.location.hash.toLowerCase();
if(hash == "#show_form_by_default")
{
$('#button1').hide();
$('#form').show();
}
});
</script>
If you want to monitor for changes in the hash (i.e a link on the same page that sets the hash without navigating away you can use the following code:
<script type="text/javascript>
$(document).ready(checkHash);
var oldHash = null;
function checkHash()
{
var hash = window.location.hash.toLowerCase();
if(oldHash != hash)
{
if(hash == "#show_form_by_default")
{
$('#button1').hide();
$('#form').show();
}
oldHash = hash;
}
setTimeout(checkHash, 100);
}
</script>
Modify the timeout interval to be as long or as short as you like depending on how often you want it to check for changes.
Related
I have a Script to open one popup with form(for comparing the input field value with one fixed code) on page load & after clicking on the submit button need to close popup without page reload. Here is my code.
"Html form code"
<form method="post" onsubmit="return checkCode(this);">
<div class="form-group">
<input type="text" required class="form-control" placeholder="Name" name="name">
</div>
<input type="submit" name="save" class="btn btn-primary">
</form>
"Script Code"
"popup script"
<script type='text/javascript'>
$(function () {
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function () {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
</script>
"comparing function code"
<script type="text/javascript" language="JavaScript">
function checkCode(theForm) {
if (theForm.name.value != 'SS-2018') {
alert('Code not matched!');
return false;
} else {
return true;
}
}
</script>
Please check this & help me to get it working correctly. Everything is working correctly I just want on click submit page don't reload simply close the popup window & keep on the same page.
Thanks & Regards
Cue
I'm assuming the HTML that you have there is inside of your popup or overlay. It's a bit hard to tell.
If you want to submit the form without reloading or changing the page, you'll have to use some form of AJAX. Since it looks like you are using jQuery, you can use their ajax() function.
To get the data of the form itself, you can use their serialize() function to scoop the data up into a POJO (plain old JavaScript object).
You would do this on whatever makes sense to call submit. You could probably do it instead of your return true in your checkCode() function (and always return false).
It'd be something like this:
<script type="text/javascript" language="JavaScript">
function checkCode(theForm) {
if (theForm.name.value != 'SS-2018') {
alert('Code not matched!');
} else {
$.ajax('http://example.com/post/location', { method: 'post', data: $(theForm).serialize() })
.then(response => { /* do something with response */ })
.catch(err => { /* handle error */ });
}
return false;
}
</script>
I have the following form:
<form action="http://example.co.uk/order" method="post" id="voucher" class="AVAST_PAM_nonloginform">
<fieldset>
<h4>Vouchers</h4>
<input type="text" class="discount_name form-control" id="discount_name" name="discount_name" value="">
<input type="hidden" name="submitDiscount">
<button type="submit" name="submitAddDiscount" class="button btn btn-default button-small"><span>OK</span></button>
</fieldset>
</form>
and am using the following script:
<script>
window.onload = function(){
document.getElementById(\"discount_name\").value = \"50681\";
}
</script>
to populate the input. I then use:
<script>
window.onload = function(){
document.forms['voucher'].submit();
}
</script>
to activate the submit.
However, use the second script, it stops the "50681" from being inputted into the text box (instead submits a blank input).
Originally I had the code as :
<script>
window.onload = function(){
document.getElementById(\"discount_name\").value = \"50681\";
document.forms['voucher'].submit();
}
</script>
(I split it up thinking it may be a timing issue).
Any ideas?
p.s. the reason for the backslash's is due to it currently being run under php until I can get it working
The issue seems to be with (\"discount_name\").value = \"50681\"; & document.forms['voucher'].submit();
In either of the case you can avoid \ & for form you need to target by the index number. Assuming there is only one form present , so passing 0 in index
window.onload = function(){
document.getElementById("discount_name").value = "50681";
document.forms[0].submit();
}
Note: In the demo I have changed the action url to https else it will prohibit to make call from jsfiddle. In your case you can still keep http in code
DEMO USING ID
http://jsfiddle.net/nqCFL/
I'm trying to check the value of an input and if it's empty, redirect the page, if not empty, redirect to another page. It has no value as is and does not represent what I'm actually trying to do, it is just an experiment. This experiment is supposed to help me with the goal is to check the input and if it's empty, submit the form. If it's not empty, cancel the form and redirect to another page. I'm experimenting with Botcha and this is similar in idea. The problem is the page just continually refreshes on button click and never redirects according to the test I have above.
The experiment I have is:
<form action="" method="post">
<input type="text" placeholder="issue" class="issue-input" />
<button class="submit button" type="submit">Send</button>
</form>
$(".submit").click(function(){
if($(".issue-input").val().length == 0) {
window.location.href = "http://www.google.com";
} else {
window.location.href = "http://www.yahoo.com";
};
});
Because your button is submit button, so your click will submits the form, try use preventDefault method of jquery.
$(".submit").click(function (e) {
e.preventDefault();
if ($(".issue-input").val().length == 0) {
window.location.href = "http://www.google.com";
} else {
window.location.href = "http://www.yahoo.com";
};
});
try fiddle: http://jsfiddle.net/nqCFL/2/ , I modified the url to an error url, so you can see page is redirected.
try with :
$(".submit").click(function(){
if($(".issue-input").val() == ''){
window.location.href = "http://www.google.com";
} else {
window.location.href = "http://www.yahoo.com";
};
});
I want to fire a JavaScript function when the user clicks on a button.
This JavaScript should fire only after the page does the xval validation.
How can this be achieved?
Do you want it to run only if the form is valid or it doesn't matter? If you want to run it only if the form is valid try this...
<form method="post" id="formToValidateID" >
<input type="button" onclick="ButtonClicked();" />
</form>
<script type="text/javascript">
function ButtonClicked() {
if($("#formToValidateID").validate.form(){
ExecuteJavascriptMethodIfValid();
}
}
function ExecuteJavascriptMethodIfValid() {
/* awesome code */
}
</script>
If you don't care if the form is valid, you can leave off the if condition.
In the window.onbeforeunload event is there a way to detect if the new request is a POST (on the same page) or a GET (going to a page)? It would also be great to see the new document.location.
window.onbeforeunload = winClose;
function winClose() {
//Need a way to detect if it is a POST or GET
if (needToConfirm) {
return "You have made changes. Are you sure you want?";
}
}
This is how I just did it:
$(document).ready(function(){
var action_is_post = false;
$("form").submit(function () {
action_is_post = true;
});
window.onbeforeunload = confirmExit;
function confirmExit()
{
if (!action_is_post)
return 'You are trying to leave this page without saving the data back to the server.';
}
});
Sounds like something you'd need to attach to a form, or specific links. If the event is raised by a link, and there is a request string full of variables, it will act as a GET. If it's a form, you'll have to check the METHOD, and then figure the URL based on the data being submitted in the form itself.
No method
GET method
<form method="GET" action="thisPage.php">
<!-- This is a GET, according to the method -->
<input type="text" name="usrName" value="jonathan" />
</form>
<form method="POST" action="thisPage.php">
<!-- This is a POST, according to the method -->
<input type="text" name="usrName" value="jonathan" />
</form>
So the detection would take place not in the window method, but in the click method of your links, and form submissions.
/* Check method of form */
$("form").submit(function(){
var method = $(this).attr("method");
alert(method);
});
/* Check method of links...UNTESTED */
$("a.checkMethod").click(function(){
var isGet = $(this).attr("href").get(0).indexOf("?");
alert(isGet);
});