dynamically add input to js d3 - javascript

I am new to d3 and am trying to create a function to dynamically add a certain number of text boxes to an html form, but have not been sucessful. Here is my code. What is the issue?
for (i=0;i<numLines;i++){
var div = document.getElementById('user-input');
div.innerHTML += '<input id="textfield_"+i type="text" value="text_"+i>';
}
Here is the html code:
<div id="container-exp">
<div id="Stage 2">
<center>
<button type="button" id="show-example" value="show-example" class="btn btn-primary btn-lg example"">
Show Example
</button>
</center><br/><br/>
<div class="col-xs-2">
</div>
<div id="passage"></div>
Fill out the below with the information in the above passage. To see an example, please click the button "Show example" above.
</div id="user-input">
<div class="col-xs-2">
<button type="button" id="next" value="next" class="btn btn-primary btn-lg continue">
Next <span class="glyphicon glyphicon-arrow-right"></span>
</button>
</div>

Your code looks fine. I executed it in a jsfiddle, and it created the elements. There must be some other issue.
I tried both cases where user-input element is a <div> as well as a <form>. It worked in both cases.
While we are it, and you can ignore this - You can make some modifications to the code like this:
var elements = "";
for (i = 0; i < 5; i++){
// this is what I assume what you were trying to do in the code
elements += "<input id='textfield_" + i + "'' type='text' value='text_" + i + "''>";
// this is cleaner way, but not supported in older browsers
elements += `<input id='textfield_${i}' type='text' value='text_${i}'>`;
}
var div = document.getElementById('user-input');
div.innerHTML += elements;

In case you want to do it with d3 here is an example
var numlines = 10;
d3.select("#user-input").selectAll(".dummy")
.data(d3.range(numlines))
.enter()
.append("input")
.attr("id", i => `textfield_${i}`)
.attr("type", "text")
.attr("value", i => `text_${i}`);
<script src="https://d3js.org/d3.v5.js"></script>
<div id="passage"></div>
Fill out the below with the information in the above passage. To see an example, please click the button "Show example" above.
<div id="user-input">
<div class="col-xs-2">
<button type="button" id="next" value="next" class="btn btn-primary btn-lg continue">
Next <span class="glyphicon glyphicon-arrow-right"></span>
</button>
</div>
</div>

Related

Cannot change the innerHTML element

I want to change a button inside a td tag (see at the bottom an example).
var tableEntryButton = document.getElementById('slButton' + message.content[1])
delivers correctly the td element I am looking for:
<td id="slButtonAudi" data-value="false">
<button id="slButtonActive" class="btn btn-outline-success btn-sm" type="button" onclick="handleClickOnSSButton(this)">Start</button>
</td>
Here my function that should make the change possible.
Here I distinguish by the ID within the button tag what change I can apply (remove the current start/stop button and add the button with the opposite function)
var tableEntryButton = document.getElementById('slButton' + message.content[1])
let activeButton = '<button id="slButtonActive" class="btn btn-outline-success btn-sm" type="button" onclick="handleClickOnSSButton(this)">Start</button>'
let inactiveButton = '<button id="slButtonInactive" class="btn btn-outline-warning btn-sm" type="button" onclick="handleClickOnSSButton(this)">Stop</button>'
if (tableEntryButton.innerHTML.includes('slButtonActive')) {
tableEntryButton.removeChild(tableEntryButton.firstChild)
tableEntryButton.innerHTML = inactiveButton
}
else {
tableEntryButton.removeChild(tableEntryButton.firstChild)
tableEntryButton.innerHTML = activeButton
}
The if/else allocation works correctly.
It appears that only the changes within the if/else statement are somehow not being applied.
To clarify it here an example.
If this is given:
<td id="slButtonAudi" data-value="false">
<button id="slButtonActive" class="btn btn-outline-success btn-sm" type="button" onclick="handleClickOnSSButton(this)">Start</button>
</td>
it should be changed to that:
<td id="slButtonAudi" data-value="false">
<button id="slButtonInactive" class="btn btn-outline-warning btn-sm" type="button" onclick="handleClickOnSSButton(this)">Stop</button>
</td>
You are not using the innerHtml correctly.
I made you an example that will do exactly what you asked in your last example.
if (tableEntryButton.innerHTML.includes('slButtonActive')) {
//Get the children button.
let button = tableEntryButton.querySelector("#slButtonActive");
if (button) {
tableEntryButton.removeChild(button);
tableEntryButton.innerHTML += inactiveButton;
}
}
Here is the working fiddle:
https://jsfiddle.net/vrtfoh9q/20/
Some documentation:
https://plainjs.com/javascript/manipulation/append-or-prepend-to-an-element-29/
https://www.w3schools.com/js/js_htmldom_nodes.asp
Hope it helps!
you can access children by children property in HTML element and use innerHTML once time like this:
HTML
<div id="div1">
<button id="btn1Active">Active</button>
</div>
JS
let divTarget = document.getElementById('div1'),
child = divTarget.children[0],
btnActive = '<button id="btn1Active">Active</button>',
btnInactive = '<button id="btn1Inactive">Inactive</button>'
if (child.id == 'btn1Active') divTarget.innerHTML = btnInactive
else divTarget.innerHTML = btnActive
CodePen example
https://codepen.io/bragamonte/pen/PBLojZ

