Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I've following two javascript code snippets written for same purpose but only one is working. Why so?
The Working script is as below:
<script language="javascript">
function Redirect(){
window.location.assign("login.php")
}
</script>
<button type="button" class="btn btn-primary" name="cancel" id="cancel" onClick="return Redirect()">Cancel</button>
The non-workable code is as follows:
<button type="submit" class="btn btn-primary" name="submit" id="submit" value="" onclick="javascript:window.location.href='login.php'">Back</button>
But I want the script to be written like the second one only. I can't use first approach though it's working. Can any one please correct the second code snippet and make it workable like first script? Thanks in advance.
Instead of submit, try using input type button...
<input type="button" class="btn btn-primary" name="submit" id="submit" value="Back" onclick="javascript:window.location='login.php'" />
The working script uses window.location.assign() whereas the non-working code tries to set window.location.href directly.
Your second example also uses a submit button whereas your first uses a regular button. Since you don't return false from your click handler, the form gets submitted and the fact that you set the href is void. Unless you're actually submitting the form, don't use a submit button.
Related
This question already has answers here:
Page reloads on hide/show button click using jQuery
(2 answers)
Closed 2 years ago.
I have been trying to make this very simple feature work where the user clicks the submit button and the question number is updated.
On the browser when I click the button the question number becomes "2" for a second and turns back to "1" immediately. There is no console warnings or errors.
I tried it on the JSFiddle as well and when the button is pressed it gave me a 404 error code.
Here is the very small script and HTML that I am trying to run and also the JSFiddle:
$(document).ready(() => {
var level = 1;
$('button').click(() => {
level++;
$("#question").text("Question " + level);
});
});
<h1 id="question">Question 1</h1>
<form>
<h3>What is your name?</h3>
<textarea type="text" name="answer" rows="3" cols="50"></textarea>
<br>
<button class="btn btn-outline-primary btn-lg" type="submit" name="submit">Submit</button>
</form>
Because the page is reloading when you submit the form.
The default submit action for a <form> is the current URL when not otherwise specified. And the default type for a <button> within a <form> is submit when not otherwise specified. Though in this case you are explicitly specifying type="submit". So essentially your markup is explicitly indicating that you want to reload the page when clicking the button.
Since you're not intending to post a form, you can simplify the HTML and remove the <form> elements and make the button no longer a submit button:
<h1 id="question">Question 1</h1>
<h3>What is your name?</h3>
<textarea type="text" name="answer" rows="3" cols="50"></textarea>
<br>
<button class="btn btn-outline-primary btn-lg" name="submit">Submit</button>
If for some other reason you want/need to keep the <form> (styling perhaps? though since it's not semantically a "form" then I'd recommend using something else, like a <div>) then you can at least specify type="button" to prevent default submit behavior:
<button class="btn btn-outline-primary btn-lg" type="button" name="submit">Submit</button>
The default type of button is submit even if you have not written but you also have specified it.
So what happens to your code :
Your function executes, we see the result and it reload as the type='submit' behaviour.
Make it type='button' not removing the type attribute.
And another thing i can see is you dont need to call $(document).ready() because it is not a function which is needed as the html loads.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am trying to pass my search term from my site into the string of another site's URL link. This will allow the search to find books on my site and if it can't be found there the user would click a button that would take the string from the search field and pass it to the URL of MnLink.org. I know my sites code is as follows.
Search For:
I can't figure out what I am missing because I am new to HTML and a novice in JavaScript. I thought I could put the value or id in as a var in a script but I could not get that to work. below is what I have started but got stuck on, any help would be great.
https://mnlink.on.worldcat.org/search?='"style="padding-left:10px;background:#ffffff; border: solid black;">Continue Search
You could simply use a form with method="get" and action="https://mnlink.on.worldcat.org/search".
EXAMPLE:
<form method="get" action="https://mnlink.on.worldcat.org/search">
<div>
<input type="text" name="queryString" value="" />
<button type="submit">
Submit
</button>
</div>
</form>
Working DEMO
EDIT
If you have to use an onClick event i suggest you to use Jquery: on click() you have to redirect your page with window.location.href = 'https://mnlink.on.worldcat.org/search?queryString=' but you must add the value at the end of that String with $("#INPUT_ID").val(). See the demo.
HTML:
<input title="Search For:" autofocus="false" accesskey="s" maxlength="256" tabindex="9" autocomplete="off" size="100" value="cats" id="q" name="q" type="text">
<button id="submit">
Search
</button>
JS:
$(document).ready(function(){
$("#submit").click(function() {
window.location.href = 'https://mnlink.on.worldcat.org/search?queryString=' + $("#q").val();
});
});
Working DEMO.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
For my project I need to create a simple search engine for my webpage.
I need a way to clear my previous search results when I submit another search into the form without refreshing the entire page.
My Javascript file contains the objects I am searching for.
HTML:
<form>
<div class="form-group">
<input id="term" class="form-control" type="text">
</div>
<button id="search-button" class="btn btn-default" type="button">
Search</button>
</form>
<div id="results-area"></div>
Correct me if i'm wrong:
Code with jQuery:
$(form).submit(function(e){
$("#results-area").html("");
})
Using jQuery it would go like this:
$("#search-button").click(function(){
// your search function here
$("#term).val('');
});
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I have a simple form with two HTML5 buttons. Each button submits the form to a different php page. This is working well, but the 'onsubmit' function is never triggered. I want to show a dialog box before the delete.php page is called.
<form method="post">
<input type="text" name="fname">
<!-- HTML5 FORMACTION -->
<button type="submit" name="update" formaction="update.php">Update</button>
<button type="submit" name="delete" onsubmit="return confirm('Do you really want to delete?');" formaction="delete.php">Delete</button>
</form>
I have tried different variations, but the javascript code is never triggered. Why?
Buttons don't have submit events, forms do.
Buttons have click events.
onsubmit is valid for a form, not for a button. You will have to use onclick instead of onsubmit.
try like this
<form method="post">
<input type="text" name="fname">
<!-- HTML5 FORMACTION -->
<button type="submit" name="update" formaction="update.php">Update</button>
<button type="button" name="delete" onclick="return delete();" formaction="delete.php">Delete</button>
</form>
<script>
function delete(){
if(confirm('Do you really want to delete?')){
// delete code
}
return false;
}
</script>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have a form that is used to update a record, at the bottom I have a submit button. I want it to display a messaging saying "Update Record:" and a Yes and No box.
Every way I've found is just for the confirmation popup, but I don't want a popup I want it to be buttons. So currently I have the below which gives me a confirmation popup
<form class=\"searchForm\" action=\"cd_update.php\" method=\"post\" onsubmit=\"return confirm('Are you sure you want to submit?');\">
<button type="submit" id="editButton">Update</button>
Is this possible to do? I'd need it to cd_update.php on the "Yes" and stay on page for the "No"
Thanks
I believe this code is what you are looking for. Remove the onsubmit handler if you wish, and swap out the onClick event on the no button to do something else. This will allow those buttons to handle your form without a confirm popup.
<form class="searchForm" method="post" onsubmit="alert('Record Updated');">
Update?
<button type="submit" id="yesButton">Yes</button>
<button id="noButton" onClick="alert('Not Updated')">No</button>
</form>
You would have to use a modal in order to customize it how you'd like. This can be as simple as doing it yourself (see below) or using a jQuery modal (which is also simple, but may be overkill.
http://jsfiddle.net/m7w0fcmf/1/
Styles
#confirm {
display:none;
}
HTML
<form id="form" class="searchForm" action="cd_update.php" method="post">
<div id="confirm">
Update Record:
<button id="yes">Yes</button>
<button id="no">No</button>
</div>
<button type="submit" id="editButton">Update</button>
</form>
JavaScript
document.getElementById('editButton').addEventListener('click', showConfirm);
document.getElementById('no').addEventListener('click', clickNo);
function showConfirm(e) {
e.preventDefault();
document.getElementById('confirm').style.display = 'block';
}
function clickNo(e) {
e.preventDefault();
document.getElementById('confirm').style.display = 'none';
}
Working fiddle.
You can create new div for confirmation message that will contain the two buttons you want Yes and No, after that add the js code that will show this confirmation div after the user click on Update button.
HTML :
<form class="searchForm" action="cd_update.php" method="post">
<div id="confirmation-msg" style="display:none">
Update Record?
<button type="submit" id="yesButton">Yes</button>
<button type="button" onClick="$('#confirmation-msg').hide()">No</button>
</div>
<button type="button" id="editButton">Update</button>
</form>
JS :
$('#editButton').click(function(){
$('#confirmation-msg').show();
});
Hope this helps.