Develop Reference

Display value in input in html

I have the following code for html:
<label for="">Input</label>
<input type="text" name="" id="input_01" placeholder="Enter some text">
<label for="">Output</label>
<input type="text" name="" id="ouput_01">
<script>
var input_01 = document.getElementById("input_01")
var output_01 = document.getElementById("output_01")
input_01.addEventListener('keyup',function(){
output_01.value = input_01.value
})
</script>
I want to display the input value as the output. However, I found that the command "output_01.value = input_01.value" doesn't work and there is nothing displayed. I do not know why and do not know how to solve this problem. How can I display the content of an input in 'ouput_01'? Thank you.

make sure you don't have typo in your code.
change from
<input type="text" name="" id="ouput_01">
to
<input type="text" name="" id="output_01">

your INPUT tag output ID does not match the one on your javascript DOM and this output_01.value = input_01.value is wrong, instead you should add event to your function parameter in your Event Listener then assign your event.target.value to your output DOM value
<label for="">Input</label>
<input type="text" name="" id="input_01" placeholder="Enter some text">
<label for="">Output</label>
<input type="text" name="" id="output_01">
<script>
var input_01 = document.getElementById("input_01")
var output_01 = document.getElementById("output_01")
input_01.addEventListener('keyup', function(event) {
output_01.value = event.target.value
})
</script>

Creating multiple HTML elements with JavaScript. Dynamic forms?

I'd like to insert a block of HTML into the DOM when a checkbox or radio button or button is pressed.
For example, when a button is pressed, then another set of the labels and inputs below are added to the form.
<form class="details">
<div>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
<label for="job">Job:</label><br>
<input type="text" id="job" name="job"><br>
<label for="id">ID:</label><br>
<input type="text" id="id" name="id">
<label for="shoesize">Shoe size:</label><br>
<input type="text" id="shoesize" name="shoesize"><br>
<label for="helmetsize">Helmet size:</label><br>
<input type="text" id="helmetsize" name="helmetsize">
</div>
</form>
Every time a button is pressed I'd like another set of fields where someone else can add their details to the form.
I am aware of document.createElement(), but it seems like I can only create 1 element at a time using that. This form will probably grow and so would like something less verbose.
I've experimented with appendChild() e.g.
var details = document.getElementsByClassName('details')[0]
var newDetailsSection = '<div>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
<label for="job">Job:</label><br>
<input type="text" id="job" name="job"><br>
<label for="id">ID:</label><br>
<input type="text" id="id" name="id">
<label for="shoesize">Shoe size:</label><br>
<input type="text" id="shoesize" name="shoesize"><br>
<label for="helmetsize">Helmet size:</label><br>
<input type="text" id="helmetsize" name="helmetsize">
</div>'
details.appendChild(newDetailsSection)
But I am getting an error because newDetailsSection is not of type Node - it is a string and I understand that.
I am new to web development.
Is this a use case for a JS framework that handles components? Is this what a component is?

if u want to add html string; innerHTML is your friend.
to append use details.innerHtML = details.innerHtML + newSectionHTML;
ofcourse i would recommend using document.createElement and create a function that returns element that contain label:
example:
function creatInput(name, label){
const labelElm = document.createElement('label');
const inputElm = document.createElement('input');
labelElm.setAttribute('for', name);
labelElm.innerText = label+':';
inputElm.setAttribute('name', name);
inputElm.setAttribute('id', name);
inputElm.setAttribute('placeholder', label);
labelElm.appendChild(input);
return labelElm;
}
this way you can reuse it for all your input simply call:
var details = document.querySelector(".details");
details.appendChild( createInput('fname','First name') );
details.appendChild( createInput('lname','Last name') );
/// .. etc

the function i set for my html button isn't working

i set a function for my button but the button doesn't follow it and it isn't being used anywhere else either
<div id="main2" class="main">
<form>
<label class="Courier" for="EventName"></label><br/>
<input class="Courier" required type="text" id="EventName" placeholder="Event name"><br/>
<input class="Courier" required type="Text" id="location" placeholder="venue"><br/>
<input class="Courier" required type="Text" id="DateAndTime" placeholder="Date and time"><br/>
<input class="Courier" required type="Text" id="Duration" placeholder="Duration"><br/>
<input class="courier" required type="Text" id="Clothing" placeholder="Dress code"><br/>
<input class="courier" required type="Text" id="Food" placeholder="Food"><br/>
<textarea class="courier" id="Notes" name="Notes" rows="4" cols="50">Enter additional notes here</textarea><br/>
<button id="submitEvent">Submit</button>
</form>
<br/>
<div id="newEvent"></div>
</div>
Javascript for the button below
$('#submitEvent').on('click' , function submitEvent(){
var event = $('#EventName');
var location = $('#location');
var DateAndTime = $('#DateAndTime');
var Duration = $('#Duration');
var Clothing = $('#Clothing');
var Food = $('#Food');
var Notes = $('#Notes');
var data ={
event: event,
location:location,
DateAndTime: DateAndTime,
Duration: Duration,
Clothing: Clothing,
Food: Food,
Notes: Notes
};
var eventRef = database.ref('Events');
var newEventRef = eventRef.push(data, function(err) {
if (err) {
console.error('Error Saving Data', err)
}
else{
console.log('success saving data');
$('#EventName').val('');
$('#location').val('');
$('#DateAndTime').val('');
$('#Duration').val('');
$('#Clothing').val('');
$('#Food').val('');
$('#Notes').val('');
}
})
})
i expect it to submit this to at least put on the console that the upload to firebase was successful or not but it doest do either it just refreshes my page to index.html and instead of the usual url it will be http://localhost:63342/Event%20Planner/www/index.html?Notes=1
when its usually
http://localhost:63342/Event%20Planner/www/index.html

