Simple Form Submit Code - javascript

I want to create a simple form with only an input textbox and search button.
A person would type in the search term in the box and press search.
All that will do is take their search term and add it to the end of the url.
So if search term is "good italian food" the submit button would send the user to http://domain/find/good italian food
Whats the simplest way to do this?
Thank you!

<html>
<head>
<script type='text/javascript'>
function Search() {
var keyword = document.getElementById("keyword").value;
var url = "http://yourwebsite.com/find/"+keyword;
window.location = url;
return false;
}
</script>
</head>
<body>
<form name="search">
<input type="text" name="keyword" id="keyword" />
<input type="button" name="btnser" onclick="Search()" value="Search" />
</form>
</body>
</html>

I'd also suggest using encodeURI() to make it 'safe'.
http://www.w3schools.com/jsref/jsref_encodeuri.asp

use javascript and html form
create a form with a button and text box
in the post of the form call the javascript function to create the url with the user input text
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
function redirect(){
var s = document.getElementbyID("txt").value;
var url="http://url.com/" + s;
window.location = url;
}
</script>
</head>
<body>
<form>
<input type=''></input>
</form>
</body>
</html>

you could override the action attribute within the onsubmit event: Example
HTML
<form action="#" onsubmit="send(this)" method="post" target="_blank" >
<input id="text"/>
<input type="submit" value="submit"/>
</form>
JavaScript
function send( form){
form.action = location.href + '/'+encodeURI(document.getElementById('text').value);
}
Also, overriding the form action, or redirecting the user, within the onsubmit event will allow you to use a true submit button.
This gives the user the ability to just hit the enter key once they finish typing to submit the search without you having to write extra logic listening for the the enter key within the textbox to submit the search.

Related

jQuery/JS won't redirect after validation of form

I'm trying to validate a password from a form using jQuery/JavaScript. Post-validation, I want the script to redirect me. However, this isn't currently working.
Note: this is only an exercise from my university, so that's why the code is very simple:
HTML:
!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/passwordCheck.js"></script>
</head>
<body>
<form method="post" name="form1" id="form-password" action="">
<label>Password:</label>
<input type="password" name="password" id="password" value="" size="32" />
<input type="submit" value="Continue" id="submit">
</form>
</body>
</html>
JS/jQuery:
'use strict';
jQuery(document).ready(function($) {
$('#form-password').submit(function() {
var passwordVal = $('#password').val();
if (passwordVal === "123" ) {
$(location).attr('href', 'http://www.stackoverflow.com');
}
});
});
I tried:
window.location.href = "http://www.stackoverflow.com";
but that doesn't work either.
I know that I need to check the submitted data, my problem is only with redirection.
How can I fix this?
You simply need to preventDefault() inside your submit listener, and then call
window.location.href = "...";
Currently, without preventing the default action of submitting a form, the form tries to POST your data, regardless of what happens in the submit callback.
If you preventDefault, the form will not submit until you return true.
That being said, redirects should be performed on the backend or by the front-end MVC framework. In any way, the password data needs to be submitted and checked against a database somewhere.
Try this, you are modifying the window.location.href property, you really want to be setting the window.location like this:
$('#form-password').submit(function(e) {
e.preventDefault();
var passwordVal = $('#password').val();
if (passwordVal === '123') {
window.location = 'http://www.stackoverflow.com';
}
});

jQuery submit by form id conditions not working

I have html form and want to make a validation by submitting the form with its specific id and validate it using jquery.
Here is my code:
HTML
<html>
<head>
<script src="jquery-1.11.2.min" type="text/javascript"></script>
</head>
<body>
<form method="post" name="frmhot" id="contactform3412">
<input type="text" name="status"/>
<input type="text" name="line"/>
<input type="text" name="reason"/>
<input type="text" name="partnum"/>
<input type="text" name="badgescan"/>
<input class="button_text" type="submit" value="Submit"/>
</form>
<script type="text/javascript">
var url = "";
jQuery("#contactform3412").submit(function(e){
url= 'works well!';
});
alert(url);
</script>
</body>
For this example, i want to get the value of the javascript variable 'url' within the jQuery condition submit. Thanks in advance :)
Use this -> Fiddle
var url = "";
$("#contactform3412").submit(function(e){
url= 'works well!';
alert(url);
return true;
});
Anyways you set url value and perform operations after submit,so use url value there only. In your problem, url could not set to "works well" as submit event was not fired.
You're missing the js file extension in your script declaration. It should be
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
instead of
<script src="jquery-1.11.2.min" type="text/javascript"></script>
With that, if you wrap your submit handler in document.ready(), it should work on click of form submit.
$(document).ready(function(){
var url = '';
$('#contactform3412').on('submit', function(e){
e.preventDefault();
url= 'works well!';
alert(url);
});
});

Submitting forms using JavaScript

