отправить форму php с другим типом ввода используя javascript/ajax

Я должен отправить form с некоторыми полями, like multiple checkboxes selection и некоторыми hidden input fields через ajax и заменить html-контент ответом. наконец, я иду с javascript/ajax ... но где я был неправ?отправить форму php с другим типом ввода используя javascript/ajax

<?php include('session.php'); 
$userid=$_SESSION[ 'Userid']; 
include('connection.php'); 
?> 

    <head> 
    <script> 
function myFunction() { 
var soi = document.getElementById("sweaterownerid").value; 
var osp = document.getElementById("osweaterpic").value; 
var osi = document.getElementById("osweaterid").value; 
var value = []; 
     $("input[name*='" + sweater+ "']").each(function() { 
     // Get all checked checboxes in an array 
     if (jQuery(this).is(":checked")) { 
     value.push($(this).val()); 
      } 
     }); 


var dataString = 'soi1=' + soi + '&osp1=' + osp + '&osi1=' + osi + '&value1=' + value; 
if (soi1 == '' || osp1 == '' || osi1 == '' || value1 == '') { 
alert("Please Fill All Fields"); 
} else { 
// AJAX code to submit form. 
$.ajax({ 
type: "POST", 
url: "Usercloset1.php", 
data: dataString, 
cache: false, 
success: function(response) { 
$('#mydiv').replaceWith(response); 
} 
}); 
} 
return false; 
} 
</script> 
    </head> 
    <div id="mydiv"> 
    <div class="padding-top"> 
     <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 "> 
      <div class="shop_item" style="width:100%;"> 


       <form id="myForm"> 
        <?php 
        $sweaterid=$_GET['d']; 
        $sownerid=$_GET['e']; 
        $opic=$_GET['f'];    

        $query1="select * from `usersweater` where `Sweaterid`='$sweaterid'"; 
        $result1=mysql_query($query1); 
        $row1=mysql_fetch_assoc($result1); 
        $sweaternikname=$row1['SNickname']; 

        ?> 

        <div> 
         <ul class="sweaters"> 
          <li> <h4><?php echo $sweaternikname; ?></h4> <img src="upload/<?php echo $opic; ?>"> </li> 
         </ul> 
         <ul class="sweater1"> 

          <?php 
     $query="select * from `usersweater` where `Userid`='$userid' && `Swap`='0' "; 
        $result = mysql_query($query); 


      while ($line = mysql_fetch_array($result, MYSQL_ASSOC)){ 
           $sid = $line[Sweaterid]; 
           $img = $line[Sweaterpic]; 
           $nikname = $line[SNickname]; 
           $size = $line[Size]; 
          ?> 

<li> <h4><?php echo $nikname; ?><input type="checkbox" name="sweater[]" value="<?php echo $sid; ?>" /></h4> <img src="upload/<?php echo $img; ?>"> </li> 

<?php } ?> 
         </ul> 
        </div> 


        <input type="hidden" name="sweaterownerid" value="<?php echo $sownerid; ?>"> 
        <input type="hidden" name="osweaterpic" value="<?php echo $opic; ?>"> 
        <input type="hidden" name="osweaterid" value="<?php echo $sweaterid; ?>"> 

        <input type="submit" name="next" onclick="myFunction()" value="NEXT" class="btn woo_btn btn-primary" style="margin-left: 30px;"> 
        <input type="button" name="cancel" value="CANCEL" class="btn woo_btn btn-primary"> 
       </form> 
      </div> 
     </div> 

     <div class="clearfix"></div> 
        <hr> 
       </div> 
    </div>

Я хочу передать выбранную опцию на другую страницу, которую я в настоящее время с помощью действия формы. Но я хочу динамически, не перезагружая страницу. Я новичок в ajax/javascript.

Во-вторых, как я могу обработать ответ, отправив эту форму, я хочу заменить содержимое первой страницы ответом, который мы получаем с помощью ajax. Это означает, что все html-содержимое заменяется содержимым html другой страницы. Я подал файл, который я хочу получить в ответ после отправки.

<div class="padding-top"> 
 
\t <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 "> 
 
\t \t <div class="shop_item" style="width:100%;"> 
 

 
\t \t \t \t <div style="text-align:center;"> 
 
\t \t \t \t \t <h4>Are you sure you want to swap?</h4> 
 
\t \t \t \t </div> 
 

 
\t \t \t <form action="Usercloset2.php" method="post"> 
 
\t \t \t \t <?php 
 
\t \t \t \t include('session.php'); 
 
