Sparkm4n Sparkm4n - 3 months ago 15
PHP Question

submit value of the image with ajax in jquery

My idea was to ask the user how many forms he wants to be created and then to choose the form he wants to edit, thereafter ask how many elements he wants to be created and the type of them. that's what I have done so far:

<h2>Questions</h2><br>

<p>How many questions do you want to be created?</p>

<form id="stepsform">
<input type="number" name="steps" id="steps" style="color:black">
<ul class="actions">
<li><button class="button scrolly" name="numberform" id="numberform">Submit</button></li>
</ul>
</form>


<script>
$( "#stepsform" ).submit(function( event ) {
event.preventDefault();

var $form = $( this ),
term = $form.find( "input[name='steps']" ).val(),
url = $form.attr( "action" );
var posting = $.post( url, { numberform: term } );

posting.done(function( data ) {
var content = $( data ).find( "#content" );

$( "#content" ).empty().append( content );
var uri = "#two";
$(location).attr('href',uri);
});
});
</script>


and that's the script where I stuck, after the images are created via ajax, I want them to be clickable so that the user can submit a value which is behind the image:

<h2>Forms</h2>

<p>choose the form you want to edit</p>
<div id="content">
<form id="elementsform">
<?php
if(isset($_POST['numberform'])){
$i = 0;
$formchoice = array_fill($i, $_POST['numberform'], 'Formular' );

foreach($formchoice as $key){
echo ' <input type="image" src="formular.png" alt="'.$formchoice[$i].$i.'" data-formularid="'.$formchoice[$i].$i.'" height="100px" width="100px" name="'.$formchoice[$i].$i.'"> '."\t";
$i++;
}
}
?>
</form>
<script>
$( "#elementsform input[type='image']" ).click(function( event ) {
event.preventDefault();
var formular_id = $(this).data("formularid");
term = $form.find( "input[type='image']" ).val(),
url = $form.attr( "action" );
var posting = $.post( url, { elementsform: term } );

posting.done(function( data ) {
var content = $( data ).find( "#content1" );

$( "#content1" ).empty().append( content );
var uri = "#three";
$(location).attr('href',uri);
});
});
</script>


when I click on the image, nothing happens but actually it should submit value which is in data-formularid="" and thereafter go to another questions, does anyone know how to do that?

Answer

Delegate your click event

  $( "body" ).on('click','#elementsform input[type="image"]',function( event ) {                
                    $form = $(this).closest('form');
                    event.preventDefault();
                    var formular_id = $(this).data("formularid");
                    term = $form.find(this).val(),
                    url = $form.attr( "action" );
                    var posting = $.post( url, { elementsform: term, formularid:formular_id } );

                    posting.done(function( data ) {
                    var content = $( data ).find( "#content1" ); 

                    $( "#content1" ).empty().append( content );
                    var uri = "#three";    
                    $(location).attr('href',uri);
                });