Javascript - How can we show popup-balloon with code? - javascript

if we have this code
<form>
<input required oninvalid="this.setCustomValidity('error messege')" />
<input type="submit">
</form>
when we click the submit button, the balloon is shown that contains error messege text...
now if we want to trigger this balloon to show what can we do ?
for example we have this HTML code :
<input id="myTextBox" >
<input type="button" onclick="showBalloon()" >
<script>
function showBalloon(){
var elem = document.getElementById('myTextBox');
elem.setCustomValidity('error messege');
// my problem is HERE !!!
elem.whichFunctionShouldICallOrWhatToDo(); // this shows balloon of myTextBox
}
</script>

I think you've got the main functionality down, you just need an HTML element, and to modify the style to show or hide.
<div id='myTextBox' style="display: none;"></div>
// i'd set it in your javascript, but you get the idea
elem.innerHTML = 'error message';
elem.style.display = 'visible'; //show

Related

Why does my attempt to add a new row to my table (made w/o a table element) keep showing up and disappearing?

I'm trying to make a table in Javascript that does not use a table element, and I'm using pure vanilla nodeJS. I can get a new row to show up very briefly, but it disappears when I hit the button that made it show up in the first place. My code is:
<!DOCTYPE html>
<html>
<body>
<h1> Title Tests </h1>
<div id="Experiments">
<form id="Exp">
<input type="text" name="url box" placeholder="publisher URL"><br>
<div class="Title">
<input type="text" name="title box" placeholder="Test Title"><br>
</div>
<button id="addButton" onclick="newRow()">+</button><br>
<input type=submit value="Submit">
</form>
</div>
<script>
function newRow(){
var number = 2;
var newTitleRow = document.createElement('div');
newTitleRow.setAttribute('id',`Title${number}`);
var newBT = document.createElement('input');
newBT.setAttribute('type','text');
newBT.setAttribute('name',`title box ${number}`);
newBT.setAttribute('placeholder','Test Title');
newTitleRow.appendChild(newBT)
var button = document.querySelector("#addButton");
button.before(newTitleRow);
number++;
}
</script>
</body>
</html>
The problem is that you're using a html <button> inside a <form> element. This means it will automatically act as a submit button unless you declare it to be something different. So as soon as you push the + button it will try to submit the form to an undefined URL.
To work around you need to define that + button to be of type "button" like:
<button type="button" id="addButton" onclick="newRow()">+</button><br>

how do I make it so when I click a button from a foreach list, it only activates the button in that specific list?

So I have some buttons that will toggle some input text areas where I can send a message, how do I make it so when I click a button from a specific list, it only activates the button in that specific list.
I tried so many other things but I really don't know how to get this over it.
I'm kinda new to JS, I mainly do Java.
function showFeedback (list) {
var lines = "";
var counter = 0;
list.forEach(function (obiect) {
$(document).ready(function(){
$("button").click(function(){
$("#div"+ obiect.idfeedback +"").fadeToggle("slow");
});
});
counter++;
var style = "";
if(obiect.feedbackType == 1){
style = "style=\"background: green;\"";
} else if(obiect.feedbackType == 0){
style = "style=\"background: red;\"";
}
lines += `<div class="page-block"><div style="text-align: right">X</div><div class="cv-block" ${style} >
<div id="parent_div_1">
Name: ${obiect.firstn}
${obiect.lastn}
</div>
<div id="parent_div_2" style="float: right">
Date: ${obiect.date}
</div>
<div class="message_div"><p>${obiect.message}</p></div>
</div>
<button>Contact</button>
<div id="div`+ obiect.idfeedback +`" style="display: none">
<form action="contact" method="post">
<textarea name="message" id="umessage" cols="30" rows="10" maxlength="450" placeholder="Type your message here..." style="height:115px;width: 620px"></textarea>
<input type="hidden" name="email" id="umail" value="`+obiect.email+`">
<input type="hidden" name="action" value="feedback">
<div><input type="submit" value="Send Email"></div>
</form>
</div>
</div>`;
}); if(counter==0){
lines+= `<div class="page-block">No feedbacks to review.</div>`;
}
$("#obiect").html(lines);}
Get rid of $(document).ready, it is used to make sure the markup has been loaded before assigning events. In your scenario, markup is being generated dynamically, plus document.ready inside a loop does not make sense.
The simplest way to fix this code is to move the $('button') outside the loop. After the loop, do the following
$('button').click(function(){
$(this).next().fadeToggle("slow");
})
What this code does is add a handler on the click event of every button element, when the button's clicked, it finds the element which is placed next to the button element, which in your case is the required div element, and show that.

How do i add custom code from a user inside the <head> tag

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);
}

create a preview of html page with input passed by user

i have a html page in witch a user can insert data with input type text or textarea. he can press a preview button for create a preview. When he press the button, the preview has to opened in other page.
For realize this, I thought to create a fake html page with data passed by user. someone knows how to pass data in other html page with js?
HTML
<input type="text" id="title" value="" onclick="" />
<textarea id="text" onclick=""> </textarea>
JS
$(document).ready(function(){
var title= $('title')
var text= $('text')
//open another page with this data
});
Use localStorage, sessionStorage, or if it were me, I would use window.open without a url in combination with jquery to simply build the second page from the first page.
You can see the a JSFiddle here.
<input type="text" id="title" value="" onclick="" />
</br /> body:
<textarea id="body" onclick=""> </textarea>
<br />
<button class="open-write">
show page (document.write)
</button>
</br />
<button class="open-jquery">
show page (jquery)
</button>
$('.open-write').on('click', function() {
let title = $('#title').val();
let body = $('#body').val();
let handle = window.open();
handle.document.write(body);
handle.document.title = title;
});
$('.open-jquery').on('click', function() {
let title = $('#title').val();
let body = $('#body').val();
let handle = window.open();
let $body = $(handle.document.body);
$body.html(body);
handle.document.title = title;
});
Note: this will parse and execute javascript.
Try this to dynamically display HTML content in a popup window.
$('<div />').html('hello there').dialog();
The html function is where your content would go.

Popup box doesn't return a value when click ok

Im working with Asp .net MVC3.I'm using text box in viewpage when focusing on a text box popup window will open which contains a textarea and ok button.when click ok populated in viewpage textbox and popup page has to be hided.im using following code,
<input type="text" id ="Comments" class="Comments" value= "value"/>
<div id="popup">
<input type="text" id="content" style="width:243px;height:150px" maxlength="250" cols="70" rows="50"></input>
<input id="popupok" type="Button" value="Ok" />
<input id="popupclose" type="Button" value="Close"/>
</div>
and following is the Jquery,
$(function () {
$('.Comments').focus(function(){
$('#popup').show("slow");
});
$('#popupclose').click(function () {
$('#popup').hide("slow");
});
$('#popupok').click(function () {
var thought = $("#content").val();
$(".Comments").Val()=thought;
$('#popup').hide("slow");
});
});
Im not getting the Content value on the thought variable when click ok.what is wrong in thie above code.some one please help on this
Try this,
$('#popupok').click(function () {
var thought = $("#content").val();
$(".Comments").val(thought); // val function need an argument to set value
$('#popup').hide("slow");
});
Live Demo

Categories

Resources