How to get the text "Submit" from below code - javascript

How to get the text "Submit" from below code. The div dosent have any id
<div class="modal-footer" style="display: block;">
<button class="psc-cancel btn-gray" data-target="#psc-service-form-modal" data- dismiss="modal">Cancel</button>
<button class="psc-submit btn" data-target="#psc-service-form-modal">Submit</button>
</div>

Try this:
var button = document.getElementsByClassName('psc-submit btn')[0];
if(button.innerHTML == "Submit") {
alert('button contains "Submit"');
}

if you want pure javascript, try this
var submittxt = document.getElementsByTagName('div')[0].getElementsByTagName('button')[1].textContent;
alert(submittxt);
http://jsfiddle.net/ZQVR8/

As the button doesn't have an id or name attribute, there is no "definite" way to get exactly that button. If it's the only one with that specific name attribute, or the only one with the psc-submit class, you could query it like this, for example:
var btn = document.querySelector('.modal-footer .psc-submit');

Related

Modify a form button using jQuery

I have a button that looks like the following:
<button type="submit" class="desktop-button tiny" onclick="document.stacks_in_3151032_page6.formAction.value = 'login';">LOGIN</button>
I am unable to modify the code of the button so I want to know if I can add a name to the button using jQuery or JavaScript? I want the button to look like the following:
<button type="submit" class="desktop-button tiny" name="login_button" onclick="document.stacks_in_3151032_page6.formAction.value = 'login';">LOGIN</button>
You can achieve this using:
jQuery:
$('.desktop-button.tiny').attr('name', 'login_button');
Or Javascript:
document.querySelector(".desktop-button.tiny").setAttribute("name", "login_button");
var addNameAttr = function () {
$('.desktop-button.tiny').attr('name', 'login_button');
console.log($('.desktop-button.tiny').attr('name'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" class="desktop-button tiny" onclick="addNameAttr()">LOGIN</button>
You can select the button using its classes, .desktop-button .tiny.
Together with setting the name attribute, this would result in:
jQuery:
$(".desktop-button.tiny").attr("name", "login_button");
Pure JavaScript:
document.querySelector(".desktop-button.tiny").setAttribute("name", "login_button");
You first need to obtain the element and then set the name attribute.
Without jquery this would be:
<button id='my-button' type="submit" class="desktop-button tiny" onclick="document.stacks_in_3151032_page6.formAction.value = 1'login';">LOGIN</button>
document.getElementById('my-button').setAttribute('name', 'login_button');
With jquery, you would be able to find the element without adding an id as such:
$('button.desktop-button.tiny').attr('name', 'login_button');
Hope this helps.

How to change text of buttons after clicking on them for multiple buttons?

I am using multiple buttons and my problem is when i am clicking on any button then the text changes of first button, but not that button on which i am clicking. I am using here same button id for all buttons but it is hard to use different button id's for such multiple buttons so what is any other simple way without using different id's.
I want to change only one button at a time on which i am clicking but not other buttons. PLEASE HELP..!
html code
user1
<input type="button" value="Connect" id="toggle" onclick="myFunction()">
user2
<input type="button" value="Connect" id="toggle" onclick="myFunction()">
user3
<input type="button" value="Connect" id="toggle" onclick="myFunction()">
and so on...
and js function is
function myFunction()
{
var change = document.getElementById("toggle");
if (change.value=="Connected") change.value = "Connect";
else change.value = "Connected";
}
You can do it like this as well? You can change your onclick events as follows:
Change onlick functions to this: onclick ="myFunction(this)"
And Update your javascript function to be like the following:
function myFunction(obj) {
if (obj.value == "Connected")
obj.value = "Connect";
else
obj.value = "Connected";
}
You cant use same Id for multiple elements. Simply you can use class instead of Id. Then your code will look like that :
$(".toggle").click(function(){}
$(this).text("Whatever");
})

get value with data attribute and display on other div

I would like to show the value "1,000 below" found inside the button on this div using jquery
<div class="showvaluehere">here</div>
<button class="button" data-filter=".1000">1,000 below</button>
I got this so far but not working, it shows the class ".1000"
var syo = $this.attr('data-filter');
$(this).parent().find('.showvaluehere').html(syo);
for clarity, I want the value of the button to be on the
so that it shows like this;
<div class="showvaluehere">1,000 below</div>
Thanks
You are getting value of data-filter attribute, which is .1000
Try this
$('.button').click(function() {
var syo = $(this).text();
$('.showvaluehere').html(syo);
})
Your code is confusing as you're referencing a lot of elements and attributes which seem unrelated to the HTML you've shown and the problem you describe.
That said, you can do what you require by simply setting the text() of the .showvaluehere element to match that of it's neighbouring button, like this:
$('.showvaluehere').text(function() {
return $(this).next('button').text();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showvaluehere">here</div>
<button class="button" data-filter=".1000">1,000 below</button>
$('.button').click(function() {
$('.showvaluehere').text($(this).text())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showvaluehere">here</div>
<button class="button" data-filter=".1000">1,000 below</button>

How to change a string within a div that your selector is in with JQuery?

How do you change the name of text within a div that your selector is inside of? In other words, I'd like to click on a button and change the text of the text above the button (within the same div).
For example, in my html, there is a button and a title above it. Once the button is clicked, I'd like the title above it to change to the id of the button.
This problem is similar to this question, but I'm having difficulty changing the text within the div that the selector is in.
Below is my attempt to grab the id of the button, and change the text within the div container.
Javascript (my attempt) (codepen here):
$('.btn.btn-default').on('click', function() {
var desired_name = $(this).attr('id')
$('#title').find($(this)).html(desired_name);
});
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p id="title">Temporary Button Title That Should be 'true_name1'</p>
<button class="btn btn-default" id="true_name1">NAME</button>
</div>
<div>
<p id="title">Temporary Button Title That Should be 'true_name1'</p>
<button class="btn btn-default" id="true_name2">NAME</button>
</div>
Have you tried $(this).siblings("p")
This will select the <p> above the button
Have you tried jquery .prev()
https://api.jquery.com/prev/
$('.btn.btn-default').on('click', function() {
var desired_name = $(this).attr('id')
$(this).prev().html(desired_name);
});
You can use the jQuery method siblings() to select the <p> element inside your <div> container.
However I recommend using a class as a unique selector inside your container.
$('.btn.btn-default').on('click', function() {
$(this).siblings(".desired-name").text($(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p class="desired-name">Temporary Button Title That Should be 'true_name1'</p>
<button class="btn btn-default" id="true_name1">NAME</button>
</div>
<div>
<p class="desired-name">Temporary Button Title That Should be 'true_name1'</p>
<button class="btn btn-default" id="true_name2">NAME</button>
</div>
Change the ID's to classes for starters. Then target them like this:
$('.btn.btn-default').on('click', function() {
var desired_name = $(this).attr('id');
$(this).prev(".title").text(desired_name);
});

How to replace html button with plain text

How do you replace a button with whatever words were on the button before? I was looking at an answer to another similar question, which said to use something like:
var myBtn = document.getElementById("buttonId"),
mySpan = document.createElement("span");
mySpan.innerHTML = myBtn.innerHTML ;
myBtn .parentNode.replaceChild(mySpan, myBtn);
but that had made what other buttons do change. Does anyone know another way to change a button to regular text?
I know that that code works just by itself, but it doesn't work with my code for some reason, so I don't really care what's wrong with that code. I'm just wondering if anyone knows another way to do it.
Thanks
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<div id="myDiv">
<input type="button" value="Change into Text" id="submit" onClick="change()"> <!--button input that will trigger an event named change-->
</div>
</body>
</html>
<script type="text/javascript">
function change(){ //function to run when you click on the button...
var buttonValue = document.getElementById("submit").value; //stores the button value
document.getElementById("myDiv").innerHTML = buttonValue; // displays the value as a plain text inside "myDiv" - removing the button input entirely
}
</script>
EDIT:
I've just noticed you had multiple buttons in your page, which will make my previous example wrong. heres something that will make you work easier i think in case you will add extra buttons:
first heres the code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li id="id_1"><input type="button" value="Change into Text" onClick="change(1)" id="button_1"></li>
<li id="id_2"><input type="button" value="Change into Text" onClick="change(2)" id="button_2"></li>
<li id="id_3"><input type="button" value="Change into Text" onClick="change(3)" id="button_3"></li>
</ul>
</body>
</html>
<script type="text/javascript">
var id;
function change(id){
var buttonValue = document.getElementById("button_"+id).value;
document.getElementById("id_"+id).innerHTML = buttonValue;
}
</script>
In the HTML part, you can create a list (li) of buttons if that's your layout...
each list will have its own id, in this case id_x that will be used later when you replace its content. each button calls a function change(id) while id is just a unique number for each button.
In the JS part, the change(id) gets the id of the button that was clicked, takes its value, and replaces the innerHTML (content) of the relative list items with a plain text.
Let me know if you still need any other help.
Seems that you are looking for another way to replace the buttons with plain text, well I'll show you the jQuery way.
HTML
<div>
<button id="btn1" class="change-button">A button with some text 1</button>
<button id="btn2" class="change-button">A button with some text 2</button>
<button id="btn3" class="change-button">A button with some text 3</button>
</div>
jQuery
// When we click a button with a "change-button" class
$(".change-button").on("click", function(event){
// First we get the ID value of the clicked button
// example: "btn2"
var buttonId = $(this).attr('id');
// Then we get the html value of the clicked button
// example: "A button with some text 2"
var buttonText = $(this).html();
// We use the function replaceWith, to replace the button to a <span>
// with the buttonText variable we have
$('#' + buttonId).replaceWith("<span>" + buttonText + "</span>");
});
As you can see, it's a lot more cleaner with jQuery. You should try it!
Here is the fiddle so you can test it.
<html>
<script>
function fun()
{
var a = document.getElementById("hello").value;
document.getElementById("ad").innerHTML = a;
}
</script>
<body>
<div id="ad">
<input type="button" value="hello" id="hello" onClick="fun()">
</div>
</body>
</html>
sorry, edited the wrong post

Categories

Resources