Získání dat z DOM stránky – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Zdravím,

mám konfigurátor ve kterém načítám data z db do js a tam si uživatel dle svých požadavků vybere co se mu líbí a poslední step je kompletní soupis toho co si uživatel vybral viz: https://ctrlv.cz/shots/2018/04/23/VXzN.png

Ale problém je v tom že si tuto volbu ukládá do DOM a já za boha nevím jak získat data tak abych je mohl předat to presenteru a mohl s nimi pracovat.

 Tohle je detail.lette ( ve kterém pracuji s stepy jako barva,příslušenství )

<li data-selection="colors" class="builder-step first-load">
    <section n:foreach="$colors as $color" class="cd-step-content">
        <header>
            <h1>Barva</h1>
            <span class="steps-indicator">Step <b>2</b> of 4</span>
        </header>
        <ul class="cd-product-previews">
            <li class="selected" n:for="$i = 0; $i < $color->images_count; $i++"><img
                        src="{$basePath}/configurator/products/{$product->configure_id}/col_{$color->img_color_id}_{$i}.jpg"
                        alt="Product Preview" class="product-preview"></li>
        </ul>

        <ul  class="cd-product-customizer">
            <li data-content="{$color->title}  - {$color->price}" data-price="{$color->price}" class="selected"><a data-color="white" href="#0">{$color->title} - CZK {$color->price}</a>
            </li>
        </ul>
    </section>
</li>

<li data-selection="accessories" class="builder-step first-load">
    <section class="cd-step-content">
        <header>
            <h1>Accessories</h1>
            <span class="steps-indicator">Step <b>3</b> of 4</span>
        </header>

        <ul n:foreach="$acess as $ace" class="accessories-list options-list">

            <li class="js-option" data-price="{$ace->price}">
                <p>{$ace->title}</p>

                <span class="price">CZK {$ace->price}</span>

                <div class="check"></div>
            </li>

        </ul>
    </section>
</li>

<li data-selection="summary" class="builder-step first-load">
    <section class="cd-step-content">
        <header>
            <h1>Summary</h1>
            <span class="steps-indicator">Step <b>4</b> of 4</span>
        </header>

        <ul class="summary-list">
            <li>
                <h2>Model</h2>

                <img n:for="$i = 0; $i < $product->images_count; $i++"
                        src="{$basePath}/configurator/products/{$product->configure_id}/{$product->configure_id}_{$i}.jpg"
                        alt="{$product->title}" class="product-preview">

                <h3>{$product->title}</h3>

                <p>
                    {$product->short_description|striptags}
                </p>
            </li>

            <li data-summary="colors">
                <h2>Barva</h2>

				<span class="summary-color">
					<em class="color-swatch" data-color="red"></em>
					<em class="color-label">Red Passion</em>
				</span>
            </li>

            <li data-summary="accessories">
                <h2>Příslušenství</h2>

                <ul class="summary-accessories"></ul>
            </li>
        </ul>
    </section>
</li>

Tohle je js který na konci vypíše co si člověk vybral.

	ProductBuilder.prototype.createSummary = function() {
		var self = this;
		this.steps.each(function(){
			//this function may need to be updated according to your builder steps and summary
			var step = $(this);
			if( $(this).data('selection') == 'colors' ) {
				//create the Color summary
				var colorSelected = $(this).find('.cd-product-customizer').find('.selected'),
					color = colorSelected.children('a').data('color'),
					colorName = colorSelected.data('content'),
					imageSelected = $(this).find('.cd-product-previews').find('.selected img').attr('src');
				
				self.summary.find('.summary-color').find('.color-label').text(colorName).siblings('.color-swatch').attr('data-color', color);
				self.summary.find('.product-preview').attr('src', imageSelected);
			} else if( $(this).data('selection') == 'accessories' ) {
				var selectedOptions = $(this).find('.js-option.selected'),
					optionsContent = '';

				if( selectedOptions.length == 0 ) {
					optionsContent = '<li><p>Žadné příslušenství nebylo vybráno;</p></li>';
				} else {
					selectedOptions.each(function(){
						optionsContent +='<li><p>'+$(this).find('p').text()+'</p></li>';
					});
				}

				self.summary.find('.summary-accessories').children('li').remove().end().append($(optionsContent));
			}
		});
	}