I have been battling for the past two days with the evil onbeforeunload function in JavaScript. I have a function that warns the user when they are about to close a page.
However before the page close I would like to submit the form using JavaScript's .submit().
This is my code:
function setPopUpWindow(submitForm){
window.onbeforeunload = function () {
if (submitForm == false ) {
//alert("It worked"); --This code gets called so I know it works
document.getElementById("CancelScripting").submit();
//return "Unsaved Data would be lost";
}
}
}
In my html I have two buttons, one is (supposed to) trigger the .submit() and the other will just ignore it.
<body>
<form action=tett.html id="popUpForm" method=POST>
<script>setPopUpWindow();</script>
<input type="submit" id="submit_button" onclick="setPopUpWindow(true);">
<input class=b1 type=submit id="CancelScripting" style="visibility:hidden" value="CancelScripting" >
</body>
The `setPopWindow value for the second input is not defined so it would be false.
For some reason the submit is not working well.
------------------------Edit to my question-----------------------------------------------
I would like to submit the form even if the user leaves the page by closing the X button on their window. This is the reason why I have the hidden button... Looks like people misunderstood my question.
The only thing you can do is to ask the user if they really want to leave the page:
<head>
<script type="text/javascript">
var submitForm = false;
window.onbeforeunload = function () {
if(submitForm == false){
return 'You have an unfinished form ...';
}
}
function setPopUpWindow(type){
submitForm = true;
}
</script>
</head>
<body>
<form action="" method="post" name="SubmitForm" id="SubmitForm">
<input type="submit" id="submit_button" onclick="setPopUpWindow(true);">
</form>
</body>
I think that what you want to do is submit the form rather than the button by doing something like:
document.forms["formId"].submit();
where formId is the id of the form.
Also, I dont see anywhere in your code where your form is but your buttons should be inside of form tags.
For example, it should look like this:
<body>
<script>setPopUpWindow();</script>
<form id="formId" action="" method="post">
<input type="submit" id="submit_button" onclick="setPopUpWindow(true);">
<input class=b1 type=submit id="CancelScripting" style="visibility:hidden" value="CancelScripting" >
</form>
</body>

how to detect form submit when it is done via a javascript

<html>
<head>
<title>Untitled</title>
</head>
<script>
document.onsubmit = formSubmitted;
function formSubmitted() {
alert("formSubmitted");
}
function clickAction() {
alert("clickAction");
var aForm = document.forms['form2'];
aForm.action = "#";
aForm.submit();
}
</script>
<body>
<form name="form1">
<input type="submit" value="Direct Submit">
</form>
<br>
<form name="form2" action="#$">
<input type="button" value="Onclick Submit" Onclick="clickAction();">
</form>
</body>
</html>
This is my code, I'm detecting form submit using document.onsubmit = formSubmitted;
alert is working.
but its not work when I tried to submit the form via javascript(click "Onclick Submit" button)
You need to attach that to a particular form.
document.form1.onsubmit = formSubmitted;
document.form2.onsubmit = formSubmitted;
That isn't possible. You'll need to extend your function clickAction to notify you when it has submitted the form.

i am trying to write a simple textbox (for people to type url in it) with a button in html

i am trying to write a simple textbox (for people to type url in it) with a button in html.
when the button is clicked, it will send the url of the current website that I am browsing to the url that is listed in the textbox using the POST method. is it possible?
i have been looking on forums but don't really know which is the right one cos it seems that there are various way of doing it and i don't really know how to edit them.
my current code:
<html>
<head>
<title>YouTube</title>
<script type="javascript/text">
function handleButtonEnterClick(tab) {
//TODO:
var textbox_url = document.getElementById("url_textbox");
var textbox_value = textbox_url.value; //eg. value = "www.google.com"
//Need to have a POST method written here to send the url of the current
//webpage for example www.youtube.com to url listed in the textbox,
//for example www.google.com
//May I know how can I do it? Thanks.
}
</script>
</head>
<body>
<div id ="container">
<p>Enter URL:</p>
<input type="text" id="url_textbox" name="url_textbox" />
<input type="button" id="button_enter" name="button_enter"
value="enter" onclick="handleButtonEnter" />
</div>
</body>
</html>
What you need is a <form> element, which a) has action attribute to indicate where to send the data; b) on submit sends the data (I've added an extra <input type='hidden'> to store your current pages url for sending).
<script type="javascript/text">
function handleButtonEnterClick() {
var textbox_value = document.getElementById("url_textbox").value;
document.getElementById('myUrl').value = window.location;
var form = document.getElementById('myForm');
form.action = textbox_value;
form.submit();
}
</script>
<div id="container">
<form action="" method="post" id="myForm">
<p>Enter URL:</p>
<input type="hidden" id="myUrl" name="url" />
<input type="text" id="url_textbox" name="url_textbox" />
<input type="button" id="button_enter" name="button_enter"
value="enter" onclick="handleButtonEnter" />
</form>
</div>
This should work:
<html>
<head>
<title>YouTube</title>
<script type="javascript/text">
function handleButtonEnterClick(tab)
{
var textbox_url = document.getElementById("url_textbox");
var textbox_value = textbox_url.value; //eg. value = "www.google.com"
//Set the form action to the textbox value
var the_form = document.getElementById("the_form");
the_form.setAttribute("action", textbox_value);
//Set the value of the url field to the current url
document.getElementById("url").setAttribute("value", window.location);
the_form.submit();
}
</script>
</head>
<body>
<div id ="container">
<form action="" method="post" id="the_form">
<p>Enter URL:</p>
<input type="hidden" name="url" id="url" />
<input type="text" id="url_textbox" name="url_textbox" />
<input type="button" id="button_enter" name="button_enter"
value="enter" onclick="handleButtonEnter" />
</form>
</div>
</body>
</html>
The current page location is stored in the JavaScript variable "window.location.href" (thats in Chrome, might be different elsewhere).
You also need to set the action of your form to the URL in the textarea. Suggest you put an id tag on the html form element, and use that id tag to set the action property of the form to the contents of the textbox as part part of the buttons onclick handler.
There are two options:
Use a HTML form, as Ant has shown, set the action and method attributes. Add a submit button inside the form (along with your textbox). When you click on the Submit button, your data will get posted.
Use AJAX to post your form if you want to stay in the current page

Categories