Multiple form dynamic field javascript validation - javascript

I have multiple form like this:
<?php for ($i = 0; $i > $n; $i++) { ?> // n is no. of value (no limit)
<form>
<input name="<?php echo $i; ?>venue" type="text">
<input name="roster" type="text">
<input type="submit" name="btn_venue">
</form>
<?php } ?>
<form>
<input name="hospitality" type="text">
<input name="template" type="text">
<input type="submit" name="btn_hospitality">
</form>
...
...
<form>
<input name="element" type="text">
<input name="alignment" type="text">
<input type="submit" name="btn_xyz">
</form>
I want validate(field should not be blank) in all form so, how can I use validation ?
I tried jQuery validation:
<script>
$('document').ready(function () {
$('form').each(function (key, form) {
$(form).validate({
rules: {
hospitality: {
required: true
},
//...
//...
alignment: {
required: true
}
});
});
});
</script>
I have manage static name field validation but I don't idea about dynamic venue name validation.Can anyone help me ?
if only one form the easily maintain but dynamically multiple form submit validate how to validate.
at a time only one form submit but particular form field validate how it is possible?

Try this. It goes through each form and for each of them through each input (of type text) and builds a required rule for each of them. Then feeds the dynamically built rules to the validate function.
$('document').ready(function () {
$('form').each(function (key, form) {
// build the rules object dynamically
var rules = {};
// loop through each input in the form
$(form).find('input[type="text"]').each(function(idx, obj) {
// make a rule for this input
rules[obj.name] = {"required": true};
});
$(form).validate({
"rules": rules
});
});
});

Okey this is not for sure the cleanest way to do this but its the first that cross my mind.
First, edit your html, so form has id="form$i", input has id="input$i", and submit has id="$i". Also add class to submit class="validate"
<?php for ($i = 0; $i > $n; $i++) { ?> // n is no. of value (no limit)
<form id="form<?php echo $i; ?>">//so id="form2" for example
<input id="input<?php echo $i; ?>" name="<?php echo i; ?>venue" type="text">// id="input2"
<input name="roster" type="text">
<input id="<?php echo $i; ?>" class="validate" type="submit" name="btn_venue">//id="2"
</form>
<?php } ?>
JQuery which should work, I'll explain each line in code
<script>
$(function () {
$(".validate").click(function () { //this is call for each click button with class validate
var id = $(this).attr('id');//getting id of the clicked element which is $i
var formid = 'form' + id;//creating new var formid which will target formid (for example: in first loop $i=1, so id=1, and formid=form1)
var input = 'input' + id;//creating input which value will be input$i
$('#' + formid).on('submit', function (e) {//on form submit validate function
if ($(#input).value == '') {
return false;
} else {
return true;
}
});
});
});
</script>
hope you understand logic, it might be I made mistake somewhere so take a close look..

Related

On click get list values and auto submit form with values

I want to auto send values in a form in a hidden field.
This is my first form. When I submit this form 2 action occurred 1.) trigger js - onclick="displayResult()" and 2.) send form to update.php
<form action="update.php" method="post">
<select name=category[] id=category multiple="multiple" class=master>
<?php
$file = fopen("category.csv", "r");
while (($row = fgetcsv($file, 0, ",")) !== FALSE) {
$category = $row[0];
?>
<option value="<?php echo $category;?>"><?php echo $category;?></option>
<?php
}
?>
</select>
<input type="submit" value="Save File" onclick="displayResult()" name="submit" >
</form>
This is my js and I tried to auto submit form with adding document.getElementById("myform").submit(); When I do var_dump I get NULL
<script>
function displayResult() {
var options = document.getElementById('master').options;
var values = [];
var i = 0, len = options.length;
while (i < len)
{
values.push(options[i++].value);
}
txt=(values.join(','));
alert(txt);
document.getElementById('masterlist').value = txt;
document.getElementById("myform").submit();
}
</script>
This is the form I need to auto send values via above js but not working. Please need help
<form action="update.php" method="post" name="myform" id="myform">
<input type="hidden" name="masterlist" id="masterlist" value="">
</form>
Firstly, you should add necessary ""
<select name=category[] id="category" multiple="multiple" class="master">
Than change submit to hidden and remove onClick
<input type="submit" value="Save File" name="submit" hidden>
Next, add another button which have an onClick event
<input type="button" value="Save" onclick="displayResult();">
At the end - fix your JS. You should refer to the id 'category', but you're refering to the class 'master', using getElementById()
var options = document.getElementById('category').options;
Working fiddle (little changed for fiddle purposes): jsfiddle.net

