I have one form on a page with no submit button:
<form id='voteForm' action='xyz' method='post'>
<fieldset>
<input type="hidden" id="task_id" value="{$feature_details['task_id']}" />
<input type="hidden" id="vote_id" value="{$vote['vote_id']}" />
<input type="hidden" id="vote_type" value="{$vote['vote_type']}" />
<input type="hidden" id="vote_rating" value="{$vote['vote_rating']}" />
<input id="btn-update-vote" class="btn btn-sm btn-primary" type='button' disabled="disabled" value="{L('SubmitVote')}">
</fieldset>
</form>
I cannot get jQuery to trap a click event on the 'SubmitVote' button
neither of these appear to work:
$('#btn_update_vote').click(function() {
console.log('Click: #btn_update_vote');
})
$('form#voteForm').on('click', '#btn_update_vote', function() {
console.log('Click: #btn_add_comment');
})
I do not understand what can cause this!
Any help appreciated!
BTW: I CAN set the disabled attribute on the button using jQuery and on 'documentReady' I log the button to the console:
[Log] [ (tracker, line 446)
<input id="btn-update-vote" class="btn btn-sm btn-primary" type="button" disabled="disabled" value="Cast Your Vote">
]
Your button attr disabled="disabled" make it unclickable, even inline onclick listen.
<input id="btn-update-vote"
$('#btn_update_vote').click( //...
You declared your id with dashes (-), not underscores (_), so you need
$('#btn-update-vote').click(
Also #Richer is correct
Related
How do I solve the error cannot read property of 'addEventListener' of null ? when I add this code,document.getElementById("myForm").addEventListener("submit", SaveBookmark) in my JS file
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
<input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
<button type="button" id="submitBtn">Submit</button>
</form>
First please notice that you're calling DOM is loaded or duplicated formID.
This code is working fine. please change <button type="button"> to be <button type="submit" .../>
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
<input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
<button type="submit" id="submitBtn">Submit</button>
</form>
<script>
document.getElementById("myForm").addEventListener("submit", SaveBookmark);
function SaveBookmark() {
alert('success');
}
</script>
I'm by no means an expert but to avoid that error your JS should look like this
const myForm = document.getElementById("myForm");
if (myForm) {
myForm.addEventListener("submit", SaveBookmark)
}
This ensures that your form element exists before you add the event listener
Should work easily:
document.getElementById('myForm').addEventListener('submit', function() {
alert("yes!")
})
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
<input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
<button type="submit" id="submitBtn">Submit</button>
</form>
It does not work because you have a
<button type="button" id="submitBtn">Submit</button>
instead of:
<button type="submit" id="submitBtn">Submit</button>
and you're trying to reach submit event.
Anyway, i recommend you not to add event listeners due to resource wasting. Use it when it's the only option.
I let you another way to reach the same with default click eventlistener:
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
<input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
<button type="submit" id="submitBtn" onclick="saveBookmark()">Submit</button>
</form>
<script type="text/javascript">
function saveBookmark(){
alert ("Bookmark saved");
}
</script>
You'll click on submit button anyway so, use onclick event instead of creating an eventlistener. It works simplest and waste much less resources...
And remember to add action attribute to the form, trying to re-program defined behaviour will only make your software heavy and heavy on codelines and timeloads. Thats why know the language its important.
Hope it help!
I have four buttons and three of them have a class called "multiple". the reason for this is they would be worked on by a jquery function.
<input type="submit" id="add" value="Add" <?php set_button_status(1,'is_add') ?>><br/>
<input type="submit" class="multiple" id="publish" name="publish" value="publish"><br/>
<input type="submit" class="multiple" id="unpublish" name="unpublish" value="unpublish"><br/>
<input type="submit" id="trash" class="multiple" name="trash" value="trash" <?php set_button_status(1,'is_delete') ?>><br/>
The set_button_status(1,'is_add') and set_button_status(1,'is_delete') function will return the string "disabled" to disable the add and thrash buttons respectively if the condition is true. However, only the add button is etting disabled.
When I remove the class "multiple" to the other buttons "publish" and "unpublish", the "trash" can now be disabled.
Why can't I disable a button if it has other buttons with the same class? How can I fix this?
I created a fiddle with your code, assuming both .php calls return 'disabled'. It renders both 'Add' and 'trash' buttons as disabled:
<input type="submit" id="add" value="Add" disabled><br/>
<input type="submit" class="multiple" id="publish" name="publish" value="publish"><br/>
<input type="submit" class="multiple" id="unpublish" name="unpublish" value="unpublish"><br/>
<input type="submit" id="trash" class="multiple" name="trash" value="trash" disabled><br/>
I have used the above code in my PC and everything is fine.(Without PHP)
First You put ;(semicolon) at the end of every PHP statement.
And /> instead of just > at the end of every input tag.
Let me know the results after that.
I am using a form and was wondering if anyone knows some JavaScript that can edit what fields the clear button actually clears?
i.e i only want a select number of fields to be cleared once the user hits the clear button on the form.
input id='FrmReset' type='reset' value='Clear' name='resetButton' onclick='formReset(document.getElementById("Form")); return false;'
I just have the following which clears everything
<input id='FrmReset' type='reset' value='Clear' name='resetButton' onclick='formReset(document.getElementById("Form")); return false;' />
Let's say you have 4 fields like this:
<input type="text" value="don't clear this" id="i1" />
<input type="text" value="don't clear this" id="i2" />
<br/>
<input type="text" value="clear this" id="i3" />
<input type="text" value="clear this" id="i4" />
And you need to clear only bottom 2. Add a normal button with onclick event:
<button onclick="clearNeeded()">Clear only bottom fields</button>
function clearNeeded() {
document.getElementById('i3').value='';
document.getElementById('i4').value='';
}
As you can see - the function selectively picks only specific fields and resets their values.
Demo: http://jsfiddle.net/rdnT3/
I have situation where i need to track which submit button click in order to do set variables according to that. Below is the test code,
<script>
function submitForm(form) {
alert(document.getElementById('sb').value);
if (document.getElementById('sb').value=="One") {
//Do something
}
return true;
}
</script>
<form action="" method="get" onsubmit="return submitForm(this);">
<input type="submit" name="sb" value="One">
<input type="submit" name="sb" value="Two">
<input type="submit" name="sb" value="Three">
</form>
The alert always shows One even if i click button Two or Three. But the url change with clickable parameter. How to alert the value which is in the clickable submit button?
Note: I want a solution with out JQuery
EDIT: I change the code bit which the onsubmit call the submitForm(this);
The problem is even use document.forms[0].sb.value its undefined because document.forms[0].sb return a node list of all submit buttons as its same as with document.getElementById('sb')
Here is what I think is a simpler solution to this problem. It does not require any extra events.
<script>
function submitForm(form) {
console.log(document.activeElement.value);
if (document.activeElement.value == 'One') {
console.log("Have one.");
return false;
}
return true;
}
</script>
<form action="" method="get" onsubmit="return submitForm(this);">
<input type="submit" name="sb" value="One">
<input type="submit" name="sb" value="Two">
<input type="submit" name="sb" value="Three">
</form>
jsfiddle
What I would like an answer to is how the form is getting the query set to "?sb={value}".
I would suggest you to use buttons, instead of multiple submit buttons. In the onclick attribute of the buttons, submit the form using javascript.
You can try like this,
<form>
<input class="myButton" type="submit" name="sb" value="One">
<input class="myButton" type="submit" name="sb" value="Two">
<input class="myButton" type="submit" name="sb" value="Three">
</form>
<script type="text/javascript">
$(".myButton").on('click', function() {
alert($(this).val());
});
</script>
I'm a bit new to javascript; please forgive me if I'm wrong on this. Wouldn't it make a difference if your if statement had a 3rd = sign?
Should it be:
if (document.getElementById('sb').value === "One") {
//Do something
}
return true;
Continuing the answer above:
<script>
function m(value) {
alert(value);
}
</script>
<input type="button" value="One" onClick="m(this.value)">
<input type="button" value="Two" onClick="m(this.value)">
<input type="button" value="Three" onClick="m(this.value)">
You can of course see what's the id:
<input type="button" id='myId' value="Three" onClick="m(this.id)">
you can try with jquery something like :
$(":submit").live('click', function() {
alert($(this).val());
})
This is a non-jquery, simple solution for detecting which submit button was clicked.
<script>
function submitForm(form) {
console.log(document.getElementById('btn_clicked').value);
if (document.getElementById('btn_clicked').value === 'One') {
console.log("Have one.");
return false;
}
return true;
}
</script>
<form action="" method="get" onsubmit="return submitForm(this);" ;">
<input type="hidden" name="btn_clicked" id="btn_clicked" value="">
<input type="submit" name="sb" value="One" onclick="document.getElementById('btn_clicked').value='One';">
<input type="submit" name="sb" value="Two" onclick="document.getElementById('btn_clicked').value='Two';">
</form>
I have a form with an input textbox and a button. When I click on a button I want to go to a different page depending on the value of the input textbox. For example:
<form name="frm1" id="frm1" action="page.php">
<input type="text" name="txt_name" id="txt_name" value="simple text" />
<input type="button" Onclick="redirect_to('page2.php/?id=8&input=this.txt_name.value')" value="Save" />
</form>
How can I get this value? Can this be done without using a function?
Well I would recommend a function for following reasons:
Cleaner code.
Better way if you have multiple buttons.
Less code.
Better manageability.
Add this to your buttons
onclick="redirect('mytextbox.value');";
Add this to your markup inside <head>(just few lines of code):
<script type="text/javascript">
function redirect(value){
window.location="page.php/?id=8&input="+value.ToString();
}
</script>
Why wouldn't you just do this?
<form name="frm1" id="frm1" action="page2.php">
<input type="hidden" value="8" name="id" />
<input type="text" name="txt_name" id="txt_name" value="simple text" />
<input type="submit" value="Save" />
</form>
if you have something like :
<form>
<input type="text" name="formelem" />
<input type="button" />
</form>
you can put to the button :
onclick="redirect_to('page.php/?id=8&input='+this.form.formelem.value)"
you are on the button, so "this" will be the button and you need to get the form from which you can get the input
another way ( if you don't need a form for another purpose ) would be to just put :
<input type="text" id="formelem" />
<input type="button" onclick="redirect_to('page.php/?id=8&input='+document.getElementById('formelem').value)" />
onclick="window.location.href = 'page.php/?id=8&input=' +this.value.toString()"