Javascript functions isn't acting intuitively - javascript

My Javascript functions isn't acting the way I would expect it to.
function submitDetailsForm() {
if (this.Attr("value") == "Add") {
alert("Add");
}
alert("Not");
}
<button type="button" name="submit" id="remove" value="Remove" onclick="submitDetailsForm()">Remove</button>
<button type="button" name="submit" id="add" value="Add" onclick="submitDetailsForm()">Add</button>
<button type="button" name="submit" id="edit" value="Edit" onclick="submitDetailsForm()">Edit</button>
if I run this page (there is more code but it's irrelevant to the question), then I use the add button the "add" alert doesn't go of but neither does the "not" alert. I'm not to bothered about the add alert because it could just be failed syntax but in any case surely the not alert should always fire if the function is run. I am certain the function is running because if i move the not alert to above the if statement it will run.
Any help would be much Appreciated.
[Resolved]
I resolved the problem by using the idea of passing the object into the function. i also had forgotten to actually declare that i was using JQuery in the script tag.
Resolved code:
<button type="button" name="submit" id="remove" value="Remove" onclick="submitDetailsForm(this)">Remove</button>
<button type="button" name="submit" id="add" value="Add" onclick="submitDetailsForm(this)">Add</button>
<button type="button" name="submit" id="edit" value="Edit" onclick="submitDetailsForm(this)">Edit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function submitDetailsForm(obj) {
if ($(obj).attr("value") == "Add") {
alert("Add");
} else {
alert("Not");
}
}
</script>
*

Pass this object in the function
<button type="button" name="submit" id="remove" value="Remove" onclick="submitDetailsForm(this)">Remove</button>
<button type="button" name="submit" id="add" value="Add" onclick="submitDetailsForm(this)">Add</button>
<button type="button" name="submit" id="edit" value="Edit" onclick="submitDetailsForm(this)">Edit</button>
<script>
function submitDetailsForm(obj) {
if (obj.value == "Add") {
alert("Add");
} else {
alert("Not");
}
}
</script>

Related

How to get multiple values using JSTL tags?

I have this button:
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="${usr.idUser}" onclick="deleteUser(this.value)">Delete</button>
That calls the function deleteUser once the button is clicked.
I would like to know how to send more than one value at the same time.
For example, if I want to send the idUser and the userName, how can I do it?.
I tried this but it's not working:
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="${usr.idUser, usr.userName}" onclick="deleteUser(this.value)">Delete</button>
I expect to receive the values in the same jsp page:
function deleteUser(val1, val2) {
alert(val1);
alert(val2);
}
You can simply pass your values under your function under '' quotes else it will give you error not defined.So your button code will look like below :
<button type="button" class="btn btn-danger" value="something" id="deleteuserbtn" onclick="deleteUser(this.value ,'${usr.idUser}','${usr.userName}')">
Delete</button>
Demo Code :
function deleteUser(val1,val2,val3){
alert("val :"+val1 +" "+val2+" "+val3);
}
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="something" onclick="deleteUser(this.value,'${usr.idUser}','${usr.userName}')">
Delete</button>

Identifying specific button in a form

so I want to get a specific value if a button is clicked in my form, but somehow its listening on all buttons and not only the buttons in my form.
Instead of the javascript example below I also tried calling the class by
$('.modifygap').bind('click', function (e) {
but in this example the value didnt get set correctly.
Here is my html:
<button type="button" id="anotherbutton">Another</button>
<form action="editortoken_information" id="showtoken" method="POST">
<button class="btn btn-outline-secondary" type="submit" name="modifygap" id="modifygap" class="modifygap"
value="14" data-value="test">14</button>
<button class="btn btn-outline-secondary" type="submit" name="modifygap" id="modifygap" class="modifygap"
value="15" data-value="test">15</button>
</form>
And here is my javascript function:
$(document.getElementById("showtoken")).ready(function () {
$("button").click(function (e) {
e.preventDefault();
document.getElementById('tokenindex').value = this.getAttribute("data-value");
})
})
I thought by listening only on the specific id it would only detect button clicks in the form. But for some reason it is listening to all button clicks.
Use event.target.value to get the value of clicked element.
$(document).ready(() => {
$('.modifygap').bind('click', function (e) {
console.log('e', e.target.getAttribute("data-value"))
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="anotherbutton">Another</button>
<button class="btn btn-outline-secondary modifygap" type="submit" name="modifygap" id="modifygap"
value="14" data-value="test14">14</button>
<button class="btn btn-outline-secondary modifygap" type="submit" name="modifygap" id="modifygap"
value="15" data-value="test15">15</button>

Data loading text on button

I've checked similar questions here, but none of them seemed to solve my problem.
I'm trying to add data-loading-text to my submit button, but with no luck so far.
I'm using Bootstrap 4!
Here is my HTML:
<button type="submit" id="submit" class="btn btn-primary btn-lg mt-2" data-loading-text="Sending...">Submit message!</button>
This was the last jquery code I tried:
$(function() {
$(".btn").click(function(){
$(this).submit('loading').delay(1000).queue(function() {
// $(this).button('reset');
});
});
});
Thanks
Try this.
<!DOCTYPE html>
<html>
<head>
<style></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
function MyCustomFunction(){
$("#submit").text("Loading...");
$(this).submit('loading').delay(1000).queue(function () {
// $(this).button('reset');
});
}
</script>
</head>
<body>
<button type="submit" onclick="MyCustomFunction()" id="submit" class="btn btn-primary btn-lg mt-2" data-loading-text="Sending...">Submit message!</button>
</body>
</html>
In case of Submit button the only possible way is to bind a custom function on click and change the action attribute to event handler.
I think this is the most easy way to get the result you need:
HTML:
<button type="submit" class="btn btn-primary btn-lg btn-block" data-loading-text="Your order is being processed...">Order now</button>
JAVASCRIPT / JQUERY:
$(".btn").on('click', function () {
var dataLoadingText = $(this).attr("data-loading-text");
if (typeof dataLoadingText !== typeof undefined && dataLoadingText !== false) {
console.log(dataLoadingText);
$(this).text(dataLoadingText).addClass("disabled");
}
});

Uncaught SyntaxError: Unexpected token } when trying pass data to jquery variable

I'm trying pass data to jquery via onclick
There is jquery function:
function handleit(cId, anotherId) {
var campaingID = cId;
var another = anotherId;
var post = "action=remove&campaign_id=" + campaingID + "&anotherid=" + another;
$.ajax({
type: "post",
url: "ajax/phphandler.php",
data: post,
cache: false,
success: function(html) {
$('#ready').html(html);
}
});
return false;
}
and there is onclick code
<td><input class="btn btn-default" type="submit" data='.$row2['campaign_id'].' value="submit" onclick="return handleit("'.$row2['campaign_id'].'","test")"></td>
rendered html
<td><input class="btn btn-default" type="submit" data=43 value="submit" onclick="return handleit(" 43","test")"></td>
The issue is that your HTML winds up looking like:
<input class="btn btn-default" type="submit" data=foo value="submit"
onclick="return handleit("campaign_id","test")">
^ ^ ^ ^
When defining an attribute, you can't nest " inside ". The HTML would need to look like:
<input class="btn btn-default" type="submit" data=foo value="submit"
onclick="return handleit('campaign_id','test')">
^ ^ ^ ^
How you accomplish that depends on whatever server-side language you're using, but probably involves escaping quotation marks:
<td>
<input class="btn btn-default" type="submit"
data="'.$row2['campaign_id'].'" value="submit"
onclick="return handleit(\''.$row2['campaign_id'].'\',\'test\')"
</td>

Safari not reading submit button Value on Jquery Form Submit

I have the following buttons on my form
<button type="submit" id="SearchButton" name="submit" value="Search" class="btn btn-success btn-block">Search</button>
<button type="submit" id="reset" name="reset" value="Reset" class="btn btn-info btn-block">Clear</button>
And the following Scripting on my page
$(document).on('submit', '#indexSearchForm', function () {
//loadingSpinnerStart();
var submitValue = $("button[type=submit]:focus").val();
if (typeof submitValue === "undefined") {
submitValue = "";
}
var data = $(this).serialize() + "&submit=" + submitValue;
//Ajax Submit Code
return false;
});
In the controller code i need to read both submit and reset actions
It works fine in most browsers except Safari (Windows & IOS) where submit value returns as undefined for both Search and reset.
Can anyone help?
i have an idea...
when u click a button set a variable and call that variable like
var newval="";
function search()
{
newval="Search";
//ur rest code
}
function clear()
{
newval="Reset";
//ur rest code
}
$(document).on('submit', '#indexSearchForm', function () {
//loadingSpinnerStart();
if (typeof newval === "undefined") {
newval = "";
}
var data = $(this).serialize() + "&submit=" + newval;
//Ajax Submit Code
return false;
});
<button type="submit" id="SearchButton" name="submit" value="Search" class="btn btn-success btn-block" onclick="search()">Search</button>
<button type="submit" id="reset" name="reset" value="Reset" class="btn btn-info btn-block" onclick="clear()">Clear</button>
I decided to simply set newval = "Search" so Anirudh answer was sort of right as the Reset button is now a plain button, clears the form, reloads the default search results (none) all by Ajax.

Categories

Resources