I have a select box with options of numbers in it.Whenever user selects an option i am displaying input box through jquery depending on the number selected.So for this the input box are initially hidden. Now the problem is that when i try to post the value of those input box, they are not getting posted.
Here is html code-
<form action="data.php" method="POST">
Select the number of company:
<select name="num_of_comp" id="num_of_comp">
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="div1" style="visibility:hidden;">
<label for="dbname">database name:</label>
<input type="text" name="db1" id="db1" />
<input type="submit" name="submit" id="submit" />
</div>
<div id="div2" style="visibility:hidden;">
<label for="dbname">database name:</label>
<input type="text" name="db1" placeholder="db1 name"/>
<input type="text" name="db2" placeholder="db2 name"/>
<input type="submit" name="submit" id="submit" />
</div>
Here is the script that dynamically displays the input box -
$('#num_of_comp').on('change',function(){
if( $(this).val()==="1"){
$("#div1").css("visibility", "visible");
$("#div2,").css("visibility", "hidden");
}
else if( $(this).val()==="2"){
$("#div2").css("visibility", "visible");
$("#div1").css("visibility", "hidden");
}
Here is php code-
$i = $_POST['num_of_comp'];
if($i == '1'){
$db1 = $_POST['db1'];
echo $db1;
Here I am not getting the value of db1.
Thanks in advance.
You can not set same id to multiple fields, id should be unique for all fields.
so set different ids to all fields in form
Even the name of the all input fields should be unique here.
You have two inputs with name db1. The second value (input without id) overwrites the first one (input with id="db1").
This is your issue
You have use same id for two input fields that is wrong every id in the page should be unique otherwise you can't get the actual value of your expecting field, and use proper naming for those id then you wan't miss those issue and code will be clear also use different name for name attribute
<input type="text" name="db1" id="database1" />
<input type="submit" name="submit" id="submit" />
<div id="div2" style="visibility:hidden;">
<label for="dbname">database name:</label>
<input type="text" name="db2" id="database2" placeholder="db1 name"/>
</div>
Related
I'm creating an artist's site. There is a contact form on the site, and I am trying to create a JS script to remove the hidden class I put on the commission rules, so it can be visible when the Commission option is selected on the form. I'm new to JS, but From the documentation I've read HTMLOptionElement type seems to be the best way to do this in vanilla JS. Here is the form, and my approximations of trying to remove the element:
<form action="action_page.php" id="contactform" method="post" action="FormToEmail.php">
<input name="name" type="text" class="feedback-input" placeholder="Name" />
<input name="email" type="text" class="feedback-input" placeholder="Email" />
<select id="reason" name="contact-reason">
<option value="None" selected disabled hidden>Reason for contact</option>
<option value="Brand">Brand</option>
<option id="Comission"value="Comission">Commission</option>
<option value="Other">Other</option>
</select>
<a class="invis hidden center" href=""> Commission rules</a>
<textarea name="contact-message" class="feedback-input" placeholder="Comment"> </textarea>
<input type="submit" class="button form-buttion" value="SUBMIT"/>
</form>
I've also tried selecting by ID, by tags, and other selectors. The JS is here.
var action = document.HTMLOptionElement("Commission")
if(action == true){
element.classList.remove("invis");
}
document.HTMLOptionElement is not a function. The correct way to check if an option is selected is:
document.getElementById('reason').value === "Commision";
You can also remove the id from the option element.
So:
if(document.getElementById('reason').value === "Commision"){
element.classList.remove("invis");
}
I am looking to show form fields only if the user inputs a specific value in a different field. Specifically, I am asking users to input the number of children they have. If the user inputs 1, then a set of fields will appear for the user to add additional information on their child. If the user inputs 2, then 2 sets of fields will appear, one per child. From a JS perspective, I am looking to hide the field sets based on the response.
This is my HTML:
Form field based on which the JS should be based on:
<html>
<div class="_form_element _field10 _full_width ">
<label for="field[10]" class="_form-label">
How many children do you have? <span style="color: #eb636d;">*</span>
</label>
<div class="_field-wrapper">
<input type="text" id="field[10]" name="field[10]" value="" placeholder="" required />
</div>
</div>
</html>
Field set to appear based on value entered in the field above:
<html>
<div id=1 class="child_1">
<div class="_form_element _field51 _full_width " >
<label for="field[51]" class="_form-label">
First child's name
</label>
<div class="_field-wrapper">
<input type="text" id="field[51]" name="field[51]" value="" placeholder="" />
</div>
</div>
<div class="_form_element _field55 _full_width " >
<label for="field[55]" class="_form-label">
First child's birthdate
</label>
<div class="_field-wrapper">
<input type="date" class="date_field" id="field[55]" name="field[55]" value="" placeholder="" />
</div>
</div>
</div>
</html>
Thanks
I have a form that allows a user to create custom questions.
The user needs to insert the title for the question and then choose the type of the question.
If the type of question is radio button, checkbox or a select menu it should appear a div "availableOptions" that shows by default two input texts so the user can insert some option values.
Doubt:
When this "availableOptions" div appears there is also a button "add new option" that when is clicked it should appear another input text so the user can insert a new option value. Each option should also have always a remove button associated that when is clicked the user can remove that input text, but it should be always a minimum of one input text.
Do you know how to do this properly? I have the working example below but it's working neither the append nor the remove.
Example: https://jsfiddle.net/udx6pp8u/15/
HTML:
<form id="" method="post" class="clearfix" action="">
<div class="form-group">
<label for="inputName">Title</label>
<input type="text" class="form-control" id="inputName">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Type of Field</label>
<select class="form-control" id="customQuestionType">
<option>Text</option>
<option>Long text</option>
<option id="optionQuestion">Checkboxes</option>
<option id="optionQuestion">Radiobuttons</option>
<option id="optionQuestion">Select Menu </option>
</select>
</div>
<div class="form-group" id="availableOptions">
<label for="inputName">Available Options </label>
<div class="option">
<input type="text" class="form-control">
<button id="removeOption">Remove Option</button>
</div>
<div class="option">
<input type="text" class="form-control">
<button id="removeOption">Remove Option</button>
</div>
<div class="form-group">
<button type="button" class="btn btn-outline-primary mt-3" id="addNewOption">Add new Option</button>
</div>
</div>
<input type="submit" class="btn btn-primary float-right mt-3" value="Store"/>
</form>
CSS:
#availableOptions{display:none;}
jQuery:
var selected_option = $('#customQuestionType option:selected').attr('id');
if (selected_option == "optionQuestion") {
$('#availableOptions').show();
if ($('#addNewOption').click(function() {
$('#availableOptions')
.append('<div class="option"><input type="text" class="form-control"><button id="removeOption">Remove Option</button></div>');
}));
if ($('#removeOption').click(function() {
$('#availableOptions') // how to remove the clicked otpion?
}));
}
Try this:
Note: Don't use id. Use class instead. One document should only have one unique id. Using multiple id="removeOption" will coz your script to behave incorrectly and also choose the first found and ignore the rest having the same id
$('#customQuestionType').change(function(){
var selected_option = $('option:selected', this).val();
if (selected_option == "optionQuestion") {
$('#availableOptions').show();
$('#addNewOption').click(function() {
$('#availableOptions').append('<div class="option"><input type="text" class="form-control"><button id="removeOption">Remove Option</button></div>');
});
}
});
$(document).on('click', '.removeOption', function(e) {
e.preventDefault();
$(this).closest('.option').remove();
})
DEMO:
https://jsfiddle.net/dL7opvak/21/
EDITED
I am trying to create a drop down menu that allows a user to select which area they would like to login to. Currently, the drop down feature works and hides whichever areas the user is not logging into and shows only the area that they have selected. Using just the form without the dropdown works great and opens a new window while also logging the user in to the system.
However, when I add the dropdown menu and surround the form in tags, it allows me to enter the data but does not process the data.
If possible I would also like to have the form open a new tab in the current browser window(not in a completely new window).
-I cannot change the forms at all besides things that won't matter because they have been given to me from an external source.
Here is my code:
$(document).ready(function() {
toggleFields(); //call this first so we start out with the correct visibility depending on the selected form values
//this will call our toggleFields function every time the selection value of our repository field changes
$("#member").change(function() {
toggleFields();
});
});
//this toggles the visibility of the 3 different forms depending on which repository the user is logging into.
function toggleFields() {
if ($("#member").val() == 1)
$("#depo").show();
else
$("#depo").hide();
if ($("#member").val() == 2)
$("#records").show();
else
$("#records").hide();
if ($("#member").val() == 3)
$("#reporter").show();
else
$("#reporter").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="member" name="member">
<option value="0">---</option>
<option value="1">Deposition Repository</option>
<option value="2">Records Repository</option>
<option value="3">Reporter Area</option>
</select>
<div id="depo">
<p>Login to Access your Deposition Repository</p>
<p>
<script type="text/javascript" src="http://clients.texasdepos.com/rbweb/library/js/W0_0000_PTA.js"></script>
<form name="frmrbwebattorney" method="post" action="http://clients.texasdepos.com/rbweb/attorney/WC_00LG_PTA.asp">
User ID:
<input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=30>Password:
<input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebattorney,1);">
<INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebattorney,1);" id=btnptarbweb name=btnptarbweb>
<INPUT type="hidden" name="appname" value="">
<INPUT type="hidden" name="os" value="">
</form>
</p>
</div>
<div id="records">
<p>Login to Access your Records Repository.</p>
<p>
<script type="text/javascript" src="http://clients.texasdepos.com/mrweb8/library/js/W0_0000_PTA.js"></script>
<form name="frmrbwebattorney" method="post" action="http://clients.texasdepos.com/mrweb8/WC_00LG_PTA.asp">
User ID:
<input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=16>Password:
<input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebattorney,1);">
<INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebattorney,1);" id=btnptarbweb name=btnptarbweb>
<INPUT type="hidden" name="appname" value="">
<INPUT type="hidden" name="os" value="">
</form>
</p>
</div>
<div id="reporter">
<p>Login to the Reporter Area.</p>
<p>
<script type="text/javascript" src="http://clients.texasdepos.com/rbweb/library/js/W0_0000_PTA.js"></script>
<form name="frmrbwebreporter" method="post" action="http://clients.texasdepos.com/rbweb/reporter/WR_00LG_PTA.asp">
User ID:
<input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=16>Password:
<input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebreporter,1);">
<INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebreporter,1);" id=btnptarbweb name=btnptarbweb>
<INPUT type="hidden" name="appname" value="">
<INPUT type="hidden" name="os" value="">
</form>
</p>
</div>
Any help will be greatly appreciated!
There's a few problems with your code that can each individually cause issues like this.
The fact that you have duplicate names and ids are your primary issues. I.e. you have 3 forms named frmrbwebattorney and all your submit buttons are id'ed btnptarbweb. When you call document.frmrbwebattorney, it is likely getting the wrong form.
Simple solution: replace your <input type="button" ...> with <input type="submit" ...> and remove the onclick from them. Thus your buttons will look like:
<input type="button"
value="Log In"
style="font-size:11px; width:64px"
id="something-unique"
name="btnptarbweb" />
Also note: you can't have multiple style attributes. I combined them into one.
Instead of the onclick attribute with the javascript code change the button type to submit. That will work.
I have a form with ,
In the form after user clicks on Submit , he will be taken to another page which would show all the data entered, Which would allow the user to verify the content.(User will have a look at the content , to see what he entered is correct).
Once user verifies he would submit the data and Insert to DB should be done.
I want to know a method in which i could carry on the approach, to do this.
How can i implement this
EDIT MORE EXPLAIN
addemp.php
The Main Div With Form
<div class="panel-body">
<form>
Employee : <input Type="text" id="name">
<input type="submit" value="check">
</div>
The Second Div in the same form should show once submit is clicked
<div class="submit panel-body">
<form>
Employee : <Employee Name asin main div>
<input type="submit" > <--! this submit would post data
</form>
</div>
how to pass the value from 1st div to the second , and from the second INSERT to db.how can i do without page refresh ?
Use following script on location file
$action='';
if(isset($_POST['submit'])){
//create form here
//Change the action of form
$action = 'save.php';
}
echo '<form method="POST" action="'.$action.'">
<input type="text" name="nric" value="'.isset($_POST['nric'])?$_POST['nric'].'" />
<input type="text" name="empName" value="'.isset($_POST['empName'])?$_POST['empName'].'" />
<input type="text" name="location" value="'.isset($_POST['location'])?$_POST['location'].'" />
<input type="submit" value="Submit"/>
</form>';
EDIT: You don't need to use a form in this case. You can simply use JQuery to show the data from text boxes in a DIV and a button that will POST the data for you on the server.
<input type="text" name="nric" id="nric" />
<input type="text" name="empName" id="empName" />
<input type="text" name="location" id="location" />
<input id="sndData" type="button" value="Submit" />
<div id="showData"></div>
JQuery:
$('#sndData').click(function(){
var makeData = "<p>NRIC: "+$('#nric').val()+"</p><p>Employee Name: "+$('#empName').val()+"</p><p>Location: "+$('#location').val()+"</p>";
$('#showData').html(makeData);
});
When you've done that, just create/show a HTML button that will POST the data for you.
If this answers your question, please mark it as an answer.