Indeed my question is easy. when i changed "option", i must pull its id. Maybe it can work javascript. But i don't know javascript.
<h4><u> Upload Image </u></h4>
<form action="a.php" method="post" enctype="multipart/form-data">
<label style="font-size:16px;" for="selectalbum">Select Album</label>
<select style="margin-left:10px;" name="selectalbum">
<?php
$imagequery=$db->prepare("SELECT * FROM imagealbum");
$imagequery->execute(array());
$imgquery=$imagequery->fetchAll(PDO::FETCH_ASSOC);
foreach($imgquery as $imagealbum) {
?>
<option value="<?php echo $imagealbum['imagealbum_id']; ?>"><?php echo $imagealbum['imagealbum_name']; ?></option>
<?php } ?>
</select>
<br>
<input type="text" name="aaa" style="text-align:center;">
<br><br>
<input type="text" style="text-align:center;" value="<?php echo $imagealbum['imagealbum_id']; ?>">
<br><br>
<input type="file" name="files[]" value="Upload Image" />
<br>
<button style="margin-top:7px; width:90px; height:30px; background-color:green; color:#fff; border-radius:7px;" name="submit">Submit</button>
</form>
Try adding onchange event with a funcion that getId like this:
const getId = () => {
const album = document.querySelector('#albums');
const log = document.querySelector('#log');
log.innerHTML = ` Id: ${album.value}`;
}
window.onload = function() {
getId();
};
<label for="albums">Select Album:</label>
<select name="albums" id="albums" onchange="getId()">
<option value="123">Album 1</option>
<option value="321">Album 2</option>
<option value="159">Album 3</option>
</select>
<div id="log">
</div>
You're setting up some attribute values for an object, such as colour, size, weight etc in a form. If using buttons to specify these values before wishing to post all the information to a php page for further processing - how do you get the values passed to php, if the buttons are not in themselves submitting the form?
For example:
<form action="processgivenvalues.php" method="post">
choose colour: <button type="button" name="colour" value="green"></button>
<button type="button" name="colour" value="blue"></button>
choose size: <button type="button" name="size" value="big"></button>
<button type="button" name="size" value="small"></button>
<input type="submit">
and on php page:
<?php
echo You specified:
echo $size;
echo $frame
?>
Many thanks.
The point of a type="button" is to be a thing you can hook JavaScript up to. It isn't designed to send values to the server.
Submit buttons are, but you want to let the user pick from multiple sets rather then just one, so you can't use those either.
While you use buttons with JavaScript that generates/updates hidden inputs with the values you want, you really should just use radio buttons instead. They are designed to let users pick one item from a group.
<form action="processgivenvalues.php" method="post">
<fieldset>
<legend>Colour</legend>
<label>
<input type="radio" name="colour" value="green"> Green
</label>
<label>
<input type="radio" name="colour" value="blue"> Blue
</label>
</fieldset>
<fieldset>
<legend>Size</legend>
<label>
<input type="radio" name="size" value="big"> Big
</label>
<label>
<input type="radio" name="size" value="small"> Small
</label>
</fieldset>
<input type="submit">
</form>
You could use jQuery for this.
html:
choose colour: <button type="button" class="colour" value="green">Green</button>
<button type="button" class="colour" value="blue">Blue</button>
choose size: <button type="button" class="size" value="big">Big</button>
<button type="button" class="size" value="small">Small</button>
<button id='submit' type="button">Submit</button>
jQuery:
You make the form on the run
$(document).ready(function(){
window.size = '';
window.colour = '';
$(".colour").click(function() {
window.colour = $(this).val();
});
$(".size").click(function() {
window.size = $(this).val();
});
$("#submit").click(function() {
if(window.size == '' || window.colour == ''){
return alert('Choose colour and Size');
}
var form = $('<form></form>');
$(form).hide().attr('method','post').attr('action',"processgivenvalues.php");
var input1 = $('<input type="hidden" />').attr('name',"size").val(window.size);
var input2 = $('<input type="hidden" />').attr('name',"colour").val(window.color);
$(form).append(input1);
$(form).append(input2);
$(form).appendTo('body').submit();
});
});
jsFiddle
This can also be done with only javaScript.
As Quentin stated, buttons are not useful for selecting between options, but you comment that you want something customizable with an image...
Option 1: Use <label for="id"></label> with a radio button in a table or list.
<table>
<tbody>
<tr>
<td style="background-color: green;">
<label for="green">
<input name="colour" value="green" id="green" type="radio">
</label>
</td>
</tr>
<tr>
<td style="background-color: blue;">
<label for="blue">
<input name="colour" value="blue" id="blue" type="radio">
</label>
</td>
</tr>
<tr>
<td>
<label for="big">
<input name="size" value="big" id="big" type="radio">
<big>Big</big>
</label>
</td>
</tr>
<tr>
<td>
<label for="small">
<input name="size" value="small" id="small" type="radio">
<small>Small</small>
</label>
</td>
</tr>
</tbody>
</table>
Option2: Use droplists with styling:
<select name="colour2">
<option value="0">Select a color</option>
<option value="green" style="background: green;"> </option>
<option value="blue" style="background: blue;"> </option>
</select>
<br>
<select name="size2">
<option value="0">Select a size</option>
<option value="big" style="font-size: 16px;">Big</option>
<option value="small" style="font-size: 12px;">Small</option>
</select>
Here's a demo fiddle I created (just signed up)
I am totally new in PHP, in fact the reason I am doing this is to customize a wordpress plugin so it can fit my need. So far I have a default form, what I am doing now is to add a country dropdown. Here's how I add it
<div class="control-group">
<label class="control-label" for="Country">Country :</label>
<div class="controls">
<select id="itemType_id" name="cscf[country]" class="input-xlarge">
<option value="malaysia#email.com">Malaysia</option>
<option value="indonesia#email.com">Indonesia</option>
</select>
<span class="help-inline"></span>
</div>
</div>
So far I only able to retrieve the value of selected item with
$cscf['country'];
How can I get the display text which is the country name in this case ?
You can use a hidden field, and with JavaScript and jQuery you can set the value to this field, when the selected value of your dropdown changes.
<select id="itemType_id" name="cscf[country]" class="input-xlarge">
<option value="malaysia#email.com">Malaysia</option>
<option value="indonesia#email.com">Indonesia</option>
</select>
<input type="hidden" name="country" id="country_hidden">
<script>
$(document).ready(function() {
$("#itemType_id").change(function(){
$("#country_hidden").val(("#itemType_id").find(":selected").text());
});
});
</script>
Then when your page is submitted, you can get the name of the country by using
$_POST["country"]
<select name="text selection" onchange="getText(this)">
<option value="">Select text</option>
<option value="1">my text 1</option>
<option value="2">my text 2</option>
</select>
First put a java script function on the attribute "onchange" of the select.
Then, create your function that will transfer the text in a text box by using getElementById
<script>
function getText(element) {
var textHolder = element.options[element.selectedIndex].text
document.getElementById("txt_holder").value = textHolder;
}
</script>
Then create a temporary holder:
<input type="" name="txt_holder" id="txt_holder"> type should be hidden
Then assign it in a PHP variable:
$variableName=$_POST['txt_holder'];
Try this
<?php
if(isset($_POST['save']))
{
$arrayemail = $_POST['cscf'];
$mail = $arrayemail['country'];
$explode=explode('#',$mail);
// print_r($explode);
if(isset($explode[0]))
echo ucfirst($explode[0]);
}
?>
<form method="post">
<div class="controls">
<select id="itemType_id" name="cscf[country]" class="input-xlarge">
<option value="malaysia#email.com">Malaysia</option>
<option value="indonesia#email.com">Indonesia</option>
</select>
<span class="help-inline"></span>
</div>
<div class="controls">
<input type="submit" name='save' value="Save"/>
<span class="help-inline"></span>
</div>
</form>
Try it like,
<?php
if(isset($_POST['save']))
{
//Let $_POST['cscf']['country']= malaysia#email.com
// you can explode by # and get the 0 index name of country
$cnt=explode('#',$_POST['cscf']['country']);
if(isset($cnt[0]))// check if name exists in email
echo ucfirst($cnt[0]);// will echo Malaysia
}
?>
<form method="post">
<div class="controls">
<select id="itemType_id" name="cscf[country]" class="input-xlarge">
<option value="malaysia#email.com">Malaysia</option>
<option value="indonesia#email.com">Indonesia</option>
</select>
<span class="help-inline"></span>
</div>
<div class="controls">
<input type="submit" name='save' value="Save"/>
<span class="help-inline"></span>
</div>
</form>
Thank you for your time, I have spent a good part of my day googling every way I can think of and I cant find a clear simple answer. Ive tried everything I can think of and have found great answers here. I sure hope someone can help me. Ive done most of my research on jquery on there site and to no avail I'm still looking for answers. Ive found some help full articles here also, I just must not be fully understanding or am overlooking some simple facts. I'm definitely new to all of this so lets take it nice and easy ! To start I am taking user form data and validating with a php script that will hopefully be talking to a data base and storing form info.
So here are the forms guts:
<form method="post" action="test.php" name="contactform" id="contactform">
<div class="grid_6" id="register">
<center><h4>Required Information</h4></center>
<p>
<label for="name">Name:</label>
<input name="name" id="name" type="text" />
</p>
<p>
<label for="email">Your Email:</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="trew">Contact Phone:</label>
<input name="txtAreaCode" id="txtAreaCode" style="width: 30px;" maxlength="3" value=""type="text">
<span style="color: rgb(255, 200, 46);"> - </span>
<input name="txtPrefix" id="txtPrefix" style="width: 30px;" maxlength="3" value=""type="text">
<span style="color: rgb(255, 200, 46);"> - </span>
<input name="txtPhone" id="txtPhone" style="width: 45px;" maxlength="4" value=""type="text">
<span style="color: rgb(255, 200, 46);"> - </span>
<input name="txtPhoneExt" id="txtPhoneExt" style="width: 35px;" maxlength="10" value=""type="text">
ext.
</p>
<p>
<label for="zip">Zip Code:</label>
<input name="zip" id="zip" type="text" />
</p>
<p>
<label for="school">Name of School:</label>
<input name="school" id="school" type="text" />
</p>
<p>
<label for="title">Affiliation</label>
<select name="title">
<option selected="NULL">Please Select</option>
<option value="student">Student</option>
<option value="parent">Parent</option>
<option value="teacher">Teacher</option>
<option value="booster">Booster</option>
<option value="clubpres">Club President</option>
<option value="principal">Principal</option>
<option value="ptsa">PTSA</option>
</select>
</p>
</div>
<div class="grid_6" id="contactinfo">
<center><h4>Additional Information</h4></center>
<p>
<label for="color">School Colors:</label>
<input name="color" id="color" type="text" />
</p>
<p>
<label for="mascot">Mascot:</label>
<input name="mascot" id="mascot" type="text" />
</p>
<p>
<label for="tagline">Tagline/Motto:</label>
<input name="tagline" id="tagline" type="text" />
</p>
<p>
<label for="sbsize">Approximate Student Body Size:</label>
<input name="sbsize" id="sbsize" type="text" />
</p>
<p>
<label for="level">Interest Level:</label>
<select name="level">
<option value="1">Interested</option>
<option value="2">Slightly Interested</option>
<option value="3">Moderately Interested</option>
<option value="4">Highly Interested</option>
<option value="5">Extremely Interested</option>
</select>
</p>
<p>
<label for="verify">1 + 3 =</label>
<input name="verify" id="verify" class="small" type="text" />
</p>
<button class="fr" type="submit" id="submit">Send</button>
</form>
</div>
I take this form and make it all pretty with jquery now this is where I am getting the most headache of my life, I spent an hr rewriting from scratch thinking I had syntax errors or something. Come to find out this little gem was the problem, its all good we all make mistakes. Here is the jquery form file, this isn't my project i not even sure if this is needed but here is the source of my problems, Ive figured them all out but 1 (hopefully !).
jQuery(document).ready(function(){
$('#contactform').submit(function(){
var action = $(this).attr('action');
$("#message").slideUp(750,function() {
$('#message').hide();
$('#submit')
.after('<img src="./img/form/ajax-loader.gif" class="loader" />')
.attr('disabled','disabled');
$.post(action, {
name: $('#name').val(),
email: $('#email').val(),
txtAreaCode: $('#txtAreaCode').val(),
txtPrefix: $('#txtPrefix').val(),
txtPhone: $('#txtPhone').val(),
txtPhoneExt: $('#txtPhoneExt').val(),
zip: $('#zip').val(),
school: $('#school').val(),
title: singleValues = $("#title").val(),
color: $('#color').val(),
mascot: $('#mascot').val(),
tagline: $('#tagline').val(),
sbsize: $('#sbsize').val(),
level: $('#level').val(),
verify: $('#verify').val()
},
function(data){
document.getElementById('message').innerHTML = data;
$('#message').slideDown('slow');
$('#contactform img.loader').fadeOut('slow',function(){$(this).remove()});
$('#contactform #submit').attr('disabled','');
if(data.match('success') != null) $('#contactform').slideUp('slow');
}
);
});
return false;
});
});
Alright now here is where I see the problem, im trying to get the values of the multiple choice to post to the last and final piece of code my php file that preforms the verification, Ive stripped down the fluff for debugging . But am sure that ive provided more than enough to fix. so here is the php...
<?php
if(trim($_POST['name']) == '') {
echo '<div class="error-message">Attention! You must enter your name.</div>';
exit();
} else {
$name = trim($_POST['name']);
}
if(trim($_POST['email']) == '') {
echo '<div class="error-message">Attention! You must enter your email.</div>';
exit();
} else {
$email = trim($_POST['email']);
}
if(trim($_POST['txtAreaCode']) == '') {
echo '<div class="error-message">Attention! You must enter your txtAreaCode.</div>';
exit();
} else {
$txtAreaCode = trim($_POST['txtAreaCode']);
}
if(trim($_POST['txtPrefix']) == '') {
echo '<div class="error-message">Attention! You must enter your txtPrefix.</div>';
exit();
} else {
$txtPrefix = trim($_POST['txtPrefix']);
}
if(trim($_POST['txtPhone']) == '') {
echo '<div class="error-message">Attention! You must enter your txtPhone.</div>';
exit();
} else {
$txtPhone = trim($_POST['txtPhone']);
}
if(trim($_POST['zip']) == '') {
echo '<div class="error-message">Attention! You must enter your zip.</div>';
exit();
} else {
$zip = trim($_POST['zip']);
}
if(trim($_POST['school']) == '') {
echo '<div class="error-message">Attention! You must enter your school.</div>';
exit();
} else {
$school = trim($_POST['school']);
}
if(trim($_POST['title']) != 'NULL') {
echo '<div class="error-message">Attention! You must enter your title.</div>';
exit();
} else {
$title = trim($_POST['title']);
}
if(trim($_POST['verify']) == '') {
echo '<div class="error-message">Attention! Please enter the verification number.</div>';
exit();
} else if(trim($_POST['verify']) != '4') {
echo '<div class="error-message">Attention! The verification number you entered is incorrect.</div>';
exit();
}
echo 'working';
?>
Now im sure there are many workarounds, I would like to know what I need to do to get this all working. I cant scrap jQuery as its a must for the project, Im sure it should be a simple fix. Fingers crossed as always forgive me for going overboard, i just feel I should let you guys see what my problem is. Ive noticed that if I dont use the 2nd piece of code at all it works wonders, but like i said I need to use it....
From what I gather im clearly doing something wrong in the .post action section as it isnt posting values of the dropdown.
I do a lot of these type forms for my company's application, and there's definitely some shortcuts you can take.
Serialize the data rather than using pure ID's. That way, you don't have to reference EVERY id to submit a form.
Use a validation script on the front end, it'll cut down on the back-end validation you have to worry about reporting back on after the submit. You can't get rid of back end validation, but using a front-end validation tool allows you to quickly and effectively warn the user of a potential problem without the "cost" of a submit. I really like the inline validator script.
If you post your data via an Ajax call rather than just a post, you can use the success callback to deal with issues like validation, success modal windows, etc.
When I do have to do a back-end validation alert, I ususally just make one common alert div at the top of the form and report back to that via the success element of the Ajax call (usually sending JSON) Remember, success on Ajax means the transaction happened, you can still have errors report back through from PHP and have to deal with an error case. By only doing one alert box, I save myself a ton of work and syntax, since most all errors get dealt with on the front end and the back-end is simply redundancy.
So, here's a sample of how I'd do a form on my site:
<div id="error" style="display:none"></div> <!-- error div, hidden -->
<form id="form">
<input type="text" id="name" name="name" class="validator"> <!-- don't forget names! -->
<input type="text" id="name" name="name2" class="validator">
<button id="submit">Send</button>
</form>
<script type="text/javascript">
$('#submit').click(function() { // onclick of submit, submit form via ajax
$.ajax({
url: "url_to_submit_to.php", //url to submit to
timeout: 30000,
type: "POST",
data: $('#form).serialize(), //gets form data, sends via post to processing page
dataType: 'json', //what to do with returned data, in this case, it's json
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("An error has occurred making the request: " + errorThrown)
},
success: function(outstuff){
if (outstuff.success == 1) { //
alert('success')
} else {
$('#error').html('there is an error, do something');
//Do other stuff
}
}
});
});
</script>
Yes, you should add and id to the drop down menu, otherwise you can't call it as $("#title") in jquery
and in your jquery, it will try to submit when the page loads as you're calling it like
jQuery(document).ready(function(){
Try to change it to $(function(){
Hope it will work
It's weird isn't it, that you've nicely set IDs for all the other items in your form except for your drop downs, where you've only set names.
Forms submit the values of the controls using name, but you're referencing the value in your jquery code using id ('#').
So just try changing your dropdown declarations to have ids... like this:
<form method="post" action="test.php" name="contactform" id="contactform">
<div class="grid_6" id="register">
<center><h4>Required Information</h4></center>
<p>
<label for="name">Name:</label>
<input name="name" id="name" type="text" />
</p>
<p>
<label for="email">Your Email:</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="trew">Contact Phone:</label>
<input name="txtAreaCode" id="txtAreaCode" style="width: 30px;" maxlength="3" value=""type="text">
<span style="color: rgb(255, 200, 46);"> - </span>
<input name="txtPrefix" id="txtPrefix" style="width: 30px;" maxlength="3" value=""type="text">
<span style="color: rgb(255, 200, 46);"> - </span>
<input name="txtPhone" id="txtPhone" style="width: 45px;" maxlength="4" value=""type="text">
<span style="color: rgb(255, 200, 46);"> - </span>
<input name="txtPhoneExt" id="txtPhoneExt" style="width: 35px;" maxlength="10" value=""type="text">
ext.
</p>
<p>
<label for="zip">Zip Code:</label>
<input name="zip" id="zip" type="text" />
</p>
<p>
<label for="school">Name of School:</label>
<input name="school" id="school" type="text" />
</p>
<p>
<label for="title">Affiliation</label>
<select name="title" id="title">
<option selected="NULL">Please Select</option>
<option value="student">Student</option>
<option value="parent">Parent</option>
<option value="teacher">Teacher</option>
<option value="booster">Booster</option>
<option value="clubpres">Club President</option>
<option value="principal">Principal</option>
<option value="ptsa">PTSA</option>
</select>
</p>
</div>
<div class="grid_6" id="contactinfo">
<center><h4>Additional Information</h4></center>
<p>
<label for="color">School Colors:</label>
<input name="color" id="color" type="text" />
</p>
<p>
<label for="mascot">Mascot:</label>
<input name="mascot" id="mascot" type="text" />
</p>
<p>
<label for="tagline">Tagline/Motto:</label>
<input name="tagline" id="tagline" type="text" />
</p>
<p>
<label for="sbsize">Approximate Student Body Size:</label>
<input name="sbsize" id="sbsize" type="text" />
</p>
<p>
<label for="level">Interest Level:</label>
<select name="level" id="level">
<option value="1">Interested</option>
<option value="2">Slightly Interested</option>
<option value="3">Moderately Interested</option>
<option value="4">Highly Interested</option>
<option value="5">Extremely Interested</option>
</select>
</p>
<p>
<label for="verify">1 + 3 =</label>
<input name="verify" id="verify" class="small" type="text" />
</p>
<button class="fr" type="submit" id="submit">Send</button>
</form>
</div>
I am using the popular ChoronoForm plugin for Joomla. I have created a form which contain dynamic fields. A javascript function is used to add multiple "items". A User clicks on the button "Add another item" and the item field is redisplayed for them to insert additional "items". Similar to the form on this website http://www.unclesmoney.co.uk/home3.php (Fill in the Item Details Section and click on "add another item"). When the form is submited the information is sent via email. The problem, only the item that was inserted last is sent and other itens are ignored (not sent) e.g. if I fill out the form with 2 or more items only he detail of the last item that was filled out is sent. Assume I have to write some php or javascript to pass these values to the html template or is there a more simple way? either way I can do with some pointers on how to do acheive this. There is a similar thread on this forum which was a great help but it doesnt show how to modify the html template. Thanks
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Item Type:</label>
<select class="cf_inputbox validate-selection" id="select_19" size="1" title="" name="select_19">
<option value="">Choose Option</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
<option value="Option 5">Option 5</option>
</select>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textarea">
<label class="cf_label" style="width: 150px;">Detail</label>
<textarea class="cf_inputbox required" rows="3" id="text_2" title="Please enter Item Detail" cols="30" name="text_2"></textarea>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_fileupload">
<label class="cf_label" style="width: 150px;">File</label>
<input class="cf_fileinput cf_inputbox" title="" size="20" id="file_3" name="file_3" type="file" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">File 2</label>
<input class="cf_inputbox required validate-number" maxlength="150" size="30" title="Must contain a value" id="text_4" name="text_4" type="text" />
</div>
<div class="cfclear"> </div>
</div>
</div>
<span id="writeroot"></span>
<input type="button" value="Add Another Item" onclick="moreItems()" />
.....
Javascript
var counter = 0;
function moreItems() {
counter++;
var newFields = document.getElementById('readRoot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
Chronoforms does a simple replacement in the email template to fill in the form values. Unless you've some code to manipulate that, it is only expecting a single value. What you need to do is add some PHP in the "On Submit Code - before sending email" area in the Form Code tab. A quick loop through the all of the extra fields to combine them in to the single variable name that Chronoforms is expecting should fix your problem.