We Keep Coding

Why isn't my JS redirecting the webpage?

I'm trying to make a HTML form that on submit does a google search with JS.
This is the HTML:
<form name="form">
<input type="text" name="search" id="searchBox" onkeyup="changeLogo()" autofocus>
<input type="submit" id="button" value="Submit" onclick="googleSearch()">
</form>
And the JS function:
function googleSearch() {
var searchText = document.getElementById("searchBox").value;
window.location.href = "http://google.com/";
}
The Google URL isn't right but it isn't redirecting at all.. I put alert(searchText) in the function and the alert showed so not really sure what's going on.

If you use button type as 'submit', it will submit your form.
So you can change your button from
<input type="submit" id="button" value="Submit" onclick="googleSearch()">`
to
<input type="button" id="button" value="Submit" onclick="googleSearch()">
It will work.

because the page refreshed when you click submit button before excuting localtion.href line
try change with your code like below
<form name="form" onsubmit="return false">
....
</form>

Your form is submitted which might be the issue. Change the type="submit" to type="button" this will make sure the form is not submitted on click of this button

JavaScript function not executing?

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>

Clearing input data on submit after opening it in a new tab

Anyways, straight to the point. I am in need of some help on getting my form submit button to clear the input field as well as send the information that was typed. Not very detailed, right?
Here's an example. Person types in field. Person clicks submit. Submitted information is then opened in a new tab. The original tab with the input field is then refreshed to remove the text in the input field.
This is my current form. I tried implemented javascript. It worked for the removing the information on click, but didn't send the information to the handler. Can you tell me how to fix this?
<form class="form-inline" role="form" method="post" target="_blank" action="derp.php">
<input id="banfix" type="text" name="player" class="form-control" placeholder="Player Username">
<button type="submit" class="btn btn-default" onclick="document.getElementById('banfix').value='';return false;">Search</button>
</form>
I don't mind it being in php or javascript. I just need to know how to fix my problem.

Using jquery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//clear data
$('.form-inline').on('submit','.form-inline',function(){
var value = $("#banfix").val();//now you have the value
$("input[type=text], textarea").val("");
});
});
</script>

could reset your form after submitting
$(".myform")[0].reset();

Use onsubmit(), it will work when the user click the button or just press enter
<form class="form-inline" role="form" method="post" target="_blank" action="derp.php" onsubmit="document.getElementById('banfix').value='';">
<input id="banfix" type="text" name="player" class="form-control" placeholder="Player Username">
<button type="submit" class="btn btn-default">Search</button>
</form>

You can do the opening new window in derp.php file after submitting the form.
<?php
$banfix = $_POST['banfix'];
$new_url = "YOUR_URL_HERE?fix=".$banfix;
echo "<script type='text/javascript'>window.open('".$new_url."','_blank');</script>";
http_redirect('YOUR_FORM_URL_HERE');
die();
?>

<form class="form-inline" role="form" method="post" target="_blank" action="derp.php">
<input id="banfix" type="text" name="player" class="form-control" placeholder="Player Username">
<button type="submit" class="btn btn-default" onclick="setTimeout(function() {
document.getElementById('banfix').value='';return false;
}, 100);">Search</button>
</form>
I added a set timeout function to my onclick. My problem was that the information being sent was being cleared before it was sent. So I set a 100 tick timeout so the info can be sent first. :3

How to make a form submit on div click using jquery?

I already tried this in single php file but doesn't work out, so i tried now in two separate php file one for form and another one for process.
How to submit the form on a div or link click?
Code i tried
$(document).ready(function(){
jQuery('.web').click(function () {
$("#g_form").submit();
alert('alert');
});
});
FORM
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="submit"/>
</form>
<div class="web">click</div>
Here is the process file code p.php
<?php
if(isset($_POST['f1'])){
echo $_POST['f1'];
} ?>
When i click the submit button the form is submitting but when i click the .web div it is not submitting the form even i get the alert message but not submitting.
What wrong am doing here? It'll be helpful if i get a idea.

.submit() docs
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method.
Name conflicts can cause confusing failures. For a complete list of
rules and to check your markup for these problems, see
DOMLint.
You give your submit button a name of submit, which the above passage tells you will cause "confusing failures"
So if you accessed the dom element and looked at the .submit property you would see that since you name the button submit instead of .submitbeing a function its a reference to the buttons dom element
HTML
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="submit"/>
</form>
<div class="web">click</div>
JS
//Get the form element
var form = $("#g_form")[0];
console.log(form.submit);
//prints: <input type="submit" value="submit!" name="submit"/>
And when you change the submit name
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="psubmit"/>
</form>
<div class="web">click</div>
JS
var form = $("#g_form")[0];
console.log(form.submit);
//prints: function submit() { [native code] }
so simply give your submit button a different name that does not conflict with a form's properties.

You can trigger submit button click.
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" id="f_submit" name="submit"/>
</form>
<div class="web">click</div>
$(document).ready(function(){
jQuery('.web').click(function () {
$("#f_submit").trigger( "click" );
alert('alert');
});
});
DEMO : http://jsfiddle.net/awladnas/a6NJk/610/

HTML (provide a name for the form, strip the name from the submit):
<form action="p.php" name="g_form" id="g_form" method="post">
<input type="text" name="f1" value="">
<input type="submit" value="submit!"/>
</form>
<div class="web">click</div>
JavaScript
//use jQuery instead of $ in the global scope, to avoid conflicts. Pass $ as parameter
jQuery(document).ready(function($){
//use on(), as it's the recommended method
$('.web').on('click', function () {
//use plain JavaScript. Forms are easily accessed with plain JavaScript.
document.g_form.submit();
alert('alert');
});
});

Change the name of the submit and Try,
<input type="submit" value="submit!" name="mySubmit"/>

Remove the submit from the form and try again:
<form action="http://test.com" id="g_form" method="GET">
<input type="text" name="f1" value=""/>
</form>
<div class="web">click</div>
I changed the action to a real URL and the method to a GET so something is seen changing.
Fiddle

$(".web").live('click', DivClick);
function DivClick(){
$("#g_form").submit();
}

I have a HTML submit button and am trying to send hidden info to an outside form

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>