asked on

JQuery Mobile - Get Value From InputText

Hi,

How do I get the value of a field in order to then upgrade?

<a rel="external" href="update_cliente.php?idCliente='.$r->idCliente.'&RagioneSociale=VALUE FROM INPUTTEXT"data-icon="delete" data-theme="b" class="ui-btn-right">Salva</a>

Open in new window

Saluti, Daniele

Hagay Mandel

<a rel="external" href="update_cliente.php?idCliente='.$r->idCliente.'&RagioneSociale=' . $_POST[''INPUT TEXT NAME]. '"data-icon="delete" data-theme="b" class="ui-btn-right">Salva</a>

Pay attention, the input component must have a 'name' attribute!!

<input type="text" name="last_name" id="" />

danz67

ASKER

Thanks for your reply.
I have test so:

<div data-role="content" data-theme="c">
        		<label for="ragioneSociale">Ragione Sociale:</label>
			<input type="text" name="ragione_Sociale" id="ragioneSociale" value="'.$r->RagioneSociale.'"/>
			<label for="idCliente">idCliente:</label>
			<input type="text" name="idCliente" id="idCliente" value="'.$r->idCliente.'"/>
			<a rel="external" href="update_cliente.php?idCliente='.$r->idCliente.'&RagioneSociale=' . $_POST['ragione_Sociale']. '"data-icon="delete" data-theme="b" class="ui-btn-right">Salva</a>
		</div>

Open in new window

But the value is empity

http://localhost:8888/mobile/myapp/update_cliente.php?idCliente=1&RagioneSociale=

Open in new window

What is my error?

Regards, Daniele

Hagay Mandel

I thought you were relating to posted form.
In your case, as I understand your need, you want the content of the input text to be injected /appended to the href attribute of the a tag.
As it is part of the current page, it can only be done via JavaScript:

<div data-role="content" data-theme="c">
	<label for="ragioneSociale">Ragione Sociale:</label>
	<input type="text" name="ragione_Sociale" id="ragioneSociale" value="'.$r->RagioneSociale.'"/>
	<label for="idCliente">idCliente:</label>
	<input type="text" name="idCliente" id="idCliente" value="'.$r->idCliente.'"/>
	<a id="rg_link" rel="external" href="update_cliente.php?idCliente='.$r->idCliente.'&RagioneSociale=' . $_POST['ragione_Sociale']. '"data-icon="delete" data-theme="b" class="ui-btn-right">Salva</a>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var base_attr = $('#rg_link').attr('href');
		$('#ragioneSociale').keyup(function() {
			$('#rg_link').attr('href', base_attr + $('#ragioneSociale').val());
		});
	});	
</script>

Open in new window

If you already use jQuery, omit my call to it.

danz67

ASKER

I did everything you suggested but unfortunately it still does nothing.

http://localhost:8888/mobile/myapp/update_cliente.php?idCliente=1&RagioneSociale=

Open in new window

Hagay Mandel

Check this demo.
The lower div contains the complete a tag, as you type something in the ragioneSociale input field

danz67

ASKER

