I think this should be a simple thing but for some reason all my form values are being serialized fine except for the selected value of the dropdown list, the form is below:
<form id="contactform">
<label for="name">Name</label>
<input type="text" id=name name=name placeholder="First and last name" tabindex="1" />
<label for="phonenumber">Phone Number</label>
<input type="text" id=phonenumber name=phonenumber placeholder="Please enter your phone number" tabindex="2" />
<label for="email">Email</label>
<input type="text" id=email name=email placeholder="example#domain.com" tabindex="3" />
<label for="dropdown">Please Confirm:</label>
<select>
<option value="question" selected="selected">I have a question</option>
<option value="attending">I am attending</option>
<option value="not-attending">I am not attending</option>
</select>
<label for="comment">Your Message</label>
<textarea name="comment" id=comment name=comment placeholder="Enter something here, can't think" tabindex="5"></textarea>
<input name="submit" type="submit" id="submit" tabindex="6" value="Send Message"/>
</form>
and this is how I am serializing it:
$('#contactform').submit(function() {
var query = $(this).serialize();
$.ajax({
type: "POST",
url: "send.php",
data: query,
success: function(data) { // rest of function
and finally the bit of PHP I'm using to set the value as a variable is:
$dropdown = $_POST['dropdown'];
AN example header is name=sgrggr&phonenumber=55555555555&email=me%40me.com&comment=quick+test so I'm stuck as to why the dropdown value isn't being picked up.
Thanks for your help.
Your dropdownlist needs a name attribute to be included by the submit.
<select name="dropdown">
<option value="question" selected="selected">I have a question</option>
<option value="attending">I am attending</option>
<option value="not-attending">I am not attending</option>
</select>
hope this helps!
I was facing the similar situation. SELECT tag has an attribute named form. Define the form="#ID_OF_THE_FORM_YOU_WANT_YOUR_SELECT_TO_ATTACH_TO". Don't forget to define an ID for your FORM as well.
Related
So I am submitting a form to the same page. I have used the following code to check whether the form was submitted, and to avoid 'undefined variables' errors during the first page reload.
if (isset($_POST['submit'])){
// Get search variables
$pName = $_POST['pname'];
$pLocation = $_POST['plocation'];
$pPrice = $_POST['pprice'];
if (isset($_POST['ptype'])){
$pType = $_POST['ptype'];
}
echo "pType";
}
However, I cannot echo the php variables onto the page. I am guessing this is because the form is refreshed when it is sent by post, so the variables are lost.
How can I fix this problem?
This is the html form
<form method="post" action="../html/searchpage.php">
<div id="searchborder">
<input type="text" id="pname" name="pname" placeholder=" Property name">
<input type="text" id="plocation" name="plocation" placeholder=" Property location">
<input type="number" id="pprice" name="pprice" placeholder=" Property price">
<div id="ptypeholder">
<div id="ptypebox">
<select name="ptype">
<option value="" disabled selected>Post type</option>
<option value="buy">Buy</option>
<option value="rent">Rent</option>
</select>
</div>
</div>
<button type="submit"><img src="../images/search.png"></button>
</div>
</form>
I am trying to display 'property posts' into html cards from a database using php in this page. The form is the search bar for the property posts.
Thanks!
I don't think $_POST['submit'] is being set because the button needs a name ie
<input type="submit" name="submit" value="submit">
also you have a few other syntax errors, structure, may be this will help :-
<form method="post" action="searchpage.php">
<input type="text" id="pname" name="pname" placeholder="Property name">
<input type="text" id="plocation" name="plocation" placeholder="Property location">
<input type="number" id="pprice" name="pprice" placeholder="Property price">
<select name="ptype">
<option value="" disabled selected>Post type</option>
<option value="buy">Buy</option>
<option value="rent">Rent</option>
</select>
<input type="submit" name="submit" value="submit">
and you don't HAVE to assign the post values to $vars you can use them directly -
<?php
if (isset($_POST['submit'])){
// Get variables
//$pName = $_POST['pname'];
//$pLocation = $_POST['plocation'];
//$pPrice = $_POST['pprice'];
echo $_POST['ptype'].'<br>';
echo $_POST['pname'].'<br>';
echo $_POST['plocation'].'<br>';
echo $_POST['pprice'].'<br>';
}
?>
Needs more work to make it check all posts are set or validation but works as a basic starting point
Also in original you posted echo "pType"; will only echo the text pType not the value
Below is my HTML and PHP code. I'm trying to display my the inputted data, however, I'm getting nothing. What is wrong with my code?
HTML
<form action="welcome.php" method="POST">
<fieldset>
<legend> Personal Details: </legend>
<label for="fname>"></label>
<input type="text" name="Name" id="fname" required autofocus placeholder="First Name" pattern="[a-zA-Z]{3,}" title="Please enter more than three letters">
<label for="lname>"></label>
<input type="text" name="Last Name" id="lname" required autofocus placeholder="Last Name" pattern="[a-zA-Z]{3,}" title="Please enter more than three letters">
<label for="email">Email: </label>
<input type="text" name="email" id="email" required placeholder="Your school email" pattern="[a-zA-Z]{3,}#[a-zA-Z]{3,}[.]{1}[a-zA-Z{2} title="Please enter a valid email address>
<label for="phone">Phone: </label>
<input type="tel" name="phone" id="phone" required placeholder="Please enter in your phone number" pattern="[0-9]{4} [0-9]{3} [0-9]{3}" title="Please enter in a phone number in this format: #### ### ###">
<select name="country" required>
<option value=""> </option>
<option value="US">US</option>
<option value="UK">UK</option>
<option value="AUS">AUS</option>
</select>
</fieldset>
<br>
<fieldset>
<legend> Booking Details: </legend>
<input type="date" name="date" min="2018-10-07" max="2018-10-31">
<input type=time min=9:00 max=17:00 step=900>
<br>
<br>
<label for="dorm">Dormitory: </label>
<br>
<select name="dorm" required>Dormitory
<option value="Cypress">Cypress Hall</option>
</select>
<br>
<br>
<label for="floor">Floor: </label>
<br>
<select name="floor" required>Floor:
<option value=""></option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
</select>
<br>
<br>
<label for="roomnumber">Room Number: </label>
<br>
<select name="roomnumber">Room Number:
<option value=""></option>
<option value="22">22</option>
</select>
<br>
<br>
<label for="roomletter">Room Letter: </label>
<br>
<select name="roomletter" required="">Room Letter
<option value=""></option>
<option value="A">A</option>
<option value="B"> B</option>
</select>
<br>
<br>
<label for="bedroomcleaning">Bedroom: </label><br>
<input type="checkbox" id="box-4" onclick="checkPrice()" value="4">Dust all ceiling fans/light/fixtures within reach.<br>
<input type="checkbox" id="box-5" onclick="checkPrice()" value="5"> Change sheets and/or fold clothes if requested by client.<br>
<input type="checkbox" id="box-6" onclick="checkPrice()" value="6"> Straighten up, put toys away, make beds, fold clothes and put on bed. Straighten papers and put in a pile. DO NOT THROW AWAY ANY PERSONAL ITEMS!<br><br>
<label for="bathroomcleaning">Bathroom: </label><br>
<input type="checkbox" id="box-1" onclick="checkPrice()" value="1"> Clean bowl and wipe down toilet cover, seat, under seat, base and behind the base.<br>
<input type="checkbox" id="box-2" onclick="checkPrice()" value="2"> Clean all mirrors.<br>
<input type="checkbox" id="box-3" onclick="checkPrice()" value="3"> Clean countertops and backsplashes.<br>
<label for="bathroomprice" id="price">Total Price: </label>
<br>
<br>
<input type="submit">
</fieldset>
</form>
PHP
Welcome <?php echo $_POST["Name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
Your phone number is: <?php echo $_POST["phone"]; ?>
Check your pattern for the email input:
[a-zA-Z]{3,}#[a-zA-Z]{3,}[.]{1}[a-zA-Z{2}
[a-zA-Z]{3,}#[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2}
Also:
<input type=time min=9:00 max=17:00 step=900>
<input type="time" min="9:00" max="17:00" step="900">
As said by Jon in the comments, you need a <form> div.
<form action="yourPhpPage.php" method="POST">
<label ...>...</label>
<input ... />
...
<input type="submit" value="Send" />
</form>
The action attribute tells which page to call when submitting form.
The method tells how to send data (GET or POST mainly)
The <input type="submit" /> is the submit button. When you click it the page indicated in action will be called with the values of the different inputs. The value of the submit input is what is shown on it.
Eventually you can use a submit <button> :
<button type="submit">What you want to be displayed on it.</button>
I prefer this one because it's easier to modify its style and behavior respectively with CSS and JS. But it's not the point.
Hope it helps you !Jean-Marc.
I have been asked to update a contact form, i always leave action blank(action="") in any forms i have worked on before. I have been sent the following form as seen below. When the form is submitted, it is sent to the url, which is a blank screen. Has anyone implemented a salesForce contact form before ?
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<input type=hidden name="oid" value="00D200000005wgb">
<input type=hidden name="retURL" value="http://"> <!-- add URL of completed page here
-->
<label for="first_name">First Name</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>
<label for="last_name">Last Name</label><input id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>
<label for="email">Email Address</label><input id="email" maxlength="80" name="email" size="20" type="text" /><br>
<label for="phone">Phone</label><input id="phone" maxlength="40" name="phone" size="20" type="text" /><br>
<select id="country" name="country" title="country">
<option value="London">London</option>
<option value="Midlands">Midlands</option>
<option value="North England">North England</option>
<option value="South England">South England</option>
<option value="Wales">Wales</option>
<option value="Scotland">Scotland</option>
<option value="Northern Ireland">Northern Ireland</option>
</select><br>
<textarea id="00N200000016Kk5" name="00N200000016Kk5" rows="4" type="text" wrap="soft"></textarea><br>
<!-- Below 3 fields are hidden -->
<select id="recordType" name="recordType" style="display:none;">
<option value="012w0000000QCbe">Prospect UK</option></select>
<select id="00N20000001L8Pi" name="00N20000001L8Pi" title="Web Source" style="display:none;"><option value="Download Whitepapers UK">Download Whitepapers UK</option> </select>
<select id="lead_source" name="lead_source" style="display:none;">
<option value="Download Whitepapers UK">Download Whitepapers UK</option></select>
<input type="submit" name="submit">
</form>
The action attribute of a <form> is basically a redirect for the form that sends the POST or GET data along with it.
If action is left blank, it redirects to the current URL, thus "refreshes".
If action is a link beginning with http:// or https://, the form sends the $_POST / $_GET request to the full page link.
If action is set to a link not beginning with http:// nor https://, the link set in the action is added to the current sub-directory in the same way a php include works.
Therefore, this in your code:
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
Will send a POST request to https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8
I am new to jquery. I have a textbox, and I want to take value from a textbox and show it in dropdown menu. I have searched for the solution in many websites,but can't get an appropriate answer. Kindly please help me how to do it in jquery.
The code for textbox are shown below. Thanks in advance, and sorry for my english.
<form method="post" action="inq.php">
<p><br>
<b>Question no:</b><br>
<input class="inp-form" type="Text" name="qno" size="30" required>
<br>
<br>
<b>Question:</b><br>
<textarea name="question" rows="4" cols="50" required></textarea>
<!--<input class="inp-form"type="Text" name="question" size="50">-->
<br>
<b>Option 1:</b><br>
<input class="inp-form" type="Text" name="opt1" size="30" required>
<br>
<b>Option 2:</b><br>
<input class="inp-form"type="Text" name="opt2" size="30" required>
<br>
<b>Option 3:</b><br>
<input class="inp-form"type="Text" name="opt3" size="30" required>
<br>
<b>Option 4:</b><br>
<input class="inp-form" type="Text" name="opt4" size="30" required>
<br>
<b>Answer</b> (must be identical to correct option):<br>
<input class="inp-form" type="Text" name="answer" size="30" required>
<br>
<br>
<input class="form-submit" type="Submit" name="submit" value="Add" required>
</p>
</form>
Try this. Add another class to options text box (i.e) option like below.
Add onclick="AddQS()" to submit button.
Add one dropdown box.
function AddQS() {
$('#sltOptions').empty();
$('.option').each(function() {
$('#sltOptions').append('<option value = ' + $(this).attr('name') + '>' + $(this).val() + '</option>');
});
}
<------------------>
<input class="inp-form option" type="Text" name="opt1" size="30" required>
<------------------>
<input class="form-submit" type="Submit" name="submit" value="Add" onclick="AddQS()" required>
<------------------>
<select id="sltOptions">
</select>
Please have a look at http://jsfiddle.net/2dJAN/47/
$('.options').change(function(){
var val = $(this).val().trim();
$("#answer").append("<option value='"+val+"'>"+val+"</option>");
});
Let me know is this example full fill your requirement or not.
I want upload a file with jquery ajax and php using forData() with this code:
var data = new FormData();
data.append('image',document.getElementById('uFile').files[0]);
data.append('tag','saveDocument');
data.append('data',$('#saveDocument').serializeArray());
$.ajax({
url: url,
type: 'post',
data: data,
cache: false,
contentType:false,
dataType: 'json',
processData: false,
success: function (data) {
setAlert("Documento guardado correctamente!",success);
}, error: function() {
setAlert("Ha ocurrido un error al guardar!",error);
}
});
return false;
This line contains all data of fields in my form:
data.append('data',$('#saveDocument').serializeArray());
But in PHP I can't access to that data and I want access to data of form to insert on a table, do you know what's the problem?
Html Form
<form id="saveDocument" enctype="multipart/form-data" method="post">
<p><i>Todos los campos son requeridos!</i></p>
<p>
<input id="uName" class="uName span5" name="uName" type="text" placeholder="Nombre completo" required/>
</p>
<p>
<input id="uEmail" class="uEmail span5" name="uEmail" type="email" placeholder="E-mail" required/>
</p>
<p>
<select id="uDept" class="uDept span5" name="uDept" type="text" required>
<option value="0">Seleccione departamento</option>
<option value="1">Dirección</option>
<option value="2">Recursos Humanos</option>
<option value="3">Oficina</option>
</select>
</p>
<p>
<input id="uIssue" class="uIssue span5" name="uIssue" type="text" placeholder="Asunto" required/>
</p>
<p>
<textarea id="uComment" class="uComment" name="uComment" placeholder="Comentario (Máximo 30 caracteres)" required></textarea>
</p>
<p>
<select id="uUrgency" class="uUrgency span5" name="uUrgency" type="text" required>
<option value="0">Seleccione urgencia</option>
<option value="1">Normal</option>
<option value="2">Alta</option>
<option value="3">Urgente</option>
</select>
</p>
<p>
<input id="uFile" class="uFile span5" name="uFile" type="file" required/>
<input id="nameFile" class="nameFile span5" name="nameFile" type="text" placeholder="Click para seleccionar el archivo" onClick="$('.uFile').click();"/>
</p>
<p>
<input class="btn btn-danger" type="reset" value="Limpiar"/>
<input id="sendFile" class="btn btn-primary" type="submit" value="Guardar"/>
</p>
The below image is taken from developers tool of chrome:
You can pretty easy. Take a look at these posts:
specially for images with demo
just all file type uploads with validation