A potřeboval bych aby mi to vrátilo všechny data co si tam člověk vybral a nějak je poslal do presenteru něco jako u formu je hodnota $values a v ní mám dané data které si pak můžu vypsat.

DEMO: https://codyhouse.co/demo/product-builder/index.html 

Díky moc za případnou pomoc :)

Nezkoumal jsem, jak ten script presne funguje, ale ja bych to resil tak, ze pri onclicku bych si ulozil hodnotu. 

<span onclick="my_form.barva='cervena';">cervena</span>
<span onclick="my_form.barva='modra';">modra</span>
<span onclick="my_form.barva='zelena';">zelena</span>

<span onclick="xxx();">zobraz objednavku</span>

<script>
var my_form = {};
function xxx()
{
str = '';
for (i in my_form)
  {str+=i+': '+my_form[i]+"\n";}
alert(str);
}
</script>

Jinak, data se vybiraji pres jquery pomoci
el_select.val(); <select><option value="123">
el_input.val(); <input value=123>
el_textarea.val()
el_div.text(); <div>123</div>
el_div.html(); <div><tagy>123</tagy></div>
 

#2 peter

To znamená že na každý ten item co tam mám si udělám ten onclink a na konci v tom shrnutí budu mít vypsáno co si dotyčný vybral a jak to pošlu na presenter? třeba do té mé funkce na form jelikož tam mám udělané že na konci když kliknu na objednat vyskočí modal a tam vyplní člověk své údaje a pak dá odeslat a chci aby to vzalo data jak z modalu ( Což funguje ) tak zároveň i ty data co si člověk naklikal.

a to všechno se mi poslalo sem

/**
     * Funkce se vykonaná při úspěsném odeslání kontaktního formuláře a odešle email.
     * @param Form $form        kontaktní formulář
     * @param ArrayHash $values odeslané hodnoty formuláře
     */
    public function configureFormSucceeded($form, $values)
    {
        try {
            bdump($values);
            /* $mail = new Message;
             $mail->setFrom($values->email)
                 ->addTo(self::EMAIL)
                 ->setSubject('Poptávka z webu')
                 ->setBody($values->message);
             $mailer = new SendmailMailer;
             $mailer->send($mail);*/
            $this->flashMessage('Nezávazná poptávka úspěšně odeslána obchodníkům.', self::MSG_SUCCESS);
            $this->redirect('this');
        } catch (InvalidStateException $ex) {
            $this->flashMessage('Poptávku se nepodařilo odeslat! Chybu nahlašte na webmaster@ryzidomov.cz', self::MSG_ERROR);
        }
    }

jeste jsem ten kod trochu upravil a mrknu, cos napsal...

<span onclick="my_form.barva='cervena';xxx();">cervena</span> | 
<span onclick="my_form.barva='modra';xxx();">modra</span> | 
<span onclick="my_form.barva='zelena';xxx();">zelena</span>
<br>
<span onclick="xxx();">zobraz objednavku</span>
<pre id=yyy></pre>

<script>
var my_form = {};
function xxx()
{
str = '';
for (i in my_form)
  {str += i+': '+my_form[i]+"\n";}
document.getElementById('yyy').innerHTML = str;
}
</script>

Hele, mrknu na to spis zitra. Dneska potrebuji resit jeste objednavkovy formular, zasilani na mail a tez mame za chvilku schuzku.

#5 peter

Hele ok chápu, však já budu rád když se to vyřeší jelikož js není má silná stránka. Kdybys cokoliv potřeboval poslat stačí říct.

Vyřešeno: pomocí jQuery : 

$(inputSelector).val(colorSelected.data("content"));

Díky kterému jsem si vytáhl data z DOMu přímo do inputu.