Ajax to insert multiple records from form inputs, add counter to hidden input

I've created a page that, based on an array from the database, creates multiple forms. Each form has an input with an 'add' button which dynamically adds new inputs (up to 10 inputs per form)
This works fine, but now I'm getting to where I want to submit andy input values added into the database. I have 2 main issues here:
The hidden input in my form <input type="hidden" name="tickerID" id="tickerID" value="<?php echo $ticker['ticker'] ?>"> has a non unique ID, so no matter which form I submit from, it has the ticker value belonging to the first form only.
Once I have that value, and serialize with any filled inputs in that form, I call addticker.php to insert. I'm inserting the ticker id and the content from the form inputs, but I need to do this as a foreach I believe, because if 5 inputs were added and filled in, I need a record for each. All 5 would have the same ticker ID and the respective content from the input.
Any help is appreciated
<?php foreach($tickerDisplays as $key => $ticker):?>
<form id="Items" method="post">
<label id="ItemLabel">Item 1: </label>
<input type="text" name="Items[]"><br/>
<button type="button" class="moreItems_add">+</button>
<input type="hidden" name="tickerID" id="tickerID" value="<?php echo $ticker['ticker'] ?>">
<input type="submit" name="saveTickerItems" value="Save Ticker Items">
</form>
<?php endforeach;?>
<script type="text/javascript">
$("button.moreItems_add").on("click", function(e) {
var tickerID = $('#tickerID').val();
var numItems = $("input[type='text']", $(this).closest("form")).length;
if (numItems < 10) {
var html = '<label class="ItemLabel">Item ' + (numItems + 1) + ': </label>';
html += '<input type="text" name="Items[]"/><br/>';
$(this).before(html);
console.log(tickerID);
}
});
</script>
<script type="text/javascript">
$("#Items").submit(function(e) {
//variables?
//var tickerID coming from <input type="hidden" name="tickerID" id="tickerID" value="<?php echo $ticker['ticker'] ?>">
//var Items[]
$.ajax({
type: "POST",
url: addticker.php,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
</script>
addticker.php
$tickerID = $_POST[''];
$content = $_POST[''];
$addTicker = "
INSERT INTO tickerTable (tickerID, content)
values ('$tickerID', '$content');
"
$mysqlConn->query($addTicker)

PHP update div after click submit

I am trying to do update "refresh" div after click Submit button and also every 5 seconds. I checked some questions, but I could not find what I was looking for.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<?php
echo '<div id="refresh">';
while ($r = $q->fetch()):
echo 'Sender: ';
if($r['senderid'] == $a) {echo $query1['username'];}
elseif($r['senderid'] == $b) {echo $query2['username'];}
echo '</br>';
echo $r['message'];
echo '</br></br>';
endwhile;
echo '</div>';
?>
<form method="post">
<input type="hidden" name="a" value="<?php echo $a;?>">
<input type="hidden" name="b" value="<?php echo $b;?>">
<textarea name="message" rows="3" cols="30"></textarea><br><br>
<input id="submit" type="submit" value="Submit" />
</form>
<script>
$(document).ready( function() {
$("form").on("submit", function(e) {
e.preventDefault(); // Prevent default form submission action
$.post("submit.php", $("form").serialize()); // Post the data
$('textarea[name=message]').val('')
});
});
</script>
Please make some rudimentary investigation on $.post and setTimeout
Here is an example - there are a few questions you need to consider
var val = "";
function refreshDiv() {
var $text = $('textarea[name=message]');
val = $text.val() || val; // what to do if user clears the field?
if (val == "") return; // stop if nothing there
$.post("submit.php", $("form").serialize(),function(data) {
$("#refresh").html(data)); // show the data
setTimout(refreshDiv,5000); // call it again in 5 secs
// $text.val(''); // not sure about this...
});
}
$(function() {
$("form").on("submit", function(e) {
e.preventDefault(); // Prevent default form submission action
refreshDiv();
});
});

JQuery - enable 4 text-boxes at once if 1 checkbox is checked

I have search before I post, but I only found questions and solutions that is showing ONE textbox if ONE checkbox is checked as in: jquery - show textbox when checkbox checked
But my form is different
<form method="post" action="actionhere">
<div id='clone_me'>
<?php
for($i=1; $i<=5;$i++) {
?>
<div>
<span id="title">Line <?php echo $i;?></span>
<input type='checkbox' name='ck_<?php echo $i;?>'/>
<input type='text' class='tx<?php echo $i;?>' name='tx[<?php echo $i;?>][]'/>
<input type='text' class='tx<?php echo $i;?>' name='tx[<?php echo $i;?>][]'/>
<input type='text' class='tx<?php echo $i;?>' name='tx[<?php echo $i;?>][]'/>
<input type='text' class='tx<?php echo $i;?>' name='tx[<?php echo $i;?>][]'/>
</div>
<?php } ?>
</div>
<input type='submit' name='submit' value='Submit'/>
<input type="button" value="Add row" class="addrow" />
</form>
<script>
$(document).ready(function() {
$('.addrow').click(function(){
var n= $("#clone_me>div").length;
var new_n=n+1;
var new_line= $('#clone_me div:first').clone().append();
$("span#title", new_line).text("Line "+new_n+" ");
//since I clone the 1st <div> therefore the cloned id must be 'ck_1', so changed it to latest id
$("input#ck_1", new_line).attr("name", "ck_"+new_n);
$("input#ck_1", new_line).attr("id", "ck_"+new_n);
$("input.tx1", new_line).attr("name", "tx["+new_n+"][]");
$("input.tx1", new_line).attr("class", "tx"+new_n);
new_line.appendTo('#clone_me');
});
});
</script>
As you can see from the code, I have a form which by default will have 5 sets of 1-checkbox-4-textbox, and user is allowed to add new set by clicking 'add row' button (which jquery will do clone).
How can I make the 4 textbox enabled once the correspond checkbox is checked? I'm not using hide() or show(). I want the user knows the textbox are there, but is disabled until user tick the checkbox.
if ($("#ck_4").is(":checked")) {
$("input#tx4).attr("readonly", false); //or enabled
I thought it will be something like that, but since user can dynamically add how many rows as he wants, how can I achieve it?
http://jsfiddle.net/aLw3T/2/
first give your checkbox a data attribute like this
<input type='checkbox' data-id="<?php echo $i;?>" name='ck_<?php echo $i;?>'/>
after this create following javascript code to handle your input/textarea fields
$(document).ready(function () {
$('input[type="checkbox"]').click(function () {
var self = $(this);
var checkboxId = self.data('id');
var checkboxChecked = self.is(":checked");
/* jQuery < 1.9 */
if (checkboxChecked) {
$('.tx' + checkboxId).attr('disabled', 'disabled');
} else {
$('.tx' + checkboxId).removeAttr('disabled');
}
/* jQuery 1.9+ */
$('.tx' + checkboxId).prop('disabled', checkboxChecked);
});
});
As long as the input fields are siblings to the checkbox you can use following jquery code:
$(document).ready(function() {
$('form').on('click', 'input[type=checkbox]', function(e) {
var checkbox = $(this);
checkbox.closest('.row').find('input[type=text]').prop('disabled',!checkbox.is(':checked'));
});
});
if you have multiple forms, change the selector used for binding of the click event.
e.g. $('form.my_form').on...
see example: http://codepen.io/lchngr/pen/zhasg/

onkeyup or onclick JavaScript to auto submit form

Any onkeyup or onclick javascript code which helps me to submit form after 9 characters.
MY HTML CODE. I am using AJAX to get data. I have tried many scripts. None works for me :'(
Enter Your Car No : <input type="text" name="car" maxlength="9" id="carno" value="<?php echo $_REQUEST["carno"]; ?>"/>
Enter Your Car No : <input type="text" name="car" maxlength="9" id="carno" onkeypress="yourFunction()" value="<?php echo $_REQUEST["carno"]; ?>"/>
<script>
function yourFunction(){
var textValue = document.getElementById('carno').value;
if(textValue.length >= 9){
//implement your ajax code
}
}
</script>
Hai here i am calling function on each key press in that text field and i am getting the value using id and checking that length if its >=9 (ur requirement) so write ajax code
Try this :
Enter Your Car No : <input type="text" name="car" maxlength="9" id="carno" value="<?php echo $_REQUEST["carno"]; ?>" onkeypress="submitForm()" onclick="submitForm()"/>
<script>
function submitForm(){
var len = document.getElementById("carno").value.length;
if(len >= 9 ){
//submit form code
}else{
return false;
}
}
</script>

Categories