I see, but I do not understand what the problem is: (

Hagay Mandel

What problem?!

danz67

ASKER

Still does not work, I may have misunderstood me, google translator sometimes is not accurate. I copied the code that is in the demo link you posted and now the page is not displayed because there is an error in the code.
I'm sorry but I can not get out, only you can help, be patient

Hagay Mandel

Give a link to the page.

danz67

ASKER

Want a link to the page? If you can not until tomorrow, I did everything locally, tomorrow morning load on a host.

Here my index.php page

<?php
include 'connection.php';
$conn = new PDO("mysql:host=$mysql_host;$mysql_db",$mysql_user,$mysql_pass);

$sql = "select * from clienti"; // limit 0,10"; // you may want to limit the results for big tables to the firs 10 by adding LIMIT 0,10 at the end of the query.
$result = mysql_query($sql);
?>

<!DOCTYPE html> 
<html> 
	<head> 
	<title>MyApp Base</title> 

	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>



<script type="text/javascript">
    
    function resetTextFields()
    {
        $("#ragioneSociale").val("");
        $("#citta").val("");
    }

    function onSuccess(data, status)
    {
        resetTextFields();
        // Notify the user the new post was saved
        $("#message").fadeIn(2000);
        data = $.trim(data);
        if(data == "OK")
        {
            $("#message").css("background-color", "#ffff00");
            $("#message").text("Feed is saved");
	    window.location.href="clienti.php"
        }
        else
        {
            $("#message").css("background-color", "#ff0000");
            $("#message").text(data);
        }
        $("#message").fadeOut(5000);
    }

$(document).on('pageinit', '#addNewCustomer', function() {
    $("#submit").click(function(e){
 
        var formData = $("form#newClienteForm").serialize();
 
        $.ajax({
            type: "POST",
            url: "insert_cliente.php",
            cache: false,
            data: formData,
            success: onSuccess
        });
 
        e.preventDefault();
    });
});

$(document).on('pageinit', '#editCustomer', function() {
    $("#submitCliente").on("click", function(e){
 
        var formData = $("form#updateClienteForm").serialize();
 
        $.ajax({
            type: "POST",
            url: "update_cliente.php",
            cache: false,
            data: formData,
            success: onSuccess
        });
    });
});

	$(document).ready(function() {
		var base_attr = $('#rg_link').attr('href');
		$('#ragioneSociale').keyup(function() {
			$('#rg_link').attr('href', base_attr + $('#ragioneSociale').val());
		});
	});	

</script>

<body>
	
<div data-role="page" id="elenco">
	<div data-role="header">
		<h1>Clienti</h1>
	<a href="#addNewCustomer" data-icon="plus" data-role="add">Aggiungi</a>
	</div><!-- /header -->
	
	<div data-role="content">	
	    <ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Cerca..." >
	    	<?php
		$html;
		while ($r = mysql_fetch_object($result)) {
	    		echo '<li><a href="#editCustomer'.$r->idCliente.'">'.$r->RagioneSociale.'</a></li>';
			$html .=
	       '<div data-role="page" id="editCustomer'.$r->idCliente.'" data-theme="a">
		<div data-role="header">
		    <h1>Dati Cliente</h1>
		    <a href="clienti.php" data-icon="arrow-l" data-rel="back">Torna</a>
		</div><!-- /header -->
	
<div data-role="content" data-theme="c">
	<label for="ragioneSociale">Ragione Sociale:</label>
	<input type="text" name="ragione_Sociale" id="ragioneSociale" value="'.$r->RagioneSociale.'"/>
	<label for="idCliente">idCliente:</label>
	<input type="text" name="idCliente" id="idCliente" value="'.$r->idCliente.'"/>
	<a id="rg_link" rel="external" href="update_cliente.php?idCliente='.$r->idCliente.'&RagioneSociale=' . $_POST['ragione_Sociale']. '"data-icon="delete" data-theme="b" class="ui-btn-right">Salva</a>
  <div id='output'></div></div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var base_attr = $('#rg_link').attr('href');
		$('#ragioneSociale').keyup(function() {
			$('#rg_link').attr('href', base_attr + $('#ragioneSociale').val());
      $('#output').html($('#rg_link').attr('href'));
		});
	});	
</script>		
		<div data-role="footer">
			<h4></h4>
			<a rel="external" href="delete_cliente.php?idCliente='.$r->idCliente.'" data-icon="delete" class="ui-btn-right">Elimina</a>
		</div><!-- /footer -->
		</div>';
		}
		?>
	    </ul>
	</div>
	
	<div data-role="footer">
	</div><!-- /footer -->
</div><!-- /page -->

