I have a simple HTML button in my webpage having its HTML shown below:
<div id="submit1" style="float:left;cursor:pointer;" onclick="checkValidity();">
<input type="button" value="Finish" class="finish">
</div>
When I applied the onclick="checkValidity();" on my button it was not working but when I tried it with the container div of the input button it starts working.
I am unable to understand why it was not working while I called this function in button? Can anyone have any idea on it.
Interesting thing is that is working in another webpage on the input button too... !
First of all, checkValidity is a keyword. Stop using it. Change it to CheckIfValid or something like that.
Simple example in the jsfiddle. Check here
chck = function (obj)
{
alert('hi: ' + obj.id);
return true;
}
checkValidity is an event for input objects and returns true if the input has valid data. So, there is no scope for js event here.
It works on div because DIV is not an input element.
Let me know if you have any issues.
You have to surround that input tag inside a form tag.
<div id="submit1" style="float:left;cursor:pointer;" onclick="checkValidity();">
<form>
<input type="button" value="Finish" class="finish">
</form>
</div>
Related
I have a form in a php loop, and if there are 3 elements in the database, there are 3 forms with same name. Those forms do contain a button with the same name. So everything likes like this:
<form id="test">
<button id="testbutton"></button>
</form>
<form id="test">
<button id="testbutton"></button>
</form>
<form id="test">
<button id="testbutton"></button>
</form>
The problem appears when I try to call .on or .click function from javascript. It works only once.
This is the JS code:
$(document).ready(function () {
$('#testbutton').on("click", function() {
function();
});
});
The button fades out certain div's which have different names.
ID's Must Be Unique, specifically because it will cause problems in JavaScript and CSS when you try to interact with those elements.
Give your elements a class instead :
<form>
<button class="testbutton"></button>
</form>
<form>
<button class="testbutton"></button>
</form>
<form>
<button class="testbutton"></button>
</form>
Now your selector can use the class:
$('form').on("click", ".testbutton", function(){ // event will bubble up to form
please try to bind event on button type rather than id like this
$(':button').on("click", function(){
// do other stuff
});
Please check here in fiddle
I have solved my problem with this sentence:
$(this).closest("form").find("input[name=testfield]").val()
It is a bit complicated to explain the problem, but the solution is here. Button click finds the closest form and closest value of the field required. So, my problem is gone, but thanks for all the help, you have helped me to clear out some doubts! :)
So, in my code I have this input of type "Image".
<div class="icon" id="button_dictionary">
<form>
<input class="buttonDictionary" type="image" src="icone_dicionario.jpg" value="" id="inputDictionary">
<label for="inputDictionary">Dictionary</label>
</form>
</div>
And I want that, when the user clicks on it, the following form appears:
<form action="http://www.google.pt/search" id="form-dictionary">
(...)
</form>
I've made a Javascript function to make it happens:
function showsDictionaryForm(){
if(document.querySelector('#form-dictionary').style.display == "none")
document.querySelector('#form-dictionary').style.display = "inline-block";
else
document.querySelector('#form-dictionary').style.display = "none";
}
The problems is when I try to deal with the onClick event, so that, when it happens, the function above is called. The function is working pretty well, since for "submit" input types, it works.
Solutions that didn't work:
I tried something like this:
document.querySelector('#button_dictionary').onclick = showsDictionaryForm;
and also this, adding return false the the end of the function.
<input class="buttonDictionary" type="image" src="icone_dicionario.jpg" value="" id="inputDictionary" onClick="showsDictionaryForm()">
None of them worked well. The form appears, but disappears as fast as. It seems to me that the form is calculated, but when the button is submitted, the page is reloaded os something like it, and it disappears again.
Inside of your showsDictionaryForm(event) event handler use event.preventDefault() to stop default behaviour from happening (in your case form is being submitted to the server).
On the showsDictionaryForm I would suggest to use class manipulation instead of inline styles. For example, you can have globally defined:
.hidden {
display: none !important;
}
And use it to show/hide form-dictionary form.
I'm working with html and javascript. My problems is, in one webpage a show a plot and a few button. When the user press any of this button I need show 3 or 4 options but in the same page without switching pages.
Below is my code
<form action="MyPage">
<button type="submit" value="More Options">
</form>
redirect to an other page.What I can do?
First of all, get rid of type="submit". That's what's causing the page to do stuff you don't want. The second thing is to add an onclick handler. It should return false to avoid behavior like "submit". The variable 'this' will pass the button to your function, which you might need in that code. Then fill in the body of addMoreStuff() with your code to, well, add more stuff!
<form action="MyPage">
<button onclick="addMoreStuff(this); return false; ">More Options</button>
</form>
<script type="text/javascript">
function addMoreStuff(button) {
/* your code here */
}
</script>
Drop the form (use the button alone), and look into jQuery. It's extremely easy to use, and it'll help you quickly build code your application.
HTML
<button type="submit" value="More Options" id="more">
JavaScript (jQuery)
// run "add_options" when someone clicks on the button
jQuery('button#more').on('click', add_options)
function add_options() {
//code here to add more options
}
I have this form inside a div and the submit button inside another div.
<div class="container1">
<form name="reg-form" id="signup" action="" method="post">
<div class="sep"></div>
<div class="inputs">
<input type = "submit" id="submit" name="submitkey" value="GENERATE KEY" />
</div>
</form>
</div>
How would I disable the submit button after one click? I tried every javascript code I find but it doesn't work on me. I dont know if it is because the form is inside a div and the submit button is inside another div. Thank you.
document.getElementById('signup').onsubmit = function() {
document.getElementById('submit').disabled = true;
};
Demo
The code should be put under the script, or wrapped inside a DOMContentLoaded/window.onload handler. Make sure your HTML does not have duplicated IDs.
Also, if the button must stay disabled after a page refresh/form submission, you will need cookies or a server-side session. None of these methods are foolproof though, and this is outside of the scope of the question I believe.
If you have jquery you can use this code:
$('#signup').submit(function(){
$('#submit').attr('disabled', 'disabled');
});
I'm having a strange behaviour with this code:
<script type="text/javascript">
function get()
{
alert("gggg");
jQuery.get (
"http://localhost:8080/c/portal/json_service",
{
serviceClassName: "com.liferay.test.service.TrabajadorServiceUtil",
serviceMethodName: "findByName",
servletContextName: "TrabajadorPlugin-portlet",
serviceParameters: "[param]",
param : document.getElementById("nombre")
}
);
}
</script>
<div>
<form>
<input type="text" id="nombre" value="<%=searching%>"/>
<input type="button" value="Submit" onClick="javascript:get()"/>
</form>
</div>
Liferay portal gets blocked when the button "Submit" is pressed. The pop-up with the message "gggg" is showed, but after click ok on it, the page becomes blocked.
If I remove the line 'param : document.getElementById("nombre")', it doesn't block.
Can anyone explain me where is the error, or the reason of this behaviour?
Thanks in advance,
Rafa
The problem is that you're trying to pass an entire DOM element as the value for param, which jQuery isn't going to like. What type of element has ID nombre, and what property from that element do you want? If it's some kind of input, you likely want the value property, so you'd do:
param : document.getElementById("nombre").value
Updated Answer:
Thinking this through a little more, you should probably do this in a different way altogether. You're sending the data when the user clicks on the submit button, but remember if a user hits enter while typing in the input text box the form will submit but your code will not catch that.
A more robust solution would be to do it this way instead:
<div>
<form id="nombre_search">
<input type="text" id="nombre" value="<%=searching%>"/>
<input type="submit" value="Submit"/>
</form>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#nombre_search").submit(function(){
$.get("http://localhost:8080/c/portal/json_service", {
serviceClassName: "com.liferay.test.service.TrabajadorServiceUtil",
serviceMethodName: "findByName",
servletContextName: "TrabajadorPlugin-portlet",
serviceParameters: "[param]",
param : $("#nombre").val()
});
return false;
});
});
</script>
Changes to your code:
Added an id to the form.
Made the submit button a submit button instead of just a button.
Placed code inside $(document).ready block.
Code runs when form is submitted not when button is clicked.
Hope this helps,
Sandro