I am attempting to create a form on the page that requires the user to input text. Once the form is submitted, the user will then be redirected to the page assigned to it. My question is where am I going wrong and how should I resolve this issue? Could someone include a JSFiddle or Codepen.io pen for deminstration purposes?
For example:
User enters and submits "123456"
User is then redirected to the page www.domain.com/123456
I am assuming it is something like this:
HTML
<form>
<input id="projectid" maxlength="6">
<input onclick="findProject()" type="submit" value="Go">
</form>
Javascript
function findProject(){
document.location = document.getElementById('projectId').value();
}
I have included my own pen: http://codepen.io/ShaneHicks/pen/eZbbLz
Put a / before the url fragment
document.location = '/' + document.getElementById('projectId').value;
<form>
<input id="projectId" maxlength="6">
<input onclick="return findProject()" type="submit" value="Go">
</form>
<script>
function findProject(){
window.location = document.getElementById("projectId").value;
return false;
}
</script>
Related
I have basic js script but i cant figure out why is it now working.
User write amout here:
<input class="dpinput" id="gvfrom" placeholder="Suma.." type="text" value="">
And change value in this form by submiting button in same form
<form>
<input type="hidden" name="amount" id="gvhere" value="">
<input type="submit" class="pbutt2" value="⇨" onclick="go3(); return false;">
</form>
JS script is here
<script>
function go3() {
var gvfrom = document.getElementById('gvfrom').value;
document.getElementById('gvhere').value = gvfrom;
};
</script>
Problem is that form is not submitted (normally is redirected to other site with values). Thanks for any help.
Just remove "return false;" from submit button.
Why would you put return false? Try removing it, it will work much better I guess.
I am very new to JavaScript and web development in general. I have a problem when I want to have my log in system executes a JavaScript function when the user submits but it does nothing when it should print to the screen. I can't figure out exactly what I am missing. Any help will be greatly appreciated!
<form name="sign_in" onsubmit="check_stuff()">
<b>Username...</b>
<br>
<input type="text" name="Username" value="Your Username">
<br>
<br>
<b>Password...</b>
<br>
<input type="text" name="Password" value="Your Password">
<br>
<br>
<input type="submit" value="Submit">
</form>
<script>
function check_stuff(){
document.write("gametime");
}
</script>
The function is writing to the document, but that will just be visible for a very short time while the page reloads. The form will still be posted, so the page will reload and replace what you have written.
You would want to return the result from the function in the event handler:
onsubmit="return check_stuff()"
That will allow you to return false from the function if you want to keep the form to be posted:
function check_stuff(){
document.write("gametime");
return false;
}
(I assume that you are just using the document.write for testing purposes, as it will replace the entire current page with what you write.)
This works fine. Although it overwrites the DOM because document.write is called after it loaded. This means only gametime will be on the screen afterwards. It does show but, but submitting a form reloads the page. So it will appear as nothing happened.
To fix this you will want to return false; in which will not submit the form. Also change onsubmit="check_stuff()" to onsubmit="return check_stuff()".
It works ok for me, I think the issue you have is that te page is reloading after submit. Just add a return false; after the check_stuff() call to avoid the reload.
<form name="sign_in" onsubmit="check_stuff(); return false;">
Check out this codepen.
if you want current page not be redirected, you should submit your form to a iframe in current page, like this:
<form name="sign_in" onsubmit="check_stuff()" target="#frame">
<b>Username...</b>
<br>
<input type="text" name="Username" value="Your Username">
<br>
<br>
<b>Password...</b>
<br>
<input type="text" name="Password" value="Your Password">
<br>
<br>
<input type="submit" value="Submit">
</form>
<iframe id="frame" name="frame"></iframe>
<script>
function check_stuff(){
document.write("gametime");
}
</script>
I have a HTML submit button and am trying to send hidden info to an outside form.
<form name="input" action="https://www.skinnybodycare.com/aff/join" method="post">
<input type="hidden" value="2skinnyme" name="enroller" />
<input type="hidden" value="Continue">
<input type="submit" value="Order Now">
</form>
And it has to take the user to https://www.skinnybodycare.com/aff/join and input the value and click on Continue... but can't figure it out and I'm against time here... help is very much appreciated...
I also want to say that I've already searched the forum for similar issues but couldn't find anything
The answer is: You can't pre-fill forms from outside, unless you've made code that reads values from the URL.
Here's some sample code (untested) to give you an idea of how to make the page work this way:
<form name="input" action="https://www.skinnybodycare.com/aff/join" method="post" **id="myform1"**>
<input type="hidden" value="2skinnyme" name="enroller" />
<input type="hidden" value="Continue">
<input type="submit" value="Order Now">
</form>
<script type="text/javascript">
var myvar = location.toString().replace(/[&?]2skinnyme=([^&]*)/, '$1');
document.getElementById('myform1').2skinnyme = myvar;
document.getElementById('myform1').submit();
</script>
Alternatively, you can just submit directly, from the original page, to the URL using AJAX and jquery, but that would require you to be on the same domain:
<script type="text/javascript">
$.post('https://www.skinnybodycare.com/aff/join', { enroller: '2skinnyme' }, function() {
alert('Form has been submitted');
});
</script>
I have two files. One is login.html which is a simple html5 file with a form.
HTML
<form method="post" action="" name="form1">entre the pasword:
<input type="password" name="code" placeholder="code" maxlength="6">
<p class="submit">
<input type="submit" name="commit" value="send" onclick="verif(document.form1.code)">
</p>
</form>
Second is my javascript file with the below code:
function verif(inputtxt) {
var pwd = "123456";
if (inputtxt.value.match(pwd)) {
window.location.href = 'Test.html';
} else {
alert('Code erron\351 ! ')
return false;
}
}
Now my problem is that when I enter my password, if it is wrong the alert message indicating an error should appear (it appears and I don't have a problem with that) and if it is correct, I should get redirected to the next page. The second part doesn't work for me.
Please help, I'm stuck with that for two days now..
Since your button is a submit button, I think it is submitting the form after the JS is done and this could be the reason why you don't get redirected to Test.html (as form action attribute doesn't have any value.) Try the below code for the HTML form and check if this solves the issue.
<form method="post" action="" name="form1" onsubmit="verif(document.form1.code);return false;">entre the pasword:
<input type="password" name="code" placeholder="code" maxlength="6">
<p class="submit">
<input type="submit" name="commit" value="send">
</p>
</form>
The return false; in the onsubmit attribute prevents the form's default submit action. The verif(document.form1.code) will be executed whenever the form is submitted (that is the submit button is clicked).
I'm trying to create a form which submits a string to another page only with the parameter name removed from the URL.
i.e. submitting the following form with "foo"
<form action="search.asp" method="get">
<input type="text" name="keyword" id="keyword">
<input type="submit" value="Go">
</form>
will go to search.asp?foo NOT search.asp?keyword=foo
Can this be done with pure html?
I guess this can be done with javascript and/or jquery but I'm not certain exactly how.
Can anybody help?
I'm a bit of a noob so a copy and paste solution would be great for me.
Update:
Thanks for the answers so far but they don't seem to be working. Perhaps a better way to do this is to get JQuery to construct the URL and load that URL? Any more suggestions would be great.
or maybe...?
$('input[type="text"]').blur(function() {
$('form').attr('action', 'search.asp?' + $('input').val());
});
Let's give the form and the submit button a classname for convenience and assume we have jQuery on the page.
<form action="search.asp" method="get" class="search_form">
<input type="text" name="keyword" id="keyword">
<input type="submit" value="Go" class="search_button">
</form>
<script type="text/javascript">
$(function(){
var $form = $(".search_form");
// save the default action, because we are going to mess with it.
$form.data("original-action", $form.attr("action"));
// listen to the click on the button, update the form action and submit the form manually
$(".search_button").click(function(){
$form.attr("action", $form.data("original-action") + "?" + $("#keyword").val());
$form.submit();
return false;
});
});
</script>
Not tested, but should work. Let me know.
Btw, saving the default action is maybe not needed. But just in case that you ever want to submit it with ajax without reloading the page.
Try this:
<form action="search.asp?foo">
<script>
$(document).ready(function(){
$("#btnSubmit").click(function(){
var keywordVal = $("#keyword").val();
window.location.href = "search.asp?" + keywordVal;
});
});
</script>
<input id="keyword" type="text" name="keyword">
<button id="btnSubmit">Submit</button>