I'm having some problems with the enter key triggering a refresh of the page whenever there is input in a form.
The following code does not refresh the page if enter is pressed and if there is no text inputted in the text area (#input) but will refresh the page if enter is pressed and there is input in #input OR if the cursor is in the text area. I'm not sure what's triggering it, as #submit is a regular button.
<div id="forms" class="container">
<form>
Enter your verb here in plain (dictionary) form:
<input type="text" class="input-sm" id="input"></input>
<div class="radio">
<label>
<input type="radio" name="input-method" value="Hiragana" checked />Radio 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="input-method" value="Romaji" />Radio 2
</label>
</div>
<input type="button" class="btn btn-default" id="submit" value="Submit">
</input
</form>
</div>
I'm trying to jquery to solve the problem, but need help in that regard. Any suggestions would be appreciated!
you can either add following script at the end of body
<script>
$("form").submit(function (e) {
e.preventDefault();
alert("call some function here");
});
</script>
or you can just put your form tag like this
<form onsubmit="return false">
either way you will then have to write an onClick="SOMEFUNCTION()" to the input
also there is an error with an extra /button tag...remove that and instead use
<input type="button" class="btn btn-default" id="submit" value="Conjugate" />
note the ending slash
simply change your html:
<div id="forms" class="container">
<form action="javascript:void(-1)">
Enter your verb here in plain (dictionary) form:
....
jsfiddle here - works like charm
you have syntax error in your html codes:
<input type="button" class="btn btn-default" id="submit" value="Submit">
</button>
change it to this:
<button type="button" class="btn btn-default" id="submit" value="Submit">
</button>
Also, you need using Javascript/jquery to submit your form to prevent refreshing your entire page
place :
e.preventDefault();
inside the keypress function
Related
I'm trying to to make php execute different code based on the form input and html form does not seem to be entering php. I'm not sure what the problem with my code is
HTML:
<div class="card-container">
<div class="form-holder">
<form name="signupform" action="./php/signup.php" method="POST">
<div class="idinput">
<p> Enter your username: </p>
<input type="text" id="user_id" name="user_id" placeholder="User ID">
<br>
<div id="user_id_error"></div>
</div>
<div class="submitbtn">
<input type="button" id="submit" name="submit" value="Sign Up" onclick="validateForm()">
</div>
validateForm() function just checks if the input is valid
Clicking the submit button does not do anything.
You are using type button which is not used for submitting the form, inside function validateForm() you need to submit the form OR you can use type submit.
<input type="submit" id="submit" name="submit" value="Sign Up"/>
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
I have this form in html
<form class="form-horiz" role="form" action="" >
<div class="form-group-1" style="margin-left:5px">
<div class="col-sm-10">
<input type="text" class="form-control" id="adsend" placeholder="Enter your ad" >
</div>
</div>
<div class="form-group-1">
<div class="col-sm-offset">
<button type="submit" class="btn btn-default" name="send" id="send" >Send</button>
<button type="submit" class="btn btn-default" value="classify">Classify</button>
</div>
</div>
</form>
What I need to do is: The user will write something in text and after click on classify button js message will appear to the user with some results, is it possible to do something in action="" or there is another way to do it?
You can use event listeners for button clicks if you'd like instead of form actions. Check out this documentation, hopefully it'll help! I'd suggest something like this:
<form class="form-horiz" role="form" action="" >
<div class="form-group-1" style="margin-left:5px">
<div class="col-sm-10">
<input type="text" class="form-control" id="adsend" placeholder="Enter your ad" >
</div>
</div>
<div class="form-group-1">
<div class="col-sm-offset">
<button type="submit" class="btn btn-default" name="send" id="send" >Send</button>
<button id="classify" type="submit" class="btn btn-default" value="classify">Classify</button>
</div>
</div>
</form>
and then have this in some js file
document.getElementById("classify").addEventListener("click", function () {
// do some js stuff here
});
EDIT:
Another alternative would be to use an onclick attribute, which is also documented in the link I posted before, but this is a little antiquated, and your function has to be named in the global scope and it's not really a good idea in general. I'd go with an event listener!
I would suggest you to have jQuery added into your Application. It makes your life easier in your construction.
Check this https://jsfiddle.net/dqwLv8q7/
I added id in your button and made it preventDefault() as it fire us submit action of your form as you set it "type=submit". So your "classify" click button now just shows Alert message with value of your "adsend" ID input value. You can consider to use another tag and replace it with message to your user.
I have a few buttons and a submit button. (Making simple) My idea is to receive the value of the clicked button using a php and display it only when submit. Here I face a problem that button click itself redirects to the page and displays the value (means it is not waiting for the submit button to press). I followed a javascript provided here. But didn’t work. Any method to achieve this?
<form action="calculate.php" method="POST">
<button type="" name="btn" style="background-color:#7F77AE" value="Alf">x1</button>
<button type="" name="btn" style="background-color:#7F77AE" value="ABI">y1</button>
<button type="" name="btn" style="background-color:#7F77AE" value="APE">z1</button>
<input type="submit" value="Submit">
php part is as simple as,
$button = $_POST['btn'];
echo $button;
Define the plain button's type as "button"
<form action="calculate.php" method="POST">
<button type="button" name="btn" style="background-color:#7F77AE" value="Alf">x1</button>
<button type="button" name="btn" style="background-color:#7F77AE" value="ABI">y1</button>
<button type="button" name="btn" style="background-color:#7F77AE" value="APE">z1</button>
<input type="submit" value="Submit">
EDIT: If you absolutely need to use buttons here you can do something like this:
<script>
function select(val){
document.getElementById("btnValueStore").value = val;
}
</script>
<form action="calculate.php" method="POST">
<button type="button" style="background-color:#7F77AE" onClick="select('Alf')">x1</button>
<button type="button" style="background-color:#7F77AE" onClick="select('ABI')">y1</button>
<button type="button" style="background-color:#7F77AE" onClick="select('APE')">z1</button>
<input type="hidden" value="" name="btn" id="btnValueStore">
<input type="submit" value="Submit">
</form>
First you define a hidden input to hold the value of the last pressed button.
The select function changes the value of the hidden input field to whatever value you pass it.
For each of your buttons set the "onClick" property to call the select function with the corresponding button's value.
Note: This particular implementation allows only 1 button to have been "selected" (the last one you clicked) - for the ability to "select" more than one button you will need multiple hidden input fields.
I am trying to submit the data for this form, which has 3 different buttons:
<form action="/game.php?village=8404&screen=market&mode=own_offer&action=modify_offers&h=85fd1491" method="post">
<input class="btn btn-cancel" type="submit" value="Delete" name="delete">
<input type="text" size="2" name="mod_count" value="1" onkeydown="return no_enter(event)">
<input class="btn" type="submit" value="Increase" name="increase">
<input class="btn" type="submit" value="Reduce" name="decrease">
</form>
I would like to either submit the data in the same manner of "increase" or click that submit button. Ideally, I wouldn't have to replicate the URL which appears after the form action= as this varies from page to page.
When the form has a definite id, I've been using:
$('#thisFormId input[type=submit]').click();
But can't work out.
So how I can do that in this instance?
If I understand the questions:
$("input[name=increase]").click();
will trigger the click event of the Increase button and submit the form, which is what you want?