I have a div with dynamic repeating form to change image of a repeating div based on respective id, when a div image is clicked i want to trigger file input for clicked div.
contents are loaded into div(image-container) with jquery post request.
HTML
<div id="image-container"></div>
//repating dynamic form
<?php while($row=mysqli_fetch_assoc($result)):?>
<div class="image">
<form name="image_change">
<img src=".." class="image_change"/>
<input name="image" type="file" />
<input name="id" type="hidden" />
<input name="edit" type="submit" />
</form>
</div>
<?php endwhile;?>
jQuery
$('#image-container').on('click', 'form[name=image_change] .image_change', function(){
$(this).find('input[name=image]').trigger('click');
return false;
});
This works only when form is not repeating, how can i make it work with repeating form.
Please see and suggest any possible way to do this.
Thanks.
This is because you have multiple forms with the same name and only the first one is recognized.
Remove name attribute from the form:
<div class="image">
<form>
<img src=".." class="image_change"/>
<input name="image" type="file" />
<input name="id" type="hidden" />
<input name="edit" type="submit" />
</form>
</div>
and modify the js code to the following
$(document).on('click', 'form .image_change', function(){
$(this).parent().find('input[name=image]').trigger('click');
return false;
});
if you need to differentiate the form add ids to the forms.
Related
I want use that form for change image but without click to submit.
<form action="chav.php" method="POST" enctype="multipart/form-data" >
<label for="fileup"><img src="/images/img-ico.png"/>Aggiungi Foto</label>
<input type="file" name="fileup" id="fileup" /><br/>
<input type="submit" name='submit' value="Upload" />
<input type="hidden" value="<?php echo milldigital_filter('get',$_REQUEST['pg']); ?>" name="pg" />
</form>
so when i select image, directly submit without press any button.
You can submit form using javascript within form event attribute onchange:
...
<input type="file" name="fileup" id="fileup" onchange="this.form.submit()" />
...
When browser render form element with onchange property it starts to observe if its value changes and execute javascript code when it does. It changes when you select file. documentation
this.form means we'll refer to form object that this html (form) element belongs to. Then execute its submit() method.
I have a problem with submitting a input field. I know I am not the first one who ask this question but I looked at the answers and they didn't work.
I have an input field and a submit button inside a div. I have the code working so that you can search on button press but I can't get submitting on enter press working.
html:
<div class="search singers" action="templates/search/search_singer.php" method="POST">
<input name="search" type="text" id="search" placeholder="Search here for singers" onkeyup="autosug();" data-file="search_singers"/><input class="button" type="submit" value="Search" onclick="search();"/>
<div id="output" class="output">
</div>
</div>
Jquery code:
var link = '#search';
//post input
$(function(){
$(link).keydown(function(e){
if (e.keyCode == 13) {
$(link).submit();
//He detect an enter press but stops then
}
});
});
I found the Jquery code on this site
And here a similar question: here
problem sovled I came at the idea that I have a function that makes the ajax request to send the data to php. I now call that function on enter press.
Your form should be like this. You forgot the form tag in your code, and that's why the form won't submit.
<div class="search singers">
<form name='your form' action="templates/search/search_singer.php" method="POST">
<input name="search" type="text" id="search" placeholder="Search here for singers" onkeyup="autosug();" data-file="search_singers"/>
<input class="button" type="submit" value="Search"/>
</form>
<div id="output" class="output">
</div>
</div>
And second thing your autonsan function like this
<script>
function autosug() {
alert("You you are here");
}
</script>
You need to use a form. So when you will press enter, then form will be submitted including input field value.
<div class="search singers">
<form action="templates/search/search_singer.php" method="POST">
<input name="search" type="text" id="search" placeholder="Search here for singers" onkeyup="autosug();" data-file="search_singers"/>
<input class="button" type="submit" value="Search" onclick="search();"/>
</form>
<div id="output" class="output">
</div>
</div>
I have two buttons in my form, one is for answer a question and the other is for copy the question.
<div id="question">
<?php echo($question->content) ?>
</div>
<form action="script.php" method="GET" id="question">
<input type="text" name="question">
<button id="answer" onclick="document.getElementById('question').submit()">Answer the question</button>
<button id="copy" onclick="document.getElementById('question').submit()">Copy the question</button>
</form>
The URL of script.php look now like:
script.php?question=sometext
Now I want that when you click at the copy button the URL looks like this:
script.php?question=sometext©
And for the answer button:
script.php?question=sometext&answer
EDIT:
There are much answers where is said: "use <input type> instead of <button>"
The problem is that I can't use a input field as button because the button is outside my form. And I can't put it inside my form
What you can do is to use one hidden field and change it's name according to the pressed button. Something like the following:
<div id="question">
<?php echo($question->content) ?>
</div>
<form action="script.php" method="GET" id="question">
<input type="text" name="question">
<input id="action" type="hidden" name="" value="">
<button id="answer" onclick="document.getElementById('action').setAttribute('name','answer'); document.getElementById('question').submit()">Answer the question</button>
<button id="copy" onclick="document.getElementById('action').setAttribute('name','copy'); document.getElementById('question').submit()">Copy the question</button>
</form>
Although this would give you the result you want at the url, it would be more appropriate to have as the hidden's field name the "action" and to change it's value to "copy" or "answer" through javascript.
Try to make two forms, with a hidden input field with the values. Then you get the extra parametrt in your url when submitting
Change your form to the following
<form action="script.php" method="GET" id="question">
<input id="question" type="text" name="question">
<input id="answer" type="submit" name="answer" value="true">
<input id="copy" type="submit" name="copy" value="true">
</form>
url:
script.php?question=hello©=true
Then you can check
if(isset($_GET['answer']) && $_GET['answer']=="true"){
//answer action
}
if(isset($_GET['copy']) && $_GET['copy']=="true"){
//copy action
}
I have a form with two "a" links. Both should submit form, but in two different ways.
This is html I currently have.
HTML:
<form method="post" id="doc_form" target="somwhere">
<textarea name="doc_text"><?php echo $file; ?></textarea>
<input type="hidden" name="submitted" value="1" />
</form>
<a id="doc_send_email" class="btn">SEND</a>
<a id="pritn_pdf_btn" onclick="document.getElementById('doc_form').submit();" class="btn">Print <span class="span_pdf">PDF </span></a>
When user clicks on #pritn_pdf_btn, then the form is submitted to index.php with target="somwhere". On server side I am generating pdf with value from textarea and this PDF is opened in new tab (target="somwhere" is some trick that opens pdf in new tab).
However, now I also need submit form on #doc_send_email click. In this case I also need to generate PDF, but it should be sent to provided email and then it should show confirmation message on the same page. So:
In index.php I need somehow distinguish what caused form submission (pritn_pdf_btn) or (doc_send_email). If I would be able to set some variable on #pritn_pdf_btn.click and on #doc_send_email.click and then sent it via POST, it would help. But I could not find sollution.
I need some way to submit form with target="somwhere" and without target="somwhere". Probably, there is someway on the #pritn_pdf_btn.click and on #doc_send_email.click to submit form with and without target?
It's easier to do it with multiples submit buttons like this:
<form method="post" id="doc_form" target="somwhere">
<textarea name="doc_text"><?php echo $file; ?></textarea>
<input type="hidden" name="submitted" value="1" />
<input type="submit" name="email" value="1" id="doc_send_email" class="btn" value="SEND"/>
<input type="submit" name="pdf" value="1" id="pritn_pdf_btn" class="btn" value="Print PDF"/>
</form>
Then at backend (asuming it is PHP)
if($_POST['email'])
sendEmail();
else
generatePDF();
Or by using JS:
<form method="post" id="doc_form" target="_self">
<textarea name="doc_text"><?php echo $file; ?></textarea>
<input type="hidden" name="submitted" value="1" />
<input type="hidden" name="action" id="action" value="generate" />
</form>
<a id="doc_send_email" onclick="document.getElementById('action').value='email';document.getElementById('doc_form').submit();" class="btn">SEND</a>
<a id="pritn_pdf_btn" onclick="document.getElementById('action').value='generatePdf';document.getElementById('doc_form').target='somwhere';document.getElementById('doc_form').submit();" class="btn">Print <span class="span_pdf">PDF </span></a>
Then at backend (asuming it is PHP)
if($_POST['action']=='email')
sendEmail();
else
generatePDF();
I have a 3 page registration page. After the user selects an option on the first page and clicks submit, the form transforms into the next form using jquery's animate method, meaning it stays on the same page. The question I have is how to get the data from the first form because the content of the 2nd forms is dependent on that information. Here's my html:
<div id="Registration" style="display:none;">
<div class="box">
<form id="frmtype1" action="#" name="frmtype1" method="post">
<header>Registration Options</header><br/>
<label for="Reg_type1"><input type="radio" name="Reg_type" id="Reg_type1" value="1"/> Option 1</label> <br/><br/>
<label for="Reg_type2"><input type="radio" name="Reg_type" id="Reg_type2" value="2"/> Option 2</label><br/><br/>
<label for="Reg_type3"><input type="radio" name="Reg_type" id="Reg_type3" value="3"/> Option 3</label><br/><br/>
<p id="error_message" style="display:none">Please choose an option</p><input type="submit" class="button" name="Submit" value="Submit"/>
</form>
<form name="everything" id="everything" action="#" method="post">
<header>Registration Information</header><br/>
<label>First Name<font color="red">*</font>: <input type="text" name="fname" id="fname" /> </label><br/>
Last Name*: <input type="text" name="lname" id="lname" /> <br/>
Address*: <input type="text" name="address" id="address" /> <br/>
</form>
</div>
</div>
So once an option is selected, the first form disappears and the next one appears. So how do I get the data of which option they selected? Thanks
Since they depend on information on one form, the "pages" should really be the same form. You use the jQuery/JavaScript to show/hide the "current page". This will allow you to submit all the data in one go.
Wrap all the input elements in one html form tag
For each form "segment" you will need to use your js to hide/show the wrapping HTML container. The default being "page 1" of the form and the rest hidden.
Change your submit button to just a button and have a on click event on it. When the user clicks the button the input is validated and then the jQuery unhides "page 2".
On your last "page" have a normal submit button and then all the form data is posted in one.
For example, the html might look like this:
<script type="text/javascript">
$(document).ready(function{
$(".next-page").click(function(){
$(".box-wrapper").hide();
$("#page-" + $(this).data("page")).show();
});
});
</script>
<div class="registration">
<form name="regform" action="" method="post">
<!-- Page 1 -->
<div class="box-wrapper" id="page-1">
<div class="box">
<!-- form inputs go here -->
<input type="button" name="next-page" class="next-page" value="Continue" data-page="2"/>
</div>
</div>
<!-- Page 2 -->
<div class="box-wrapper" id="page-2" style="display: none;">
<div class="box">
<!-- form inputs go here -->
<input type="button" name="next-page" class="next-page" value="Continue" data-page="3"/>
</div>
</div>
<!-- Page 3 -->
<div class="box-wrapper" id="page-3" style="display: none;">
<div class="box">
<!-- form inputs go here -->
<input type="submit" name="submit" class="submit" value="Complete Registration"/>
</div>
</div>
</form>
</div>
Using jquery --- $('input[name=Reg_type]:checked').val() this will give you the selected value.