I searched the question several times, but didn't get the solution, that's why I'm asking here. I already know how to add&remove one-level input elements, as follow:
<script type="text/javascript">
$(document).ready(function() {
$('#btn_addOpt').click(function () {
var opt = $('<div></div>');
opt.append('<p>Answer:</p>');
opt.append('<input type="text" name="lable[]">');
$('#opt').append(opt);
});
$('#btn_removeOpt').click(function () {
$('#opt div:last').remove();
});
});
</script>
And the body of html is:
<form action="" method="post">
What's the question?<br/>
<input type="text" name="name"/><br />
<input type="button" id="btn_addOpt" value="Add Answer"/>
<input type="button" id="btn_removeOpt" value="Remove Answer"/><br/>
<div id="opt"></div><br/>
<input type="submit" value="submit"/>
</form>
The idea is when I click the 'Add Answer' button, a group of elements:
<p>Answer:</p>
<input type="text" name="lable[]">
will be added, and also will be removed after I click the 'Remove Answer' button. However, what I try to do is to take all elements above as a group, which inclues the:
What's the question?<br/>
<input type="text" name="name"/><br />
<input type="button" id="btn_addOpt" value="Add Answer"/>
<input type="button" id="btn_removeOpt" value="Remove Answer"/><br/>
<div id="opt"></div><br/>
And I try to add&remove this group dynamically. So I try:
<script type="text/javascript">
$(document).ready(function() {
$('#btn_addQues').click(function () {
var que = $('<div></div>');
que.append('<p>What\'s the question?</p>');
que.append('<input type="text" name="name"/>');
que.append('<input type="button" id="btn_addOpt" value="Add Answer"/>');
que.append('<input type="button" id="btn_removeOpt" value="Remove Answer"/><br/>');
que.append('<div id="opt"></div><br/>');
$('#question').append(que);
});
$('#btn_removeQues').click(function () {
$('#question div:last').remove();
})
$('#btn_addOpt').click(function () {
var opt = $('<div></div>');
opt.append('<p>Answer:</p>');
opt.append('<input type="text" name="lable[]">');
$('#opt').append(opt);
});
$('#btn_removeOpt').click(function () {
$('#opt div:last').remove();
});
});
</script>
And the body become:
<body>
<input type="button" id="btn_addQues" value="Add Question"/>
<input type="button" id="btn_removeQues" value="Remove Question"/>
<form action="" method="post">
<div id="question"></div>
<input type="submit" value="submit"/>
</form>
</body>
However, it can add&remove the whole group of elements dynamically, but inside the group, the "Add Answer" and "remove answer" buttons don't work. Seems there are some conflicts. Or there might be some other ways that can do it. Basically, What I try to do is to add&remove a group of elements by buttons, and inside the group there are also two buttons to add&remove some other input elements. So it's a nested(two-level) elements creation. And all information filled in will be posted to another page. I'm not sure if I explain clearly, but anyone could help? Please provide some codes, thank you!
You would need to rebind the onclick events to the new html elements created in your new group. So after copying the HTML, you would need to do $("#btn_addQues).click("etc..."), so you might want to think about creating reusable functions for them.
However, if you are going to use ids they need to be unique.
Related
Hi I try to research my problem via Stack about 3 hours but I still not found.
So I decide to create the topic to ask about my problem.
I am creating search engine and the below are the result:
If I type test text into input form then click "enter" button from keyboard, the search result will working correctly.
If I type test text into input form then click "Search" button from webpage, the search result is not working.
My problem is result No 2.
This is my code:
<form action="search_content.php" method="POST" >
<div class="input-group mainsearch-home">
<input type="text" class="input-group-field" name="homesearchfield" id="homesearchfield2" placeholder="What are you looking for?" autocomplete="off">
<div class="input-group-button">
<button type="button" class="button button--search" >search</button>
<input type="hidden" name="homesearchfield" value="search">
</div>
</div>
</form>
What I do wrong?
I thought that my problem is happens from input type hidden data.
So I would like to know how to get value from input text box and send value to my target page.
I have added some php code from my "response" page on below.
$viewstate = isset( $_POST["homesearchfield"] ) ? $_POST["homesearchfield"] : "" ;
$sql="SELECT * FROM `article` WHERE topic_article LIKE '%$viewstate%' order by id_article DESC";
Currently your form doesn't know that the button is meant to submit the form, which can be fixed by changing the type on the button:
<button type="submit" class="button button--search" >search</button>
You could also use:
<input type="submit" class="button button--search" value="search" />
An option for controlling the data is using JavaScript / jQuery to control the action of the form. This way also allows you to view the data being posted before its actually sent and you can even comment out the post and just work on getting the form with the right data you are looking to get back.
also for serialize to work, you need to have a name for each item you want to pass back data.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script lang="JavaScript">
$(function(){
$("#button").click(fuction()
{
var formData = $("#form").serialize();
alert(formData);
/*
$.post({"search_content.php",
formData,
function(returndata)
{
//do something
//this will load the return data into the div tag on the fly
$("#divReturn").html(returndata);
},
"text"
});
//*/
});
});
</script>
<form id="form" onsubmit="return false;" >
<div class="input-group mainsearch-home input-group--search inputs--raspberry">
<input type="text" class="input-group-field" name="homesearchfield" id="homesearchfield2" placeholder="What are you looking for?" autocomplete="off">
<div class="input-group-button">
<button type="button" class="button button--search" id="button" name="button" value="search" >search</button>
</div>
</div>
</form>
<div id="divReturn">
</div>
I have the following code so depending on the selected option, the visitor is directed to a new page on change. But I want them to be directed to that page after they've clicked on the submit button, not immediately on change. How can I do that?
<script type="text/javascript">
function go()
{
window.location=document.getElementById("link").value
}
</script>
<form>
<select id="link" onchange="go()" > <option>DEFAULT</option>
<option value="page1.php">TITLE1</option>
<option value="page2.php">TITLE2</option>
<option value="page3.php">TITLE3</option>
</select>
<div class="submit"> <input name="submit" type="image" id="submit" src="images/getaquotebutton.png" height="93" width="259"/> </div><!--end of submit class-->
</form>
Many thanks in advance
This is simple:
Remove the onchange from here:
<select id="link" onchange="go()" >
Instead add:
<input onclick="go()" name="submit" type="image" id="submit" src="images/getaquotebutton.png" height="93" width="259"/>
Edit:
Just noticed the type is set to image, well if this doesn't work as intended, try to change the type to button and add image through css as:
<input onclick="go()" name="submit" type="button" id="submit" style="background-image: url('images/getaquotebutton.png'); height:93px; width:259px;" />
With jQuery you can do something like this:
$('#submit').click(function(
window.location=document.getElementById("link").value;
));
Of course you should remove the onchange.
$(function() {
$('form').on('submit', function() {
if($('#link').val() == page1.php) {
do redirect..
}
});
});
Do like this for each!
I use daterangepicker() to get two dates ( begginning and ending ), I'd like to put those dates in php variables.. i've succeeded to do an alert() to show those variables using a button.. but i don't know how to put them in the php.
here's my code if anyone have an idea..
<script type="text/javascript">
$(function(){
$('#rangeBa, #rangeBb').daterangepicker();
});
function test(){
var dates = new Array();
dates[0] = document.inputdate.rangeBa.value;
dates[1] = document.inputdate.rangeBb.value;
return dates;
}
</script>
<body>
<form name="inputdate" method="post">
<input type="text" value="m/jj/aaaa" id="rangeBa" name="rangeBa"/>
<input type="text" value="m/jj/aaaa" id="rangeBb" name="rangeBb"/>
</form>
<button onclick="alert(test())">Click on this button</button>
</body>
You have to add a submit input element in your form and add an action parameter in your form:
<form name="inputdate" method="post" action="yourfile.php">
<input type="text" value="m/jj/aaaa" id="rangeBa" name="rangeBa"/>
<input type="text" value="m/jj/aaaa" id="rangeBb" name="rangeBb"/>
<input type="submit" value="Click to send" />
</form>
And in yourfile.php: you get the variables by $_POST['rangeBa'] and $_POST['rangeBb']
Feel free then to use ajax method if you don't want a refresh of the page.
After you submit your form you can find the form variables by name in $_POST. for example $_POST['rangeBa']
I have a doubt on the following code. My function is not called when the save button is clicked .
This is the following code for save function,
if(isset($_POST['Save'])) // If the submit button was clicked
{
echo "hgfd";
$post['ProductSegmentCode'] = $_POST['ProductSegmentCode'];
$post['ProductSegment'] = $_POST['ProductSegment'];
$post['ProductGroup'] = $_POST['productgroup'];
// This will make sure its displayed
if(!empty($_POST['ProductSegment'])&&!empty($_POST['ProductSegmentCode'])&&!empty($_POST['productgroup']))
{
echo "SAVE";
$news->addNews($post);
?>
<script type="text/javascript">
alert("Created Sucessfully..!!");
</script>
<?
}
else
{
?>
<script type="text/javascript">
alert("Enter Mandatory Fields");
</script>
<?
}
}
following is the button format in html,
<div style="width:70px; height:32px; float:left; margin-top:16px; margin-left:4px;">
<input name="Save" type="button" class="button" value="Save">
</div>
Your button is type="button"; to get the form to submit, it needs to be type="submit". Try updating it with this and it should work (also pending you form has action="post", or no action specified; the default is post):
<input name="Save" type="submit" class="button" value="Save" onclick="Save" />
Also, you're using onclick="Save" in your button. This indicates you have a corresponding JavaScript function named Save() - though, per your code examples you do not show one. I'm assuming that this is in error and can safely be removed (the value="Save" can also be removed as you only need to check isset($_POST['Save']) and not it's actual value). All changes in-place should give you:
<input name="Save" type="submit" class="button" />
If you do, in fact, have a JavaScript function named Save(), please post its code and I can revise.
use form for sending data and use type submit
<form action="" method="post">
<input name="Save" type="submit" class="button" value="Save">
</form>
and if you want to use this
<input name="Save" type="button" class="button" value="Save" onclick="Save()">
create Save() function in javascript and use ajax call for sending data.
It looks like you should change
<input name="Save" type="button" class="button" value="Save" onclick="Save">
to a summit button.
<input name="Save" type="submit" class="button" value="Save">
I have a page with several forms which are dynamically generated using PHP. I am validating them using the jQuery Validation plugin. The forms are all the same, but relate to different items so I have given all of the forms the same class so they can be validated by one function (each form also has a unique ID). But I'm having some problems:
I would like the error messages to appear by the correct form items, but if I'm just using the form's class, the validator won't know which form the item is from.
I have a hyperlink to submit the form (and a regular submit button in <noscript> tags), and would usually use jQuery to submit the form, but again, how will jQuery know which submit link I've clicked, and which form to submit?
The easiest thing I can think of is to pass the form ID to the validate some how. Is that possible?
The forms look like this:
<?php while($row= pg_fetch_row($groups)) { ?>
<p class="error" id="error-<?php echo $row[0] ?>"></p>
<form action="../scripts/php/groups-process.php" method="post" id="editgroup-<?php echo $row[0] ?>" class="editgroup">
<label for ="edit-<?php echo $row[0] ?>" >Edit group name:</label>
<input type="text" class="text" size="20" maxlength="30" name="edit" id="edit-<?php echo $row[0] ?>" value="<?php echo $row[1] ?>" />
<noscript><input type="submit" name="editgroup" value="Submit" /></noscript>
<div id="submitcontainer-<?php echo $row[0] ?>"></div>
</form>
<?php } ?>
I would normally validate the form like this:
$(document).ready(function(){
$("#editgroup").validate({
rules: {edit: {required: true, maxlength: 30}},
messages: {edit: {required: 'Please enter a group name', maxlength: 'Please enter a shorter group name'},
errorContainer: "p#error",
});
$("#submitcontainer").html('<a class="button" href="javascript:void();" id="submitlink" name="submit">Submit</a>');
$("#submitlink").click(function() {
$("#editgroup").submit();
});
});
give the same class to all the form than try this,
<form id="1" class="common" method="post" action="page.php">
<input type="text" class="common_input_class" size="20" maxlength="30" name="edit" id="whatever" value="whatever" />
<input type="submit" name="submit" class="submit_this_form" value="submit" />
</form>
<form id="2" class="common" method="post" action="page.php">
<input type="text" class="common_input_class" size="20" maxlength="30" name="edit" id="whatever" value="another value" />
<input type="submit" name="submit" class="submit_this_form" value="submit" />
</form>
<script type="text/javascript">
$(".common").submit(function(){
var form_id = $(this).attr('id');
var input_val = $(this).children('.common_input_class').val();
if (input_val == '')
{
alert("input field is required");
return false;
}
});
</script>
I ended up iterating through my result twice, so I create a form validator for each form dynamically, and then dynamically create the forms. This was the best way I could think of to give me the control I wanted, although obviously it's slower and produces more code - not an ideal solution but it will do for this situation.