英文:
Jquery Select value from a dropdown box(NOT SHOWING) on the email
问题
我有一个下拉表单，我在PHP中使用for循环生成，我试图获取所选的日期（作为值）通过电子邮件发送。
在首页上我基本上有如下所示。这不是完整的代码，因为我的循环更复杂，但我不认为问题出在那里。
在我的custom.js文件中，我有以下内容。问题应该出在下面代码中的预订日期选择上。我对jQuery不太熟悉，可能是个愚蠢的问题。
我能正确获取所有输入。我的问题出在选择下拉框上。
我做错了什么？
我的最后一个文件是send.php，只是发送电子邮件。那里也没问题，因为所有字段都被正确发送，除了预订日期。
作为输入单选框，在我之前的代码中它可以工作。但是在用PHP动态创建的下拉框中就不行了。
send.php发送了所有的信息，除了预订日期，以下是send.php的输出/send.php?firstname=Demetris&lastname=Demetriou&amount=2&mobilephone=99999&email=email%40gmail.com&message=somenotes
在代码片段中，它显示了我的PHP foreach和for循环的输出。这是用PHP完成的。那里没有问题。
我不确定或者说这部分代码不起作用var reservationDate = $contactform.find('select[name="add_r_date"]:selected').val();
$('#send').live("click", function() {
var url = 'send.php';
var error = 0;
var $contactpage = $(this).closest('.ui-page');
var $contactform = $(this).closest('.contact-form');
$('.required', $contactform).each(function(i) {
if ($(this).val() === '') {
error++;
}
});
if (error > 0) {
alert('请填写所有必填字段。必填字段用星号 * 标记。');
} else {
var firstname = $contactform.find('input[name="add_name"]').val();
var lastname = $contactform.find('input[name="add_surname"]').val();
var amount = $contactform.find('input[name="add_seats"]:checked').val();
var reservationDate = $contactform.find('select[name="add_r_date"]:selected').val();
var mobilephone = $contactform.find('input[name="add_phone"]').val();
var email = $contactform.find('input[name="email"]').val();
var message = $contactform.find('input[name="add_note"]').val();
$.ajax({
type: "GET",
url: url,
data: {
firstname: firstname,
lastname: lastname,
amount: amount,
reservationDate: reservationDate,
mobilephone: mobilephone,
email: email,
message: message
},
success: function(data) {
if (data == 'success') {
console.log(data);
window.location = 'thankyou.php';
} else {
alert('无法发送您的消息。请重试。');
}
}
});
}
return false;
});
<form action="" id="add-form" class="contact-form">
<label class="col-lg-12 control-label"><strong>日期：</strong></label>
<select name="add_r_date" id="add_r_date">
<!-- 这里是你的日期选项 -->
</select>
</form>
英文:
I have a dropdown form that i generate with a for loop in php and i am trying to get the selected value which is a date to be send by email
On the index page i have basically like below. It's not the full code because my loop is more complex but i don't believe the problem is there.
on my custom.js file i have as below. The issue must be on the reservation date select on the below code. I am not that good with jquery and it must be something silly probably.
All inputs i get them correctly. My issue is with the select dropdown box.
What i am doing wrong?
my last file its the send.php which just sends the email. Nothing wrong there as well as all fields are sent correctly besides the reservation date.
As an input radio box which i had the code before the date works. But inside a dynamically created with php select dropdown box it doesn't.
The send.php sends all the info besides Reservation date here the output of send.php /send.php?firstname=Demetris&lastname=Demetriou&amount=2&mobilephone=99999&email=email%40gmail.com&message=somenotes
In the snippet it shows the output of the my php foreach and for loops. Its done in php. No issues there.
I am not sure or its not working this part of the code var reservationDate = $contactform.find('select[name="add_r_date"]:selected').val();
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('#send').live("click", function() {
var url = 'send.php';
var error = 0;
var $contactpage = $(this).closest('.ui-page');
var $contactform = $(this).closest('.contact-form');
$('.required', $contactform).each(function(i) {
if ($(this).val() === '') {
error++;
}
});
// each
if (error > 0) {
alert('Please fill in all the mandatory fields. Mandatory fields are marked with an asterisk *.');
} else {
var firstname = $contactform.find('input[name="add_name"]').val();
var lastname = $contactform.find('input[name="add_surname"]').val();
var amount = $contactform.find('input[name="add_seats"]:checked').val();
var reservationDate = $contactform.find('select[name="add_r_date"]:selected').val();
var mobilephone = $contactform.find('input[name="add_phone"]').val();
var email = $contactform.find('input[name="email"]').val();
var message = $contactform.find('input[name="add_note"]').val();
//submit the form.send.php takes from below.
$.ajax({
type: "GET",
url: url,
data: {
firstname: firstname,
lastname: lastname,
// state : state,
amount: amount,
reservationDate: reservationDate,
mobilephone: mobilephone,
email: email,
message: message
},
success: function(data) {
if (data == 'success') {
console.log(data);
// show thank you
window.location = 'thankyou.php'
//$contactpage.find('.contact-thankyou').show();
//$contactpage.find('.contact-form').hide();
} else {
alert('Unable to send your message. Please try again.');
}
}
});
//$.ajax
}
return false;
});
<!-- language: lang-html -->
<form action="" id="add-form" class="contact-form">
<label class="col-lg-12 control-label"><strong>Dates:</strong></label>
<select name="add_r_date" id="add_r_date">Friday,31 Mar
<option value="2023-03-31">Friday,31 Mar</option>Saturday,01 Apr
<option value="2023-04-01">Saturday,01 Apr</option>Sunday,02 Apr
<option value="2023-04-02">Sunday,02 Apr</option>Monday,03 Apr
<option value="2023-04-03">Monday,03 Apr</option>Tuesday,04 Apr
<option value="2023-04-04">Tuesday,04 Apr</option>Wednesday,05 Apr
<option value="2023-04-05">Wednesday,05 Apr</option>Thursday,06 Apr
<option value="2023-04-06">Thursday,06 Apr</option>Friday,07 Apr
<option value="2023-04-07">Friday,07 Apr</option>Saturday,08 Apr
<option value="2023-04-08">Saturday,08 Apr</option>Sunday,09 Apr
<option value="2023-04-09">Sunday,09 Apr</option>Monday,10 Apr
<option value="2023-04-10">Monday,10 Apr</option>Tuesday,11 Apr
<option value="2023-04-11">Tuesday,11 Apr</option>Wednesday,12 Apr
<option value="2023-04-12">Wednesday,12 Apr</option>Thursday,13 Apr
<option value="2023-04-13">Thursday,13 Apr</option>Friday,14 Apr
<option value="2023-04-14">Friday,14 Apr</option>Saturday,15 Apr
<option value="2023-04-15">Saturday,15 Apr</option>Sunday,16 Apr
<option value="2023-04-16">Sunday,16 Apr</option>Monday,17 Apr
<option value="2023-04-17">Monday,17 Apr</option>Tuesday,18 Apr
<option value="2023-04-18">Tuesday,18 Apr</option>Wednesday,19 Apr
<option value="2023-04-19">Wednesday,19 Apr</option>Thursday,20 Apr
<option value="2023-04-20">Thursday,20 Apr</option>Friday,21 Apr
<option value="2023-04-21">Friday,21 Apr</option>Saturday,22 Apr
<option value="2023-04-22">Saturday,22 Apr</option>Sunday,23 Apr
<option value="2023-04-23">Sunday,23 Apr</option>Monday,24 Apr
<option value="2023-04-24">Monday,24 Apr</option>Tuesday,25 Apr
<option value="2023-04-25">Tuesday,25 Apr</option>Wednesday,26 Apr
<option value="2023-04-26">Wednesday,26 Apr</option>Thursday,27 Apr
<option value="2023-04-27">Thursday,27 Apr</option>Friday,28 Apr
<option value="2023-04-28">Friday,28 Apr</option>Saturday,29 Apr
<option value="2023-04-29">Saturday,29 Apr</option>Sunday,30 Apr
<option value="2023-04-30">Sunday,30 Apr</option>Monday,01 May
<option value="2023-05-01">Monday,01 May</option>Tuesday,02 May
<option value="2023-05-02">Tuesday,02 May</option>Wednesday,03 May
<option value="2023-05-03">Wednesday,03 May</option>Thursday,04 May
<option value="2023-05-04">Thursday,04 May</option>Friday,05 May
<option value="2023-05-05">Friday,05 May</option>Saturday,06 May
<option value="2023-05-06">Saturday,06 May</option>Sunday,07 May
<option value="2023-05-07">Sunday,07 May</option>Monday,08 May
<option value="2023-05-08">Monday,08 May</option>Tuesday,09 May
<option value="2023-05-09">Tuesday,09 May</option>Wednesday,10 May
<option value="2023-05-10">Wednesday,10 May</option>Thursday,11 May
<option value="2023-05-11">Thursday,11 May</option>Friday,12 May
<option value="2023-05-12">Friday,12 May</option>Saturday,13 May
<option value="2023-05-13">Saturday,13 May</option>Sunday,14 May
<option value="2023-05-14">Sunday,14 May</option>Monday,15 May
<option value="2023-05-15">Monday,15 May</option>Tuesday,16 May
<option value="2023-05-16">Tuesday,16 May</option>Wednesday,17 May
<option value="2023-05-17">Wednesday,17 May</option>Thursday,18 May
<option value="2023-05-18">Thursday,18 May</option>Friday,19 May
<option value="2023-05-19">Friday,19 May</option>Saturday,20 May
<option value="2023-05-20">Saturday,20 May</option>Sunday,21 May
<option value="2023-05-21">Sunday,21 May</option>Monday,22 May
<option value="2023-05-22">Monday,22 May</option>Tuesday,23 May
<option value="2023-05-23">Tuesday,23 May</option>Wednesday,24 May
<option value="2023-05-24">Wednesday,24 May</option>Thursday,25 May
<option value="2023-05-25">Thursday,25 May</option>Friday,26 May
<option value="2023-05-26">Friday,26 May</option>Saturday,27 May
<option value="2023-05-27">Saturday,27 May</option>Sunday,28 May
<option value="2023-05-28">Sunday,28 May</option>Monday,29 May
<option value="2023-05-29">Monday,29 May</option>Tuesday,30 May
<option value="2023-05-30">Tuesday,30 May</option>
</select>
</form>
<!-- end snippet -->
答案1
得分: 2
Ok，终于我解决了这个问题。
我将这行代码更改为：
var reservationDate = $contactform.find('#add_r_date option:selected').val();
在此之前，我也按照一些人的建议将方法从GET更改为POST。谢谢。但仅仅那样并没有解决问题，直到我改变了上述行。我正在使用jQuery 1.12。感谢大家的帮助。
英文:
Ok finally i solved the problem.
I changed this line of code
var reservationDate = $contactform.find('select[name="add_r_date"]:selected').val();
to this
var reservationDate = $contactform.find('#add_r_date option:selected').val();
Before that i also changed from GET method to POST method as some here suggested. Thanks. But that alone didnt solve the problem until i changed the above line. I am using jquery 1.12. Thanks all for trying to help.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论