About Jquery Name,Submit and attribute - javascript

My J query code looks like this
jQuery(document).ready(function($) {
$(".respond").submit(function(event){
var $form = $(this);
.....
I want to grab the name of the submit button that was clicked...
I tried couple of things like this but it didn't worked...
console.log($("$form input:submit").attr("name"));
....
console.log($form+$("input:submit").attr("name"));
.....
But this works.
console.log(".respond input:submit").attr("name"));
i don't know why it didn't works when i use $form.
Can someone tell me how do i find the input of that .respond using $form(or $this) .
Thanks

The $form variable is a jQuery object. As such you cannot simply concatenate it to another object.
If you want to find one element within another, use find():
$form.find('input:submit');
Or a contextual selector:
$('input:submit', $form);

Use find with form to get its descendant, you are concatenating object with string with wont give you what you want. If you want to get the descendants of the object then use find()
console.log($form.find("input:submit").attr("name"));
You can also try using
event.target.name

Related

How to get string value of selector that was used $('*selector*).on(...) in jQuery?

Is there a way to get a string value of selector, that was used to search elements?
This property is now deprecated in 3.0 and higher versions of jQuery.
I am trying to apply that to the code below to replace .siblings('.upper-link') with .siblings(*selector*).
$('.upper-link').on('mouseover', function (e) {
$(e.currentTarget)
.addClass('make-wider')
.siblings('.upper-link')
.addClass('make-thinner');
});
Thank you.
Even though I mostly agree with Rory's comment: "Why would you need this?" it can be achieved, although it's an odd one, since you need to "know" the selector somehow anyway.
You could, for instance add a data-attribute like so:
<div class='upper-link' data-sibling-type='.my-selector'>
and use that "sibling-type" as a selector, something along the lines of this (not tested):
$('.upper-link').on('mouseover', function (e) {
let childSelector = $(e).data('sibling-type');
$(e.currentTarget)
.addClass('make-wider')
.siblings(childSelector)
.addClass('make-thinner');
});
Still remaining: Why would you need this?

Alternative for document in document.getElementById('ID')

I am completely a beginner in java script. As i know, by using this line of code:
document.getElementById('ID').value
It looks in the entire PHP file to find the value of that id (it's a text input). Is there any alternative for the documents on that line of code that let me to search only in a class?
for example i have a class called number, so :
this.block = $("#number");
can i use something like that:
this.block.getElementById('ID').value;
Or there is any another line of code that give me the value of a text input? Thanks a lot
You can use
$("#number").find("#id")
to search descendants of #number.
But if your class is number you should use $(".number") instead since that is the class selector.

Combining jQuery .val() and .contains()

I'm fairly new to jQuery and I ran into this problem while trying to combine .val() with :contains(). I'm trying to get input from a text field and check to see if that input is in a paragraph, and highlight it in that paragraph. All of the code here is strictly based on information I got from the jQuery API, but I can't get it to work.
See the jsfiddle here: http://jsfiddle.net/tUKp8/
Here is my jQuery code:
$("input").keyup(function () {
var value = $(this).val();
$("p:contains('value')").css("text-decoration", "underline");
}).keyup();
you neeed
$("p:contains(" + value +" )").css("text-decoration", "underline");
Two problems:
The string is not being concatenated--variable names need to be outside of strings and added using the concatenation operator (+). Right now you are passing in the string 'value' to contains(), which will only find p elements that contain the text 'value'. Instead, concatenate using the variable you declare, like so:
$("p:contains(" + value + ")").css("text-decoration", "underline");
Now value will be passed into the jQuery selector.
You don't need to chain keyup() to the end. Passing no arguments into this method triggers a keyup event, which, at least in this limited example, doesn't do anything. See the jQuery API for keyup() here: http://api.jquery.com/keyup/. What you're doing with the last .keyup() falls into the third category.
Hope this helps!

Clear text of a Html.TextBoxFor with Javascript or JQuery

I can't seem to figure out how to clear the text from a razor Textbox.
I've tried this:
#Html.TextBoxFor(m => m.Field)
$(document).ready(function () {
$(".link").click(function () {
$("#Field").value = "";
return false;
});
});
Didn't work.
The correct way to SET the value with jQuery is to use val and pass it a value. So to clear it, use this:
$("#Field").val("")
Look at the jQuery API for val:
http://api.jquery.com/val/
If you wanted to use basic Javascript, you use .value = "", but since you are selecting an element with jQuery, you must use jQuery methods, like val.
You have several options though. This is similarly very easy with basic Javascript:
document.getElementById("Field").value = "";
If you still wanted to use jQuery but use value, you need to get the DOM element, like:
$("#Field")[0].value = "";
// or
$("#Field").get(0).value = "";
If you are using jQuery, you might as well stick with val(). The nice thing with this is that calling .val("") will not bomb the program if the element isn't found. If you use any of the other methods I mentioned, they will bomb if the element doesn't exist. So it's up to you what you really want. You can always check to see if $("#Field").length is greater than 0 before using get(0) or [0], but that's kind of overkill.
Another possible problem is that the id of the element may not be "Field". I forget what MVC does to generate the actual HTML, but it's up to you to use something like Firebug or Developer Tools to investigate and see what the id actually is. Then, you may have to replace it for "Field".

How to store html in hidden field using jquery?

How to store string with HTML tags in hidden field using jquery?
I am using the below code. But its not working.
var terms = $('#TermsAndCondition').val();
alert($('#hdnTerms').val(terms));
Here TermsAndCondition is TextArea and hdnTerms is hidden field.
In alert it returns the object.
use something like this
var value=$("input[type=hidden]").val();
alert(value);
You're just querying it wrong, try this
var terms = $('#TermsAndCondition').val();
alert($('#hdnTerms').val(terms).val()); //Note the extra .val() so you get the value
.val(terms) returns a jQuery object, not the value, you need to call .val() with no parameters to get a the value returned.
Assigning to .val() does not return the text (it returns a jQuery object), change your test to:
$('#hdnTerms').val(terms);
alert($('#hdnTerms').val());
To access the value you must call val() without parameters.
May I suggest you to simply use:
//hide terms when you don't need them
$("#TermsAndCondition").hide();
//show them again when you want
$("#TermsAndCondition").show();
not sure what you are trying to achieve there

Categories