<div data-role="page" id="addNewCustomer">
	<div data-role="header">
		<h1>Nuovo Cliente</h1>
	</div>

	<div data-role="content">
	    <form id="newClienteForm" method="post">
                <div data-role="fieldcontain">
                    <input type="text" name="ragioneSociale" id="ragioneSociale" value="" placeholder="Ragione Sociale" />
		    <input type="text" name="citta" id="citta" value="" placeholder="Citta'"/>

                    <fieldset class="ui-grid-a">
                        <div class="ui-block-a"><a data-icon="delete" data-role="button" data-direction="reverse" data-rel="back">Annulla</a></div>
                        <div class="ui-block-b"><button data-icon="check" data-theme="b" id="submit" type="submit">Salva</button></div>
                    </fieldset>
                    
		    <h3 id="#elenco"></h3>
                </div>
            </form>
        </div>

	<div data-role="footer">
		<h1></h1>
	</div>
</div><!-- /page -->

<div data-role="page" id="modificaCustomer">
	<div data-role="header">
		<h1>Modifica Cliente</h1>
	</div>

	<div data-role="content">
	    <form id="updateClienteForm" method="post">
                <div data-role="fieldcontain">
                    <input type="text" name="ragioneSociale" id="ragioneSociale" value="" placeholder="Ragione Sociale" />
		    <input type="text" name="citta" id="citta" value="" placeholder="Citta'"/>

                    <fieldset class="ui-grid-a">
                        <div class="ui-block-a"><a data-icon="delete" data-role="button" data-direction="reverse" data-rel="back">Annulla</a></div>
                        <div class="ui-block-b"><button data-icon="check" data-theme="b" id="submitCliente" type="submit">Salva</button></div>
                    </fieldset>
                    
		    <h3 id="#elenco"></h3>
                </div>
            </form>
        </div>

	<div data-role="footer">
		<h1></h1>
	</div>
</div><!-- /page -->

<?php
echo $html;
?>
</body>
</html>

Open in new window

Hagay Mandel

Since it's a php file with data from mysql database, and I don't have the data, run the page, and provide the actual rendered html.

danz67

ASKER

Here the table structure:

DB_NAME = gestionale

