We Keep Coding

jQuery event on input submit field

I want to fade in an element with JQuery code when a inputfield is clicked. However, I cannot seem to get it to work, when the selector is placed inside the form. If I remove the selector outside the form it works fine. Is there any work-aroud for this? Or, maybe JQuery code does not execute inside a form? Here is my code:
<form action="newBet.jsp" method="get">
<fieldset>
<input id="test" type="submit" name="update" value="✎"/>
<input class="form-control" id="div1" style="display:none;" type="number"/>
</fieldset>
</form>
$(document).ready(function(){
$("#test").click(function(){
$("#div1").fadeIn();
});
});
If I place the selector #test outside the form it works fine, but I want to execute the JQuery inside the form.

Your form gets submitted, which refreshes the page and doesn't let you see the result.
Instead of applying your event to the submit button, apply it to the form itself and return false to prevent default behavior (submitting):
<form id="test-form" action="newBet.jsp" method="get">
$(document).ready(function(){
$("#test-form").submit(function(){
$("#div1").fadeIn();
return false;
});
});

<input id="test" type="button" name="update" value="✎" />
type="submit" refreshes the page. You neet to change type="button"

You can get the fadein effect with the input inside the form if you add preventDefault() like this:
$(document).ready(function(){
$("#test").click(function(e){
e.preventDefault();
$("#div1").fadeIn();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="newBet.jsp" method="get">
<fieldset>
<input id="test" type="submit" name="update" value="✎" />
<input class="form-control" id="div1" style="display:none;" type="number" />
</fieldset>
</form>
The default behaviour of the input of type "submit" inside the form is to submit the form which you can prevent using preventDefault() and call at a later time after the fadein effect.

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

Add Text Input to Hyperlink

I'm trying to accomplish a feature where a user can type a piece of text into an input box, click submit and they'll be taken to a webpage which includes the text they submitted in the url.
For example, if the user entered the word 'apple' in the text and clicked submit, they would be taken to http://example.com/link.aspx?username=apple&jump=1 or if they entered the word 'orange', they would be taken to http://example.com/link.aspx?username=orange&jump=1.
I've tried the following code, but to no avail - it doesn't send the user anywhere on submit.
<form method="get">
<input type="text" value="11" id="input">
<button type="button" id="button">Click Me!</button>
</form>
<script>
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $("#input").val();
window.location.replace(" http://www.example.com/page/"+inputvalue);
});
});
</script>

Why you're trying to use JQuery when you can do it much easier with PHP
Form
<form action="form.php" method="get">
<input type="text" name="n" />
<input type="submit" />
</form>
PHP side - form.php
header("Location: http://yourdomain/page/".$_GET['n']);

your code works for me.
are you sure you added jquery before your script?
add this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Do not use jQuery for this. A simple form with get method will work fine.
<form name="sample" method="get">
<input name="username" type="text" value=""/>
<input name="submit" type="submit" value="submit"/>
</form>
This will automatically submit the form once user fills field and click submit button in the format you are looking for.

submitting a form via jquery removes submit input variable

Here's my HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="test" method="get" action="">
<input type="hidden" name="var1" value="true" />
<input type="submit" name="var2" value="submit" />
</form>
<script>
$("#test").submit();
</script>
The resultant request that that makes has var1 in it but not var2. My question is why and what can I do to get var2?
Here's a live demo:
http://www.frostjedi.com/terra/dev/submit.php

try: method="post" in form or use <button type="submit"></button>

A form should submit the value of a submit button only if it's clicked to submit the form (see HTML5 4.10.22.4 Constructing the form data set). Calling the submit method doesn't click the button, so it doesn't submit the value.
The code you've posted will endlessly submit the form, thanks.
You can call the click method of the button, but that may not work (i.e. submit the button's value) everywhere:
<form id="test" method="get" action="">
<input type="hidden" name="var1" value="true">
<input type="submit" name="var2" value="submit">
</form>
<button onclick="$('#test')[0].var2.click()">submit form</button>
Or, as user3701524 suggests, use method=post if that suits.

The value on button will only be submitted when u actually CLICK that button. To make it all work nice, I recommend binding to
$('form').on('submit', function(e) {
// here you have the button value if it was clicked.
e.preventDefault(); // optional this prevent default submission.
});
either way, calling $('form').submit() will NOT send the button value because is not triggered by the button itself.
Hope it helps!

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();
}