We Keep Coding

creating a form rows and cols with flex

I am attempting to format a form to look like the image below using flex:
<div class="wrapper">
<div class="user-info-container">
<div class="row">
<div class="flex-field">
<label for="fname" >First Name: </label>
<input type="text" class="firstname">
</div>
<div class="flex-field">
<label for="lname" >Last Name: </label>
<input type="text" class="lastname">
</div>
</div>
<div class="row2">
<div class="flex-field">
<label for="Email" >Email: </label>
<input type="text" class="email">
</div>
<div class="flex-field">
<label for="phonenumber" >Phone Number: </label>
<input type="text" class="phone-number">
</div>
</div>
</div>
<label for="request">Request Details:</label>
<div class="flex-field request">
<textarea class="rdetails"></textarea>
</div>
The above is the html code that I am using and I am having trouble styling it to look like the above using flex

Use an outer box with flex-column
Then make two new divs inside. The upper one with flex-row and the other one with flex-column again.
In the bottom one, you put in the text and the input field.
In the upper one, you put two identical (text differs) div with flex-column. In these two, you each put two div with flex-row and inside it the text and the input field.
Using tailwindcss you get something like this:
https://play.tailwindcss.com/lrP8uzlzkX
Hope this helps.

JS: show textarea field on input change

I've a form that should show a textarea when usr uploads a file.
I need to show a textarea field if user uploads an imagen, in an image field. However, actually my code does not do that, even provided that the javascript is inside the html.
Here is the CODEPEN for this:
https://codepen.io/ogonzales/pen/GPZBjL
I've this JS, but does not recognize when user uploads a file, what should I change on my code?
<script>
$(function () {
$("input:file").change(function () {
var fileName = $(this).val();
if (fileName != "") {
$("#instrucciones-adicionales").show();
} else {
$("#instrucciones-adicionales").hide();
}
});
});
</script>
html:
<div class="row padding80-top">
<div class="col-md-3 mb-4"></div>
<div class="col-md-6 mb-4">
<p class="text-size60 bold-font">Sube tu imagen</p>
<form method="POST" enctype="multipart/form-data" action="">
<input type="hidden" name="csrfmiddlewaretoken" value="feLAxC4KQTvAL532BafNKadPOsGOq1OTwLCS6GNReJ3z7lXvIhDRUOE0s0dsnkjU">
<div class="form-group">
<div id="div_id_image" class="form-group">
<label for="id_image" class="col-form-label ">
Image
</label>
<div class="">
<input type="file" name="image" accept="image/*" class="clearablefileinput" id="id_image">
</div>
</div>
<div id="instrucciones-adicionales" style="display:none">
<p class="bold-font"> Instrucciones adicionales (opcional):</p>
<div id="div_id_comment" class="form-group">
<label for="id_comment" class="col-form-label ">
Comment
</label>
<div class="">
<textarea name="comment" cols="40" rows="10" class="textarea form-control" id="id_comment">
</textarea>
</div>
</div>
</div>
</div>
</br>
</br>
<p>O, sáltate este paso y envía tu arte por correo electrónico</p>
<button type="submit" class="btn btn-naranja text-white btn-block">Continuar
</button>
</form>
UPDATE 1:
The problem was that the call to the JQUery was at the bottom, before body closing tag.
What should I change in my code, so keeping the call to Jquery at the bottom, it shows the textarea field when user uploads image?

You don't have jQuery enabled on your pen. You need to add it by hitting the cog icon at the top of the JS pane, and adding it there.
Even in Codepen, you can use the developer console of your browser to see what errors are being generated by your code. In this case, you would see:
Uncaught ReferenceError: $ is not defined
This tells you that jQuery is not being loaded.

How to 'recompute' the width of elements in a Materialize row after dynamically inserting an element?