CREATE TABLE `clienti` (
  `idCliente` int(10) NOT NULL AUTO_INCREMENT,
  `RagioneSociale` varchar(50) DEFAULT NULL,
  `Cognome` varchar(50) DEFAULT NULL,
  `Nome` varchar(50) DEFAULT NULL,
  `DataNasc` varchar(10) DEFAULT NULL,
  `LuogoNasc` varchar(50) DEFAULT NULL,
  `ProvNasc` varchar(50) DEFAULT NULL,
  `StatoNasc` varchar(50) DEFAULT NULL,
  `CodFisc` varchar(50) DEFAULT NULL,
  `pIva` varchar(50) DEFAULT NULL,
  `Indirizzo` varchar(50) DEFAULT NULL,
  `Citta` varchar(50) DEFAULT NULL,
  `ProvRes` varchar(50) DEFAULT NULL,
  `Cap` varchar(50) DEFAULT NULL,
  `ANnotazioni` longtext,
  `Refer` varchar(50) DEFAULT NULL,
  `Telefono` varchar(50) DEFAULT NULL,
  `Cellulare` varchar(50) DEFAULT NULL,
  `AltroRec` varchar(50) DEFAULT NULL,
  `Fax` varchar(50) DEFAULT NULL,
  `email` varchar(50) DEFAULT NULL,
  `Note` longtext,
  `paziente` tinyint(1) DEFAULT '0',
  `Categoria` varchar(50) DEFAULT NULL,
  `Definizione` varchar(50) DEFAULT NULL,
  `Settore` varchar(50) DEFAULT NULL,
  `rivenditore` tinyint(1) DEFAULT '0',
  `CodiceCliente` int(10) DEFAULT NULL,
  `Pagamento` varchar(50) DEFAULT NULL,
  `Tessera` int(10) DEFAULT NULL,
  `Listino` varchar(255) DEFAULT NULL,
  `idlistino` varchar(255) DEFAULT NULL,
  `USERNAME` varchar(20) DEFAULT NULL,
  `PASS` varchar(20) DEFAULT NULL,
  `idMachine` varchar(50) DEFAULT NULL,
  `accountattivo` tinyint(1) DEFAULT '0',
  `messenger` varchar(50) DEFAULT NULL,
  `skype` varchar(50) DEFAULT NULL,
  `yahoo` varchar(50) DEFAULT NULL,
  `icq` varchar(50) DEFAULT NULL,
  `sonork` varchar(50) DEFAULT NULL,
  `facebook` varchar(50) DEFAULT NULL,
  `badoo` varchar(50) DEFAULT NULL,
  `idAgente` int(11) DEFAULT NULL,
  `Agente` varchar(120) DEFAULT NULL,
  `barcode` varchar(13) DEFAULT NULL,
  `idfidelity` int(11) DEFAULT NULL,
  `fidelity` varchar(120) DEFAULT NULL,
  `totpunti` int(11) DEFAULT '0',
  `maturato` decimal(19,2) DEFAULT '0.00',
  `puntitotali` decimal(19,2) DEFAULT '0.00',
  `puntiutilizzati` decimal(19,2) DEFAULT '0.00',
  `puntidisponibili` decimal(19,2) DEFAULT '0.00',
  `consenso_dati` tinyint(1) DEFAULT '0',
  `aliq_pers` tinyint(1) DEFAULT '0',
  `aliquota` int(2) DEFAULT NULL,
  PRIMARY KEY (`idCliente`),
  UNIQUE KEY `idPaziente` (`idCliente`),
  KEY `CodiceCliente` (`CodiceCliente`),
  KEY `idlistino` (`idlistino`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;

Open in new window

Hagay Mandel

I don't need the mysql table, What I asked for was the index.php source file as it is rendered in the browser, and not in an editor!
Simply run the file in a browser, copy the source, and paste it here.

danz67

ASKER

the point is this, the page is not displayed in the browser performed after putting the code that you provided me.

ASKER CERTIFIED SOLUTION

Hagay Mandel

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

danz67

ASKER

I have run your last file and now not generate error in the browser,
when press edit button i get this page in the browser.

<!DOCTYPE html> 
<html> 
	<head> 
	<title>MyApp Base</title> 

	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>



<script type="text/javascript">
    
    function resetTextFields()
    {
        $("#ragioneSociale").val("");
        $("#citta").val("");
    }

    function onSuccess(data, status)
    {
        resetTextFields();
        // Notify the user the new post was saved
        $("#message").fadeIn(2000);
        data = $.trim(data);
        if(data == "OK")
        {
            $("#message").css("background-color", "#ffff00");
            $("#message").text("Feed is saved");
	    window.location.href="clienti.php"
        }
        else
        {
            $("#message").css("background-color", "#ff0000");
            $("#message").text(data);
        }
        $("#message").fadeOut(5000);
    }

$(document).on('pageinit', '#addNewCustomer', function() {
    $("#submit").click(function(e){
 
        var formData = $("form#newClienteForm").serialize();
 
        $.ajax({
            type: "POST",
            url: "insert_cliente.php",
            cache: false,
            data: formData,
            success: onSuccess
        });
 
        e.preventDefault();
    });
});

$(document).on('pageinit', '#editCustomer', function() {
    $("#submitCliente").on("click", function(e){
 
        var formData = $("form#updateClienteForm").serialize();
 
        $.ajax({
            type: "POST",
            url: "update_cliente.php",
            cache: false,
            data: formData,
            success: onSuccess
        });
    });
});

	$(document).ready(function() {
		
		var base_attr = $('#rg_link').attr('href');
		$('#ragioneSociale').keyup(function() {
			$('#rg_link').attr('href', base_attr + $('#ragioneSociale').val());
			$('#output').html($('#rg_link').attr('href'));
		});
	});	

</script>

<body>
	
<div data-role="page" id="elenco">
	<div data-role="header">
		<h1>Clienti</h1>
	<a href="#addNewCustomer" data-icon="plus" data-role="add">Aggiungi</a>
	</div><!-- /header -->
	
	<div data-role="content">	
	    <ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Cerca..." >
	    	<li><a href="#editCustomer12">ta</a></li>	    </ul>
	</div>
	
	<div data-role="footer">
	</div><!-- /footer -->
</div><!-- /page -->

<div data-role="page" id="addNewCustomer">
	<div data-role="header">
		<h1>Nuovo Cliente</h1>
	</div>

	<div data-role="content">
	    <form id="newClienteForm" method="post">
                <div data-role="fieldcontain">
                    <input type="text" name="ragioneSociale" id="ragioneSociale" value="" placeholder="Ragione Sociale" />
		    <input type="text" name="citta" id="citta" value="" placeholder="Citta'"/>

                    <fieldset class="ui-grid-a">
                        <div class="ui-block-a"><a data-icon="delete" data-role="button" data-direction="reverse" data-rel="back">Annulla</a></div>
                        <div class="ui-block-b"><button data-icon="check" data-theme="b" id="submit" type="submit">Salva</button></div>
                    </fieldset>
                    
		    <h3 id="#elenco"></h3>
                </div>
            </form>
        </div>

	<div data-role="footer">
		<h1></h1>
	</div>
</div><!-- /page -->

<div data-role="page" id="modificaCustomer">
	<div data-role="header">
		<h1>Modifica Cliente</h1>
	</div>

	<div data-role="content">
	    <form id="updateClienteForm" method="post">
                <div data-role="fieldcontain">
                    <input type="text" name="ragioneSociale" id="ragioneSociale" value="" placeholder="Ragione Sociale" />
		    <input type="text" name="citta" id="citta" value="" placeholder="Citta'"/>

                    <fieldset class="ui-grid-a">
                        <div class="ui-block-a"><a data-icon="delete" data-role="button" data-direction="reverse" data-rel="back">Annulla</a></div>
                        <div class="ui-block-b"><button data-icon="check" data-theme="b" id="submitCliente" type="submit">Salva</button></div>
                    </fieldset>
                    
		    <h3 id="#elenco"></h3>
                </div>
            </form>
        </div>

	<div data-role="footer">
		<h1></h1>
	</div>
</div><!-- /page -->

<div data-role="page" id="editCustomer12" data-theme="a">
		<div data-role="header">
		    <h1>Dati Cliente</h1>
		    <a href="clienti.php" data-icon="arrow-l" data-rel="back">Torna</a>
		</div><!-- /header -->
	
<div data-role="content" data-theme="c">
	<label for="ragioneSociale">Ragione Sociale:</label>
	<input type="text" name="ragione_Sociale" id="ragioneSociale" value="ta"/>
	<label for="idCliente">idCliente:</label>
	<input type="text" name="idCliente" id="idCliente" value="12"/>
	<a id="rg_link" rel="external" href="update_cliente.php?idCliente=12&RagioneSociale=" "data-icon="delete" data-theme="b" class="ui-btn-right">Salva</a>
  <div id="output"></div></div>
		<div data-role="footer">
			<h4></h4>
			<a rel="external" href="delete_cliente.php?idCliente="12" data-icon="delete" class="ui-btn-right">Elimina</a>
		</div> 
		</div></body>
</html>

Open in new window

danz67

ASKER

You're doing a lot of work to help me, if we get the solution I'll give you 500 points, thanks

Hagay Mandel

Did you check the functionality?
Now, when clicking on 'Aggiungi', entering something in the 'Ragine sociale' input field, clicking 'Annulla' and then on th 'ta' button, shows the put put div with the complete href attribute.

danz67

ASKER

Not understand, sorry

Hagay Mandel

'Aggiungi' -> [some data in the Ragine sociale input] -> 'Annulla' -> 'ta' button.

Look at the output