html validation on button or hidden filed

wondering if anyone can help. As part of a form, i'm using a selection of buttons to capture satisfaction, rather than radio or dropdown. I'm using a jquery to capture the value of the button and adding it to a hidden field - the field the form is using to submit the information.
All works fine, however, i want to put validation, to make sure an answer is captured - but HTLM5 validation does not support buttons or hidden fields. Is there a was i can use JS to check if a button has been pressed on submit, and if not, toggle the html validator for that field?
Here the code i have so far;
<div class="form-group">
<label class="control-label required input_satisfaction" for="feedbackQuestions[56]">Please rate the venue facilities: <span class="required ">*</span></label>
<input required="required" type="hidden" name="feedbackQuestions[56]" id="feedbackQuestions_56">
<div id="feedbackQuestions_56_group" class="row">
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][0]" value="Excellent">Excellent</button></div>
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][1]" value="Good">Good</button></div>
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][2]" value="Satisfactory">Satisfactory</button></div>
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][3]" value="Poor">Poor</button></div>
</div>
<script>
$('#feedbackQuestions_56_group .satisfactionBtn').click(function (e) {
e.preventDefault();
$('#feedbackQuestions_56_group .satisfactionBtn').each(function( index ) {
$( this ).removeClass('active');
});
var thisval = $(this).val();
$('#feedbackQuestions_56').val(thisval);
$(this).addClass('active');
});
</script>
</div>
I know i need to add a trigger to the submit button futher down the page, so i can do a jquery .click() and then prevent the event until i've checked, but not sure how to actually check or how to trigger the validation.
I would actually store it as a global JS variable rather than a hidden field. you can reparse this value to the hidden field through jQuery if you want, but I don't see a use in that. Also divs are selectable in JS as well, so you do not need them to be just one or the other.
var isSelected = false;
$('#feedbackQuestions_56_group .satisfactionBtn').click(function (e) {
e.preventDefault();
$('#feedbackQuestions_56_group .satisfactionBtn').each(function (index) {
$(this).removeClass('active');
});
var thisval = this.id;
console.log("thisval: " + thisval);
$('#feedbackQuestions_56').val(thisval);
$(this).addClass('active');
isSelected = true
});
$('#onSubmit').click(function () {
console.log(isSelected);
//
// Look into ajax post command
//
if (isSelected == true) {
// ajax call here
}
else {
alert("Please select a rating")
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="form-group">
<label class="control-label required input_satisfaction" for="feedbackQuestions[56]">Please rate the venue facilities:
<span class="required ">*</span>
</label>
<div id="feedbackQuestions_56_group" class="row">
<div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block" name="Questions[56][0]" id="Excellent">Excellent
</div>
<div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block" name="Questions[56][1]" id="Good">Good
</div>
<div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block" name="Questions[56][2]" id="Satisfactory">Satisfactory
</div>
<div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block" name="Questions[56][3]" id="Poor">Poor
</div>
<div class=" btn btn-primary btn-lg btn-block" id="onSubmit">Submit</div>
</div>
Since that hidden field value is filled by code not user, code should validate the value(or no need to validate).
It sounds really strange that the hidden field need to be validated.
Edited
If you really need to validate hidden field, the original way is not working, but you can do it tricky by just add opacity:0 style.
Add such style make it invisible but not hidden, so the validate should work fine as usual.
But just remember you must change the type="hidden" to type="text"

On button click except values of two element and show result

I have total 3 elements
TextBox
DropDown
Button
What I want is... On Button Click It should Take the parameters from TextBox & DropDown and return the data on Button Click
this.html
<div class="input" div id="Searching"><input type="text" name="Search" id="Search" class="ContextualSearchField" placeholder="Search" size="40" value=""/></div>
<div class="dropdown">
<button class="dropbtn">Searchâ–¼</button>
<div id="myDropdown" class="dropdown-content">
<a id="Alert" type="button" class="btn btn-lg btn-default" href="#">Alert</a>
<a id="IR" type="button" class="btn btn-lg btn-default" href="#">Incident Report</a>
<a id="Site" type="button" class="btn btn-lg btn-default" href="#">Site</a>
<a id="Devices" type="button" class="btn btn-lg btn-default" href="#">Devices</a>
</div>
</div>
<button type="submit" onclick="SearchContext()" id="searchbutton">Search Now</button>
this.js
var Search = document.getElementById("Search").value;
alert(Search);
Dropdown = document.getElementById("myDropdown").value;
SearchButton = document.getElementById("searchbutton").value;
var Alert = document.getElementById("Alert").value;
var IR = document.getElementById("IR").value;
var Site = document.getElementById("Site").value;
var Devices = document.getElementById("Devices").value;
I have also created service for them in jquery.services.js
just tell me how to put those parameter on button
Just put an event listener on your button than do your things in this scope.
document.querySelector('.dropbtn').addEventListener('click',function(){
//do your required things in here. E.g:
var Site = document.getElementById("Site").value;
var Devices = document.getElementById("Devices").value;
});
If you want to put them in a element, just add parameter to element. E.g:
<button id="example" lang="tr" user-id="15" target="Search">Click me</button> and for take this parameters from JS, do like this with using HTML element function getAttribute():
var lang = document.getElementById('example').getAttribute('lang');
var user_id = document.getElementById('example').getAttribute('user-id');

JQUery change value of variable on button click with return

i am trying to make a questionaire that once completed by the user will give an response dependent on their answer. i decided to do this via making variables for each answer which get +1 dependending on their click. and at the end display the variable with the highest value. seems simple enough but for some reason variables not responding to changes on clicks
heres my code
HTML
<div class="container contentContainer text-center" id="top-Container">
<div class="row">
<div class="col-md-12">
<div id="questions"></div>
<div id="answer"></div>
<div id="buts">
<input id="a1" class="btn btn-success" type="button" value="a">
<input id="b1" class="btn btn-success" type="button" value="b">
</div>
<div id="buts2">
<input id="a2" class="btn btn-success" type="button" value="do you prefer a ">
<input id="b2" class="btn btn-success" type="button" value="b">
</div>
JS
<script>
var ansa ="this is answera";
var ansb ="this is answerb";
//questions//
var Q1 = "do you prefer answerb ?";
var Q2 = "do you prefer answera?";
$("#questions").html(Q1);
for (var i=0; i<15; i++) {
$("#buts"+[i]).hide();
}
//need more diagnosises//
var answera=0;
var answerb=0;
$("#a1").click(function(){
answera+=1;
$("#questions").html(Q2);
$("#buts").hide();
$("#buts2").fadeIn();
});
$("#b1").click(function(){
answera+=1;
$("#questions").html(Q2);
$("#buts").hide();
$("#buts2").fadeIn();
});
//Is it affected by hot or cold//
$("#a2").click(function(){
answerb+=1;
answera+=1;
$("#questions").html(Q3);
$("#buts2").hide();
});
$("#b2").click(function(){
answerb+=1;
$("#questions").html(Q3);
$("#buts2").hide();
});
console.log(answera);
console.log(answerb);
if (answera>answerb) {
$("#answers").html(ansa);
}else {
$("#answers").html(ansb);
}
</script>
$("#questions").html(Q3);
Q3 is not defined
#answers should be changed to #answer, because the id of div that you have assigned, is answer.

Why this submit function in Meteorjs doesn't work?

I have a form which consists of 7 questions. I ask them individually using display:none. But the problem is that submit function doesn't work. When I click it, it just redirects back to the first question and url turns to - http://localhost:3000/?problem=&why1=&why2=&why3=&why4=&why5=&solution=&submit-all=Answer . I really need help with this please. Below is code for HTML template and JavaScript submit function to submit in Problems collection.
<template name="submitProblem">
<div class="container">
<div class="main-page">
<form class="text-center">
<div id="submit-problem">
<input autofocus="autofocus" type="text" name="problem" id="problem" placeholder="What's the problem ?"/>
<input type="button" id="route" value="Find Its Route" class="route btn btn-sample">
</div>
...
submit-why1 - submit-why4
...
<div id="submit-why5" class="hidden">
<input autofocus="autofocus" type="text" id="why5" class="" name="why5" placeholder="This problem exists, because..."/>
<input type="button" value="Answer" class="btn-success btn answer5">
<button class="btn back5 back-btn"><i class="fa fa-arrow-left fa-3x"></i></button>
</div>
<div id="submit-solution" class="hidden">
<input autofocus="autofocus" type="text" name="solution" id="solution" placeholder="What could be the best solution ?"/>
<input type="submit" id="submit-all" name="submit-all" value="Answer" class="btn btn-primary submit-all">
<button class="btn back6 back-btn"><i class="fa fa-arrow-left fa-3x"></i></button>
</div>
</form>
</div>
</div>
</template>
Template.submitProblem.events({
'submit .submit-all':function() {
event.preventDefault();
var problem = $(event.target).find('[name=problem]').val();
var why1 = $(event.target).find('[name=why1]').val();
var why2 = $(event.target).find('[name=why2]').val();
var why3 = $(event.target).find('[name=why3]').val();
var why4 = $(event.target).find('[name=why4]').val();
var why5 = $(event.target).find('[name=why5]').val();
var solution = $(event.target).find('[name=solution]').val();
Problems.insert({
problem: problem,
why1: why1,
why2: why2,
why3: why3,
why4: why4,
why5: why5,
solution: solution,
submitdate: new Date()
});
console.log(problem + why1 + why2 + why3 + why4 + why5 + solution);
Router.go('submitted');
}
});
You need to pass the event as the first parameter to your handler:
submit: function(event) {
event.preventDefault();
...
Otherwise it won't be defined, the default action (a POST) won't be prevented, and your page will reload.

Categories

Resources