I have added a button onclick function to a web form, so that onClick new input text field is created. However when the forms posts to email, Quote_Num value isn't posted - it just says "Array"
JS
var counter = 1;
var limit = 8;
function addInput(divName) {
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Quote Number " + (counter + 1) + " <p><input type='text' name='Quote_Num[]' /></p>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
HTML
<div id="dynamicInput">
Quote Number
<p><input type="text" id="Quote_Num" name="Quote_Num[]" class="required" /> *</p>
</div>
<p><button type="button" value="Add another text input" onClick="addInput('dynamicInput');">Add Quote Number</button></p>
PHP
<?php
$Quote_Num = $_POST["Quote_Num"];
foreach ($Quote_Num as $eachInput)
{
echo $eachInput . "<br>";
}
?>
Anyone with my experience with PHP help me get the form to post value of Quote_Num?
The variable $Quote_Num set with $Quote_Num = $_POST["Quote_Num"]; is an array, as you are submitting more then one values values from your HTML form by setting name equal to Quote_Num[].
If you echo an Array in PHP, It will give an Notice, and print 'Array'.
If you want all of the values of the array $Quote_Num you can use implode on Array. For example implode(", ", $Quote_Num) will return comma separated list of all values in the array as String.
You may also print the whole array by using var_dump or print_r.
I hope, I got your question and it helps.
Related
I have a simple form with a text box. The user is able to add more text boxes by clicking a button.
I am dynamically creating the text boxes using javascript, however I have 2 issues:
1- I am not sure how to access the text boxes from the PHP file.
2- Whenever I click +addmore button on my html page it creates new text boxes but it clears the value of the previous ones.
Below is the html part:
<input type="text" id="program" name="program[]"> //Initital text box
<div><a onclick="CreateTxt()">+Add More</a></div> //Add more button
<input type="hidden" id="hid" name="hid" value="0">
<input type="submit" value="Next" name="submit1">
Below is javascript part:
var i = 1; // Global counter
var hidden_field;
function CreateTxt(){
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("Name", "program" + i); //I am sure this is not working for the array names
y.setAttribute("class", "form-control");
document.getElementById('userdata1').innerHTML +=
'<label for="program"><br />Program</label>';
document.getElementById('userdata1').appendChild(y);
hidden_field = document.getElementById("hid").value = i; //passing the number of created textboxes
i++;
}
Below is PHP part:
<?php
session_start();
include('connection.php');
$id = $_SESSION['id'];
$i = $_POST['hid'];
if(isset($_POST['submit1'])){
if($i > 0){ //It means more than one text box exist
$program = [];
for ($j = 0; $j <= $i; $j++){
$program[$j] = $_POST['program'][$j];
$sql = $db->prepare ("UPDATE user SET program = ?, WHERE id = ? ");
$sql->bind_param("ss", $program[$j], $id);
$sql->execute();
}
}
}
?>
var textEntered = function() {
var input = document.userNameForm.userInput.value;
if(input) {
document.getElementById("resultText").innerHTML += input + "<br>";
}
}
This is what I have so far and this obviously just prints out the user inputs onto the screen in a list. But I want to somehow store all these user inputs from the form I have in my HTML, (maybe in an array?) and maybe assign each to a number and use Math.floor(Math.random()) to print out a random result. (I'm just making a little/random site where you put in the names of your friends and it returns and prints a random name from the names that you give it, if that makes sense).
I'm a beginner just so you know
function textEntered() {
var inputs = [];
$('form input').each((i,e)=>inputs.push(e.value));
if (inputs) {
document.getElementById("resultText").innerHTML += inputs[Math.floor(Math.random()*inputs.length)] + "<br>";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input value="Hello">
<input value="World">
<input value="from Stardust">
<button onclick="textEntered()">Submit Now!</button>
</form>
<div id="resultText">Submit it!
<br><br>
</div>
Is this essentially what you are looking for?
step 1: I have a form where input fields will be generated dynamically by innerHTML.
var d = document.getElementById("d1p_1");
d.innerHTML += "<input class='add' name='field_" + i + "' type='text'>";
step 2: now I would like to echo a php variable of each value to each dynamically generated input field. Something like:
d.innerHTML += "<input class='add' name='field_" + i + "' type='text' value='"<?php echo $field_" + i + "; ?>" + "'>
How can I archieve that?
Thanks in advance.
To give further information:
This is for a form where an user can add fields, depending from how many fields he needs and will be adding. Now it could be that an user adds more fields than he usually needs and enters data somewhere between field_1 and field_280. To catch the field_x where he entered data I need to echo the value of that input field.
$field_1 = value of field_1 if given;
...
$field_280 = value of field_280 if given;
The innerHTML will add the input fields dynamically by a counter for i. So I dont know what input will be given on which field. Thats why I need to generate the PHP echo part dynamical as well. Like:
<?php echo $field_" + i + "; ?>
The whole process:
form -> contains first just one input field (user will make some inputs) -> by clicking a button there will be added further input fields (1 click 1 field and user does not need to fill in data before he can add another fields) -> now imagine that a user will add 3 fields and has given input on first and third input field -> name="field_1" and name="field_3" ->
the name of each input field is generated by i++ -> the value is empty otherwise the form will be posted -> now the user will submit the form.
this means the value to echo would be $field_3 = (isset($_POST['field_3'])) ? $_POST['field_3']; : ''; -> this variable exist for all i so each variable is set in the php part before BUT to catch the right input name="field_i" with $field_i and to echo this match is the problem.
So by clicking submit the page would be reloaded and instead of only just one input field like from before now would be there 2 input fields. first would be name="field_1" and the second would be name="field_3" because user has left out input name="field_2" before. So name="field_3" needs to echo the right value depending from a dynamically generated name="field_"+ i +"what means that when the name tag is generated dynamically the php tag needs also to be generated dynamically to match each other.
i is a JavaScript variable so including it in a php declaration is giving you problems
You may implement your string concatenation out of the php code as follows
<?php
$field_="stavo";
?>
<script type="text/javascript">
var i=10;
var d = document.getElementById("d1p_1");
d.innerHTML+= "<input class='add' name='field_" + i + "' type='text'>";
d.innerHTML += "<input class='add' name='field_" + i + "' type='text' value='<?php echo $field_; ?>"+i+"'>";
</script>
Of course you must be having this in your Html
<div id="d1p_1"></div>
I have a script which adds a new form when a button is clicked to a HTML page with the code as following:
<script>
var counter = 1;
var limit = 10;
function addInput(divName){
if (counter == limit) {
alert("Max number of forms, " + counter );
}
else
{
var newdiv = document.createElement('div');
newdiv.innerHTML = "<form name='frmMain' action='prelucrare.php' method='POST'><div class='slot' id='dynamicInput' align='center'> Masina " + (counter +1 ) + "<table border='1'><tr><td align='right'><label for='marca'>Marca:</label></td><td colspan='2' align='left'>"
+ "<select id='marc' name='marc'><option selected value=''></option>"
+ "<tr><td align='right'><label for='motorizare1'> Motorizare:</label></td> <td><input type='range' name='motorizare1[]Input' min='0.6' max='5' step='0.1' value=2 id=motor1 oninput='outputUpdate1(value)'></td><td><output for=motorizare1 id=moto1>2</output></td></tr>"
+ "</div></form>"
;
}
document.getElementById(divName).appendChild(newdiv);
counter++;
}
</script>
<input type="button" value="Adauga" onClick="addInput('dynamicInput');">
And I have the script bellow which changes the value from the slider.
<script>
function outputUpdate1(mot1) {
document.querySelector('#moto1').innerHTML = mot1;
}
</script>
My problem is that the JS code only changes the input for the first form, even if the slider is activated from another form. In short, the slider should return the value in the form from which it is activate; not only in the first form added.
Thank you!
Going along with my comment, the problem is stemming from the id value being the same across all of your output elements (moto1). You've actually got all the variables you need to make them unique since you're tracking a count of the number of forms on the page (your counter variable). You can use this in place of your current output HTML:
"<input type='range' name='motorizare1[]Input' min='0.6' max='5' step='0.1' value=2 id='motor_" + counter + "' oninput='outputUpdate1(value)'/>"
"<output for=motorizare1 id='moto_" + counter + "'>"
You can update your function to parse out the correct index for the output you want to update since they should be in sync if you use the HTML above:
function outputUpdate1(mot) {
// Get the counter part of the range element's id
var index = mot.id.split('_')[1];
document.querySelector('#moto_' + index).innerHTML = mot;
}
You may need to make some tweaks to code you haven't provided in the question, but that's one way of making the id values unique and how to access them without knowing the exact id ahead of time.
Using Digital Bush's maskedInput plugin to format a phone number and then breaking that phone number out of the mask and into a div. I need to split that divs content into 3,3,and 4... i.e. I need to break it into 3 inputs (which will eventually be hidden) to send that back to the server. So far I have everything working except the split and I may be using that wrong instead of breaking it up using length.
Here is a working fiddle of what I have right now:
JS FIDDLE
I have this right here:
<input id="txtPhoneNumber" name="FancyPhoneNumber" class="required phone" type="text" />
<div id="txtHiddenPhoneNumber2"></div>
Which takes the users input and puts the stripped down value (10 numbers) into a div. Then I am taking that div and putting it into three input fields.
$("#txtPhoneNumber").mask("(999) 999-9999");
$("#txtPhoneNumber").blur(function () {
$("#txtHiddenPhoneNumber").val("");
var charArray = $(this).val().split("");
var phoneNumber = "";
$.each(charArray, function(index, value) {
if (!isNaN(value) && value != " ") {
phoneNumber = phoneNumber + value;
}
});
$("#txtHiddenPhoneNumber2").append("<div>"+phoneNumber+"</div>")
var data =$('#txtHiddenPhoneNumber2').text();
var arr = data.match(/.{3}/g);
$("#txtHiddenPhoneNumber2").html("<input type=\"text\" value='"+arr[0] +"'>" + "<input type=\"text\" value='"+arr[1]+"'>" + "<input type=\"text\" value='"+arr[2] +"'>");
});
It's working as I need only it is not sending the last digit to the last input field which is being populated with arr[2]. I assume I am trying to use split wrong. Any ideas?
Try this code
$(document).ready(function() {
$("#txtPhoneNumber").mask("(999) 999-9999");
$("#txtPhoneNumber").blur(function () {
$("#txtHiddenPhoneNumber").val("");
var data =$("#txtPhoneNumber").val();
var arr = data.match(/\d{3,4}/g);
$("#txtHiddenPhoneNumber2").html("<input type=\"text\" value='"+arr[0] +"'>" + "<input type=\"text\" value='"+arr[1]+"'>" + "<input type=\"text\" value='"+arr[2] +"'>");
});
});