Why 'type=button' not working instead of 'type=submit'

Question

Hello i have this code:

My problem:

If i change the

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

to

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

the result is doesn't work

I already try with change $('form#kontak-arlina').button(function(e) but not working.

My Code:

$('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);
});

<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>

I want to the type="button" is working with my javascript, how to it?

Answer 1

Remove 'text' and add 'val' and also write the click handler function for submit button, replace type = "submit" to "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>

Answer 2

Because earlier you were using type="submit" and what it does, whenever you click this, it submits the HTML form that contains this button. but as now you want to use the type=button it doesn't submit the form.

earlier you hooked up the Submit event of the form, as on clicking the button it submits the form, but now as type='button' doesn't submit the form, so your event will not be fired.

What you can do now, hookup the click event on your new type='button'

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

if that was your new button you can use your old JS code, just subscribe the click event on this button.

$('#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);
});