Question

您好我有这段代码：

我的问题：

如果我改变了

<input id="ContactForm1_contact-form-submit" type="submit" value="Confirmation">

到

<input id="ContactForm1_contact-form-submit" type="button" value="Confirmation">

结果不起作用

我已尝试更改$（＆＃39;表格＃kontak-arlina＆＃39;） .button （功能（e）但不能正常工作。

我的代码：

＆＃13;

$('form#kontak-arlina').submit(function(e) {
    e.preventDefault();
    var message, Name, Email, Phone, Address, Trx, Payment;
    
    Name = $('input#ContactForm1_contact-form-name').val();
    Email = $('input#ContactForm1_contact-form-email').val();
    Phone = $('input#form-phone').val();
    Address = $('input#form-address').val();
    Trx = $('input#form-trxid').val();
    Payment = $('select#form-payment').val();
    
    message = "- Order Detail -" + '\n';
    message += "Name: " + Name + '\n';
    message += "Email: " + Email + '\n';
    message += "Phone: " + Phone + '\n';
    message += "Address: " + Address + '\n';
    message += "Trx ID: " + Trx + '\n';
    message += "Payment: " + Payment + '\n';
    $('textarea#ContactForm1_contact-form-email-message').text(message);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="kontak-arlina" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Full Name *" type="text" value="" required/>
<br/>
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" type="text" value="" required/>
<br/>
<input id="form-phone" placeholder="Phone Number *" required/>
<br/>
<input id="form-address" placeholder="Address *" required/>
<br/>
<input id="form-trxid" placeholder="Transaction ID *" required/>
<br/>
<select id="form-payment" required>
<option value="" class="loop">Select Payment</option>
<option value="Paypal" class="loop">Paypal</option>
<option value="Bank Transfer" class="loop">Bank Transfer</option>
<option value="COD" class="loop">Cash on Delivery (COD)</option>
</select>
<br/>
<textarea cols="50" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Result *" rows="10"></textarea>
<input id="ContactForm1_contact-form-submit" type="submit" value="Confirmation">
<br/>
<br/>
</form>

＆＃13;

我想 type =＆＃34;按钮＆＃34; 正在使用我的javascript，怎么做？

Answer 1

因为您之前使用的是type="submit"及其功能，所以无论何时单击此按钮，都会提交包含此按钮的HTML form。但是现在你想使用type=button它不提交表格。

之前你联系了表单的Submit事件，就像单击提交表单的按钮一样，但现在type='button'没有提交表单，所以你的事件不会被解雇

您现在可以做什么，将新click

上的type='button'事件连接起来

<input id="ContactForm1_contact-form-submit" type="button" value="Confirmation">

如果这是您的新按钮，您可以使用旧的JS代码，只需在此按钮上订阅click事件。

$('#ContactForm1_contact-form-submit').click(function(e) {
    e.preventDefault();
    var message, Name, Email, Phone, Address, Trx, Payment;

    Name = $('input#ContactForm1_contact-form-name').val();
    Email = $('input#ContactForm1_contact-form-email').val();
    Phone = $('input#form-phone').val();
    Address = $('input#form-address').val();
    Trx = $('input#form-trxid').val();
    Payment = $('select#form-payment').val();

    message = "- Order Detail -" + '\n';
    message += "Name: " + Name + '\n';
    message += "Email: " + Email + '\n';
    message += "Phone: " + Phone + '\n';
    message += "Address: " + Address + '\n';
    message += "Trx ID: " + Trx + '\n';
    message += "Payment: " + Payment + '\n';
    $('textarea#ContactForm1_contact-form-email-message').text(message);
});

Answer 2

删除'text'并添加'val'并编写提交按钮的点击处理函数，将type =“submit”替换为“button”。

$('#ContactForm1_contact-form-submit, input, select').on('click change', function(e) {
    e.preventDefault();
    var message, Name, Email, Phone, Address, Trx, Payment;
    
    Name = $('input#ContactForm1_contact-form-name').val();
    Email = $('input#ContactForm1_contact-form-email').val();
    Phone = $('input#form-phone').val();
    Address = $('input#form-address').val();
    Trx = $('input#form-trxid').val();
    Payment = $('select#form-payment').val();
    
    message = "- Order Detail -" + '\n';
    message += "Name: " + Name + '\n';
    message += "Email: " + Email + '\n';
    message += "Phone: " + Phone + '\n';
    message += "Address: " + Address + '\n';
    message += "Trx ID: " + Trx + '\n';
    message += "Payment: " + Payment + '\n';
    $('textarea#ContactForm1_contact-form-email-message').val(message);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="kontak-arlina" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Full Name *" type="text" value="" required/>
<br/>
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" type="text" value="" required/>
<br/>
<input id="form-phone" placeholder="Phone Number *" required/>
<br/>
<input id="form-address" placeholder="Address *" required/>
<br/>
<input id="form-trxid" placeholder="Transaction ID *" required/>
<br/>
<select id="form-payment" required>
<option value="" class="loop">Select Payment</option>
<option value="Paypal" class="loop">Paypal</option>
<option value="Bank Transfer" class="loop">Bank Transfer</option>
<option value="COD" class="loop">Cash on Delivery (COD)</option>
</select>
<br/>
<textarea cols="50" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Result *" rows="10"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Confirmation">
<br/>
<br/>
</form>

为什么＆＃39; type = button＆＃39;不工作而不是＆＃39; type = submit＆＃39;

2 个答案: