[SOLVED] form inside dialog box

General issues related to the use of Metro 4
Post Reply
jerd3v
Posts: 2
Joined: Thu Aug 16, 2018 3:10 pm
Status: Offline

[SOLVED] form inside dialog box

Post by jerd3v » Thu Aug 16, 2018 3:50 pm

Good day Sir/s & Ma'am/s,

I'm having issue on using Metro UI dialog. I put my form tag inside the dialog data, and place two buttons. One for submission and the other is for closing or dismissing the dialog. But upon clicking the close button the form is submitting. I hope somebody could help me with this issue. Please take note that I'm using Laravel 5.5 framework.

Code: Select all


<div class="dialog" data-role="dialog" data-show="true">
	<form action="justMakingThisPart" method="POST" enctype="multipart/form-data">
	    <div class="dialog-title">Edit Profile</div>
		    <div class="dialog-content">
		        <div>
		        	<label for="justMakingThisPart"></label>
	        		<select name="justMakingThisPart" class="cell-6">
        			<option>justMakingThisPart</option>
			        		justMakingThisPart
				<option value="justMakingThisPart">justMakingThisPart</option>
			        		justMakingThisPart
	        		</select>
		        	<label for="justMakingThisPart">Name</label>
		        	<input name="profileName" value="justMakingThisPart"></input>
		        	<label for="profileEmail">Email</label>
		        	<input type="email" name="profileEmail" value="justMakingThisPart">
		        	<label for="profileCompany">Company</label>
		        	<input type="text" name="profileCompany" placeholder="Optional">
		        	<label for="profileBirthday">Birthday</label>
		        	<input type="date" name="profileBirthday" placeholder="Optional">
		        </div>
		    </div>
	    <div class="dialog-actions">
    	<div class="place-right">
	        <button class="button primary" type="submit">Submit</button>
	        <button class="button alert js-dialog-close">Close</button>
	    </div>
    </div>
</form>
</div>

These are the CDN that I'am using:

Code: Select all


	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/metro/4.2.18/css/metro-all.css">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/metro/4.2.18/css/metro-icons.css">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/metro/4.2.18/css/metro-colors.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/metro/4.2.18/js/metro.js"></script>

Last edited by jerd3v on Fri Aug 17, 2018 3:26 am, edited 1 time in total.

drodriguez
Posts: 44
Joined: Wed Apr 11, 2018 7:32 pm
Status: Offline

Post by drodriguez » Thu Aug 16, 2018 5:29 pm

Hi. No test but
for most browsers the default type of button is submit.

try set button close to 'type=button'
and let me know.

jerd3v
Posts: 2
Joined: Thu Aug 16, 2018 3:10 pm
Status: Offline

Post by jerd3v » Fri Aug 17, 2018 3:24 am

Thank you drodriguez, my issue has been solve by your answer.
drodriguez wrote:
Thu Aug 16, 2018 5:29 pm
Hi. No test but
for most browsers the default type of button is submit.

try set button close to 'type=button'
and let me know.

Post Reply