We Keep Coding

Onclick Redirect Not Firing

I'm trying to redirect a user to another page after clicking on a form submit button.
I'm trying to fire a few events which fill in certain parts of the form automatically then submit the form & finally redirect the user to another page.
Everything works expect the redirect. I have tried a few things but havent gotten the redirect to work after the form submits.
I also don't want to user to be redirected before the form has been successfully submitted.
Here is my code:
<form id="usp_form" method="post" enctype="multipart/form-data" action="">
<input class="usp_input" type="text" name="user-submitted-title" id="user-submitted-title" value="" />
<input class="usp_input" type="text" name="user-submitted-url" id="user-submitted-url" value="">
<input class="usp_input" type="text" name="user-submitted-tags" id="user-submitted-tags" value="">
<input class="usp_input" type="text" name="user-submitted-category" id="user-submitted-category" value="">
<textarea class="usp_textarea" name="user-submitted-content" id="user-submitted-content" rows="5"></textarea>
<input class="hidden" type="hidden" name="user-submitted-name" value="<?php echo $current_user->user_login; ?>">
<input onClick="copyText();copyText2();copyText3();handleClick();" class="usp_input" type="submit" name="user-submitted-post" id="user-submitted-post" value="Submit Post">
</form>
<script language="javascript" type="text/javascript">
function copyText3() {
var output1 = document.getElementById("edit1").innerHTML;
var output2 = document.getElementById("edit2").innerHTML;
document.getElementById("user-submitted-title").value = output1 + ', ' + output2;
}
</script>
<script language="javascript" type="text/javascript">
function copyText2() {
var output1 = document.getElementById("edit1").innerHTML;
var output2 = document.getElementById("edit2").innerHTML;
var output3 = document.getElementById("template").innerHTML;
document.getElementById("user-submitted-tags").value = output1 + ', ' + output2 + ', ' + output3;
}
</script>
<script language="javascript" type="text/javascript">
function copyText() {
var output = document.getElementById("templatebody").innerHTML;
document.getElementById("user-submitted-content").value = output;
}
</script>
<script language="javascript" type="text/javascript">
function handleClick() {
window.location.href='http://website.com/';
}
</script>

