I'm trying to write this in javascript without using jquery. It basically has two input field: author and quote, and on click should be added to the page.
I'm also trying to save it on the page in case I leave the page. The added quote disappears when i execute the method:
function radd() {
if((document.getElementById("q").value!="") && (document.getElementById("a").value!="")) {
$("#mid-wraper" ).append("<p class='left-bullet'>"+document.getElementById("q").value+"-<span class='yellow-heading'>"+ document.getElementById("a").value+"</span></p>");
document.getElementById("q").value="";
document.getElementById("a").value="";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="but" onClick="radd()">Add</button>
<label for="q">Add ur Quote!</label><input id="q" name="q" />
<label for="a">The author name</label><input id="a" name="a" />
Try this
function radd()
{
if((document.getElementById("q").value!="")&& (document.getElementById("a").value!=""))
document.getElementById("mid-wraper").innerHTML += "<p class='left-bullet'>"+document.getElementById("q").value+"-<span class='yellow-heading'>"+ document.getElementById("a").value+"</span></p>";
document.getElementById("q").value="";
document.getElementById("a").value="";
}
function add(){
//create a new elem
var el=document.createElement("p");
//you can assign id, class , etc
el.id="yourcustomid";
el.textContent="yourcontent";
//then add to the wrapper
var wrapper=document.getElementById("mid-wrapper");
wrapper.appendChild(el);
}
This code shows you how to create a new paragraph and add it to your wrapper js...
You could also do something like this; far more easier in my opinion. Simply create both inputs, but set their attributes to hidden. And using javascript, delete the "hidden" attribute.
<button id="but" onClick="radd()">Add</button>
<input id="q" hidden="hidden" >Add ur Quote!</input>
<input id="a" hidden="hidden">The author name</input>
The JS part:
function radd(){
document.getElementById("q").removeAttribute("hidden");
document.getElementById("a").removeAttribute("hidden");
}
Related
i created a form builder, however, i need to find a way to have the person add their own tracking codes when they publish the forms, these tracking codes go in the code.
<section class="tracking-codes">
<h2> Please enter all tracking codes in here: </h2>
<form>
<input type="text" id="code" placeholder="Facebook Pixel"> </input>
<button type="button" onclick="codes()"> Add Code </button
</form>
</section>
here is my js
function codes ()
{
var trackingCode = document.getElementById('code');
document.head.appendChild(trackingCode);
console.log(trackingCode);
}
at this point, it does append the id of code but only the part of
<input type="text" id="code" placeholder="Facebook Pixel">
and not the user input, how would i go about doing this?
I have also tried the .value at the end of making the var of trackingcodes but it doesnt work.
Instead of adding html to the head section, you should use a hidden field input. Add it like this:
function codes ()
{
var trackingCode = document.getElementById('code').value;
var element = document.createElement('input');
element.type = 'hidden';
element.id = 'tracking';
document.head.appendChild(element);
console.log(trackingCode);
}
i'm curious if its possible to save the text input a user types in the field to localStorage , so in this html example , i'd want to save the innner html from the div#match_player_id , that is created when you click the button
<input type="text" id="contract_year" placeholder="Contract" autocomplete="off">
<input value="Submit" onclick="document.querySelector('#match_player_id').innerHTML = document.querySelector('#contract_year').value" type="button">
<div id="match_player_id"></div>
I recommend you to use a javascript function instead:
<script type="text/javascript">
function updateMatchPlayerId() {
var matchPlayerId = document.querySelector('#contract_year').value;
document.querySelector('#match_player_id').innerHTML = matchPlayerId;
if (typeof Storage !== "undefined") {
localStorage.setItem("matchPlayerId", matchPlayerId);
}
}
</script>
HTML:
<input type="text" id="contract_year" placeholder="Contract" autocomplete="off">
<input value="Submit" onclick="updateMatchPlayerId()" type="button">
<div id="match_player_id"></div>
Firstly, you should really be using unobtrusive event handlers to hook to events instead of the outdated on* event attributes. As you've tagged jQuery in the question this can be done incredibly simply.
From there you can just use localStorage.setItem() to save the value you require, like this:
$('button').click(function(e) {
e.preventDefault();
var contractYear = $('#contract_year').val();
$('#match_player_id').html(contractYear);
localStorage.setItem(contractYear);
});
<input type="text" id="contract_year" placeholder="Contract" autocomplete="off">
<button type="button">Submit</button>
<div id="match_player_id"></div>
Working example
the scenario is like i have a button when it appends onto the page it creates an object with some properties of that object and add that object in an array now the thing i want to do is having that button value and change it to what user want but at the same time it should update in array[object{button{value:''}}] . i tried but what it does is it over writes all button objects and i want every object to have its own value please help me thorugh this
if (ui.draggable.data('type') == "button")
{
document.getElementById('buttonDiv').style.display = "block";
btn_id++;
$( "<br><input type='submit' class='btn' id='btn-"+btn_id+"' value='buttonsss'>" ).text(ui.draggable.text()).appendTo( this ).click(function()
{
var color= button['button'].color=$('#btn_color').val();
var Bcolor= button['button'].Bcolor=$('#btn_bcolor').val();
$(this).css('color',color);
$(this).css('background',Bcolor);
var value= $(this).val($('#btn_value').val());
value= button['button'].value=$('#btn_value').val();
$("#btn_remove").click(function(){
$(this).remove();
arr.splice(ui.draggable.data('type'),1);
document.getElementById('buttonDiv').style.display = "none";
});
});
var button = {
button: {
type: 'button',
color: 'white',
width: '15px',
backgroundcolor:'white',
value: ' My Button',
id:'btn-"'+btn_id+'"',
control:'button',
name:'',
label:'My Button',
type:'',
status:'',
style:'',
left:'',
center:'',
right:'',
}
}
var objectName = "button";
arr.push(button);
//for changing button properties form
<div id="buttonDiv" style="display:none;" class="answer_list" >
color:<br>
<input id="btn_color" type="text" name="color">
<br>
background-color:<br>
<input id="btn_bcolor" type="text" name="Bcolor">
<br>
value:<br>
<input id="btn_value" type="text" value="buttonname" placeholder="set your name">
<br>
Update component:<br>
<input id="update" type="button" value="update"/>
<br>
Remove component:<br>
<input id="btn_remove" type="button" value="remove"/>
</div>
kindly guide me through it would of great help thanks and i hope that everyone can get what iam trying to say.
I was going to leave this as a comment but it became too big.
In your code you mix jQuery selectors with pure Javascript selectors, i.e. document.getElementById('your-id') can all be replaced by $('#your-id'). And then you can do $('#buttonDiv').css('display', 'block') instead.
The other thing is, when you use jQuery syntax $('...'), you are selecting something based on CSS (it expects CSS classes, ids and other related CSS identifiers, like HTML elements tags) therefore your $( "<br><input type='submit' class='btn' id='btn-"+btn_id+"' value='buttonsss'>" ).text() will not find a jQuery object where you can invoke the text method.
However, there is one exception: when you use immediately after the appendTo method like this:
$( "<br><input type='submit' class='btn' id='btn-"+btn_id+"' value='buttonsss'>").appendTo("#buttonDiv")
Or, if you just want to move an existing object inside the buttonDiv then you can do:
$( "#btn_bcolor").appendTo($("#buttonDiv"));
After you do the desired corrections in your code and add the missing variables, people can help you better, and you can use jQuery inside the snippet in your question by selecting it in the dropdown menu of the snippet window at the top.
I have an interactive widget that I want to display on my page. However I also want to give the user the possibility to generate more instances of the same widget and to be able to interact with them simultaneously. As an example, let's say this is my widget:
<div id="my_widget">
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script>
$(document).ready(function() {
$("#up_one").click(function() {
$("#number").val(parseInt($("#number").val())+1);
});
});
</script>
<p>
<input type="submit" id="up_one" value="Up One!"/>
<input type="text" id="number" type="number" value="0" maxlength="2">
</p>
</body>
Now, to display this on my main page I use load(), as follows
$(document).ready(function() {
var i = 0;
$("#hello_submit").click(function() {
$("#hello_div").load("widget_test.html");
});
});
</script>
<div id="hello_div">
<p>
<input id="hello_submit" type="submit" value="New counter" />
</p>
</div>
But there are 2 problems with this. First I can only load the widget once, and second, it would allow the user to navigate directly to widget_test.html, which would defeat the purpose of all this. So I tried another method that involves turning the widget into a long string. To this string I add an index parameter which is used to dynamically generate id and class names, like this:
function BAString(){
this.getBas = function(value){
var bas = '<body><script>$(document).ready(function() {$("#up_one'+value+'").click(function() {\
$("#number'+value+'").val(parseInt($("#number'+value+'").val())+1);});}); </script> <p>\
<input type="submit" id="up_one'+value+'" value="Up One!"/>\
<input type="text" id="number'+value+'" type="number" value="0" maxlength="2"></p></body>';
return bas;
};
In my main page I then use this function:
$(document).ready(function() {
var i = 0;
$("#hello_submit").click(function() {
var b = new BAString();
$("#hello_div").append(b.getBas(i));
i++;
});
});
This second method seems to work great but I can see obvious problems with maintainability as my widget becomes more and more complex. So what is the ideal solution to be used in a case like this?
Well you can make it work with classes instead of Ids
that way you can add multiple widgets with the same function
$(document).ready(function() {
$(document.body).on( "click", ".up_one" ,function() {
$x = $(this).siblings('.number');
$x.val(parseInt($x.val())+1);
});
});
Here's a fiddle that works with just adding HTML
If you want to modify the widget in the future you could just load the external html instead of creating it
I need to enable my button when I type text into my text box. What am I doing wrong?
Code:
<body>
<script>
function IsEmpty(){
if(input1.value!=null){
sendbutton.enabled==true;
}
}
IsEmpty();
</script>
<input class="draft" name="input1" type="text"/>
<button class="send" id="sendbutton" disabled> Send </button>
<ul class="messages">
</ul>
</body>
Change you JavaScript to:
var input1 = document.getElementById('input1'),
sendbutton = document.getElementById('sendbutton');
function IsEmpty(){
if (input1.value){
sendbutton.removeAttribute('disabled');
} else {
sendbutton.addAttribute('disabled', '');
}
}
input1.onkeyup = IsEmpty;
And HTML:
<input class="draft" id="input1" type="text"/>
<button class="send" id="sendbutton" disabled>Send</button>
DEMO
You probably wanted sendbutton.enabled=true;, with a single =. What you've written checks whether they are equal (false, presumably), and then doesn't do anything with the result.
To modify an element at the DOM you need either to use pure Javascript's functionality, let's say getElementById function, or any other Javascript framework.
document.getElementById('sendbutton')
Then refer to the attribute and change it.
You can also use JQuery which will help you heaps. I mean, using selectors.
Hope that helps,
You need to assign an id to your input element.
<input class="draft" name="input1" id='input1' type="text"/>
and in your javascript access it like this:
if(document.getElementById('input1').value != null || document.getElementById('input1').value!='undefined'){
document.getElementById('sendbutton').disabled=false;
}