Change this:
$('#submitEvent').on('click' , function submitEvent(){
to this:
$(document).on('click', '#submitEvent', function(){
I presume you are using .on() because the #submitEvent button is added dynamically. However, you must attach the .on event to an element that already exists when the DOM is initially rendered -- $(document) is a safe and common choice.
Reference:
Event delegation

I recommend you use the submit method https://api.jquery.com/submit/
<form id="yourFormName">
<label class="Courier" for="EventName"></label><br/>
<input class="Courier" required type="text" id="EventName" placeholder="Event name"><br/>
<input class="Courier" required type="Text" id="location" placeholder="venue"><br/>
<input class="Courier" required type="Text" id="DateAndTime" placeholder="Date and time"><br/>
<input class="Courier" required type="Text" id="Duration" placeholder="Duration"><br/>
<input class="courier" required type="Text" id="Clothing" placeholder="Dress code"><br/>
<input class="courier" required type="Text" id="Food" placeholder="Food"><br/>
<textarea class="courier" id="Notes" name="Notes" rows="4" cols="50">Enter additional notes here</textarea><br/>
<button type="submit">Submit</button>
</form>
And then
$( "#yourFormName").submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
Cheers!

Material input label is not working properly?

Im fill data into the model and it shown like this way.
after click input field display this way.
this is blade (model-edit-users)
<div class="md-form col-md">
<input type="text" id="name" name="name" class="form-control" required>
<label for="name" class="">User Name</label>
</div>
this is javascript code i used.
$('#users_view_table tbody').on('click', '#editUser', function (e) {
e.preventDefault();
var data = oTable.row($(this).parents('tr')).data();
var dataname = data.name;
$("#model-edit-users").modal('show');
$('#model-edit-users').on('shown.bs.modal', function () {
$('#name').val(dataname);
});
});
anyone help me to solve this UI issue

You can try to use <md-input-container> like following
<md-input-container>
<label>User Name </label>
<input type="text" id="name" name="name" class="form-control" required>
</md-input-container>

passing data from Javascript to Laravel controller

I'm getting the error of MethodNotAllowedHttpException when I run the below code:
<h1>Temp Form</h1>
<form method="post" action="" role="form">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="panel panel-default ">
<div class="container">
<div class="panel-body">
<div class="form-group">
<label for="firstName">First Name *</label>
<input name="fname" type="text" class="form-control" id="firstName" placeholder="Enter First Name" required>
</div>
<div class="form-group">
<label for="lastName">Last Name *</label>
<input name="lname" type="text" class="form-control" id="lastName" placeholder="Enter Last Name" required>
</div>
<div class="form-group">
<label for="qualification">Qualification *</label>
<input name="qualification" type="text" class="form-control" id="qualification" placeholder="BE, MCA, MBA Etc." required>
</div>
<div class="form-group">
<label for="emailAddress">Email address *</label>
<input name="email" type="email" class="form-control" id="emailAddress" placeholder="Enter Email" required>
</div>
<div class="form-group">
<label for="contactmessage">Message</label>
<textarea name="desc" type="text" class="form-control" id="contactmessage" placeholder="Message" rows="2"></textarea>
</div>
<input type="submit" id="add" class="btn btn-primary" onclick="addUpdateData(id)" value="Add"></button>
</div>
</div>
</div>
</form>
Code for routes.php :
Route::post('welcome/addupdate','FormController#addUpdateData');
code for controller :
public function addUpdateData(Request $req)
{
$id = $req->input('id');
if($id=="add")
{
$bs = new Basicusers;
$bs->fname = $req->fname;
$bs->lname = $req->lname;
$bs->qualification = $req->qualification;
$bs->email = $req->email;
$bs->desc = $req->desc;
$bs->save();
return "Data Successfully Added";
}
}
What I want is, when user clicks on add button, value in variable data add is passed, and on controller, I will check value for variable and if its add, than I will perform add operation.
meanwhile if the user click on edit button which is provided below in form, that row will be filled in form elements and the add button is changed to update button and value of variable data will be now update and I want to perform update operation...
I'm getting error when I am passing data using POST method
moreover I don't know how to get data passed using POST method..
for GET method I am using $id = Input::get('id'); method and its working
Here is JavaScript Function :
function addUpdateData(data) {
$(function() {
$.ajax({
method: "post",
url: "welcome/addupdate",
data: {
id: data
},
success: function(response) {
alert(response);
}
});
});
}

Try to use absolute path in your ajax request: url: "/welcome/addupdate"

Add a some ID for your form (ex. #form) and pass into the addUpdateData function serialized data from the form.
$('#add').on('click', function(e) {
e.preventDefault();
var data = $('#form').serialize();
addUpdateData(data);
});
Add also a input field as hidden type into the form which should have an ID of the existing resource. Then on the controller action you can get an array of the passed data and if if the ID of the resource exists the perform update. If not then create them.