<script type="text/javascript">
$('#did').html('<input type="submit" name="mybtn" value="Save" onClick="saveContent('+valA+')">');
function saveContent(con){
alert (con);
}
</script>
I am using this code to display a submit button and it comes to the page body. but when clicked on the button it is not alerting the value. Please help me...
Thanks
Why type="submit"?
assuming #did is the id of your div or some container
$("#did").html($("<input type='button' value='save' />").click(function(){
alert(valA);
}));
This will append a button in your div with click event attached to it. Remember type should be button for this case.
Escape insert variable
Your result is:
<input type="submit" name="mybtn" value="Save" onClick="saveContent(sometext)">
Error : sometext is not defined
$('#did').html('<input type="submit" name="mybtn" value="Save" onClick="saveContent(\''+valA+'\')">');
function saveContent(con){
alert (con);
}
Result of this:
<input type="submit" name="mybtn" value="Save" onClick="saveContent('sometext')">
but use better previous answer
Related
I'm developing a Question&Answer website in php and I want to print the answer comments when I press the button. Everything works like a charm but only on the first button. I have an idea why this does't work, I guess it only takes into account the first id that it finds.
So , my question is, is there any way to name the element I want to call based on its id? For example:
<button class="btn icon-chat" title="Add a comment on this answer"
type="button" id="showarea . {answer['answerid']"} name="showarea" value="Show Textarea">
Comment</button>
<div id="textarea">
{include file="comment_form.tpl"}
</div>
But how would I call this PHP variable on my JS function?
$("#textarea, #textarea-ok").hide(); // or you can have hidden w/ CSS
$("#showarea").click(function(){
$("#textarea").show();
});
$("#textarea-ok, #cancel").click(function(){
$("#textarea").hide();
});
Is this the best approach? Any advise regarding to the JS code you can give?
Kind Regards
Live method should be ok
$("body").on("click", ".myClass", function(){
// do it again // or #myId
});
Don't forget about an event with an Id selector can be only on one element, and class on every one...
Edit with example
<div class="post-button clearfix">
// i changed this button as well
<button class="btn icon-chat show-textarea" title="Add a comment on this answer" type="button" data-answer="{$answer['publicationid']}">Comment</button>
<div class="textarea">
{include file="comment_form.tpl"}
</div>
</div>
// comment_form.tpl
// i added a master container
<div class="comment-form">
<form method="post" action="{$BASE_URL}controller/actions/comments/create_comment.php">
<textarea name="comment" rows="4" cols="40" class="qa-form-tall-text"></textarea>
// i deleted the wrong input here
<input type="hidden" name="answerid" value="{$answer['answerid']}" />
<input type="hidden" name="questionid" value="{$question['publicationid']}" />
// i changed these 2 buttons as well
<button type="button" class="textarea-cancel qa-form-tall-button qa-form-tall-button-comment">Cancel</button>
<button type="submit" class="textarea-ok">Ok</button>
</form>
</div>
Then you change the script with class in selector like :
...
$('.comment-form').hide();
$("body").on("click", ".show-textarea", function(){
$('.comment-form').show();
});
$("body").on("click", ".textarea-ok, .textarea-cancel", function(){
$('.comment-form').hide();
});
....
More about Jquery Selector : https://www.w3schools.com/jquery/jquery_ref_selectors.asp
More about live method wit .on() :
https://www.w3schools.com/jquery/event_on.asp
More about Html forms
https://www.w3schools.com/html/html_forms.asp
Read these docs to be ok with yourself ;)
I am trying to get the ID-attribute of an element that I have appended into my HTML. However, all I get is 'undefined'. How can I solve this?
jQuery('form#formular').append('<input id="upload_image_button" type="button" class="button" value="Upload" onclick="myFunction();" />');
function myFunction (){
alert(jQuery(this).attr("id"));
}
$('body').find('input[class="button"]').attr('id')
or try to pass the id as parameter of the function
...append('<input id="upload_image_button" type="button" class="button" value="Upload" onclick="myFunction(this.id);" />');
function myFunction(id){
alert(id)
}
you can pass 'this' in function parameter and in the function definition you will get whole input tag
jQuery('form#formular').append('<input id="upload_image_button" type="button" class="button" value="Upload" onclick="myFunction(this)" />');
function myFunction(e){
$(e).attr('id')
}
I have created simple form and table.. So I need to add values from the form. I have created the code but it is not working.
<html>
<body>
<script>
function clickFunction(){
document.getElementByName('inputvalue').innerHTML = document.getElementByName('name');
}
</script>
<form>
Name: <input type="text" name="name">
<input type="submit" value="Done" onclick="clickFunction()">
</form>
<table border="1">
<tr><td>Data input: </td><td><label name="inputvalue" > null </label></td></tr>
</table>
</body>
</html>
There are few things you have to fix first:
It should be document.getElementsByName, you are missing a 's'.
Since, the submit is in a form element. Once you click it, it will submit the form. So, you should stop it by using return false in the function.
To get the value from the input box, you should add 'value' after document.getElementByName('name'). it should be document.getElementByName('name').value.
I have added e.preventDefault. In-case, it tries to submit. In that case, there is a slight change in HTML.
...
<input type="submit" value="Done" onclick="clickFunction(event)">
...
The corrected source code: https://jsfiddle.net/gy03xz4b/4/
HTML is fine, the js will change a bit:
function clickFunction() {
document.getElementsByName('inputvalue')[0].innerHTML = document.getElementsByName('name')[0].value;
return false;
}
Hope that helps!
Refers:
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName
http://www.irt.org/script/155.htm (What does 'return false' do?)
https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault (e.preventDefault)
I have this form, that is never submitted: it just triggers a calcularplazas() function when pressing a non-submit button:
<form name="what" id="what" action="">
<input id="mat" type="text"/>
<button id="btnEnviar" class="btn" onclick="calcularplazas();">SEND</button>
<input id="btnLimpiar" class="btn" type="reset" value="CLEAR" />
<p id="resultado"></p>
</form>
When clicking on the button, function works properly but no result can be shown, as the window reloads. I do not understand this behaviour as there's nothing on the function making it reload, neither is a form submitting.
As consequence of this, the result text is exported to <p id="resultado"></p> but on miliseconds dissapears, as window reloads.
Why this behaviour?
function calcularplazas(){
var mensaje = "MENSAJE FINAL";
document.getElementById("resultado").innerHTML = mensaje;
}
You say "non-submit" button, but since you haven't given your <button> element a type attribute, it is a submit button by default. You need to tell the browser to treat it as a "normal" button:
<button type="button" id="btnEnviar" class="btn" onclick="calcularplazas();">SEND</button>
Clicking this will now not submit the form, and not cause the page to reload.
You can prevent submit event to be dispatched.
myForm.addEventListener('submit', function(e) {
e.preventDefault();
calcularplazas();
// do anything else you want
})
And HTML
<form id="myForm">
<input id="input1" type="text"/>
<button type="submit" id="myButton">SEND</button>
</form>
It will works for Return key to do as well
The button in the form, have you tried giving it type="button" ?
Because in a form it gets type="submit" by default (or the form behaves like it would with a submit type).
You Need to make only 2 changes and the code will run .
Put return false in the javascript function.
when you call the function on onclick function write return calcularplazas.
check the below code for for your reference.
function calcularplazas(){
var mensaje = "MENSAJE FINAL";
document.getElementById("resultado").innerHTML = mensaje;
return false;
}
<button id="btnEnviar" class="btn" onclick="return calcularplazas();">SEND</button>
This question already has answers here:
onClick to get the ID of the clicked button
(18 answers)
Closed 7 years ago.
We have multiple forms with different IDs but same onclick function .
For Like ,
<input type="button" id="a" value="SUBMIT" onclick="fnSubmitForm();">
<input type="button" id="b" value="SUBMIT" onclick="fnSubmitForm();">
<input type="button" id="c" value="SUBMIT" onclick="fnSubmitForm();">
How to find the ID of which submit button is submitted.
add the function in the onclick like this
<input type='button' id='a' value='submit' onclick='fnSubmitForm()'/>
<input type='button' id='b' value='submit' onclick='fnSubmitForm()'/>
<input type='button' id='c' value='submit' onclick='fnSubmitForm()'/>
then get the passed value using the following snippet.
function fnSubmitForm(){
console.log(this.document.activeElement.getAttribute("id"));
}
Pass in this to the function:
onclick="fnSubmitForm(this);"
and you can pick up the id:
function fnSubmitForm(el) {
console.log(el.id);
}
DEMO
EDIT
Ok, since you can't edit the HTML, here's a script only solution:
// pick up the input elements with type=button
var buttons = document.querySelectorAll('input[type="button"]');
// add click events to each of them, binding the function
// to the event
[].slice.call(buttons).forEach(function (el) {
el.onclick = fnSubmitForm.bind(this, el);
});
function fnSubmitForm(el){
console.log(el.id);
}
DEMO
Try like this
onclick="fnSubmitForm(this.id);"
and get the value with the first function argument
function fnSubmitForm(id) {
//your code
}