H
H
hello world2015-06-13 16:48:10
JavaScript
hello world, 2015-06-13 16:48:10

How to add a modal window?

Hi all. Tell me, how can I add a modal window for entering information about the client when the button is clicked? But, if the fields are not correct, then a message is displayed about the unselected value, otherwise - show the modal window?
Here is an example code now:

<form name="form"  id="config" method="post" action="index.php" enctype="multipart/form-data">      			
<table id="myTab" class='display table table-bordered'>
<tr>					
<td>Процессор</td>
<td></td>				
<td> 
<div class='newselect'>
<select class='chosen' id='chosenmak' style='width:540px;' name='maker'> 
<option value='' data-price=''>-- Выбрать --</option>
<?php 
foreach ($arr_get as $value)  {
echo '<option data-price="'.$value['Price'].'" data-image="'.$value['photo'].'" value="'.$value['ID'].'">'.$value['Manufacture'].'</option>'; 
}
?>
</select>				          
</div>
</td> 
</tr>
</table> 	
<table class='display table table-bordered'>
<tr>
<td> 	
<button class="btn btn-danger" name="clear"><i class="icon-remove"></i> Очистить всё</button>		
</td> 				
<td class="sum">
<h4>Итого стоимость основных компонентов <span id="sum_main">0.00 <sup>грн.</sup></span></h4>
<input type="hidden" id="test" name="test" value=""/>
</td>
<td> 	
<button class="btn btn-success" value="1" name="korz"><i class="icon-shopping-cart"></i> Оформить заказ</button>		

</td>

js code
$(document).ready(function() {	
$("#config").submit(function() {		
var send_form 	= 1;		
var cpu        	= $("#chosenmak").val();

$("#create_error").html("");
if (cpu == "") {
  $("#create_error").append("<div class='alert alert-block alert-error fade in' id='alert'><button type='button' class='close' data-dismiss='alert'>×</button><h4 class='alert-heading'>Не выбран процессор</h4></div>"); 
  window.scrollTo(0, $("#alert").offset().top);
  send_form = 0; 
}																								 
if (send_form == 1) { 
  temp = window.confirm('Собрать конфигурацию?'); 
  if (temp) 
  { return true; }
else { 
   return false; } 

  } else {

 return false;	

}	
return false;
});			
});

I found a modal window for BS, but I can't set it up. It immediately opens when you click on the button, even if nothing is selected, but it is necessary that it first shows an error, and if everything is ok, then the modal is launched.
<a href="#myModal" data-toggle="modal" class="btn btn-success">
                                    Form in Modal
                                </a><div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade" style="display: none;">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                                        <h4 class="modal-title">Form Tittle</h4>
                                    </div>
                                    <div class="modal-body">

                                        <form role="form">
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">Email address</label>
                                                <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
                                            </div>
                                            <div class="form-group">
                                                <label for="exampleInputPassword1">Password</label>
                                                <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
                                            </div>
                                            <div class="form-group">
                                                <label for="exampleInputFile">File input</label>
                                                <input type="file" id="exampleInputFile3">
                                                <p class="help-block">Example block-level help text here.</p>
                                            </div>
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox"> Check me out
                                                </label>
                                            </div>
                                            <button type="submit" class="btn btn-default">Submit</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
F
FMars, 2015-06-14
@FMars

HTML:

var valid = true; // определяете валидность полей
if (valid) {
    $('#myModal').modal();
} else {
    // сообщение о ошибке
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question