jQuery change values based on attributes

jQuery change values based on attributes - javascript

I have an input class and I want to change it to select form attribute.
So far I have something similar that is working on my h2.title that change the word from Apple to Orange.
Example
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
if (){
$(document).ready(function(){
$(document).live({
mouseover: function(e) {
$('h2.title').each(function() {
var text = $(this).text();
text = text.replace('Apple', 'Orange');
$(this).text(text);
});
}
});
});
}
</script>
And I really like this to be converted to select form attribute
<input class = "form-input ng-pristine ng-untouched ng-valid ng-empty ng valid-maxlength" id="Banana" maxlength = "2000" name="Banana" type=text"
Is there a way to work about this? with 2 select options

Yes, you can do this:
text = text.replace('Apple', $(this).attr("name"));
Here is a demo:
$(document).ready(function() {
$(document).on("mouseover", function(e) {
$('h2.title').each(function() {
var text = $(this).text();
text = text.replace('Apple', $(this).attr("name"));
$(this).text(text);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="title" name="Banana">Apple</h2>
<h2 class="title" name="Orange">Apple</h2>
<h2 class="title" name="Pineapple">Apple</h2>
<h2 class="title" name="Grape">Apple</h2>

Related

The button is not added via a variable in the TEXT method

I'm doing a task sheet. I dynamically add items to the list along with the delete button, but the button is not displayed. Why?
I can certainly write the code differently, but why does this code not work?
$(function() {
$("#button").click(function() {
var text = $("#text").val();
if(text != "")
{
var del = $("<input type='button' value='X'></input>").text();
//var item = $("<li></li>").text(text + del);
var item = $("<li></li>").text(text + del); // DONT WORK! WHY?
$("ul").append(item);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Введите текст:
<input id="text" type="text"></input>
<input id="button" type="submit"></input>
</div>
<div class="ul">
<ul>
</ul>
</div>
With this code I want to achieve this result. But I can not. Who will help explain where I'm wrong?
<li>Some Text <input type='button' value='X'></input></li>

In your code $("<input type='button' value='X'></input>").text() returns undefined.
Try this:
$(function() {
$("#button").click(function() {
var text = $("#text").val();
if(text != "")
{
var delHTML = "<input type='button' value='X'></input>";
var item = $("<li></li>").html(text + delHTML);
$("ul").append(item);
}
});
});

Your issue stemmed from not appending the delete button to the list item reference. As it's written I can add a list item to the ul but the button's delete button element was never attached to the list item.
Second, I removed .text() from var del = $("<input type='button' value='X'></input>").text();.
Here's my full solution.
$(function() {
$("#button").click(function() {
var text = $("#text").val();
if(text != "")
{
// Creating elements
var deleteBtn = $("<input type='button' value='X'></input>");
var item = $("<li></li>").text(text);
// Appending elements
item.append(deleteBtn);
$("ul").append(item);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Введите текст:
<input id="text" type="text"></input>
<input id="button" type="submit"></input>
</div>
<div class="ul">
<ul>
</ul>
</div>

How to set value in Jquery Clone while generating dynamic html

I am using clone to generate dynamic HTML on click of button ,
following is my HTML for the same.
<input id="AddPhoneType" onclick="setEmailValues()" value="Gen Email" type="button">
<div style="margin-top: 10px;" class="ExtAddEmailTemplate" id="ExtAddEmailTemplate">
<input name="RemoveEmail" class="RemovePhoneBtn" value="-" id="RemoveEmail" type="button">
<input type="text" name="txtExtEmail" class="ExtEmailClass" value="" placeholder="Email" /></div>
<div id="EmailContainer"> </div>
And following is the script
$(document).ready(function () {
$('#AddExtEmail').click(function () {
$('<div/>', {
'class': 'ExtAddEmail', html: GetHtmlForEmail()
}).hide().appendTo('#EmailContainer').slideDown('slow');
});
});
function setEmailValues() {
$('<div/>', {
'class': 'ExtAddEmail', html: GetHtmlForEmail()
}).hide().appendTo('#EmailContainer').slideDown('slow');
}
function GetHtmlForEmail()
{
var len = $('.ExtAddEmail').length;
var emailValue = 'oner#one.com,twor#two.com';
var emaiArray = emailValue.split(",");
var $html = $('.ExtAddEmailTemplate').clone();
$html.find('[name=txtExtEmail]')[0].name = "txtExtEmail" + len;
return $html.html();
}
Now on click of button I need to generate 2 text box let say with respective email ID let say "oner#one.com", "twor#two.com"
Now my issue is that I am not able to set the value while generating the HTML
I have tried following
$html.find('[type=text]')[0].val('oner#one.com');
Have try finding using class , text etc. but was not able to set the value.
I also need to set value of dropdown , assuming that if I may able to set value of text box, will able to it do for dropdown also.
I am able to do it after HTML getting generated
$('#EmailContainer .ExtEmailClass').each(function () {
this.value = 'oner#one.com';
});
But I think if we can set value while generating HTML is most appropriate solution.
Thanks

You can use the below code it is working perfectly,
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Tring Reset</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<input id="AddPhoneType" onclick="setEmailValues()" value="Gen Email" type="button">
<div style="margin-top: 10px;" class="ExtAddEmailTemplate" id="ExtAddEmailTemplate">
<input name="RemoveEmail" class="RemovePhoneBtn" value="-" id="RemoveEmail" type="button">
<input type="text" name="txtExtEmail" class="ExtEmailClass" placeholder="Email" /></div>
<input type="button" id="AddExtEmail" value="+"/>
<div id="EmailContainer"> </div>
<script>
$(document).ready(function () {
$('#AddExtEmail').click(function () {
$('<div/>', {
'class': 'ExtAddEmail', html: GetHtmlForEmail()
}).hide().appendTo('#EmailContainer').slideDown('slow');
});
});
function setEmailValues() {
$('<div/>', {
'class': 'ExtAddEmail', html: GetHtmlForEmail()
}).hide().appendTo('#EmailContainer').slideDown('slow');
}
function GetHtmlForEmail()
{
var len = $('.ExtAddEmail').length;
var emailValue = 'oner#one.com,twor#two.com';
var emaiArray = emailValue.split(",");
var $tryiy = $('.ExtAddEmailTemplate').clone();
$tryiy.find('[name=txtExtEmail]')[0].name = "txtExtEmail" + len;
$tryiy.find('[name=txtExtEmail'+len+']').attr("value",emaiArray[0]);
return $tryiy.html();
}
</script>
</body>
</html>
I have set the value using the attr("value",emaiArray[0]); property of the element using jquery and it is working fine

How to get input text value in javascript

I want to output a manipulated input value of a text type input tag, but it seems to be harder than I thought it will be. I don't want to use alert or console.log kind of outputting, but appending to the page as new content. Here I didn't manipulate the input, since I'm not even able to output it, which is my first goal then.
my html code for the corresponding part is:
<div class="middle topic">
<div id="inputnav">
<button id="sendd">SEND</button>
</div>
<input type="text" value="" id="iPf">
<div id="oPf">
output
</div>
</div>
and here is the full javascript. I linked it at the end of the html before the closing body tag, after a jquery-1.12.2.min.js linking.
/*global $, jQuery, alert*/
$(document).ready(function () {
"use strict";
var inPuttext = document.getElementById("iPf").innerHTML;
var outPutfield = document.getElementById("oPf");
function appendOutput(where, what) {
where.innerHTML = what;
};
$('#sendd').click(function () {
appendOutput(outPutfield, inPuttext);
});
});
I can't figure out why it doesn't work. When I click the send button the only thing happens is that the "output" disappears from the #oPf div.

Use value property not innerHTML to get value from input element.
Get the value in click handler to get updated value.
$(document).ready(function() {
"use strict";
var outPutfield = document.getElementById("oPf");
function appendOutput(where, what) {
where.innerHTML = what;
};
$('#sendd').click(function() {
var inPuttext = document.getElementById("iPf").value;
appendOutput(outPutfield, inPuttext);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="middle topic">
<div id="inputnav">
<button id="sendd">SEND</button>
</div>
<input type="text" value="" id="iPf">
<div id="oPf">
output
</div>
</div>
But, If you are using jQuery:
$(document).ready(function() {
"use strict";
$('#sendd').click(function() {
$('#oPf').html($("#iPf").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="middle topic">
<div id="inputnav">
<button id="sendd">SEND</button>
</div>
<input type="text" value="" id="iPf">
<div id="oPf">
output
</div>
</div>

Try this:
use .value to get entered value of input box.
get value inside calling function so that you can get entered value in inputbox
$(document).ready(function () {
"use strict";
function appendOutput(where, what) {
where.innerHTML = what;
};
$('#sendd').click(function () {
var inPuttext = document.getElementById("iPf").value; // use .value to get entered value of input box , get value inside calling function so that you can get entered value in inputbox
var outPutfield = document.getElementById("oPf");
appendOutput(outPutfield, inPuttext);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="middle topic">
<div id="inputnav">
<button id="sendd">SEND</button>
</div>
<input type="text" value="" id="iPf">
<div id="oPf">
output
</div>
</div>

Try $("#oPf").html($("#iPf").val());
$('#sendd').click(function() {
$("#oPf").html($("#iPf").val());
});
Refer : Js Fiddle
$('#sendd').click(function() {
$("#oPf").html($("#iPf").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle topic">
<div id="inputnav">
<button id="sendd">SEND</button>
</div>
<input type="text" value="" id="iPf">
<div id="oPf">
output
</div>
</div>

Just add this, you will get output in output div.
HTML UPDATE
<div id="inputnav">
<button id="sendd" onClick="fn()">SEND</button>
</div>
JAVASCRIPT UPDATE
function fn(){
var inPuttext = document.getElementById("iPf").value;
document.getElementById("oPf").innerHTML = inPuttext;
}

inPuttext should be
var inPuttext =document.getElementById("iPf").value
above code should come inside the click event.because we need to get the input value after it entered.My answer as follows
$(document).ready(function () {
"use strict";
var outPutfield = document.getElementById("oPf");
function appendOutput(where, what) {
console.log(what);
where.innerHTML = what;
}
;
$('#sendd').click(function () {
var inPuttext = document.getElementById("iPf").value;
appendOutput(outPutfield, inPuttext);
console.log('asd');
});
});

append text name to each input

I try to add input dynamically. However each input I add is blank without a name.
$(document).ready(function() {
var moreUploadTag = '';
$('#attachMore').click(function() {
moreUploadTag += '<input type="text"/>';
jQuery(moreUploadTag).detach().appendTo("#boxed");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="boxed">
<input type="text" name="" />
</div>
<p id="attachMore">attachMore</p>
The purpose I left it blank without a name is I want to crate the name dynamically:
$('#addName').click(function(){
//$('input').attr("name", $(this).attr("name") + "test");
var named = $('input').val();
$('input').attr("name", $('input').attr("name") + named);
});
$(document).ready(function() {
$('#attachMore').click(function() {
var moreUploadTag = '';
moreUploadTag += '<input type="text"/>';
jQuery(moreUploadTag).detach().appendTo("#boxed");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxed">
<input type="text" name="" />
</div>
<p id="attachMore">attachMore</p>
<p id="addName">addName</p>
However it adds name to all input.
My question is how to add name input each of the inputs?
Thanks in advance for the help. Cheers.

Are you looking for something like this?
$('#addName').click(function(){
$('input').each(function(){
var input = $(this);
input.attr("name", input.val());
});
});
$(document).ready(function() {
$('#attachMore').click(function() {
var moreUploadTag = '';
moreUploadTag += '<input type="text"/>';
jQuery(moreUploadTag).detach().appendTo("#boxed");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxed">
<input type="text" name="" />
</div>
<p id="attachMore">attachMore</p>
<p id="addName">addName</p>

I think the problem is you need to tell jquery what name goes with what input.
var inputHtml = '<div class="inputGroup"><input type="text" /><button class="addName">add name</button></div>';
var yourname = 'allen';
$('.body').on('click', '.addInput', function() {
$('.target').prepend(inputHtml);
});
$('.body').on('click', '.addName', function() {
if($(this).siblings('input').length) {
$(this).siblings('input').attr('name', yourname);
// debug
alert($(this).parent().children('input').attr('name'));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="body">
<div class="target"></div>
<button class="addInput">add input</button>
</div>

How to Hide/Show 'div' using jQuery?

How can I show the text box depending on the user's selection in a dropdown box?
<select name="sites" id="select5" required="yes">
<?php
for($i=0;$i<=128;$i++){
echo "<option>".$i."</option>";
}
?>
</select>
<div id="YES">
Other: <input class="input-text" type="text" name="name"/>
</div>
If the user selects 1 - the text box will not show.
Then if the user selects more than 2 -> the <div id="YES"> will show.
Here's my jQuery:
<script type="text/javascript">
$(document).ready(function(){
$('#YES').hide();
$("#select5").change(function(){
$('#YES').hide('slow');
$("#" + this.value).show('slow');
});
});
</script>
Any suggestions?

You can call the hide/show based on the value of the select like
$(document).ready(function () {
$('#YES').hide();
$("#select5").change(function () {
$('#YES')[this.value > 1 ? 'show' : 'hide']('slow');
});
});
Demo: Fiddle

try this out
$('#select5').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
if(valueSelected == 1){
$('#YES').show();
}
else{ $('#YES').hide();}
});

Develop Reference

JavaScript is the programming language of the Web.

jQuery change values based on attributes - javascript

Related

The button is not added via a variable in the TEXT method

How to set value in Jquery Clone while generating dynamic html

How to get input text value in javascript

append text name to each input

How to Hide/Show 'div' using jQuery?

Categories

Resources