I'm trying to write a jQuery script which moves an input and its corresponding label outside of its parent div and places if after, in a separate div:
$("input[id*='-clear_id']").add("label[for*='-clear_id']").wrapAll("<div class='clear-button-wrapper'/>")
$('.clear-button-wrapper').parent().after($('.clear-button-wrapper'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<form>
<div class="row">
<div class="file-field input-field col s12">
<label class="active" for="id_headshot">Headshot</label>
<div class="btn">
<span>File</span>
Currently: IMG_3515.png
<input type="checkbox" name="headshot-clear" id="headshot-clear_id" />
<label for="headshot-clear_id">Clear</label><br />
Change:
<input type="file" name="headshot" id="id_headshot" />
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</div>
</form>
What I notice, however, is that the element after that, the div with the class file-path-wrapper, gets moved down because it no longer fits in the <div class="row"> (note how the underline no longer aligns with the bottom of the button):
I've also seen similar behavior with other content that is dynamically added to Materialize tables. It seems like Materialize computes the width of each element 'upfront', and does not adjust the width to accommodate block elements added dynamically later.
Ideally, I'd like to call something like Materialize.refresh() to recompute the width of the elements with the newly inserted content. Is this possible?

To solve this particular problem, I finally just added the class 'right' to the wrapAll argument. This makes the 'Clear' input float to the right and everything fits on one row again:
$("input[id*='-clear_id']").add("label[for*='-clear_id']").wrapAll("<div class='clear-button-wrapper right'/>")
$('.clear-button-wrapper').parent().after($('.clear-button-wrapper'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<form>
<div class="row">
<div class="file-field input-field col s12">
<label class="active" for="id_headshot">Headshot</label>
<div class="btn">
<span>File</span>
Currently: IMG_3515.png
<input type="checkbox" name="headshot-clear" id="headshot-clear_id" />
<label for="headshot-clear_id">Clear</label><br />
Change:
<input type="file" name="headshot" id="id_headshot" />
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</div>
</form>
Here is how the result looks:

How to Clean input file Bootstrap field

Person,
I have a page with 2 input text and 2 input file when I get the ajax response, send clear the entire form as the code below, but only a field is not cleared the field:
Here my page
<input class="fileUploadAudio" id="fileUploadAudio" name="fileUploadAudio" type="file"></span>
I believe we should have some conflict, I have done everything and I can not clear this blessed country.
PS: If you need I publish the page to take a look.
<div class="form-group">
<label class="col-sm-3 control-label">Imagem para Push</label>
<div class="col-sm-6">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://placehold.it/190x140/7761A7/ffffff" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
<div>
<span class="btn btn-primary btn-file"><span class="fileinput-new">Selecionar imagem</span><span class="fileinput-exists">Alterar</span>
<input class="arquivo" id="arquivo" name="arquivo" type="file"></span>
Remover
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Áudio para a campanha</label>
<div class="col-sm-6">
<div class="fileinput fileinput-new" data-provides="fileinput">
<input name="..." value="" type="hidden">
<span class="btn btn-primary btn-file"><span class="fileinput-new">Selecionar áudio</span>
<span class="fileinput-exists">Alterar</span>
<input class="fileUploadAudio" id="fileUploadAudio" name="fileUploadAudio" type="file"></span>
<span class="fileinput-filename"></span>
×
</div>
</div>
</div>
In return I send ajax clear the form fields like this:
$(".formulario")[0].reset();
$(".formulario").get(0).reset();
$('#cancelButton').hide();
$("#fileUploadAudio").val("");
$('#submitButton').hide();
I have even tried to clear only the input file this way:
$('#fileUploadAudio').val('');

I assume that you are trying to reset the whole form.
Change the outer div tag to formas followings:
Replace
<div class="form-group">...</div>
with
<form class="form-group" id="formulario">...</form>
Reset form using jQuery
$("#formulario")[0].reset();

if native java script reset function is not working you need to trigger the reset function
$("#formulario").trigger("reset");

How is user input submitted in bootstrap 3 form?

I'm using bootstrap 3, which includes jquery 1.11.2.min.js. I'm updating a search webpage with two textfields: keyword and city,state,zip. I have a script for the search results that needs to pull the user input that's typed into these two search textfields for finding the desired search results.
Visual explanation:
My search bar with placeholders and search button:
My search bar with my user input (searching for an engineering job in Boston):
In the HTML, there is no unique value (value="Engineer" or value="Boston") created for my engineering job in Boston search:
Without value="Engineer" and value="Boston" I cannot tell my script to display search results of engineering jobs in Boston. Where do I find/create this to pull into my search script?
Is this located in the bootstrap.js file anywhere? I'm having trouble figuring out where/how this form is pulling the user input value (without having to use value="" for each input).
Your help is much appreciated - my form is below.
<div id="somebanner" class="somebanner-bgsearch-red hero1 hidden-xs">
<div class="container-fluid">
<div class="top-section">
<div class="container">
<form class="form-inline no-margin center-block" action="http://www.somesite.com/unknown" method="POST" role="form">
<div class="row">
<center>
<fieldset>
<!-- Search input-->
<div class="form-group center-block">
<div class="col-sm-4">
<input id="keyword" name="keyword" type="search" placeholder="Keyword" class="form-control input-lg">
</div>
</div>
<!-- Search input-->
<div class="form-group center-block">
<div class="col-sm-4">
<input id="location" name="location" type="search" placeholder="City, State, or Zip Code" class="form-control input-lg">
</div>
</div>
<input type="hidden" name="unknown" value="unknown">
<!-- Button -->
<div class="form-group center-block">
<div class="col-sm-2">
<button type="submit" id="btn-search" name="btn-search" class="btn btn-primary btn-lg btn-tusaj">Search</button>
</div>
</div>
</center>
</fieldset>
</div>
</form>
</div>
</div>
</div>
</div>
Here's the link to the bootstrap.js code: http://getbootstrap.com/dist/js/bootstrap.js
Herer's the link to the jquery code:
https://code.jquery.com/jquery-1.11.2.js

You're trying to use Bootstrap for modifying HTML, but Bootstrap is a CSS framework used for responsive design. It's incapable of doing such HTML modification. You need to use jQuery:
$(document).ready(function(){
$("#btn-search").click(function(e){
e.preventDefault();
var x = $("#keyword").val();
var y = $("#location").val();
$("#keyword").attr("value", x);
$("#location").attr("value", y);
});
});
That should do the work. If you have further questions, let me know in the comments.