I am creating a form that will be used to search through a database. The form will have different search criteria in which a user can pick and choose by which variable they want to search (example: name, location, time zone). The form currently has the input type as a button in which I want to create an onclick function that will show an input text field for the user to then enter the value. For example, if the user clicks the "Name" button I want an input text field to appear so that the user can then specify a name. I have tried other ways to get this to work using JavaScript however the values are not being retrieved when I post the form to the PHP file.
an example of the form so far...
<form action="search.php" method="post">
<input type="button" name="name" value="Name" onclick="openInputField()">
<input type="button" name="location" value="location" onclick="openInputField()">
<input type="button" name="timeZone" value="Time Zone" onclick="openInputField()">
javascript for openInputField() is below:
// function that will open input text field when user clicks button
function openInputField(){
var r = document.createElement('span');
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("placeholder", "Name");
var g = document.createElement("IMG");
g.setAttribute("src", "delete.png");
increment();
y.setAttribute("Name", "textelement_" + i);
r.appendChild(y);
g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
r.appendChild(g);
r.setAttribute("id", "id_" + i);
document.getElementById("myForm").appendChild(r);
}
this opens the text field however upon submit the value is not printing from the PHP file.
$('.form-btn').click(function(){
$(this).next().toggleClass('show-form');
});
.form{
float:left;
list-style:none;
}
.hidden-form{
visibility:hidden;
}
.show-form{
visibility: visible !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="form">
<li>
<input class="form-btn" type="button" name="name" value="Name" >
<input class="hidden-form" type="text" name="nm" >
</li>
</ul>
<ul class="form">
<li>
<input class="form-btn" type="button" name="location" value="Location" >
<input class="hidden-form" type="text" name="loc" >
</li>
</ul>
You can add submit button separately along with the name field.
Related
when the project name is entered, it populates in the same text field as the checked boxes text but at the top of the field.
I also want to create a button for sending the completed form if that's possible
html
<div class="name">
<form>
<label for="projectname">Project name:</label>
<input type="text" id="pname" name="pname"><br>
<br>
</div>
<br>
<div class="series1">
<tr><input type="checkbox" rel="textbox1" name="Cabinets" class=test/>
Cabinets</tr>
<input type="checkbox" rel="textbox1" name="Doors" />
Doors
<input type="checkbox" rel="textbox1" name="Drawers">
Drawers
<input type="checkbox" rel="textbox1" name="Drawer Fronts">
Drawer Fronts
<input type="checkbox" rel="textbox1" name="Handles">
Handles
</div>
<textarea id="textbox1" ></textarea>
js
$('input:checkbox').click(function(){
var tb = "#"+$(this).attr('rel');
let text_to_add = this.name + "\n";
//when click a checkbox and show checked items in the text area
if($(this).is(":checked")){
$(tb).append(text_to_add);
}else{
let remove = this.name +"\n";
//when a box is unchecked it clears the previously populated text from checkbox
$(tb).text(function(i, text){
return text .replace(text_to_add,'');
});
}
})
The solution i would come up with will be:
to store the exist value from the textarea everytime you change the text area value.
let existValue = ''
//inside the checkbox click function:
existValue = $(tb).val()
then to add an event listener to the input and everytime the input change to add the e.target.value to the exist value we created before
$('#pname').on('input', (e)=>{
$('#textbox1').val(`${e.target.value}\n${existValue}`)
})
here is a working example: working example
I am creating a contact form that creates something like a cart view depending on the inputs.
I managed to get all the checkboxes to output when they are checked; I am having trouble getting the same to work with text and number inputs. So input type text, number and textarea.
<input id="form_name" type="text" name="name" class="form-control"
placeholder="Please enter your firstname *" required="required"
data-error="Pflichtfeld" data-validate="true">
<input type="number" id="age" name="age" min="16" max="99"
class="form-control" required="required"
data-error="Pflichtfeld" data-validate="true">
<div id="descript11" style="display:none;">Vorname:
<b id="vorname"></b>
</div>
<div id="descript12" style="display:none;">Alter:
<b id="alter"></b>
</div>
So I tried the method with $(document).change() but that did not work. I want to grab the contents of the input or textarea and output it to the div with the corresponding id. So "age" should output to "alter" and so on. I'm not sure how to achieve this and w3schools or other sites don't offer an answer.
You can do this by adding an input event listener to your input text boxes. In the example below, I loop through all your input text boxes (as I gave them a class of text-input) using a forEach loop. You can then grab the text from the textbox using this.value and place it into its associated div. To help with this I created a mapping object which is used to map the id of the input to the id of where the text should be placed into.
See example below:
const input_map = {
form_name: "vorname",
age: "alter"
}
document.querySelectorAll(".text-input").forEach(elem => {
elem.addEventListener('input', function() {
const textbox_value = this.value; // get text from input bpx
const target = input_map[this.id]; // get location (ie: the id) of where the text should be placed
document.getElementById(target).innerText = textbox_value; // place the text in that location
});
});
<input id="form_name" type="text" name="name" class="form-control text-input" placeholder="Please enter your firstname *" required="required" data-error="Pflichtfeld" data-validate="true">
<input type="number" id="age" name="age" min="16" max="99" class="form-control text-input" required="required" data-error="Pflichtfeld" data-validate="true">
<div id="descript11">Vorname:<b id="vorname"></b></div>
<div id="descript12">Alter: <b id="alter"></b></div>
Note: In the example above I removed the style="display: none;" from your divs so that you can see the output
You can do it like this:
$('input').on('input',function(){
let text = $(this).val();
let id = $(this).attr('id');
$('div.'+id).text(text)
});
This snippet checks changes on inputs and sets their value to the div with class that matches each input's id .
I have form that users fill out a set of checkmarks and when they click a button, the output is a sequence of notes. In this form, a div in my HTML is set up to pull a list of items which will appear in an email. Sometimes, the user needs to fill out an empty text box for one of the items. However, the way the code is written currently, I can get the text for items on the page, but it removes all the text inside the text boxes. Is there a way to include the text boxes too? Here is the code sample:
HTML
<div>
<p>
<input type="checkbox" class="DocsNeeded"> This <input class="DocsNeeded" checked="checked" type="text" size="20" /> information is an example of an item with an input field<br><br>
</p>
</div>
<div>
<p>
<input type="checkbox" class="DocsNeeded"> This is <input type="text" size="20" /> another example of an item with an input field<br><br>
</p>
</div>
JavaScript Function
$(".DocsNeeded:checked:visible").each(function() {
if ($(this).is(":checked")) {
docs += "• " + $(this).parent("p").text().trim() + "\r\n";
}
});
EDIT Based on the questions below:
Essentially the output text (what I'm hoping to get from this question) that the user will then copy and paste into a pre-formatted email will be:
Mr. Person
Here is a list of all the documents that you did not send us
• This [user input here] information is an example of an item with an input field
• This is [user input here] another example of an item with an input field
.text() sets/gets the "text" inside an HTML element. It is not the input type="text". Example close to what you achieve is below. I also included a sample usage of text().
Also, jQuery way of accessing an element's children is to use .children() or .find() (deeper).
$(document).ready(function() {
$('#clickme').click( function() {
var docs = '';
$(".DocsNeeded:checked:visible").each(function() {
if ($(this).is(":checked")) {
docs += "• " +
$(this).parent("p").find('.label-1').text() + ' ' +
$(this).parent("p").find('input[type=text]').val() + ' ' +
$(this).parent("p").find('.label-2').text() + "\r\n";
}
});
$('#result').text(docs);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>
<input type="checkbox" class="DocsNeeded"> <span class="label-1">This</span> <input class="DocsNeeded" checked="checked" type="text" size="20" /> <span class="label-2">information is an example of an item with an input field</span><br><br>
</p>
</div>
<div>
<p>
<input type="checkbox" class="DocsNeeded"> <span class="label-1">This is</span> <input type="text" size="20" /> <span class="label-2">another example of an item with an input field</span><br><br>
</p>
</div>
<button id="clickme">Click Me </button>
<hr />
<div id="result" style="white-space:pre"></div>
<hr />
As the user fills out the form, I have some buttons that dynamically add new questions. However, I can't get the value of these buttons to Post to the subsequent PHP page (all the other information posts fine).
In the example below, I'm not able to get the value of "add_email" in "process-form.php" via $_POST['add_email'];
Thanks in advance for your help. In reduced form, it looks like this:
HTML form
<form id="form" class="form" action="process-form.php" method="POST">
<input id="name" name="name" type="text" placeholder="Name">
<!-- Yes/No buttons asking if the user wants to enter their email-->
<div id="form_email">
<h4>Do you want to enter your email?</h4>
<input type="button" class="btn" id="add_email" name="add_email" value="Yes" onclick="showEmailQ(this.value)"></input>
<input type="button" class="btn" id="add_email" name="add_email" value="No" onclick="showEmailQ(this.value)"></input>
</div>
<input type="submit" class="btn" value="Submit »">
</form>
Javascript
<script>
//Function to process whether user wants to enter email and then display value
function showEmailQ(value){
var table_row = document.getElementById("form_email");
if(value == "Yes"){
table_row.innerHTML = '<input id="email" name="email" type="text" placeholder="Email">';
}
else{
table_row.innerHTML = '<p>You have chosen not to enter your email</p>';
}
}
</script>
PHP
//process-form.php
session_start();
$enteredEmail = $_POST['add_email'];
echo $enteredEmail; // Nothing prints to screen
You're destroying your form by overwriting the inputs with
table_row.innerHTML = '<input id="email" name="email" type="text" placeholder="Email">';
So maybe change the input name to match
table_row.innerHTML = '<input id="email" name="add_email" type="text" placeholder="Email">';
I have a page with many forms on it.
Each form has a unique id.
Each form has a user name field.
Example:
<form id="new_celebration692130342" accept-charset="UTF-8" action="/celebrations" method="post">
<input id="friend" type="hidden" name="celebration[friend_name]" value="Anthony Rosenfeld">
<input id="friend" type="hidden" name="celebration[friend_fbuid]" value="69213034***2">
<input id="friend" type="hidden" name="celebration[friend_birthday]" value="12/09">
<input id="friend" type="hidden" name="celebration[friend_pic]" value="http://graph.facebook.com/69213034***2/picture">
<li>Anthony Rosenfeld</li>
<li>12/09</li>
<input class="button-mini-subtle submit" type="submit" alt="select" value="select">
</form>
I want to give the user the ability to enter a name or start typing in a search box and the javascript/jquery will run and only show the forms with a name field that matches.
I am a major NOOB with this type of action and would appreciate being pointed in the right direction.
$(function () {
$("#searchBox").keypress(function () {
console.log($('input[name~="' + $(this).val() + '"]').parent('form'));
});
});
This will log to the console all form elements which have an input child with a name that matches the searchBox value.