\t \t \t \t include('connection.php'); 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t foreach ($_POST['value1'] as $sid){ 
 
\t \t \t $query1="select * from `usersweater` where `Sweaterid`='$sid'"; 
 
\t \t \t \t $result1=mysql_query($query1); 
 
\t \t \t \t $row1=mysql_fetch_assoc($result1); 
 
\t \t \t \t $sweaternikname=$row1['SNickname']; 
 
\t \t \t \t $sweaterpic=$row1['Sweaterpic']; 
 
\t \t \t \t ?> 
 

 
\t \t \t \t <div style=" "> 
 
\t \t \t \t \t <ul class="sweaters"> 
 
\t \t \t \t \t \t <li> <h4><?php echo $sweaternikname; ?></h4> <img src="upload/<?php echo $sweaterpic; ?>"> </li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 

 

 
\t \t \t \t <!-------requester's own sweater details---------------> 
 
\t \t \t \t <input type="hidden" name="sid[]" value="<?php echo $sid;?>"> 
 
\t \t \t \t <input type="hidden" name="snikname[]" value="<?php echo $sweaternikname;?>"> 
 
\t \t \t \t <input type="hidden" name="spic[]" value="<?php echo $sweaterpic;?>"> 
 
\t \t \t \t 
 
\t \t \t \t <?php } ?> 
 

 
\t \t \t \t <!-------requester's show intrest that sweater details---------------> 
 
\t \t \t \t <?php 
 
\t \t \t \t $sownerid=$_POST['soi1']; 
 
\t \t \t \t $opic=$_POST['osp1']; 
 
\t \t \t \t $sweaterid=$_POST['osi1']; 
 
\t \t \t \t ?> 
 
\t \t \t \t <input type="hidden" name="sweaterownerid" value="<?php echo $sownerid;?>"> 
 
\t \t \t \t <input type="hidden" name="osweaterpic" value="<?php echo $opic;?>"> 
 
\t \t \t \t <input type="hidden" name="osweaterid" value="<?php echo $sweaterid;?>"> 
 
\t \t \t \t 
 
\t \t \t \t <div style="float:right; margin-right:10px;"> 
 
\t \t \t \t \t <input type="submit" name="next" value="NEXT" class="btn woo_btn btn-primary"> 
 
\t \t \t \t \t <input type="button" name="cancel" value="CANCEL" class="btn woo_btn btn-primary"> 
 
\t \t \t \t </div> 
 
\t \t \t </form> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <div class="clearfix"></div> 
 
\t \t <hr> 
 
\t </div>

источник

2015-04-24 Ketan Joshi

' 'Почему бы вам не попробовать сначала? На этой теме есть много информации о SO и Google. – Mackan

Вы можете achive это, хотя это.

jQuery(document).ready(function($){ 
    $("#your_button_id").on('click', function(e){ 
     e.preventDefault(); 
     $("#your_form_id") .submit(); 
    }) 
})

Ajax

$("#your_form_id").on('submit', function(e) { 
    e.preventDefault(); 
    $.post('URL_HERE', $(this).serialize(), function(response) { 
    console.log(response) 
    }); 
});

источник

2015-04-24 06:23:22

'без перезагрузки страницы ', это будет определенно перезагрузить страницу – empiric

, тогда вы должны использовать ajax, $ (" # your_form_id "). On (' submit ', function (e) { e.preventDefault(); $. post ('URL_HERE', $ (this) .serialize(), function (response) { console.log (response) }); }); –

Я запутался .... ур код помещается в ajax ?? или он заменяет скрипт? –

вы можете использовать в Ajax, как это:

var form = $('#your_form_id'); 
var formAction = $('#your_form_id').attr('action'); 

/* Get input values from form */ 
values = form.serializeArray(); 

/* Because serializeArray() ignores unset checkboxes and radio buttons: */ 
values = values.concat(
    $('#your_form_id input[type=checkbox]:not(:checked)').map(
    function() { 
     return { 
     "name": this.name, 
     "value": this.value 
     } 
    }).get() 
); 

$.ajax({ 
    'ajax code here' 
});

или вы можете проверить https://api.jquery.com/serialize/

источник

2015-04-24 06:29:31 vaibhav

Что написано на последнем шаге ajax, который является успешным :: ??, как обрабатывать respose & replace с содержанием первой страницы ...? –

@KetanJoshi: показать мне ваш ajax – vaibhav

u может показать в моем вопросе..и не знаю, что такое returndata .. –

отправить форму php с другим типом ввода используя javascript/ajax

ответ

Смежные вопросы