The submit button will launch a request, but you are also defining a redirecting request on the button press, so one will override the other (I'm not sure which one, it may depend on the browser).
You may want to fire an Ajax request instead of the standard submit, and do the redirection only when you get the response from the Ajax request so you are sure no information was lost.

You should not code like is but register your functions on the event, outside de HTML (it's always better to separate your HTML, JS and CSS).
You can understand about events bubling here : http://javascript.info/tutorial/bubbling-and-capturing
If you just want to see your code working and don't validate your form, just add "return false ;" at the end of your onclick attribute.
Edit : Oups sorry, you want submit your form, then redirect. You can do this with ajax requests (see http://www.w3schools.com/xml/xml_http.asp) : you submit your form in ajax, then you redirect.
But IMO, It's a serverside behaviour : you probably have a dynamic language (Python, PHP, ASP... ?) which process your form submission. It's here you have to redirect after the process.

javascript jquery carrying html form POST data

SO I have a form that look similar to
<form action="test.php" id="checksub" method="post">
<div>
<select name="mydropdown">
<option value="buy">buy</option>
<option value="sell">sell</option>
</select>
</div>
autocomplete text input that triggers "checksub"
<input type="submit" id="checksub" name="checksub" style="visibility:hidden">
<input type="submit" id="newsbutton" name="newsbutton">
</form>
<script type="text/javascript">
$('#newbutton').click(function() {
var newaction = "cantfinditems.php";
$("#checksub").prop("action", newaction);
$('#checksub').submit();
});
</script>
Now the submit button is hidden because the autocomplete triggers it anyway, but if the user cant find what they are looking for I want a button that says "cant find what your'e looking for?"
I want this button to have a different action to the form action, ie window.location = cantfinditems.php
but I also want to carry the POST data from the form ie "mydropdown".
Thank you

Ok, so you need a second button, which calls a JavaScript function. In this function, you do a number of things:
Set the action attribute of the form to your alternate action (e.g. cantfinditems.php)
var newaction = "cantfinditems.php";
$("#form_id").prop("action", newaction);
Submit the form
$('#form_id').submit();
So a full example would be:
<script type="text/javascript">
$('#yourbuttonid').click(function() {
var newaction = "cantfinditems.php";
$("#form_id").prop("action", newaction);
$('#form_id').submit();
});
</script>

HTML form input direct to URL

How do I direct the browser to another URL based on user input for example:
abc.com/apple.html
abc.com/banana.html
abc.com/pear.html
BUT, if the user doesn't enter apple,banana or pear then they are directed to:
abc.com/wrong.html
Any help would be awesome! I only know HTML forms.

<form id='formName' name='formName' onsubmit='redirect();return false;'>
<input type='text' id='userInput' name='userInput' value=''>
<input type='submit' name='submit' value='Submit'>
</form>
<script type='text/javascript'>
function redirect() {
var input = document.getElementById('userInput').value;
switch(input) {
case 'apple':
window.location.replace('apple.html');
break;
case 'banana':
window.location.replace('banana.html');
break;
default:
window.location.replace('default.html');
break;
}
}
</script>

You may use Javascript/JQuery to do it like this:
HTML:
<form name="form_input" action="post_values.php" method="post">
<input type="text" name="fruit" id="fruit" />
<input type="submit" value="Submit" />
</form>
JS/JQuery:
<script>
$("form").submit(function() {
var fruit = $("#fruit").val();
if(fruit=='apple' || fruit=='pear' || fruit=='banana'){
window.location = "http://www.abc.com/"+fruit+".html";
}else{
window.location = "http://www.abc.com/wrong.html";
}
return true;
});
</script>

In the HTML file of "abc.com", which is mostly index.html, between your <HEAD> tags do this:
<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.abc.com/wrong.html">
Adjust content= to how many seconds you want your browser to wait before redirecting.
Update:
The http method is not recommended by W3C because of this:
If a page redirects too quickly (less than 2-3 seconds), using the "Back" button on the next page may cause some browsers to move back to the redirecting page, whereupon the redirect will occur again. This is bad for usability, as this may cause a reader to be "stuck" on the last website.
Hence the recommended method via JS:
<head>
<script>
function replaceDoc()
{
window.location.replace("http://www.abc.com/wrong.html")
}
</script>
</head>
I found the above method here:
W3Schools Window.Replace()

<script language="JavaScript">
var page = new Array("apple","banana","pear"); // list of your pages
function redirect(){
if(page.indexOf(document.forms["NameOfForm"]["NameOfInput"].value)!=-1){
window.location = document.forms["NameOfForm"]["NameOfInput"].value + ".html";
}
else {
window.location = "wrong.html";
}
return false;
}
</script>
<form name="NameOfForm" onsubmit="return redirect()">
<input name="NameOfInput" />
<input type="submit" />
</form>
put that code into abc.com/ and you just have to add, change the list of page ;)

how to call an external javascript method from a form?

I want to submit a form. But before that I wanna validate it. The validation is a javascript method. everything is ok as long as the javascript method is in the same .jsp file as the form.
But I want to put it to an external javascript file, and the method gets never called. Why?
this part should include the javascript into .jsp file.
<script type="text/javascript" src="Validate.js">
var val = new Validate();
var result= val.validateArticle();
</script>
here is the form I want to submit:
<form name="articleAnswerForm" action="answer.html"
action="answer.html" onsubmit="return result" method="post">
Was is der Artikel?<br> <select name="art">
<option>???</option>
<option>der</option>
<option>die</option>
<option>das</option>
</select> <input type="hidden" name="richtig" value="${selected.article}">
<h1>${selected.german}</h1>
<input type="submit" value="Antworten">
</form>
The Validate.js is in the same directory as the .jsp file.
here is the Validate.js (but it works fine, if it is in the .jsp file.)
function validateArticle() {
var a = document.forms["articleAnswerForm"]["art"].value;
var richtig = document.forms["articleAnswerForm"]["richtig"].value;
if (a == null || a == "" || a != richtig) {
alert("Nein " + a + " ist falsch");
return false;
}
}
so far the only thing that works is if I put everything into one .jsp file like below
<script type="text/javascript" >
function validateArticle() {
var a = document.forms["articleAnswerForm"]["art"].value;
var richtig = document.forms["articleAnswerForm"]["richtig"].value;
if (a == null || a == "" || a != richtig) {
alert("Nein " + a + " ist falsch");
return false;
}
}
</script>
<form name="articleAnswerForm" action="answer.html"
action="answer.html" onsubmit="return validateArticle()" method="post">
Was is der Artikel?<br> <select name="art">
<option>???</option>
<option>der</option>
<option>die</option>
<option>das</option>
</select> <input type="hidden" name="richtig" value="${selected.article}">
<h1>${selected.german}</h1>
<input type="submit" value="Antworten">
</form>
<form:form method="post" action="word.html">
<input type="submit" value="nächste Wort">
</form:form>
</c:if>

First, you cannot mix a src-ref and local code in one script tag.
<script type="text/javascript" src="Validate.js"></script>
<script type="text/javascript">
var val = new Validate(); // 'new Validate' won't work.
var result= val.validateArticle();
</script>
In HTML, onsubmit="return result" will probably not do what your are intended to. You want to validate on submit, won't you? So you have to call the validateArticle() function then, not on page load. And there is no need to instanciate a Validate object.
onsubmit="return validateArticle()"

This is all you need. You don't need to create an instance to use the Validation function.
Script:
<script type="text/javascript" src="Validate.js"></script>
HTML Form:
<form name="articleAnswerForm" action="answer.html"
action="answer.html" onsubmit="return validateArticle()" method="post">
Was is der Artikel?<br> <select name="art">
<option>???</option>
<option>der</option>
<option>die</option>
<option>das</option>
</select> <input type="hidden" name="richtig" value="${selected.article}">
<h1>${selected.german}</h1>
<input type="submit" value="Antworten">
</form>
So when you are moving Javascript to an external file. You don't need to do anything special to access it. There is no instantiation required. Just use the javascript as you would if it was included in the file itself. If you find it doesn't work, it's likely the file isn't loading properly, in which case check the file is in the right directory and the case of file is correctly set, as some file system are case sensitive.

Add video URL, with live preview option

I am creating a form which allows people to enter a video url. Standard input form, to accept a URL like:
http://video.google.com/videoplay?docid=1299927595688205543
I would like to add a button (within the form, which says something like [preview video]). Basically that button/link appends the link they entered into the input field, to this code:
<a href="http://video.google.com/videoplay?docid=1299927595688205543&lightbox[width]=610&lightbox[height]=360" class="lightbox">google video</a >
This is to be available prior to form submission.

<form id="video_upload_form" action="">
<label for="video_input_box">Video URL</label>
<input type="text" id="video_input_box" value="" />
<input type="submit" value="Add Video" />
</form>
<p>Preview Video</p>
<script type="text/javascript">
$().ready(function(){
$('#video_upload_form').submit(function(){
var video_url_params = '&lightbox[width]=610&lightbox[height]=360';
var video_url = $('#video_input_box').val() + video_url_params;
$('#video_preview').attr('href', video_url);
return false;
});
});
</script>
Also here it is as a JSFiddle: http://jsfiddle.net/Treffynnon/CEMpT/
You will need to do some validation on the URL supplied by the user before putting it into the preview link, but I will leave that part up to you as you have not asked for help with it in your question.