This question already has answers here:
onclick or inline script isn't working in extension
(5 answers)
Closed 5 years ago.
I'm trying to get some simply things going but can't seem to get a JS function to run following a click event.
Relevant HTML and JS:
function addSite() {
alert("DO SOMETHING");
}
<div id="whitelist" class="row-fluid">
<div class="span12">
<p>Enter the sites you use to work:</p>
<form action="">
<input class="input-mini" type="text" id="add-site" />
<input type="submit" onclick="addSite" />
</form>
<p>Your Whitelist:</p>
<div id="show-sites"></div>
</div>
</div>
Full HTML and JS here and here.
function addSite()
{
alert("DO SOMETHING");
}
<div id="whitelist" class="row-fluid">
<div class="span12">
<p>Enter the sites you use to work:</p>
<form action="">
<input class="input-mini" type="text" id="add-site" />
<input type="submit" onclick="addSite()" />
</form>
<p>Your Whitelist:</p>
<div id="show-sites"></div>
</div>
</div>
you need to include the parenthesis when you call the function, which is missing in your html.
It should be
onclick="addSite()"
instead of
onclick="addSite"
EDIT:
As #wOxxOm pointed out, you should not use not onclick attribute to fire a event when working with chrome extension. Instead bind event listener to that particular DOM element using addEventListener.
function addSite() {
alert("DO SOMETHING");
}
<div id="whitelist" class="row-fluid">
<div class="span12">
<p>Enter the sites you use to work:</p>
<form>
<input class="input-mini" type="text" id="add-site" />
<input type="submit" onclick="addSite()" />
</form>
<p>Your Whitelist:</p>
<div id="show-sites"></div>
</div>
</div>
Since you have set action attribute to empty string, do read this:
In HTML5, you can actually specify an action on the submit button itself. If there isn't one, it uses the form's action and if that is not set, it defaults to the empty string (note you cannot explicitly set the action to an empty string in HTML5).
Ref.: Is action really required on forms?
Related
Here, I have a <div contenteditable="true">，which behaves the same as a <textarea> when clicked for edit. Users can type and edit text in it.
<label for="text_box" class="label">
Body:
</label>
<div class="text_box" name="text_box" id="text_box" contenteditable="true">
<br />
</div>
I have also a servlet. How can I get the value of <div> in my servlet?
You'd need to create a form with a hidden <textarea> and a piece of JavaScript which copies the div's inner HTML content into the textarea's value on submit of the form.
Here's a kickoff example:
<form action="servletURL" method="post" onsubmit="this.content.value=document.getElementById('text_box').innerHTML;">
<div id="text_box" contenteditable="true"><br /></div>
<textarea name="content" style="display:none;" />
<input type="submit" />
</form>
(note: using onsubmit and style attributes are a poor practice; use respectively jQuery's way of binding event handlers and a CSS file instead)
This way it's in the servlet available the usual way as if <textarea> wasn't hidden:
String content = request.getParameter("content");
Will splitting up the <form></form> using the jQuery UI tabs() method affect the posting of the form to PHP?
Such as:
<script type="text/javascript" >
$('#Tabs').tabs();
</script>
<form method="post" action="form.php" >
<div id="Tabs">
<ul>
<li>content1
<li>content2
</ul>
<div id="#content1>
<input type="text" name="field1" />
</div>
<div id="content2">
<input type="content'' name="field2" />
<input type="sumbit" /></div>
</div>
</div>
</form>
No. The form will still contain all of the <input> elements, even if they're not currently visible. As such they'll all be submitted when the form is.
However, there's an issue with your example, in that the jQuery code will execute before the <div id="Tags"> element exists. Wrap it in a document ready call:
<script>
$(document).ready(function() {
$('#Tabs').tabs();
});
</script>
I have the following form:
<form class="custom" method="post" action="/checkout/submit/">
...
<div class="row">
<div class="ten mobile-three columns" style="margin-top: 20px;">
<input id="previous-btn" style="margin-top: 10px;" type="submit" class="button radius" name="previous" value="Zurück" />
<input id="next-btn" style="margin-top:10px;" type="submit" class="button radius success" name="next" value="Bestätigen" onclick="disableButtons(this);"/>
<input style="margin-top:10px;" type="hidden" name="next" value="Bestätigen" />
<img id="ajax-img" style="display:none;" src="/img/ajax-loader.gif" />
</div>
</div>
</form>
...
<script type="text/javascript">
function disableButtons(elem)
{
$('#previous-btn').prop('disabled', true);
$('#next-btn').prop('disabled', true);
$('#ajax-img').css('display','inline');
return true;
}
</script>
</body>
</html>
Using onclick I disable the buttons and show ajax-loading picture while the form is submitted. So that user won't click submit twice.
The problem is that in Chrome the form is simply not submitted. So the onlclick function works fine, but that's all.
In FF and IE everything is working fine - in the beginning javascript makes changes to buttons and then normal flow of form submit is done.
Would appreciate any ideas why it breaks in Chrome.
Thanks!
Eventhough in theory, your code should work, Chrome thinks otherwise, as noted in in this similar SO question and in this chrome groups discussion (may be a bug, may be the intended design).
First, when you want to allow / block a click you should use onclick="return someFunction()" and not onclick="someFunction()" - then the action will follow through only if that function returns true.
Now to make this work, you would have to submit the form from your function:
$(this).parents('form').submit()
You should use like this in your onclick="someFunctionToDoJob(); submit();" on your form.
And at your someFunctionToDoJob(); add this document.hereNameYourForm.submit();
I've got this really frustrating problem. I want to submit a form with Javascript and no matter what I try I always end up getting Uncaught exception: TypeError: Cannot convert 'document.getElementById('loginForm')' to object.
I've been staring at this code for some time now and I really can't figure it out. I'm sure it's really simple, but I just can't see the solution.
Here is my code:
<form method="post" action="do.php?a=signin" id="loginForm">
<input name="usr" class="test" placeholder="Användarnamn" type="text" />
<input name="pwd" class="test" placeholder="Lösenord" type="password" />
</form>
<span class="test"><img src="gfx/ico/fb.jpg" alt="" /> Logga in via Facebook</span>
<span class="test"><img src="gfx/ico/Unlock.gif" alt="" /> Logga in »</span>
<script type="text/javascript">
function doLogin() {
document.getElementById('loginForm').submit();
}
</script>
What am I missing!?
The solution was that I accidentally had entered another <form> earlier in my code. I removed it and now it works like a charm!
first you have to add name attribute to your form
<form name="loginForm" ...>
and then apply below.
document.forms["loginForm"].submit();
OR
document.loginForm.submit();
tip:
You can not have the buttons named submit and use submit(). The
buttons override the method. Rename the buttons to something else and
it will work.
I'm unable to submit a form using method post.
The first error that occured was a 405 but I was able to solved it using this solution.
Now occurs a 403 error, how can I solve it?
JS
$(document).ready(function () {
$('#loginForm').submit(function () {
//some business logic...
$.mobile.changePage($('#menuPage'));
});
});
HTML
<div data-role="page" id="loginPage">
<div data-role="header"><h1>Login</h1></div>
<div data-role="content">
<form method="post" id="loginForm">
<fieldset>
<label for="utilizadorText">Inserir Utilizador</label>
<input type="text" id="utilizadorText" name="utilizadorText" />
<label for="palavraChaveText">Inserir Palavra Chave</label>
<input type="password" id="palavraChaveText" name="palavraChaveText" />
<input type="submit" id="loginAnchor" class="submit" value="Login" />
</fieldset>
</form>
</div>
</div>
<div data-role="page" id="menuPage">
<div data-role="header"><h1>Menu</h1></div>
<div data-role="content">
Menu
</div>
</div>
It appears as though you are trying to submit the form to the loginPage and than change the page to menuPage. This doesn't make sense to me. What actions are you trying to perform here? If you want to be able to take form data from the context of the loginPage and than apply business logic to it than the solution below might help.
Possible Solution #1